Architecture CSS sémantique · OKLCH · Utopia
Pas de classes utilitaires à empiler, pas de composants propriétaires figés. Écrivez du HTML natif accessible — gouvernez toute l'interface par un contrat de variables CSS et sept couches de cascade.
Vous partez d'un balisage nu. Vous n'ajoutez de la configuration que là où votre design diverge du socle.
Les balises natives (<button>, <input>, <dialog>, <details>, <search>) et les états ARIA pilotent directement le style et l'accessibilité.
<label for="nom">
Nom <em data-required aria-hidden="true">*</em>
<input id="nom" type="text" required>
</label>--peels-*Chaque rôle visuel (surfaces, typographie, rayon, densité des contrôles, anneau de focus) est exposé sur :root ou sur un conteneur parent par héritage.
aside {
--peels-control-font-size: var(--peels-text-xsmall);
--peels-component-radius: 0px;
}Couleur OKLCH, typographie et espacement sont indépendants. Changez d'identité globale ou locale par un simple attribut sur n'importe quel sous-arbre.
<html data-color-theme="forest"
data-type-theme="editorial"
data-space-theme="compact">57 éléments et primitives répartis en 8 catégories. Cliquez sur une catégorie ou accédez directement à un élément.
Du simple article éditorial à l'interface e-commerce : vérifiez comment Peels se comporte sur de vraies pages.
Échelle fluide Utopia, citations, tableaux de données, notes latérales et blocs de code.
Ouvrir la page → Cas 02 · Saisie & validationChamps natifs, groupes fieldset, interrupteurs, aide contextuelle et erreurs :user-invalid.
Navigation par catégories sticky, cartes produits, prix et mise en page pleine largeur.
Ouvrir la page → Cas 04 · Socle purLe rendu de peels.css sans thème activé : typographie système et contrastes natifs clair/sombre.
Tous les éléments HTML standards réunis sur une seule page pour contrôler la cohérence globale.
Ouvrir la page → Cas 06 · ThèmesChangez d'axe couleur, typographie et densité à la volée sur une même page témoin.
Ouvrir la page →