Design system · interne

Styleguide Jon Labs

Source de vérité visuelle : teal mono-accent + neutres warm. Un seul accent, une seule échelle typo, un seul style de surlignage.

1 · Palette

Neutres warm

#F5F4F0

--color-bg

Fond warm off-white

bg-bg

#FBFBF9

--color-surface

Cartes / surfaces surélevées

bg-surface

#ECEDEA

--color-panel

Sections alternées / panneaux

bg-panel

#14161A

--color-ink

Texte principal

text-ink

#6F7471

--color-muted

Texte secondaire

text-muted

#D8DCD8

--color-hairline

Filets doux

border-hairline

#0E1116

--color-dark

Sections sombres

bg-dark

Accent — teal (unique)

#00D9A3

--color-accent

Accent unique (signal, CTA, liens)

bg-accent

#00A87D

--color-accent-strong

Hover / emphase

bg-accent-strong

rgba(0,217,163,.16)

--color-accent-soft

Wash de surlignage

bg-accent-soft

Alias legacy → tokens

--blue → --color-accent inchangé
--yellow → --color-accent-strong était « vert foncé » (mal nommé)
--violet → --color-accent-strong magenta retiré → teal foncé
--accent → --color-accent-soft soulignement magenta → wash teal
--orange / --cyan → --color-accent dépréciés
--main-bg → --color-bg warm off-white
--text → --color-ink charbon warm

Transition : les anciens noms fonctionnent encore, à retirer en Phase 2.

Couleurs retirées / à purger

  • #A300D9 magenta (--violet)
  • #F3ABCB rose (pink-star)
  • #dca3ef rose-lavande (flèches)
  • #FFDC58 jaune brutaliste
  • #BAE6FF bleu ciel brutaliste
  • #FEFFF0 crème brutaliste
  • #EF4444 rouge (GlitchGrid)
  • #80f0d0 / #7EECD3 doublons teal

2 · Typographie

Plus Jakarta Sans · titres fins (H1/H2 en font-normal, look éditorial), tracking resserré. La hiérarchie vient de la taille + des eyebrows mono, pas du gras. H3/titres de carte gardent un peu de poids car petits.

H1 · text-4xl md:text-6xl font-normal tracking-tight

De l'idée au produit

H2 · text-3xl md:text-4xl font-normal tracking-tight

Un titre de section

H3 · text-xl md:text-2xl font-semibold

Un sous-titre

Lead · text-lg md:text-xl text-muted

Phrase d'introduction posée, en gris warm.

Body · text-base leading-relaxed

Corps de texte courant. On garde une mesure lisible (max-w-2xl), un interligne aéré, et on souligne au besoin avec l'accent unique.

3 · Surlignage — style unique

Le mot-clé en wash teal (canonique).

Ou en soulignement teal pour un accent discret.

On abandonne : flèches SVG déco pour souligner, var(--yellow), var(--accent) magenta, hex hardcodés.

4 · Boutons

Lien texte →

5 · Cartes

Titre carte 1

Surface warm, bordure nette, ombre stamp. La structure brutaliste reste ; c'est la couleur qui s'unifie.

Titre carte 2

Surface warm, bordure nette, ombre stamp. La structure brutaliste reste ; c'est la couleur qui s'unifie.

Titre carte 3

Surface warm, bordure nette, ombre stamp. La structure brutaliste reste ; c'est la couleur qui s'unifie.

6 · Formes signature (système d'aération — Phase 3)

dot-grid

halo radial

connecteur + nœuds

demi-cercle

Formes en teal/CSS-SVG, réutilisables comme décor léger sur les pages « mur de texte » — zéro coût API. Les illustrations « collage éditorial » (skill visual) viendront en complément ciblé.

7 · Section sombre

Bloc CTA final

Fond --color-dark, accent teal, un cran plus fort pour clore.