Aller au contenu
VibeHub

Design system

Tokens et composants consommés par toute l'application. Source de vérité : design/DESIGN.md.

01 ·

Couleurs

primary

#ffffff

on-primary

#0a0a0e

secondary

#d0b982

on-secondary

#0a0a0e

neutral

#27272a

on-neutral

#fafafa

surface

#0a0a0e

on-surface

#ffffff

on-surface-display

#f0ede7

on-surface-muted

#9ca3af

surface-container

#191b24

surface-container-high

#22242e

outline

#2a2d38

inverse-surface

#f0ede7

on-inverse-surface

#0a0a0e

success

#10b981

on-success

#0a0a0e

info

#8b5cf6

on-info

#0a0a0e

error

#ef4444

on-error

#0a0a0e

02 ·

Typographie

display · 4rem

Construire vite, montrer juste.

headline-lg · 2.5rem

Construire vite, montrer juste.

headline-md · 1.5rem

Construire vite, montrer juste.

title-lg · 1.25rem

Construire vite, montrer juste.

body-lg · 1rem

Construire vite, montrer juste.

body-md · 0.875rem

Construire vite, montrer juste.

label-sm · 0.75rem

Construire vite, montrer juste.

mono-md · 0.8125rem

Construire vite, montrer juste.

03 ·

Espacements et rayons

xs · 4px

sm · 8px

md · 12px

lg · 16px

xl · 24px

2xl · 32px

3xl · 48px

4xl · 64px

5xl · 96px

6xl · 128px

sm

md

lg

xl

2xl

full

04 ·

Boutons

05 ·

Badges, tags et onglets

Neutre En ligneIAErreurFiltre actif Privé
  • Actif
  • Inactif
  • Inactif

06 ·

Formulaires

Confirmation de succès.

07 ·

Cartes et code

01 ·

Titre de carte

meta-mono

Corps de texte de la carte. Survol : surface-container-high.

{
  "radius": "sm",
  "font": "Geist Mono"
}