@contentos/uipublic

Design system

Composants partagés de la suite contentos — socle cast. Source unique : packages/ui, copiée dans les projets via bin/ui-sync.

Fonts

Geist Sans pour le texte et les titres, Geist Mono pour le technique.

Geist Sans
font-sans — texte courant et titres (var --font-heading).

Crée, planifie et publie — contrôle humain.

Regular · 400Medium · 500Semibold · 600Bold · 700
Geist Mono
font-mono — code, identifiants, valeurs techniques.

bin/ui-sync styleguide → 0.625rem

Échelle de tailles

text-3xl

text-2xl

text-xl

text-lg

text-base

text-sm

text-xs

Couleurs

Tokens OKLch, thème clair/sombre. Bascule le thème en haut à droite.

Aa

background

bg-background

Aa

foreground

bg-foreground

Aa

primary

bg-primary

Aa

secondary

bg-secondary

Aa

muted

bg-muted

Aa

accent

bg-accent

Aa

destructive

bg-destructive

Aa

card

bg-card

Aa

border

bg-border

Aa

sidebar

bg-sidebar

Titres

Échelle typographique : Heading (h1–h4), Lead, Text, Muted, Code.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Lead — une accroche un peu plus grande pour introduire une section.

Text — paragraphe courant. La librairie reste volontairement légère : des atomes composables plutôt qu'un framework.

Muted — annotation discrète, métadonnée, aide contextuelle.

Inline : cn(), bin/ui-sync cast et @contentos/ui.

Boutons

Variantes, tailles, icônes et états du composant Button.

Variantes

Tailles

Avec icône & état

Formulaires

Champs de saisie : Input, Textarea, Label — états par défaut, focus, désactivé.

Select

Menu déroulant (base-ui), compatible formulaire — remplace les <select> natifs.

Valeur : aucune. Compatible <form> via name + defaultValue.

Toaster

Notifications éphémères (sonner), thème-aware. Déclenche via toast() / toast.success(), etc.

Skeleton

Placeholder de chargement : compose des blocs pour esquisser le contenu à venir.

Modale oui/non

ConfirmDialog : confirmation d'action, variante neutre ou destructive.

Aucune action pour l'instant.