Équipe Domoxa · interne

Domoxa Design System

La référence visuelle et fonctionnelle pour concevoir des pages Domoxa cohérentes, accessibles et faciles à maintenir.

Production tokens Composants réutilisables Desktop · tablette · mobile

Fondations

Les règles communes de Domoxa

Les valeurs ci-dessous viennent des tokens réellement chargés par le thème.

Logo et assets de marque

Le logo existant est conservé dans ses contextes clair et sombre. La zone de respiration recommandée correspond à la hauteur du symbole.

Fond clair · logo principal

Fond sombre · logo clair

Symbole / favicon

Palette sémantique

Les noms décrivent l’usage. Les valeurs affichées correspondent aux variables CSS globales.

Primary--color-primary#69C350 · actions principales

Primary hover--color-primary-hover#447A35 · survol

Primary active--color-primary-active#68BA51 · pression

Primary disabled--color-primary-disabledrgba(105,195,80,.48) · inactif

Green tint--color-green-tintrgba(105,195,80,.18) · pills

Heading--color-heading#1F2530 · titres

Muted--color-muted#6A7282 · textes secondaires

Dark--color-bg-dark#1D232A · surfaces sombres

Surface--color-surface#F8F8F8 · fonds doux

Surface light--color-surface-light#FFFFFF · fond principal

Secondary fill--color-secondary-fill#F6F6F6 · boutons secondaires

Secondary hover--color-secondary-fill-hover#EFEFEF · survol secondaire

Surface dark--color-surface-darkrgba(255,255,255,.11) · cartes sombres

White--color-white#FFFFFF · cartes et contraste

Border--color-border#E3E3E3 · séparateurs

Border subtle--color-border-subtle#D6DCE5 · champs

Focus ring--color-focus-ringrgba(105,195,80,.16) · clavier

Error--color-error#B91C1C · erreurs

Error surface--color-surface-error#FEF2F2 · fond d’erreur

Success--color-success#166534 · confirmations

Success surface--color-surface-success#F0FDF4 · fond de confirmation

Typographie

Inter est utilisée pour les textes et les titres. Les tailles restent fluides pour garder les compositions existantes lisibles.

Display · heroPilotez la performance de vos bâtimentsInter · clamp(3rem, 5vw, 4.5rem) · 700 · 1.1 · -0.02em

Une gestion technique plus simple et plus efficace

Inter · clamp(2.75rem, 5vw, 4.5rem) · 700 · 1.08 · -0.02em

Installation, programmation et optimisation de vos équipements

Inter · clamp(2rem, 3vw, 3rem) · 700 · 1.2 · -0.02em

Une solution adaptée à vos usages

Inter · clamp(1.5rem, 1.5vw, 1.75rem) · 600 · 1.3 · -0.02em

Un accompagnement clair à chaque étape

Inter · 1.25rem · 600 · 1.35 · -0.02em

Large paragraph

Domoxa vous accompagne de l’étude à la mise en service avec une approche simple, précise et adaptée à votre bâtiment.

Inter · 1.125rem · 400 · 1.6 · normal

Regular paragraph

Centralisez vos équipements, suivez vos consommations et gardez une lecture claire de la performance de votre installation.

Inter · 1rem · 400 · 1.6 · normal

Small paragraph

Conseil personnalisé par nos experts, sans engagement.

Inter · 1rem · 400 · 1.6 · normal

CaptionIntervention dans toute la France · réponse sous 24h ouvréesInter · 0.875rem · 400 · 1.4 · normal

Label / link / pill

Nom complet ^*Voir les solutionsSolutions GTB

Inter · 1rem · 600 · 1.4 · normal · uppercase pour les pills

Échelle d’espacement

La grille repose sur des pas de 4 à 96 px. Les alias sémantiques sont utilisés dans les composants partagés.

--spacing-40.25rem · 4px

--spacing-80.5rem · 8px

--spacing-120.75rem · 12px

--spacing-161rem · 16px

--spacing-241.5rem · 24px

--spacing-322rem · 32px

--spacing-402.5rem · 40px

--spacing-483rem · 48px

--spacing-644rem · 64px

--spacing-966rem · 96px

Grid et containers

Container maximum 1400px, gouttière fluide et passage en une colonne sous 750px.

Desktop · 12 colonnesTablette · 6 colonnesMobile · 1 colonne

--container-max: 87.5rem--container-gutter: clamp(1.5rem, 10vw, 10rem)--section-spacing: clamp(4.5rem, 8vw, 7rem)Common columns: 12 / 6 / 1

Rayons, bordures et ombres

Les surfaces utilisent une hiérarchie douce pour rester lisibles sans surcharger les pages.

sm · 12pxmd · 16pxlg · 20pxpill · 50px

border · 1px solid --color-border

focus · 3px --color-focus-ring

card shadow --shadow-card

elevated · 0 24px 60px rgba(17,24,39,.1)

Composants

Les briques réutilisables

Chaque exemple reste visible dans ses principaux états pour faciliter la revue et l’import dans Figma.

Boutons · variantes, tailles et états

Les boutons utilisent les classes de production domoxa-button et leurs variantes explicites.

PrimaryPetit Demander un devis Grand Disabled

SecondaryPlanifier un appel Hover Disabled

TertiaryVoir les détails Outline Inverse

Focus · loading · iconFocus visible Chargement

StatesDefault Hover Active Focus Loading Disabled

Pills et eyebrows

Une seule structure de pill, avec des contextes explicites.

Solutions GTBInstallateur LoxoneInterneDisponible

Icon list et reassurance

Les éléments de preuve gardent un ordre de lecture simple.

Expertise techniqueUne intégration adaptée à vos équipements.
Réponse détaillée sous 24hUn premier échange clair et sans engagement.
Intervention dans toute la FranceUn accompagnement du projet au suivi.

Form controls · états importants

Les labels restent associés aux champs et les messages sont annoncés avec un rôle adapté.

Nom complet ^*Champ rempli · valeur existante

Email professionnel ^*Focus clavier visible

Type de bâtiment

Votre projet

Champ désactivé

Email à corriger ^*

Veuillez renseigner un email valide.

Confirmation

Votre demande a bien été enregistrée.

Préférence de contact Téléphone Email Être rappelé rapidement

Cards

La carte partagée sert de base aux services, bénéfices, problèmes, étapes et éléments de réassurance.

Service card

Installation GTB

Une installation structurée pour centraliser les équipements techniques.

Découvrir le service →

Benefit card

Énergie mieux pilotée

Suivez les consommations et identifiez les dérives plus rapidement.

Problem card

Équipements dispersés

Une interface unique rend les usages plus simples à contrôler.

Process card

02 · Évaluer

Nous analysons les usages, les contraintes et les équipements existants.

Building card

Bureaux & tertiaire

Confort des occupants, énergie et supervision multi-zones.

Reassurance card

Interlocuteur unique

Un suivi du premier échange à la mise en service.

Testimonial card

« Une solution plus claire à piloter au quotidien. »

Retour client à confirmer

Contact card

Parlons de votre projet

Un échange permet de préciser le périmètre et les prochaines étapes.

Être contacté

Navigation

Aperçu du header professionnel réel et des états de liens documentés.

Lien normal Lien hover Lien actif Focus clavier

Accordion / FAQ

Le composant natif garde un ordre de lecture et un focus clavier explicites.

État fermé · compatible avec l’existant

Les installations peuvent évoluer progressivement selon les usages et les contraintes du bâtiment.

État ouvert · réponse visible

Nous réalisons un échange initial, une évaluation technique puis une proposition adaptée avant toute intervention.

Patterns complémentaires

Les mêmes primitives composent les éléments de conversion et de confiance.

Statistique24h ouvrées

Trust badgeDevis gratuit

Besoin d’un devis personnalisé ?Contactez-nous

Mobile sticky CTADemander un devis

Sections de référence

Les compositions Domoxa

Ces exemples montrent comment assembler les composants sans recréer une structure spécifique à chaque page.

Solutions GTB sur mesure

Simplifiez la gestion technique de vos bâtiments

Domoxa installe et configure des solutions pour automatiser, centraliser et optimiser vos équipements.

Demander un devis gratuit Nous contacter

Étude personnalisée
Installation et programmation
Supervision en temps réel

Technicien Domoxa devant une installation GTB

Problèmes rencontrés

Quand les équipements deviennent difficiles à piloter

Les contraintes du quotidien doivent guider la solution avant les choix techniques.

Consommation excessive

Un pilotage centralisé aide à détecter les écarts et à agir au bon moment.

Équipements déconnectés

Un pilotage centralisé aide à détecter les écarts et à agir au bon moment.

Peu de visibilité

Un pilotage centralisé aide à détecter les écarts et à agir au bon moment.

Maintenance difficile

Un pilotage centralisé aide à détecter les écarts et à agir au bon moment.

Confort irrégulier

Un pilotage centralisé aide à détecter les écarts et à agir au bon moment.

Obligations énergétiques

Un pilotage centralisé aide à détecter les écarts et à agir au bon moment.

Nos solutions

Des services adaptés à votre bâtiment

Une architecture claire permet de faire évoluer l’installation sans multiplier les outils.

Installation GTB

Une intervention cadrée, documentée et adaptée aux usages du site.

En savoir plus →

Intégration des équipements

Une intervention cadrée, documentée et adaptée aux usages du site.

En savoir plus →

Automatisation et programmation

Une intervention cadrée, documentée et adaptée aux usages du site.

En savoir plus →

Supervision centralisée

Une intervention cadrée, documentée et adaptée aux usages du site.

En savoir plus →

Suivi énergétique

Une intervention cadrée, documentée et adaptée aux usages du site.

En savoir plus →

Optimisation et maintenance

Une intervention cadrée, documentée et adaptée aux usages du site.

En savoir plus →

Modernisation de l’existant

Une intervention cadrée, documentée et adaptée aux usages du site.

En savoir plus →

Bénéfices concrets

Plus de contrôle, moins de friction

Les fonctionnalités prennent de la valeur lorsqu’elles simplifient réellement le quotidien.

Économies d’énergie

Des indicateurs compréhensibles pour prendre de meilleures décisions.

Confort amélioré

Des indicateurs compréhensibles pour prendre de meilleures décisions.

Opération simplifiée

Des indicateurs compréhensibles pour prendre de meilleures décisions.

Maintenance facilitée

Des indicateurs compréhensibles pour prendre de meilleures décisions.

Meilleure visibilité

Des indicateurs compréhensibles pour prendre de meilleures décisions.

Conformité accompagnée

Des indicateurs compréhensibles pour prendre de meilleures décisions.

Types de bâtiments