Design System CaledoLegales

Guide visuel et tokens utilises sur les 110+ pages du site. Reference pour developpeurs, designers, contributeurs.

1. Palette de couleurs

Couleurs principales

#1a3a5c

Navy

Brand principal, hero, headers

#2563eb

Blue

CTA secondaires, liens

#10b981

Green

Succes, validation, etat OK

#f59e0b

Orange

Attention, plan Pro highlight

#ef4444

Red

Erreur, sanction, critique

#8b5cf6

Purple

IA, premium, RGPD

Couleurs thematiques (par categorie)

#0f766e

Foncier

#dc2626

Contentieux

#0284c7

Compa formes

#7c3aed

Push/Notif

#854d0e

Kanak/Coutume

#059669

Financements

Echelle de gris (neutral)

#0f172a

900

#1e293b

800

#475569

600

#64748b

500

#cbd5e1

300

#e2e8f0

200

#f1f5f9

100

#f8fafc

2. Typographie

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif

Heading 1 - 2.4em / 700

Pour les heros uniquement

Heading 2 - 1.7em / 600

Titres de section

Heading 3 - 1.15em / 600

Sous-sections, titres de cards

Corps de texte - 1em / 400 - lisibilite max 75 caracteres par ligne

Small text 0.88em / 400 #475569 - pour metadonnees

3. Composants

Boutons

Badges

NOUVEAU BETA OBLIGATION PWA API V1

Cards

Card simple

Border light, shadow douce, radius 12px

Card avec accent

Border-top color + couleur titre

Card highlight

Background colore + bordure laterale

Hero gradient

Hero standard

Background linear-gradient 135deg, padding 60px 0, white text avec opacity 0.95

4. Spacing & layout

Container max-width: 1200px, margin auto, padding 0 20px

Section padding: 50px 0 vertical

Grid gap: 20px (cards), 30px (sections internes)

Border radius: 6px (inputs/badges), 8px (boutons/snippets), 12px (cards/heros)

Box shadow: 0 1px 3px rgba(0,0,0,0.05) leger, 0 1px 4px rgba(0,0,0,0.05) moyen