Couleur
Deux semences, tous les rôles
Une palette ne définit qu’une teinte d’identité et une teinte d’action. Les grounds, les tons de texte, les filets et les fonds de bouton en sont dérivés — c’est ce qui garde la hiérarchie identique d’une palette à l’autre.
--bg
Fond de page
--surface
Carte, panneau
--surface-2
Bande alternée
--surface-dark
Panneau profond
--heading
Teinte d’identité, titres
--text
Encre principale
--text-mid
Texte courant
--text-mute
Métadonnées
--accent
Teinte d’action, liens
--accent-tint
Fond du bouton primaire
--on-tint
Texte sur ce fond
--brand
Marque, surlignages
--brand-deep
Marque, état pressé
--rule
Filet, séparateur
--rule-control
Bordure de champ
--ring
Anneau de focus
--danger
Erreur de saisie
--color-leaf
Succès
Palettes
Quatre systèmes, une seule hiérarchie
Chacune a sa variante claire et sa variante sombre complètes. Le sélecteur de l’en-tête les applique en direct ; la palette par défaut se règle dans les réglages du thème.
covenant
Grenat
amethyst
Améthyste
vineyard
Vigne
conceive
Prune
Typographie
Une voix, trois registres
Satoshi porte les titres et le texte : une seule famille, distinguée par la graisse et l’échelle. Le mono est le registre des étiquettes — délibérément autre.
Titre · d1
Femme, tu es un remède
Titre de section · d2
Une seule voix, sur quatre continents
Chapô
Le paragraphe d’ouverture qui porte la promesse d’une section, un cran au-dessus du texte courant.
Texte courant
Le texte courant, à sa taille par défaut, réglé pour une lecture confortable sur une mesure d’environ soixante-dix caractères.
Métadonnée
Le cran en dessous : une ligne de pays sur une carte, un terme de liste de définition, une entrée d’index.
Sourcil
Mono, capitales, interlettré
Contrôles
Une seule géométrie
Boutons et champs partagent la même hauteur de base, obtenue par le remplissage interne — jamais par une hauteur fixe. Cible minimale : 44 × 44 px.
Formulaires
Les états, tous dessinés
Repos, focus, erreur, désactivé : chaque état est prévu par le système. Les champs ci-dessous sont un spécimen, pas un formulaire actif.
Saisissez une adresse e-mail valide.
Le formulaire porte toujours sa propre surface en dégradé : il se lit comme un objet sur n’importe quel fond, y compris une photographie.
Composants
Les objets récurrents
Carte, pastille d’icône, chiffre-clé, état vide : les blocs dont toutes les pages sont faites, avec le même rayon et le même filet.
99
Femmes engagées
État vide : ce que voit une recherche sans résultat.
Les accents secondaires (pin, ambre, rose, ciel, feuille) ne servent qu’aux pastilles d’icône : ils différencient des domaines, ils ne portent jamais de texte.
Rayons
Une seule échelle d’arrondi
Quatre valeurs, et la pastille pour les boutons. Aucun composant n’invente son propre rayon.
--radius-xs
Touche clavier, pastille fine
--radius-sm
Bloc imbriqué
--radius-md
Cartes, champs, panneaux
--radius-xl
Grands panneaux éditoriaux
--radius-pill
Boutons