Design system · v2 · 2026

Foundations, tokens & primitives.

Une base minimaliste alignée sur les standards 2026 (Linear, Vercel, Stripe, Notion). Neutres zinc stricts, accent violet désaturé unique, quatre états sémantiques. Tout est piloté par tokens — light & dark partagent la même logique.

Strategy: Monochrome zinc + 1 accent
Accent: Violet #7033ff
Type: Geist · Jakarta · Plex Mono
Modes: Light / Dark

01 — Palette

Couleurs

Neutres zinc en 12 paliers. Brand violet 50 → 900. Quatre états sémantiques utilisés strictement pour signaler — jamais en décoration.

Zinc — neutrals

12 steps · oklch(L 0 0)

zinc-01.000

zinc-500.985

zinc-1000.970

zinc-2000.922

zinc-3000.870

zinc-4000.708

zinc-5000.556

zinc-6000.439

zinc-7000.371

zinc-8000.269

zinc-9000.205

zinc-9500.145

Violet — brand

10 steps · oklch · hue 286

violet-500.97

violet-1000.93

violet-2000.85

violet-3000.75

violet-4000.65

violet-5000.55

violet-6000.48

violet-7000.40

violet-8000.32

violet-9000.24

Semantic states

used SCIENTLY · never decoratively

success

--success · green

warning

--warning · amber

destructive

--destructive · red

info

--info · blue

Semantic surface tokens

consumed by components · never raw colors

background

--background · zinc-0

card

--card · zinc-0

muted

--muted · zinc-100

primary

--primary · violet-500

foreground

--foreground · zinc-950

muted-fg

--muted-foreground · zinc-500

border

--border · zinc-200

ring

--ring · violet-500

02 — Type

Typographie

Trois familles, trois rôles. Geist en display pour les hero et titres principaux, Plus Jakarta Sans en body UI, IBM Plex Mono pour les IDs, références et chiffres tabulaires.

Display

Geist

Aa Bb Cc

600 · self-hosted

UI · Body

Plus Jakarta Sans

Aa Bb Cc

400 · 500 · 600 · 700

Mono

IBM Plex Mono

Aa Bb 0123

400 · 500 · tabular nums

DisplayGeist · 60 / 1.02 · -0.035em

Foundations posées.

Heading 1Geist · 40 / 1.1 · -0.03em · 600

Construire ce qui compte.

Heading 2Geist · 28 / 1.15 · -0.025em · 600

Pages, baux, mandats.

Heading 3Jakarta · 20 / 1.25 · -0.02em · 600

Section title

Body LJakarta · 17 / 1.55 · 400

Une plateforme pour la gestion immobilière, claire et précise. Chaque écran respire la même grille et la même hiérarchie.

BodyJakarta · 15 / 1.55 · 400

Texte courant utilisé partout dans l'application — listes, descriptions, formulaires.

Small / MutedJakarta · 13 / 1.5 · zinc-500

Légendes, helpers, métadonnées secondaires.

EyebrowJakarta · 11 · 500 · uppercase · +0.08em

SECTION LABEL

MonoPlex Mono · 13 / 1.5 · 400

REF-2026-0428 · 1 245,80 €

03 — Spacing

Échelle d'espacement

Échelle Tailwind 4px. Toutes les marges et paddings dérivent de cette grille — pas de valeurs ad hoc.

00px0.00rem

0.52px0.13rem

14px0.25rem

1.56px0.38rem

28px0.50rem

312px0.75rem

416px1.00rem

520px1.25rem

624px1.50rem

832px2.00rem

1040px2.50rem

1248px3.00rem

1664px4.00rem

2080px5.00rem

2496px6.00rem

04 — Radius

Rayons

Échelle Linear/Vercel-like. --radius de base à 0.625rem (10px), monté/descendu par paliers.

none

0px

0.25rem · 4px

0.375rem · 6px

0.5rem · 8px

base

0.625rem · 10px

0.875rem · 14px

1rem · 16px

05 — Elevation

Ombres

Doux, modernes, multi-couches. Utilisées pour suggérer la profondeur, pas pour décorer.

xs--shadow-xs

sm--shadow-sm

md--shadow-md

lg--shadow-lg

xl--shadow-xl

2xl--shadow-2xl

06 — Primitives

Composants

Les briques utilisées partout dans l'app. Chaque variante consomme uniquement des tokens sémantiques.

Buttons

Variants

Link variant

Sizes

States

Form fields

EmailNous ne partagerons jamais votre email.

Mot de passeAu moins 8 caractères requis.

Note

Toggles & selection

Notifications

Marketing

AccepterNewsletter

MensuelAnnuel

Tabs

Badges

BrouillonEn coursSignéEn attenteExpiréInformationTag

Nouvelle version disponible

Une mise à jour mineure est en ligne. Rechargez pour en profiter.

✓

Document signé

Le bail a été signé électroniquement par toutes les parties.

Échéance proche

Le mandat arrive à expiration dans 14 jours.

Paiement refusé

La transaction n'a pas pu aboutir. Vérifiez les informations bancaires.

Mandat

12 rue de la République

Appartement T3 · 67 m² · Lyon 2ᵉ

Bail signé

Studio Croix-Rousse

740 € / mois · charges comprises · 3 ans

Diagnostic à renouveler

Maison Charpennes

DPE classe E · expire le 12/06/2026

Avatars & misc

LMLMLM

LMCTJD+4

Tooltip simpleREF-2026-0428tabular⌘ + K

Progress

Vérification du dossier72%

Génération du bail35%

Espace utilisé94%

Table

4 lignes

Référence	Bien	Locataire	Loyer	Statut
BL-2026-0001	A12 rue République	Camille Tavernier	980,00 €	Signé
BL-2026-0002	SStudio Croix-Rousse	Jules Dehan	740,00 €	En cours
BL-2026-0003	MMaison Charpennes	Léa Maurin	1 480,00 €	En attente
BL-2026-0004	LLoft Confluence	Romain Pichon	1 220,00 €	Expiré