Colors

Les couleurs Sirdata servent a clarifier l’information, hierarchiser les interfaces et identifier les produits sans surcharger l’experience. Elles doivent guider l’attention, soutenir la comprehension et rester coherentes entre le site marketing Astro, les portails produits React et les supports de communication.

La couleur n’est pas un decor. Elle porte un role : structure, action, feedback, identite produit ou signal d’etat.

Palette neutre

Les neutres construisent la structure principale : fonds, textes, bordures, tableaux, cartes et navigation. Ils doivent rester dominants dans les interfaces SaaS pour conserver une experience calme et lisible.

21 AAA 1

White #ffffff RGBA (255, 255, 255, 1) HSLA (0, 0, 100, 1) --colors-white

Surface principale et texte inverse.

20.12 AAA 1.04

Neutral 50 #f9fafd RGBA (249, 250, 253, 1) HSLA (225, 50, 98, 1) --colors-neutral-50

Fond de page clair.

19.1 AAA 1.1

Neutral 100 #f2f4fa RGBA (242, 244, 250, 1) HSLA (225, 44, 96, 1) --colors-neutral-100

Fond subtil et etats hover discrets.

18.28 AAA 1.15

Neutral 200 #edeff6 RGBA (237, 239, 246, 1) HSLA (227, 33, 95, 1) --colors-neutral-200

Separations legeres.

15.22 AAA 1.38

Neutral 300 #d8dbe8 RGBA (216, 219, 232, 1) HSLA (229, 26, 88, 1) --colors-neutral-300

Bordures standards.

11.37 AAA 1.85

Neutral 400 #b9bed3 RGBA (185, 190, 211, 1) HSLA (228, 23, 78, 1) --colors-neutral-400

Icones secondaires et controles desactives.

7.18 AAA 2.92

Neutral 500 #8f96b3 RGBA (143, 150, 179, 1) HSLA (228, 19, 63, 1) --colors-neutral-500

Textes neutral et muted, bordures fortes.

4.13 5.09 AA

Neutral 600 #646d8f RGBA (100, 109, 143, 1) HSLA (227, 18, 48, 1) --colors-neutral-600

Texte courant secondaire.

2.5 8.41 AAA

Neutral 700 #434c6e RGBA (67, 76, 110, 1) HSLA (227, 24, 35, 1) --colors-neutral-700

Texte par defaut.

1.66 12.68 AAA

Neutral 800 #2a3151 RGBA (42, 49, 81, 1) HSLA (229, 32, 24, 1) --colors-neutral-800

Actions sombres et surfaces inverses.

1.22 17.16 AAA

Neutral 900 #141a32 RGBA (20, 26, 50, 1) HSLA (228, 43, 14, 1) --colors-neutral-900

Titres et texte primaire.

1.15 18.31 AAA

Black #0e132b RGBA (14, 19, 43, 1) HSLA (230, 51, 11, 1) --colors-neutral-1000

Noir Sirdata structurel.

Palette marque Sirdata

Sirdata est une marque principalement noire et blanche. La logique visuelle doit rester sobre, premium et structurante : beaucoup de neutres, peu d’effets, et des accents reserves aux actions ou aux produits.

1.15 18.31 AAA

Sirdata black #0e132b RGBA (14, 19, 43, 1) HSLA (230, 51, 11, 1) --color-sirdata-black

Ancrage de marque, titres forts, surfaces inverses.

21 AAA 1

Sirdata white #ffffff RGBA (255, 255, 255, 1) HSLA (0, 0, 100, 1) --color-sirdata-white

Surface principale et respiration visuelle.

1.22 17.16 AAA

Sirdata ink #141a32 RGBA (20, 26, 50, 1) HSLA (228, 43, 14, 1) --color-sirdata-ink

Texte principal, navigation, contenus denses.

20.12 AAA 1.04

Sirdata surface #f9fafd RGBA (249, 250, 253, 1) HSLA (225, 50, 98, 1) --color-sirdata-surface

Fond subtil pour sections et cartes.

18.28 AAA 1.15

Sirdata border #edeff6 RGBA (237, 239, 246, 1) HSLA (227, 33, 95, 1) --color-sirdata-border

Separateurs, contours et tableaux.

Palettes produits

Les couleurs produit identifient un contexte fonctionnel. Elles ne doivent pas remplacer la hierarchie UI generale. Utiliser une couleur produit pour renforcer une appartenance, pas pour colorer toute l’interface.

Audience

Audience utilise un accent violet / magenta pour signaler les experiences liees aux segments, audiences et activations media.

3.52 5.97 AA

Primary #a51bc0 RGBA (165, 27, 192, 1) HSLA (290, 75, 43, 1) --color-product-audience-primary

Accent principal Audience.

18.1 AAA 1.16

Surface #f9e9fd RGBA (249, 233, 253, 1) HSLA (288, 83, 95, 1) --color-product-audience-surface

Fond leger pour zones Audience.

15.51 AAA 1.35

Subtle #f3d3fa RGBA (243, 211, 250, 1) HSLA (289, 80, 90, 1) --color-product-audience-subtle

Emphase douce.

11.32 AAA 1.86

Border #e7a8f5 RGBA (231, 168, 245, 1) HSLA (289, 79, 81, 1) --color-product-audience-border

Bordure coloree.

1.85 11.34 AAA

Text #630f74 RGBA (99, 15, 116, 1) HSLA (290, 77, 26, 1) --color-product-audience-text

Texte colore a fort contraste.

4.75 AA 4.42

Accent #c621e5 RGBA (198, 33, 229, 1) HSLA (291, 79, 51, 1) --color-product-audience-accent

Accent ponctuel et data highlights.

ABConsent

ABConsent utilise un accent vert pour evoquer la validation, la confiance et la gestion du consentement.

5.8 AA 3.62

Primary #1c9a54 RGBA (28, 154, 84, 1) HSLA (147, 69, 36, 1) --color-product-abconsent-primary

Accent principal ABConsent.

19.99 AAA 1.05

Surface #f4fbf7 RGBA (244, 251, 247, 1) HSLA (146, 47, 97, 1) --color-product-abconsent-surface

Fond leger pour zones ABConsent.

18.94 AAA 1.11

Subtle #eaf6f0 RGBA (234, 246, 240, 1) HSLA (150, 40, 94, 1) --color-product-abconsent-subtle

Emphase douce.

16.86 AAA 1.25

Border #d3ece1 RGBA (211, 236, 225, 1) HSLA (154, 40, 88, 1) --color-product-abconsent-border

Bordure coloree.

2.74 7.65 AAA

Text #106034 RGBA (16, 96, 52, 1) HSLA (147, 71, 22, 1) --color-product-abconsent-text

Texte colore a fort contraste.

8.03 AAA 2.62

Accent #22b764 RGBA (34, 183, 100, 1) HSLA (147, 69, 43, 1) --color-product-abconsent-accent

Accent ponctuel et confirmation produit.

ServerSide

ServerSide utilise un accent bleu pour les integrations techniques, les flux serveur et les contextes de configuration avancee.

3.58 5.87 AA

Primary #1f5ed1 RGBA (31, 94, 209, 1) HSLA (219, 74, 47, 1) --color-product-serverside-primary

Accent principal ServerSide.

18.64 AAA 1.13

Surface #eaf2ff RGBA (234, 242, 255, 1) HSLA (217, 100, 96, 1) --color-product-serverside-surface

Fond leger pour zones ServerSide.

16.45 AAA 1.28

Subtle #d4e5ff RGBA (212, 229, 255, 1) HSLA (216, 100, 92, 1) --color-product-serverside-subtle

Emphase douce.

12.67 AAA 1.66

Border #a9cbff RGBA (169, 203, 255, 1) HSLA (216, 100, 83, 1) --color-product-serverside-border

Bordure coloree.

1.85 11.33 AAA

Text #12377a RGBA (18, 55, 122, 1) HSLA (219, 74, 27, 1) --color-product-serverside-text

Texte colore a fort contraste.

4.89 AA 4.3

Accent #2472fc RGBA (36, 114, 252, 1) HSLA (218, 97, 56, 1) --color-product-serverside-accent

Accent ponctuel et signal technique.

Couleurs semantiques

Les couleurs semantiques decrivent un role stable. Elles doivent etre privilegiees dans le code produit, car elles peuvent evoluer sans changer l’intention fonctionnelle.

Role	Token	Usage
Background default	`--color-background-default`	Fond principal des vues produit
Background subtle	`--color-background-subtle`	Zones secondaires, groupes, panneaux
Background elevated	`--color-background-elevated`	Cartes, modals, surfaces au-dessus du canvas
Background dark surface	`--color-background-surface-dark`	Cartes et previews sur fond sombre
Text primary	`--color-text-primary`	Titres, donnees importantes
Text secondary	`--color-text-secondary`	Labels, descriptions courtes
Text muted	`--color-text-muted`	Aides, metadata, contenus moins prioritaires
Border default	`--color-border-default`	Contours standards
Border subtle	`--color-border-subtle`	Separations legeres
Action primary	`--color-action-primary`	Action principale
Action primary hover	`--color-action-primary-hover`	Etat hover de l’action principale
Success	`--color-success`	Etat valide ou operation terminee
Warning	`--color-warning`	Risque ou attention non bloquante
Danger	`--color-danger`	Erreur, suppression, action destructive
Info	`--color-info`	Information contextuelle

Exemples d’usage

Utiliser la couleur produit uniquement pour renforcer l’identite d’un produit : une page Audience peut utiliser un accent violet dans les tags, highlights ou illustrations fonctionnelles, mais les boutons et textes restent guides par les tokens semantiques.

Eviter d’utiliser plusieurs accents produits dans une meme interface. Si une vue compare Audience, ABConsent et ServerSide, reserver les couleurs aux labels ou marqueurs, pas aux fonds principaux.

Reserver danger, warning et success aux etats fonctionnels. Le rouge ne doit jamais servir de couleur decorative.

Utiliser les neutres pour la structure : navigation, tableaux, cartes, bordures, surfaces et textes.

Utiliser les accents pour guider l’attention : action principale, element selectionne, produit actif ou information critique.

Do / Don’t

Do	Don’t
Utiliser les tokens semantiques plutot que les hexadecimaux directement.	Coder `#dc2626` dans un composant produit.
Verifier les contrastes texte/fond avant publication.	Poser du texte clair sur une surface pastel sans test.
Garder une hierarchie claire entre neutres, actions et produits.	Melanger Audience, ABConsent et ServerSide sans raison fonctionnelle.
Utiliser le rouge uniquement pour danger, erreur ou destruction.	Utiliser le rouge comme couleur decorative.
Garder les surfaces majoritairement neutres.	Multiplier les surfaces colorees dans une meme vue.

Tokens CSS

Les tokens sont exposes globalement depuis src/styles/pixel.css. Les couleurs primitives vivent dans tokens-primitives.css, et les roles de couleur dans tokens-semantic.css.

/* TODO(Figma): remplacer les aliases documentation par les noms officiels Figma. */
:root {
  --color-sirdata-black: var(--colors-neutral-1000);
  --color-sirdata-white: var(--colors-white);
  --color-sirdata-ink: var(--colors-neutral-900);
  --color-sirdata-surface: var(--colors-neutral-50);
  --color-sirdata-border: var(--colors-neutral-200);

  --color-product-audience-primary: var(--colors-purple-600);
  --color-product-audience-surface: var(--colors-purple-50);
  --color-product-audience-border: var(--colors-purple-200);

  --color-product-abconsent-primary: var(--colors-green-600);
  --color-product-abconsent-surface: var(--colors-green-50);
  --color-product-abconsent-border: var(--colors-green-200);

  --color-product-serverside-primary: var(--colors-blue-600);
  --color-product-serverside-surface: var(--colors-blue-50);
  --color-product-serverside-border: var(--colors-blue-200);

  --color-background-elevated: var(--color-background-surface);
  --color-background-surface-dark: var(--colors-neutral-900);
  --color-action-primary: var(--color-action-dark-base);
  --color-action-primary-hover: var(--color-action-dark-light);
  --color-success: var(--color-state-success-fg);
  --color-warning: var(--color-state-warning-fg);
  --color-danger: var(--color-state-danger-fg);
  --color-info: var(--color-state-info-fg);
}

Accessibilite

Contraste texte/fond : viser au minimum WCAG AA pour les textes courants. Les textes importants, les tableaux et les donnees metier doivent rester lisibles sur surfaces neutres comme colorees.

Focus visible : ne jamais communiquer le focus uniquement par une couleur subtile. Ajouter une bordure, un outline ou un changement de surface suffisamment perceptible.

Information non exclusive a la couleur : un etat danger, warning ou success doit aussi etre indique par du texte, une icone ou une structure claire. La couleur seule ne suffit pas.

Dark mode futur : les tokens semantiques doivent pouvoir changer de valeur sans changer les composants. C’est la raison principale pour utiliser --color-background-*, --color-text-* et --color-state-* plutot que les primitives directement.