Échelle typographique modulaire : comment construire un système typographique cohérent
Construction étape par étape d'une échelle typographique modulaire, traduite en jetons de conception, variables Figma et CSS Tailwind. Des ratios réels, des implémentations concrètes et les règles qui empêchent l'échelle de s'effondrer une fois que l'équipe commence les livraisons.

Une échelle typographique modulaire est un ratio appliqué à une taille de base, générant ainsi toutes les tailles de police du produit. C'est le principe. Vous choisissez le ratio, vous fixez la base, vous générez les étapes, vous les distribuez sous forme de jetons, et vous utilisez ces jetons partout au lieu de valeurs de pixels fixes. Bien conçue, chaque taille de police du produit semble liée à toutes les autres, car mathématiquement, elles le sont.
Mal conçue, en revanche, vous vous retrouvez avec dix-sept tailles de police indéfendables, des titres qui se disputent la hiérarchie avec le texte courant, et une réunion de refonte trimestrielle où quelqu'un propose de « standardiser les tailles » sans savoir vers quoi se baser. L'échelle est l'élément vers lequel on se base. Cet article explique comment en construire une qui résiste à un produit réel, avec des ratios réels, une structure de jetons réelle, et les traductions Figma et Tailwind qui la rendent exécutable.
Qu'est-ce qu'une échelle typographique modulaire ?
Une échelle typographique modulaire est un rapport unique appliqué à une taille de base, générant ainsi toutes les tailles de police du produit. Ce rapport unique est essentiel.
Prenons une taille de base, par exemple 16 pixels, et un rapport, par exemple 1,25. Multipliez 16 par 1,25 et vous obtenez 20. Multipliez 20 par 1,25 et vous obtenez 25. Répétez l'opération : 31, 39, 49, 61. Divisez 16 par 1,25 et vous obtenez 12,8. Divisez ce résultat par 1,25 et vous obtenez 10,24. Voilà l'échelle. Huit tailles, une base, un rapport : une cohérence mathématique parfaite.
Ce procédé fonctionne pour des raisons psychophysiques. La perception visuelle humaine réagit aux rapports, et non aux différences absolues. Un passage de 12 à 14 est perçu de la même manière qu'un passage de 24 à 28, car les deux correspondent approximativement au même facteur multiplicatif. Une échelle linéaire (12, 14, 16, 18, 20, 22) paraît étriquée dans les aigus et trop espacée dans les graves. Une échelle modulaire, en revanche, paraît uniforme, car elle l'est par rapport aux autres.
Cette même logique sous-tend les intervalles musicaux (les octaves sont à 2, les quintes à 1,5 et les quartes à 1,333), les ouvertures photographiques et la majeure partie de la théorie des proportions architecturales. La typographie s'en est simplement inspirée. Les rapports que vous rencontrerez dans cet article (seconde mineure, quarte juste, nombre d'or) sont empruntés à la musique pour une raison : ils décrivent le même type de relation perceptive.
Les cinq rapports qui régissent les produits réels
La plupart des produits se situent entre 1,125 et 1,618, et chaque rapport véhicule un signal de densité spécifique.
Les cinq rapports qui régissent la quasi-totalité des interfaces réelles :
| Rapport | Nom | Signal de densité | Implémentation réelle |
|------:|------|----------------|---------------------|
| 1,125 | Deuxième rang mineur | Compact, dense, riche en données | Vercel, Geist, la plupart des tableaux de bord d'administration |
| 1,2 | Troisième rang mineur | Compact, équilibré | Échelle par défaut de Tailwind |
| 1,25 | Troisième rang majeur | Standard éditorial | Stripe, Material 3 rôles principaux |
| 1,333 | Quatrième rang parfait | Généreux, aspect magazine | Sites éditoriaux, blogs longs |
| 1,618 | Nombre d'or | Spectaculaire, axé sur l'affichage | Pages marketing, sites centrés sur un article principal |
Deux autres rangs apparaissent parfois. 1,414 (la quarte augmentée, qui est la racine carrée de 2 et la proportion du format A4) se situe entre la quarte et la quinte parfaites et constitue un choix judicieux pour les supports de type magazine nécessitant un contraste plus marqué que celui offert par 1,333. 1,5 (la quinte parfaite) est plus contrasté que 1,333 et moins contrasté que 1,618 ; c’est le rapport par défaut de nombreux outils de création de pages marketing.
Il est possible d’utiliser des rapports en dehors de cette plage, mais c’est généralement déconseillé. En dessous de 1,1, les intervalles sont si faibles qu’ils se confondent, rendant impossible la distinction entre un titre de niveau 3 et un titre de niveau 4 au premier coup d’œil. Au-dessus de 1,7, l’échelle augmente si rapidement qu’il n’existe plus de tailles intermédiaires utilisables. Les graphistes qui recherchent une plage plus étendue que celle offerte par 1,618 s’attaquent généralement au mauvais problème : ils souhaitent deux échelles, et non une seule plus grande.

Choisissez le ratio adapté à votre densité
Une application de données denses nécessite un ratio serré, un site éditorial un ratio large, et un mauvais choix se répercute sur l'ensemble du système.
Si le produit est un tableau de bord, un panneau d'administration, un CRM, un outil d'analyse ou toute application où l'utilisateur consulte des lignes d'informations denses pendant des heures, optez pour 1,125 ou 1,2. Un ratio serré permet aux titres de ne pas détourner l'attention des données. La hiérarchie reste efficace car, à cette échelle, elle repose principalement sur la graisse, la couleur et l'espacement, et non sur la taille.
Si le produit est une page marketing SaaS, un site de contenu, une page produit ou une documentation, choisissez 1,25 ou 1,333. Ces ratios intermédiaires offrent un impact visuel suffisant pour distinguer les sections sans que le corps du texte ne paraisse insignifiant par comparaison. C'est le cas de la plupart des produits B2B, et c'est là que Tailwind, Material et Stripe ont convergé.
Si le produit est de type éditorial, magazine ou axé sur l'affichage, comme une publication de fond, un site de mode ou un microsite de campagne, optez pour un ratio de 1,414 ou 1,618. Ce ratio élevé permet aux titres de se démarquer et de mériter un bloc d'en-tête complet. Le texte courant peut rester lisible grâce à l'espace entre l'en-tête et le corps du texte.
L'erreur consiste à choisir un ratio parce qu'il sonne bien (le nombre d'or est un exemple célèbre) et à l'imposer à un produit qui n'en a pas besoin. Un ratio de 1,618 sur un CRM est illisible. Un ratio de 1,125 sur un site éditorial paraît trop faible. Choisissez le ratio adapté à votre produit et tenez-vous-y.
Définissez la taille de base avant toute mise à l'échelle
La taille de police de base est le point de référence pour chaque étape ; une erreur de définition compromet toutes les étapes.
Utilisez par défaut une taille de 16 pixels pour le corps du texte sur le web. La taille par défaut du navigateur est de 16, la feuille de style de l'agent utilisateur est également de 16, la taille de lecture moyenne préférée des adultes est de 16, et les recommandations d'accessibilité WCAG et les directives d'interface humaine Apple considèrent toutes deux 16 comme la taille minimale pour le corps du texte. Vous pouvez utiliser 17 ou 18 si le public cible est plus âgé ou si le produit comporte une part importante de lecture, mais vous ne devez jamais descendre en dessous de 16 pour le corps du texte.
Cette base est le point de multiplication. Chaque niveau supérieur correspond à la base multipliée par un ratio élevé à une certaine puissance. Chaque niveau inférieur correspond à la base divisée par un ratio élevé à une certaine puissance. Si vous modifiez la base, chaque niveau se décale. C'est normal, c'est le fonctionnement du système. Mais cela signifie que modifier la base est un changement structurel, et non un simple ajustement pour chaque écran, et que cela doit être fait une seule fois, délibérément, avant le déploiement.
Pour les appareils mobiles, vous pouvez réduire la base (15 ou 16) et utiliser des unités relatives. Pour l'impression, la base est généralement de 11 ou 12 points et les proportions restent inchangées. Pour les supports de documentation contenant des blocs de code, définissez la taille du corps à 16 et celle du code (mono) à 14, en appliquant la même proportion à l'échelle du code. La base est spécifique à chaque support, la proportion à chaque produit, et ces deux choix sont à faire une seule fois.
Une autre règle : sur le web, définissez la base en rem, et non en px. L'échelle entière doit être exprimée en rem afin que les préférences de taille de police de l'utilisateur et les outils d'accessibilité (zoom, mode lecture, mise à l'échelle du navigateur) soient correctement appliqués. Tailwind et Material le font déjà. Le système de caractères dynamiques iOS de Apple fait de même. Si votre échelle est codée en dur en pixels, vous vous heurtez aux limitations de la plateforme.
Générer les paliers, les nommer par rôle
Une échelle de sept à neuf paliers couvre toutes les tailles nécessaires à un produit. Nommez-les par rôle, et non par taille.
Prenez une base de 16 pixels et une proportion de 1,25. Les étapes sont les suivantes :
-
10 (légende très petite, note de bas de page)
-
13 (petit texte secondaire)
-
16 (corps, texte de base)
-
20 (titre principal)
-
25 (h4, petit titre)
-
31 (h3, titre moyen)
-
39 (h2, grand titre)
-
49 (h1, titre de page)
-
61 (titre principal)
Neuf étapes. C’est le produit complet. Certains produits en utilisent sept ou huit, d’autres vont jusqu’à dix, mais au-delà de dix, l’échelle se raréfie et on se retrouve avec des tailles inutilisées.
Maintenant, nommez-les. Pas « texte-31 » ni « 39px ». Nommez-les selon leur rôle : légende, petit texte, corps, titre principal, h4, h3, h2, h1, titre principal. Ces noms de rôle sont définis par le service technique, et non les valeurs en pixels. La valeur en pixels peut changer si le texte de base ou le ratio change, mais le rôle reste le même. h1 est toujours le titre le plus grand. Le corps du texte sert toujours de base. La légende correspond toujours au texte le plus petit et lisible.
C'est ce qui transforme une échelle en un système plutôt qu'en un tableau. Un designer indique « ceci est le corps du texte » et un ingénieur fournit le texte correspondant. Si l'échelle change au trimestre suivant, « corps » conserve sa signification et chaque composant intègre automatiquement la nouvelle valeur. Plus besoin de rechercher chaque occurrence de 16 dans le code source et de la remplacer par 17.
Material Design 3 utilise une échelle nommée par rôle : display, headline, title, label, body, avec des variantes de taille (large, moyenne, petite) pour chaque rôle. La charte graphique de Apple propose : Large Title, Title 1, Title 2, Title 3, Headline, Body, Callout, Subhead, Footnote, Caption 1, Caption 2. Tailwind utilise text-xs à text-9xl, une nomenclature de tailles de t-shirts plutôt qu'une nomenclature de rôles, et c'est le seul point faible de ses valeurs par défaut par rapport à celles de Material Design. La plupart des équipes qui adoptent Tailwind finissent par superposer des alias basés sur les rôles aux classes de t-shirts.
Traduire l'échelle en jetons de conception
Les jetons transforment l'échelle, initialement définie dans un tableur, en un contrat d'équipe.
Les Jetons de conception sont des valeurs nommées représentant les décisions de conception. Pour une échelle de typographie, trois niveaux sont nécessaires :
-
Jetons bruts : les valeurs de taille réelles, par exemple
font-size-100,font-size-200, etc., ou nomméesfont-size-body,font-size-h1. Ce sont les valeurs de référence. -
Jetons sémantiques : des alias exprimant l'intention, par exemple
text-heading-page,text-body-default,text-caption. Les jetons sémantiques pointent vers les jetons bruts. Les composants utilisent les jetons sémantiques, jamais directement les jetons bruts. -
Jetons de composant. Liaisons au sein de composants spécifiques.
card-title-sizepointe verstext-heading-cardqui pointe versfont-size-200. Les jetons de composant permettent de surcharger chaque composant sans perturber le système.
Exemple de fichier de jetons JSON minimal pour une base de 16 et un ratio de 1,25 :
{
"font-size": {
"raw": {
"100": { "value": "0.625rem" },
"200": { "value": "0.8125rem" },
"300": { "value": "1rem" },
"400": { "value": "1.25rem" },
"500": { "value": "1.5625rem" },
"600": { "value": "1.9375rem" },
"700": { "value": "2.4375rem" },
"800": { "value": "3.0625rem" },
"900": { "value": "3.8125rem" }
},
"semantic": {
"caption": { "value": "{font-size.raw.100}" },
"small": { "value": "{font-size.raw.200}" },
"body": { "value": "{font-size.raw.300}" },
"lead": { "value": "{font-size.raw.400}" },
"h4": { "value": "{font-size.raw.500}" },
"h3": { "value": "{font-size.raw.600}" },
"h2": { "value": "{font-size.raw.700}" },
"h1": { "value": "{font-size.raw.800}" },
"display": { "value": "{font-size.raw.900}" }
}
}
}
Cette structure est portable. Style Dictionary, Tokens Studio, Specify et Supernova lisent tous ce format et génèrent les variables Figma, les variables CSS, la configuration Tailwind, les constantes Swift iOS, le XML Android, etc., selon les besoins des plateformes. Les jetons constituent la source. Tout le reste est généré.

Transférer l'échelle dans les variables Figma
Les variables Figma contiennent l'échelle destinée à l'équipe de conception. Elles sont structurées comme une collection typographique unique avec des alias sémantiques.
Créez une collection de variables nommée Typography. Ajoutez-y une variable numérique pour chaque taille brute : size/100 à size/900, avec les valeurs en pixels équivalentes en rem (10, 13, 16, 20, 25, 31, 39, 49, 61). Ajoutez ensuite un deuxième niveau d'alias : text/caption, text/small, text/body, text/lead, text/h4, text/h3, text/h2, text/h1, text/display. Chaque alias pointe vers une variable de taille brute.
Créez ensuite des styles de texte, un par rôle. Heading/H1 utilise text/h1 pour la taille, la police de votre titre pour la famille, le poids de votre titre pour l'épaisseur et le rapport hauteur de ligne de votre titre pour l'interlignage. Body/Default utilise text/body, la police de votre texte courant, en épaisseur normale. Répétez l'opération pour chaque rôle.
La règle est que les concepteurs créent des interfaces à l'aide de styles de texte, et non en saisissant directement la taille des polices dans l'inspecteur. Une fois cette règle adoptée par une équipe, l'échelle s'applique automatiquement. Toute personne définissant une taille personnalisée doit enfreindre la règle de manière visible, et cette visibilité constitue le garant de son application.
Associez cela à une configuration de modes si vous prenez en charge plusieurs modes de densité. Un mode « compact » peut remplacer les variables de taille brutes pour utiliser un ratio de 1,125 et offrir une expérience plus dense. Un mode « confortable » peut utiliser 1,25. Les alias restent inchangés. Les composants ne changent pas. Seule l'échelle se décale. C'est le principe du système.
Intégrer l'échelle dans Tailwind CSS
La configuration Tailwind est l'endroit où l'échelle est gérée par l'équipe de développement, et elle doit refléter exactement la structure des variables Figma.
Remplacez la valeur par défaut de Tailwind fontSize par votre échelle dans tailwind.config.js :
module.exports = {
theme: {
fontSize: {
'caption': ['0.625rem', { lineHeight: '1rem' }],
'small': ['0.8125rem', { lineHeight: '1.25rem' }],
'body': ['1rem', { lineHeight: '1.5rem' }],
'lead': ['1.25rem', { lineHeight: '1.75rem' }],
'h4': ['1.5625rem', { lineHeight: '2rem' }],
'h3': ['1.9375rem', { lineHeight: '2.375rem' }],
'h2': ['2.4375rem', { lineHeight: '2.875rem' }],
'h1': ['3.0625rem', { lineHeight: '3.5rem' }],
'display': ['3.8125rem', { lineHeight: '4.25rem' }],
},
},
}
Désormais, text-h1 dans le balisage a la même signification que Heading/H1 dans Figma. Le nom de la classe fait office de contrat. Les ingénieurs ne choisissent pas les tailles, mais les rôles, et le rôle est résolu en la valeur de pixel appropriée lors de la compilation.
Les hauteurs de ligne ne sont pas arbitraires. La règle est la suivante : interligne court pour le corps du texte et les petites tailles, interlignage plus large pour le corps et le titre, et de nouveau interlignage court pour les titres. Une règle courante est : interligne de 1,5 pour le corps du texte, de 1,1 à 1,2 pour les titres, avec une transition de 1,3 à 1,4 pour les titres et les h4. Vous pouvez exprimer cela sous forme d'une autre échelle (une échelle d'interlignage) ou de valeurs par étape, mais la relation entre la taille et l'interlignage doit être délibérée et non pas estimée à l'œil nu.
Si vous souhaitez conserver les classes par défaut de Tailwind disponibles en plus de votre échelle (pour le code existant ou les composants tiers), utilisez extend au lieu de remplacer directement fontSize. L'objectif à long terme est d'utiliser une seule échelle, et non deux. Avoir deux échelles typographiques dans un même produit revient à n'avoir qu'une seule échelle et de nombreuses erreurs.
Associez l'échelle à un véritable guide d'association de polices pour le choix des polices et à un framework système de conception qui contextualise l'échelle. L'échelle est une partie du système typographique ; le choix des polices et le mappage des rôles en sont les autres. Besoin d'une échelle fonctionnelle, de jetons valides et d'une configuration Figma + Tailwind correcte dès le départ ? Embaucher Brainy. Nous livrons des systèmes de typage complets via BrandBrainy et UXBrainy, incluant les tokens, les variables Figma et la configuration Tailwind, le tout intégré dans une seule livraison.
Les règles de gouvernance qui assurent la pérennité d'une échelle de typage
Toute échelle de typage obsolète a disparu de la même manière : par exception.
Trois règles garantissent la pérennité d'une échelle de typage plus longtemps que n'importe quel outil :
Règle n° 1 : chaque nouveau composant choisit des rôles, et non des tailles. Un designer créant une carte choisit « Corps » pour le corps du texte, « H3 » pour le titre et « Légende » pour l'horodatage. Il ne saisit pas font-size: 18px dans l'inspecteur. Si le rôle n'existe pas, il propose un nouveau rôle via le système, et non une redéfinition ponctuelle.
Règle n° 2 : les exceptions sont nommées et datées. Si l'équipe marketing a besoin d'un titre de 72 px pour une bannière sur une page de campagne et que la taille d'affichage est de 61 px, l'exception est nommée (hero-marketing-q3-launch) et datée. Une fois la campagne lancée, l'exception est soit intégrée à la grille de tailles (si elle est réutilisable), soit supprimée (s'il s'agissait d'une exception ponctuelle). Aucune modification anonyme n'est autorisée.
Règle 3 : la grille est révisée trimestriellement, et non annuellement. Un examen trimestriel est suffisamment court pour détecter les dérives tant qu'elles sont encore minimes. Un examen annuel est trop long, car chaque équipe a alors pris l'habitude de contourner les problèmes, et les corriger représente un projet à part entière. L'examen trimestriel dure quinze minutes. L'examen annuel implique une refonte complète.
Les équipes qui perdent leur grille de tailles racontent toujours la même histoire. Quelqu'un avait besoin d'une taille de 17 px pour un bouton, quelqu'un d'autre d'une taille de 21 px pour une bannière ; six mois plus tard, on se retrouve avec quarante-sept tailles de police dans le code source, et personne ne sait lesquelles sont les bonnes. La grille a disparu. Il ne reste qu'un cimetière de tailles de police.
Pour éviter cela, il faut considérer la grille comme un contrat, et non comme une simple feuille de calcul. Ce contrat est appliqué par des outils (styles Figma, classes Tailwind, règles de linting) et par des revues de code. Le contrat est renégocié lors de la revue trimestrielle. Tout ce qui n'est pas prévu au contrat est considéré comme un bug.

FAQ
Qu'est-ce qu'une échelle typographique modulaire ?
Une échelle typographique modulaire est un système où chaque taille de police d'un produit est générée en appliquant un ratio unique à une taille de base unique. Choisissez une base, généralement 16 pixels pour le web, choisissez un ratio, généralement entre 1,125 et 1,618, et multipliez ou divisez la base par le ratio de manière itérative pour générer les intervalles. Le résultat est une échelle où chaque taille est mathématiquement liée à toutes les autres, ce qui confère à la typographie une cohérence interne qu'un choix arbitraire de pixels ne peut pas garantir.
Quel ratio utiliser pour mon échelle typographique ?
Choisissez le ratio adapté à la densité requise par votre produit. Utilisez 1,125 ou 1,2 pour les produits de données denses comme les tableaux de bord et les outils d'administration, où les titres ne doivent pas détourner l'attention des données. Utilisez 1,25 ou 1,333 pour les pages marketing SaaS standard, les sites de contenu et les pages produits, où se trouvent la plupart des produits B2B. Utilisez 1,414 ou 1,618 pour les contenus éditoriaux, les magazines ou les produits axés sur l'affichage, où les titres doivent rester percutants. L'erreur la plus fréquente est de choisir un ratio pour son aspect esthétique plutôt que pour son adéquation au produit.
Combien de tailles une échelle typographique doit-elle comporter ?
La plupart des échelles typographiques prêtes pour la production comportent sept à neuf tailles. Les catégories Légende, Petite taille, Corps, Mention, h4, h3, h2, h1 et Affichage couvrent la quasi-totalité de la surface du produit. En dessous de sept tailles, des espaces vides apparaissent, que les graphistes comblent ponctuellement. Au-delà de dix tailles, l'échelle se réduit considérablement, certaines tailles devenant inutilisées et le système plus difficile à maintenir. Sept à neuf tailles constituent le juste milieu, et les noms des rôles doivent décrire la fonction de chaque taille, et non sa valeur en pixels.
Faut-il utiliser les rem ou les px pour les valeurs de l'échelle typographique ?
Utilisez les rem pour le web. La taille de police racine du navigateur est de 16 pixels par défaut, mais l'utilisateur peut la modifier via les paramètres d'accessibilité et les préférences du navigateur. Une échelle basée sur les rem respecte automatiquement ces préférences. Les échelles basées sur les pixels les ignorent. C'est pourquoi Tailwind, Material Design et la plupart des systèmes de conception modernes utilisent les rem. Pour les plateformes mobiles, suivez les instructions de la plateforme : iOS utilise les points et prend en charge les caractères dynamiques, tandis qu'Android utilise les pixels (sp), indépendants de l'échelle. Le principe reste le même : utilisez l'unité relative de la plateforme, et non les unités absolues.
Quelle est la différence entre une échelle de caractères modulaire et les jetons de conception ?
Une échelle de caractères modulaire représente les calculs, tandis que les jetons de conception permettent de les implémenter. L'échelle définit les valeurs (10, 13, 16, 20, 25, 31, 39, 49, 61). Les jetons constituent la couche nommée qui permet au reste du système de conception de référencer ces valeurs sans les coder en dur. Il est possible d'avoir une échelle sans jetons, mais elle ne sera pas conservée dans un code source réel. Vous pouvez utiliser des jetons sans échelle, mais leurs valeurs seront arbitraires. Le système complet correspond à l'échelle exprimée sous forme de jetons, avec des couches brutes, sémantiques et de composants, et transmise à Figma et au code via la même source.
L'erreur fréquente des échelles typographiques
Une échelle typographique n'est pas une simple liste de tailles de police ; c'est un contrat définissant la hiérarchie textuelle dans votre produit.
Les équipes qui maîtrisent cet aspect ne se contentent pas de choisir un ratio. Elles définissent un ratio, élaborent l'échelle, la transmettent sous forme de jetons, l'intègrent à Figma et Tailwind, puis la font respecter par le biais d'une revue trimestrielle et d'une règle stricte et sans exception. L'échelle n'est pas le livrable, c'est la discipline qui l'est. Le livrable est ce qui rend la discipline possible.
Les équipes qui se trompent considèrent l'échelle comme un simple tableau d'inspiration. Ils choisissent de belles proportions sur une maquette Pinterest, livrent un document de spécifications statique et découvrent six mois plus tard que l'équipe d'ingénierie ne l'a jamais adopté, car ce document n'était pas du code exécutable. Ou bien ils déploient l'échelle dans Figma sans jamais l'intégrer à Tailwind, et les fichiers de conception et l'application de production finissent par diverger, aboutissant à deux produits distincts avec des polices différentes. Ou encore, ils déploient l'échelle dans les deux environnements sans jamais la contrôler, et les exceptions se multiplient au-delà des règles en moins d'un an.
La solution la plus simple consiste à considérer l'échelle comme un contrat dès le départ. Les calculs définissent les étapes. Les jetons permettent de déployer ces étapes. Les variables Figma et la configuration Tailwind rendent les étapes utilisables par les deux équipes (conception et ingénierie). La gouvernance assure la continuité des étapes après le lancement. Chaque composant du système remplit une fonction précise, et le système dysfonctionne si l'un d'eux manque.
Si vous souhaitez une échelle de types modulaire fonctionnelle, de véritables jetons, de véritables variables Figma, une véritable configuration Tailwind et un plan de gouvernance qui assure la pérennité de l'échelle après le lancement, embauche Brainy. Nous fournissons des systèmes de conception complets via BrandBrainy et UXBrainy, avec des échelles de types conçues comme des jetons dès le départ, système typographique connecté à palette de couleurs de la marque et les règles qui maintiennent le système opérationnel une fois que l'équipe a commencé le déploiement.
Need a type scale that holds up across Figma, Tailwind, and a six-product surface? Brainy ships full design systems through BrandBrainy and UXBrainy, with type scales designed as tokens from day one.
Get Started
