Mercure · Design System v0.3

L'opération qui s'occupe
d'elle-même — codifiée.

Source de vérité brand, tokens et composants. Tous les magic numbers de la landing ont été extraits dans un système cohérent que tu peux étendre, themer et exporter.

Ouvrir les Stories tokens.json Changelog
v0.3.0 production-ready 121 tokens · 5 formats 17 stories Light + Dark 9 tests Playwright Floating UI vanilla
01 · Color

Une palette nuit traversée par un arc cool.

Aucune couleur chaude dans le système. Le triplet indigo → mauve → cyan trace un arc de hue 240° → 280° → 195°. Cliquez sur un token pour copier sa valeur.

Backgrounds

Ink (texte)

Accents — le triplet signature

État système proposé

02 · Type

Deux poids. Trois familles. Un système bi-modal.

Brockmann Medium pour le display (negative tracking), JetBrains Mono pour les labels système (positive tracking, caps). Le contraste entre les deux est le rythme typographique.

display-4xl clamp(160px, 24vw, 380px)
+12h/sem
display-3xl clamp(56px, 7vw, 124px)
Statement
display-2xl H1 hero · clamp(40px, 5vw, 76px)
On installe l'opération.
display-xl H2 section · clamp(36px, 4.2vw, 64px)
Vous avez bâti quelque chose qui marche.
display-m H3 · clamp(24px, 2.6vw, 36px)
Une couche entre vos outils, vos données et vos équipes.
lead · 17px line-height 1.6
La plupart des PME tournent sur la mémoire de leurs employés. Pas un système. Un risque. Mercure Lab installe la couche qui transforme ça en opération autonome.
body · 15px line-height 1.55 · -0.011em
Une équipe. Des clients. Une opération qui tient. Si vous lisez ceci, c'est que vous sentez aussi que la prochaine étape de croissance ne se fera pas en ajoutant des bras.
micro mono · 11px +0.28em · uppercase
Studio d'intelligence opérationnelle
wide-l · +0.42em Brand lockup caps
STUDIO · LAB
03 · Space

Échelle base-4, rythme typographique.

12 paliers. Pas de magic numbers, même pour le hairline. Cliquez pour copier le token.

04 · Radius

Sept valeurs, aucune improvisation.

xs8
sm11
md12
lg16
xl20
2xl24
full999
05 · Motion

Trois courbes, cinq durées, un rythme cardiaque.

Hover une carte pour voir l'easing. Tout ce qui respire boucle en 7s — ce n'est pas une animation, c'est un battement.

ease · défaut cubic-bezier(0.22, 0.61, 0.36, 1)
ease-out · soft-land cubic-bezier(0.16, 1, 0.3, 1)
ease-spring · overshoot cubic-bezier(0.34, 1.56, 0.64, 1)
06 · Surfaces

Le verre est le signe de la marque.

Toute surface élevée hérite du même contrat : fond translucide + blur 22 + edge highlight + spotlight curseur + ombre teintée. Bouge la souris sur les cartes.

.mc-glass--card

Carte standard avec padding s7 (32px) et radius xl (20px). Bouge ta souris pour voir le spotlight.

.mc-glass.mc-glass--card

.mc-glass--padded

Variante avec padding s8 (40px). Pour les pull quotes, les empty states.

.mc-glass.mc-glass--padded

.mc-glass--compact

Compact (padding s6, radius lg). Pour les items denses (tile grid, settings rows).

.mc-glass.mc-glass--compact
07 · Composants

Du brand au form. Le minimum viable pour parler Mercure.

Buttons

Réserver un Discovery En savoir plus
<a class="mc-btn">…</a>

Pills / status

Data signal Brand Action Success Warn Error

Stat / statement number

+12 h/sem

La plupart de nos clients gagnent ~12 h/semaine dès le premier mois.

Form proposé

Eyebrow + heading + lead

Studio d'intelligence opérationnelle

On installe l'opération qui s'occupe d'elle-même.

La couche entre vos outils, vos données et vos équipes pour que l'information circule toute seule.

07.5 · Forms avancés

Radio, checkbox, switch, slider — tokens-driven.

Les inputs natifs sont visuellement remplacés tout en gardant le clavier, le focus visible (focus-visible) et la sémantique aria. Aucun JS requis pour le state — c'est le navigateur qui gère.

.mc-radio
.mc-check
.mc-switch
.mc-slider
07.6 · Data

Table, badge, skeleton, avatar, empty state.

Les briques nécessaires pour bâtir un dashboard client ou une console interne. Tout reste dans la palette nuit — aucune couleur chaude introduite.

Table

Client Phase H/sem économisées Statut
Fenêtres Summum Orbit 14.2 Actif
MonSpray Liftoff 8.6 Onboarding
MaClim Discovery — En attente
Groupe Mercure Orbit 21.0 Actif

Badge

3 12 NEW OK ! 99+ DRAFT

Avatar

MD MD MD MD
MD FS MS MC

Skeleton

Empty / Error states

Aucun résultat

On n'a rien trouvé qui corresponde. Essayez un autre filtre ou élargissez les critères.

Effacer les filtres

Connexion CRM perdue

On n'arrive plus à atteindre HubSpot. La synchro reprend dès que la connexion revient.

Réessayer
07.7 · Overlays

Modal, drawer, toast, tooltip, popover.

Cliquez les triggers pour voir le live. Modal et drawer partagent un seul backdrop blur 8 + 62% noir (62% paper en mode clair). Esc ferme tout. Cliquez le backdrop pour fermer.

Modal

data-mc-modal-open="modal-id" · Esc · backdrop

Drawer

data-mc-drawer-open="drawer-id"

Toast

window.mcToast({title, lead, kind, duration})

Tooltip

.mc-tip + data-mc-tip="..." + data-mc-tip-pos="top|right|bottom|left"

Popover

Phase actuelle

Orbit · cycle 4 sur 12. Prochaine review : 2026-05-21. Synchros CRM stables depuis 11 jours.
Quick actions
.mc-popover-wrap + data-mc-popover-toggle · Esc · click outside
07.8 · Icons · Lucide whitelist

30 icônes curées. Stroke 1.6. Une seule librairie.

Sous-ensemble Mercure de Lucide (ISC license). Cliquez une icône pour copier son nom. Référence : <svg class="mc-icon"><use href="icons.svg#icon-mail"/></svg>

System

Arrows

Communication

People

Content

Status

Action

Domain · Mercure-spécifique

Theme

08 · Voice

Phrases courtes. Vouvoiement. Chiffres précis. Pas d'emoji.

À faire
  • « ~12 h/semaine dès le premier mois. »
  • « On revient vers vous sous 24 h ouvrables. »
  • « Réserver un Discovery » (pas "Get started")
  • « Une première lecture de votre opération »
  • « L'information circule toute seule »
À éviter
  • « Tu vas adorer ! 🚀 »
  • « Notre solution révolutionnaire »
  • « Booste ton business »
  • « Get a demo / Sign up free »
  • Tutoiement, exclamations, anglicismes en CamelCase

Lexique maison

Discovery Liftoff Orbit Lab / Studio Ops augmentée La couche Première lecture Circuler
09 · Roadmap

Ce qui est livré · ce qui manque.

Phase 1 — livré

Tokenisation

  • 95 tokens primitives + sémantiques
  • Export tokens.css + tokens.json
  • 9 composants : glass, btn, pill, eyebrow, h1-h3, lead, stat, field, nav
  • prefers-reduced-motion système
  • Cette page de référence
Phase 2 — livré

Extend

  • Light mode (theme swap via semantic layer + localStorage)
  • Forms avancés : radio, checkbox, switch, slider — tokens-driven
  • Overlays : modal, drawer, toast, tooltip CSS-only, popover
  • Data : table, badge (7 variantes), skeleton (4), avatar (group + status), empty/error
  • Whitelist Lucide — 30 icônes curées, sprite SVG <use href>
Phase 3 — livré

Document & ship

  • Stories page vanilla (17 stories, knobs, code panel, search) — stories.html
  • Build pipeline · node build-tokens.mjs → CSS, SCSS, JS ESM, Figma Tokens Studio, Android XML
  • CHANGELOG + convention semver + workflow de release
  • Playwright — 9 tests sur 2 projets (chromium-dark + chromium-light), auto-démarre le serveur
  • Floating UI vanilla (floating.js, ~150 lignes) — auto-flip + shift dans le viewport, branché sur les popovers
  • font-synthesis: weight pour combler Brockmann Regular/Bold en attendant la licence

v0.3.0 production-ready livrée. Système entièrement utilisable, documenté, testé et exportable. Reste post-0.3 : licence Brockmann Regular/Bold, snapshots visuels CI, publication NPM, composants additionnels (tabs, command palette, stepper). Tout est détaillé dans le CHANGELOG.md.