Précise. Calme.
Reconnaissable.
Coal prend les décisions récurrentes : des angles droits, du papier et du charbon, un repère cuivre, une typographie Plex et cinq intentions communes.
La typographie
IBM Plex Sans pour les textes et les contrôles. IBM Plex Mono pour le code, les identifiants et les raccourcis. Les polices sont locales et optionnelles ; aucun appel à Google Fonts.
Le détail fait la différence.
Un projet, une équipe, une prochaine étape.
COAL-0042 · ⌘ K · 0123456789
import "@chlohal/coal-ui/styles.css";
import "@chlohal/coal-ui/fonts.css"; // optionnel
// Pour les textes de votre application :
// body { font-family: var(--coal-font-sans); }Texte courant 16 px ; contrôles et tableaux 14 px ; métadonnées 12 px minimum. Graisses 400, 500 et 600. Titres 20, 24 et 32 px. Les valeurs numériques utilisent des chiffres tabulaires.
La couleur porte un rôle
Papier pour le fond, cendre pour les surfaces secondaires, charbon pour le texte et l’action principale. Le cuivre signale une sélection ou un repère de marque. Il ne signifie ni succès ni avertissement.
Chaque intention dispose de tokens texte, fond, bordure, couleur pleine et texte sur couleur pleine : par exemple --coal-warning-text, --coal-warning-bg, --coal-warning-border, --coal-warning-solid et --coal-warning-on-solid. Les valeurs claires et sombres sont distinctes et leurs contrastes de texte sont testés.
Un libellé reste obligatoire pour expliquer un statut. « En attente » est neutre ; l’ambre apparaît lorsqu’une intervention est nécessaire. Les symboles complètent la couleur.
<Badge intent="success">Enregistré</Badge>
<Alert intent="warning">Votre espace est presque plein.</Alert>
toast.add({ intent: "danger", title: "Enregistrement impossible" });Une intention, un traitement
Un mouvement court et utile
Confortable, puis compact si nécessaire
Des notifications qui respectent l’attention
Les règles de mouvement
| Interaction | Règle |
|---|---|
| Survol | Couleur uniquement · 120 ms |
| Pression et focus | Réponse immédiate |
| Menu / popover / tooltip | 4 px + opacité · 160 ms |
| Dialog | 8 px + opacité · 200 ms |
| Sheet | Depuis le bord · 240 ms |
| Fermeture des overlays | 140 ms |
| Mouvement réduit | Transitions supprimées, indicateur de chargement statique |
Une courbe de décélération commune, aucun rebond, aucune carte qui grossit au survol. La réouverture interrompt une fermeture en cours. Le chargement ne bloque pas la mise à jour de l’état. Les notifications se ferment immédiatement à la demande.
Les règles d’usage
- Une action principale par zone. Employer un verbe précis : Enregistrer, Inviter, Supprimer.
- Label visible pour chaque champ. Valider à la sortie ou à l’envoi ; conserver la saisie en cas d’échec.
- Erreur de champ sous le champ ; problème local dans une alerte ; confirmation brève dans un toast.
- Les toasts warning et danger persistent par défaut. timeout: 0 rend toute notification persistante ; une durée explicite remplace le défaut.
- Prévoir les états chargement, vide, erreur, désactivé, sélectionné et focus. Ne pas afficher un toast pour chaque interaction.
- Grille d’espacement de 4 px. Contrôles confortables de 40 px, compacts de 32 px ; 44 px pour les principaux contrôles tactiles.
- Mettre
data-coal-density="compact"sur html pour inclure aussi les overlays portalisés. La classe coal-theme permet de limiter la densité à une section. - Le mode sombre change les valeurs des tokens, jamais leur signification.
Les composants appliquent les états visuels et comportements partagés. Le choix des libellés, les règles de validation métier et la conservation des données restent sous le contrôle de votre application.