Primitives
Niveau 1Valeurs brutes : 15 font stacks, 34 couleurs, tailles, espacements. Ce fichier ne change jamais.
Système CSS à trois niveaux
Primitives, sémantiques et application. Huit thèmes interchangeables via un seul fichier CSS — sans toucher au HTML ni au fichier d'application.
Typographie du thème
Heading — font-heading
The quick brown fox jumps over the lazy dog
Body — font-body
Le design d'un système CSS devrait être comme une bonne typographie : invisible quand ça fonctionne, évident quand ça ne fonctionne pas. Ceci est un paragraphe de démonstration pour observer l'interlignage, la graisse et la taille du corps de texte.
UI — font-ui
Boutons · Labels · Navigation · Badges · Formulaires
Cartes
Sémantiques
Niveau 2Mappe les primitives sur des rôles fonctionnels. C'est le seul fichier interchangeable — un par thème.
Application
Niveau 3Style les éléments HTML avec des variables sémantiques. Agnostique du thème, jamais modifié.
Contenu textuel
Sous-titre de troisième niveau
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Le design d'un système CSS devrait être comme une bonne typographie : invisible quand ça fonctionne, évident quand ça ne fonctionne pas.
Texte avec du gras, du code inline, un lien hypertexte, du texte surligné, et du petit texte secondaire.
Bloc de code
<link rel="stylesheet" href="primitives.css">
<link rel="stylesheet" href="theme-moderne.css"> <!-- ← seul fichier à changer -->
<link rel="stylesheet" href="application.css">Messages d'état
Information : les variables sémantiques sont mappées sur les primitives.
Succès : le thème a été changé avec succès.
Attention : les primitives ne doivent pas être utilisées directement.
Erreur : variable sémantique manquante dans le thème.
Les 8 thèmes
| Thème | Heading | Body | UI |
|---|---|---|---|
| Moderne | Geometric Humanist | Humanist | System UI |
| Luxe | Didone | Transitional | Slab Serif |
| Pro | Neo-Grotesque | System UI | Monospace Code |
| Créatif | Slab Serif | Humanist | Geometric Humanist |
| Raffiné | Classical Humanist | Old Style | Neo-Grotesque |
| Amical | Rounded Sans | Humanist | Rounded Sans |
| Puissant | Industrial | Neo-Grotesque | Monospace Slab |
| Vintage | Antique | Old Style | Humanist |
Formulaire
Questions fréquentes
Pourquoi trois niveaux plutôt que deux ?
Deux niveaux (primitives + application) forcent à mélanger les décisions de thème dans le style des éléments. Le niveau sémantique intermédiaire isole complètement les choix esthétiques.
Combien de thèmes peut-on créer ?
Autant qu'on veut. Chaque thème est un fichier CSS qui mappe les mêmes noms de variables sémantiques sur des valeurs primitives différentes. Le HTML et l'application restent identiques.
Les polices sont-elles téléchargées ?
Non. Toutes les polices sont des system font stacks qui utilisent les polices déjà installées sur l'OS. Aucun téléchargement, aucun flash de texte non stylé (FOUT).