Design System

Style guide

Command Palette

Search for a command to run...

Typographie

Heading 1 — font-heading

Heading 2

Heading 3

Texte courant en font-sans. Body text utilisé pour tout le contenu rédactionnel de l'interface.

const token = "font-mono" // utilisé pour le code, les IDs, les montants

Couleurs sémantiques

Primary

--primary

Secondary

--secondary

Success

--success

Warning

--warning

Info

--info

Destructive

--destructive

Boutons

Retour utilisateur

DefaultSecondaryDestructiveOutline
Aucune donnée
Aucun élément à afficher pour le moment.

Formulaires

Paramètres du compte
Inputs, select, combobox, otp, champs groupés.
Profil

Visible publiquement sur le profil.

Overlays

Command (inline)
Context menu
Clic droit ici

Navigation

Données & disclosure

RéférenceStatutMontant
INV-001Payée€250.00
INV-002En attente€150.00
INV-003Échouée€350.00

Affichage de données

Chart
Calendar
July 2026
Carousel
1
2
3
4
Resizable + Scroll area

Panneau redimensionnable.

Faites glisser la poignée →

Ligne supplémentaire pour le scroll.

Encore une ligne.

Et une dernière.

Contenu principal
Item, Kbd & Marker
rapport-q3.pdf

2.4 Mo · modifié il y a 2h

⌘O
Aujourd'hui

Layout — Sidebar

Acme Inc.
Plateforme
Contenu principal (SidebarInset)

Chat / IA

Bonjour ! Comment puis-je vous aider aujourd'hui ?
Peux-tu me montrer la pièce jointe du rapport ?
rapport-q3.png1.2 Mo