Design System

Référentiel Monsieur Guiz

Tout le langage visuel et les briques d'interface du site, organisés en trois niveaux : tokens fondamentaux, composants paramétrables, sections de page complètes.

Fondations Composants Sections

Fondations

Couleurs, typographie et tokens partagés. Tout est défini dans `src/app/globals.css` via `@theme inline` (Tailwind v4).

Comment lire ce référentiel

Trois onglets. Fondations = tokens. Composants = briques paramétrables (boutons, cards, badges) qu'on assemble. Sections = blocs pleine largeur prêts à poser sur une page. Les blocs marqués Template ont du contenu hardcodé — utiles pour visualiser, à brancher en production.

Palette

Six couleurs de marque (3 brand + 3 accents) et 4 niveaux de gris pour le texte. Tous les composants doivent passer par les tokens.

Brand

Brand purple

#5E00D5

Purple light

#EDE0FF

Brand teal

#00C8C8

Teal light

#B3EEEE

Accent salmon

#FE976E

Icon bg

#CCF4F4

Surface dark

#393938

Off-white

#FDFCFF

Texte

Primary

#393938

Secondary

#6B6B6A

Muted

#767675

On dark

#FFFFFF

Contraste — règles WCAG

Teal #00C8C8 ne passe pas l'AA sur blanc (2.1:1) pour du petit texte. Réservé aux éléments graphiques ou typo ≥ 18px. Pour du petit texte teal sur fond clair, utiliser #007070. Détails dans docs/design.md.

Typographie

Une seule famille — Jost (variable) — sur 4 graisses. Échelle fluide via clamp() pour des transitions douces entre breakpoints.

Jost — graisses

Regular 400Medium 500Semi-bold 600Bold 700

Échelle utilitaire

.text-hero — clamp(2rem, 3.5vw, 3.125rem)

On conçoit les expériences digitales qui font la différence.

.text-section — clamp(1.75rem, 3vw, 2.5rem)

Quatre disciplines, une obsession : l'excellence produit

.text-sub — clamp(1.25rem, 2vw, 1.5rem)

Sous-titre éditorial pour introduire un bloc de contenu.

Body — 16px / 1.6

Texte courant utilisé pour les paragraphes, descriptions et contenus longs. La hauteur de ligne 1.6 garantit une lecture confortable sur la plupart des écrans.

Eyebrow / label — 11-13px uppercase tracking 0.15-0.18em

Product Management · Design · IA · Ops

Tokens géométriques

Radius, espacements de section, animations.

Radius

3 niveaux + rounded-full

--radius-card · 8px

--radius-button · 4px

--radius-badge · 6px

rounded-full · pills

Espacement de section

2 tokens (smell — pas d'échelle complète)

--spacing-section · 6rem (96px)

--spacing-section-lg · 8rem (128px)

Pour le reste des spacings, on utilise les valeurs Tailwind par défaut (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px).

Animations

durations & easings

--duration-base

0.6s · scroll reveals

--duration-long

1s · scale-in CTA, big headings

--duration-hover

0.35s · card hover, icon pulse

--ease-out-expo

cubic-bezier(0.16, 1, 0.3, 1)