La typographie Sirdata renforce la clarte, la hierarchie, la lisibilite, la precision et la confiance. Elle doit aider les equipes a lire vite, comparer des donnees, comprendre une action et naviguer sans effort entre marketing, produit et documentation.
La typographie Sirdata ne cherche pas a faire du bruit. Elle organise l’information, donne du rythme et rend les interfaces immediatement comprehensibles.
Les familles typographiques restent volontairement limitees. Inter couvre les interfaces, les contenus courants et la documentation. Outfit est reservee aux styles Display et aux grandes accroches. Une famille mono couvre le code, les tokens, les snippets et les valeurs techniques.
| Role | Token | Usage |
|---|---|---|
| Font sans | --font-family-sans | Interface, documentation, contenus marketing, formulaires |
| Font main | --font-family-main | Token source actuel pour les textes produit |
| Font display | --font-family-display | Accroches marketing et grands titres |
| Font mono | --font-family-mono | Code, tokens, snippets, valeurs techniques |
Familles officielles : Outfit sur Google Fonts et Inter sur Google Fonts.
:root { --font-family-display: Outfit; --font-family-main: Inter; --font-family-sans: var(--font-family-main); --font-family-mono: Menlo;}L’echelle typographique est basee sur les styles composes exportes depuis Figma. Les composants doivent utiliser ces styles nommes plutot que des tailles ponctuelles.
Tous les styles Display utilisent --font-family-display, soit Outfit. Cette famille ne doit pas remplacer Inter dans les interfaces produit, les formulaires ou les tableaux.
PLATEFORME SIRDATA
PERFORMANCE.
POWERED BY PRIVACY.
Marketing Home Display est reserve au hero de homepage marketing Sirdata. Il combine Outfit ExtraLight, une ligne tres compacte, un texte uppercase et le gradient produit Sirdata. Ne pas l’utiliser dans les interfaces produit, les tableaux ou les pages de documentation courantes.
| Style | Token | Specs |
|---|---|---|
| Marketing Home Display | --text-marketing-home-display-* | Outfit / 48px / 100% / 200 / -0.5px / uppercase |
| Marketing Home Gradient | --text-marketing-home-display-gradient | teal-300 2%, blue-400 45%, purple-400 97% |
Data trust at scale
--text-display-xxl-* Accroches de marque tres fortes, couvertures de presentation, moments de communication exceptionnels.
Construire la confiance data
--text-display-xl-* Grandes accroches marketing, hero de page, slides commerciales importantes.
Trust first
--text-display-xl-short-* Accroches tres courtes qui doivent avoir plus d'impact visuel.
Activate audiences with confidence
--text-display-lg-* Titres marketing importants, pages d'offre, sections de narration.
Audience intelligence for trusted activation
--text-display-md-* Titres editoriaux, sections fortes de pages marketing, messages de positionnement.
Privacy-safe activation
--text-display-sm-* Petites accroches editoriales ou titres de blocs marketing.
Une base commune pour les equipes design, marketing et produit.
--text-heading-subtitle-* Sous-titre de hero, introduction de section ou phrase de contexte editorial.
Segments actifs
--text-heading-h1-* Titre principal d'une page produit ou documentaire.
Configuration des destinations
--text-heading-h2-* Sections de page, groupes de contenu et documentation technique.
Sources de donnees
--text-heading-h3-* Sous-sections produit, titres de panneaux et groupes de documentation.
Parametres de synchronisation
--text-heading-h4-* Titres de cartes, zones de configuration et blocs d'aide.
Details du segment
--text-heading-h5-* Titres compacts dans les interfaces denses.
SIRDATA PIXEL
--text-eyebrow-* Sur-titres de hero, categories de section et reperes editoriaux tres courts. Toujours en capitales et sur une ligne courte.
Sirdata Pixel aide les equipes a construire des experiences coherentes.
--text-body-xl-* Paragraphes introductifs, textes de mise en contexte et contenus editoriaux courts.
Les audiences synchronisees restent disponibles dans les destinations actives.
--text-body-md-* Lecture courante, paragraphes de documentation, descriptions produit.
Synchronisation active sur 12 destinations.
--text-body-md-bold-* Mise en avant ponctuelle dans un paragraphe ou une description produit.
Derniere synchronisation il y a 12 minutes.
--text-body-sm-* Interfaces denses, aides courtes, informations secondaires.
12 segments actifs
--text-body-sm-bold-* Emphase courte dans les interfaces denses, listes ou cellules.
ID: seg_8f42 - mis a jour aujourd'hui
--text-body-xs-* Metadonnees, timestamps, aides contextuelles et details peu prioritaires.
LIVE
--text-body-xs-bold-* Labels tres courts ou valeurs secondaires qui doivent ressortir dans un espace contraint.
v1.4.2
--text-body-tiny-* Details techniques tres courts, jamais pour une information critique seule.
BETA
--text-body-tiny-bold-* Micro-labels ou indicateurs compacts dans des tags tres petits.
Activer le segment
--text-label-lg-* Boutons principaux, actions visibles et controles importants.
Nom du segment
--text-label-md-* Labels de formulaire, navigation, filtres, boutons compacts.
Audience
--text-label-sm-* Tags, en-tetes de tables et petites actions.
NEW
--text-label-xs-* Micro-labels, statuts tres courts et indicateurs compacts.
Les balises HTML generiques (h1, h2, p, small, a, etc.) prennent automatiquement les styles Pixel lorsque @sirdata/pixel/styles est importe. Les classes utilitaires servent aux cas ou la semantique HTML ne correspond pas exactement au rendu attendu.
<h1>Segments actifs</h1><p>Activez vos audiences dans un cadre maitrise.</p><small>Derniere synchronisation il y a 12 minutes.</small><p class="pixel-eyebrow">Plateforme Sirdata</p>
<h1 class="pixel-display-lg"> Construire la confiance data</h1>
<p class="pixel-body-md"> Transformez des donnees conformes en un avantage durable.</p>Utiliser Eyebrow comme sur-titre court au-dessus d’un hero, d’une section ou d’un bloc editorial. Le texte est automatiquement passe en uppercase par la classe.
<p class="pixel-eyebrow">Plateforme Sirdata</p><p class="pixel-eyebrow">Plateforme Sirdata</p>Utiliser ce style uniquement pour le titre principal de la homepage marketing. Il porte le gradient et l’uppercase, donc ne pas ajouter de couleur locale.
<h1 class="pixel-marketing-home-display"> Performance.<br /> Powered by privacy.</h1><h1 class="pixel-marketing-home-display"> Performance.<br /> Powered by privacy.</h1>Utiliser directement les tokens lorsqu’un composant doit exposer son propre nom de classe tout en respectant la typographie Pixel.
.marketing-kicker { font-family: var(--text-eyebrow-font-family); font-size: var(--text-eyebrow-font-size); font-weight: var(--text-eyebrow-font-weight); line-height: var(--text-eyebrow-line-height); letter-spacing: var(--text-eyebrow-letter-spacing); text-transform: uppercase;}Display : utiliser pour les grandes accroches marketing, hero pages, couvertures de presentation et messages strategiques. Ne pas utiliser dans les interfaces operationnelles denses.
Heading : structurer les pages et sections. Les headings doivent former une hierarchie claire et ne pas etre choisis uniquement pour leur apparence.
Body : servir la lecture courante. C’est le style principal pour les paragraphes, descriptions et contenus explicatifs.
Label : guider l’action. Utiliser pour formulaires, filtres, boutons, tabs, navigation et controles.
Caption : donner du contexte sans surcharger. Utiliser pour les metadonnees, hints, timestamps et annotations secondaires.
Code : reserver aux snippets, tokens, identifiants, valeurs techniques et exemples d’integration.
Les interfaces produit Sirdata doivent rester denses, lisibles et precises. Ces styles cadrent les usages les plus frequents.
| Style UI | Token recommande | Usage |
|---|---|---|
| Button label | --text-label-lg-* ou --text-label-md-* | Actions principales et secondaires |
| Input label | --text-label-md-* | Libelle de champ |
| Input value | --text-body-md-* | Valeur saisie ou selectionnee |
| Helper text | --text-body-sm-* | Aide, contrainte, description courte |
| Table header | --text-label-sm-* | En-tetes de colonnes |
| Table cell | --text-body-sm-* | Donnees tabulaires |
| Nav item | --text-label-md-* | Navigation principale ou laterale |
| Tag label | --text-label-sm-* | Tags et statuts courts |
| Eyebrow | --text-eyebrow-* | Sur-titres courts de hero ou de section |
Marketing : plus expressif, avec des titres plus grands, un rythme editorial plus marque et davantage de contraste entre accroche, sous-titre et preuve.
Product : plus dense, fonctionnel et precis. Les tailles doivent aider a scanner, comparer et agir rapidement, surtout dans les tableaux, formulaires et panneaux de configuration.
La meme base typographique peut servir aux deux univers. La difference vient du role : le marketing met en scene une idee, le produit rend une action immediate.
/* TODO(Figma): remplacer les placeholders par les familles exactes. */:root { /* Font families */ --font-family-sans: var(--font-family-main); --font-family-mono: Menlo, Monaco, Consolas, "Liberation Mono", monospace;
/* Font sizes */ --font-size-12: 0.75rem; --font-size-13: 0.8125rem; --font-size-14: 0.875rem; --font-size-16: 1rem; --font-size-20: 1.25rem; --font-size-32: 2rem; --font-size-44: 2.75rem; --font-size-48: 3rem; --font-size-72: 4.5rem;
/* Line heights */ --font-lineheight-18: 1.125rem; --font-lineheight-20: 1.25rem; --font-lineheight-24: 1.5rem; --font-lineheight-48: 3rem; --font-lineheight-80: 5rem;
/* Font weights */ --font-weight-100: Thin; --font-weight-200: ExtraLight; --font-weight-400: Regular; --font-weight-500: Medium; --font-weight-600: SemiBold; --font-weight-700: Bold;
/* Letter spacing */ --font-letterspacing-tight: -0.0313rem; --font-letterspacing-normal: 0rem; --font-letterspacing-eyebrow: 0.375rem; --font-letterspacing-marketing-home-display: -0.0313rem;
/* Composed text styles */ --text-body-md-font-size: var(--font-size-16); --text-body-md-line-height: var(--font-lineheight-24); --text-heading-h1-font-size: var(--font-size-44); --text-heading-h1-line-height: var(--font-lineheight-56); --text-label-md-font-size: var(--font-size-14); --text-label-md-line-height: var(--font-lineheight-14); --text-eyebrow-font-size: var(--font-size-13); --text-eyebrow-line-height: calc(var(--text-eyebrow-font-size) * 1.5); --text-eyebrow-letter-spacing: var(--font-letterspacing-eyebrow); --text-marketing-home-display-font-size: var(--font-size-48); --text-marketing-home-display-line-height: 1; --text-marketing-home-display-letter-spacing: var(--font-letterspacing-marketing-home-display); --text-marketing-home-display-gradient: linear-gradient( 90deg, var(--colors-teal-300) 2%, var(--colors-blue-400) 45%, var(--colors-purple-400) 97% );}| Do | Don’t |
|---|---|
| Utiliser les styles nommes plutot que des tailles arbitraires. | Creer une taille 15px locale pour corriger un composant. |
| Garder une hierarchie claire entre display, heading, body et label. | Multiplier les tailles proches qui brouillent la lecture. |
| Preserver les line-heights des tokens. | Reduire l’interlignage au detriment de la lisibilite. |
| Utiliser des labels courts dans les composants UI. | Ecrire des labels longs dans des boutons ou tabs. |
| Limiter les graisses a regular, medium, semibold et bold. | Utiliser trop de graisses dans une meme interface. |
| Adapter le role au contexte produit ou marketing. | Utiliser une typo marketing expressive dans une table ou un formulaire. |
Taille minimum : le body text produit doit rester au minimum autour de 14px pour les interfaces denses et 16px pour la lecture courante. Eviter les textes critiques en dessous de 12px.
Line-height : conserver un interlignage suffisant pour les paragraphes, aides et descriptions. Les tableaux peuvent etre plus denses, mais ne doivent pas devenir difficiles a scanner.
Contraste : les styles typographiques doivent etre testes avec les tokens --color-text-* et les fonds correspondants. Un style lisible en taille large peut devenir insuffisant en caption.
Capitales : eviter les textes entierement en capitales sur de longues lignes. Les capitales peuvent convenir aux labels tres courts, jamais aux paragraphes ou aides contextuelles.
Responsive typography : les grands styles marketing doivent etre ajustes sur mobile pour eviter les retours de ligne incoherents. Les interfaces produit doivent privilegier la stabilite et la densite maitrisee.
Chiffres et tableaux : verifier la lisibilite des nombres, dates et identifiants. Les colonnes de donnees doivent rester comparables, avec un alignement stable et une taille suffisante.