/style-guide — interne, non indexé

Clyse Design System

Hybride D1 Carnet de chantier × D3 Studio Blueprint. Tous tokens, tous handmade.

Palette

Swatch Nom Token CSS Hex Rôle WCAG
Terracotta --color-terracotta #B7410E Accent signature D1 (CTA, liens) 5.4:1 AA
Blueprint --color-blueprint #3B5BDB Accent technique D3 (cotes, focus) 6.9:1 AAA
Felt Yellow --color-felt-yellow #FFD23F Highlight surlignage 12.1:1 sur ink-dark
Ink --text-primary (light) #1A1814 Texte primaire light 15.8:1 AAA
Paper --bg (light) #F4EFE6 Surface light —
Ink-2 --text-secondary (light) #4A4239 Texte secondaire 8.9:1 AAA
Ink-3 --text-muted #8B7F6F Muted (light + dark) 4.6:1 AA
Success --color-success #3C6E47 Status 6.2:1 AAA
Warning --color-warning #C68B17 Status 4.6:1 AA
Error --color-error #8B2616 Status 8.4:1 AAA

Typographie

Display — Fraunces Variable

Studio de développement créatif

On conçoit, on code, on fait grandir.

Body — Newsreader Variable

Un long-form se lit comme un carnet de chantier. La preuve par le geste, contre les sites SaaS génériques.

UI — Inter Variable

Boutons, labels, taskbar, dock — toute l'interface OS.

Mono — IBM Plex Mono

clyse@studio:~$ deploy --force --signed-by=marius

Annotation — Architects Daughter

+47% conversion ici ↗

Legacy — Squeak / FairytaleSerif / CMUSerif italic

Squeak Display

FairytaleSerif moment

Citation client en italique élégant.

Échelle modulaire 1.250 (Major Third)

text-2xs 11px Métadonnées timestamp 27.05.26 14:32
text-xs 13px UI dense — taskbar, dock, badges
text-sm 15px Body UI default — formulaires, paragraphes courts
text-base 16px Body lecture long-form — articles, intro lead.
text-lg 20px Lead — première phrase d’un article.
text-xl 25px H3 — sous-titre de section
text-2xl 31px H2 — titre de section
text-3xl 39px H1 — titre de page
text-4xl 49px Hero — landing
text-5xl 61px Display — landmark

Boutons

Primary

Secondary

Ghost

Danger

Formulaires

Tel qu'il apparaîtra dans nos échanges.

Format invalide.

3-4 phrases suffisent à démarrer.

Cards

Default

Surface accent, border primary, shadow-sm.

Featured

Bordure terracotta gauche — marqueur éditorial.

v2 — draft

Card méta

Avec métadonnée mono en suréchelle.

Window Chrome (mini)

Services Portfolio
Réserver 14:32
portfolio.app

Étude de cas

+47% conversion en 6 semaines.

AnnotatedScreenshot

Device D3 signature — screenshot client annoté au feutre jaune + cotes blueprint.

Mock screenshot+47% ici ↗Hiérarchie↔ 1240px
Refonte landing — itération 3, mai 2026.