ManageMate-Group/DSMMG
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
DSMMG/DESIGN.md
T
Dinawo 62317f2ad7
Release / Release / open changeset PR (push) Has been cancelled
Details
CI / Build, typecheck, test, a11y (push) Has been cancelled
Details
chore: initial DSMMG v0.2 — refonte architecturale complète 
Mise en place du Design System ManageMate Group v0.2 — refonte du
système de tokens (préfixe --mmg-color-*), 9 presets accent
user-themable validés WCAG AA, overlays Radix UI + Floating UI,
Storybook 8 + Vitest + axe-core en CI, doc Astro Starlight,
DESIGN.md (format google-labs-code) et exports tokens DTCG/CSS/
TS/Figma/Tailwind v3 et v4.

- 4 packages monorepo pnpm : @managemate/{tokens,css,react,icons}
- 62 composants React headless-first (Sheet, HoverCard, ContextMenu,
  Slider, ToggleGroup, AvatarGroup, UserCard, ProfileHeader,
  MetricCard, PricingCard, FeatureCard, Text/Display/Eyebrow/Lead…)
- Lint contraste WCAG : 37/37 paires AA, branché CI
- Toast pile Sonner-style avec ResizeObserver
- Theming user (9 presets) sans casser sémantique fixe
- Identité Synapse (rose #D12B6A) préservée

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-04 22:08:38 +02:00

18 KiB
Raw Permalink Blame History

version, name, description, colors, typography, rounded, spacing, motion, density, components
version name description colors typography rounded spacing motion density components
0.2 DSMMG Design System ManageMate Group — référence pour Synapse, HRTime, Forge, Orbit, MSLM, Espace-Client et sites publics. Headless-first sur Radix UI, RGAA 4.1 / WCAG 2.2 AA, theming utilisateur via 9 presets accent.
neutral-0 neutral-50 neutral-100 neutral-150 neutral-200 neutral-300 neutral-400 neutral-500 neutral-600 neutral-700 neutral-800 neutral-900 synapse-50 synapse-100 synapse-200 synapse-300 synapse-400 synapse-500 synapse-600 synapse-700 synapse-800 synapse-900 rose-500 blue-500 violet-500 green-500 amber-500 red-500 cyan-500 slate-500 success warning danger info primary secondary tertiary
#FFFFFF #F7F6FB #F0EFF9 #EDEDFA #E4E3F4 #C9C7E0 #AAA8C9 #7875A1 #56557A #3B3A56 #1F1E32 #111120 #FEF0F4 #FCE0EA #FAD0DF #F4A0BD #ED608E #D12B6A #BA245F #A82257 #831B45 #5A132F #E11D48 #2563EB #7C3AED #0E9F6E #D97706 #DC2626 #0891B2 #475569 #059669 #D97706 #DC2626 #2563EB {colors.synapse-500} {colors.neutral-600} {colors.neutral-300}
display-2xl display-xl display-lg display-md h1 h2 h3 h4 h5 h6 body-lg body body-sm body-xs eyebrow lead overline caption code
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 72px 800 -0.035em 1.0
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 60px 800 -0.03em 1.05
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 48px 700 -0.025em 1.1
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 36px 700 -0.02em 1.15
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 36px 700 -0.02em 1.2
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 30px 700 -0.015em 1.25
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 24px 700 -0.01em 1.3
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 20px 600 -0.005em 1.35
fontFamily fontSize fontWeight lineHeight
Figtree 17px 600 1.4
fontFamily fontSize fontWeight lineHeight
Figtree 15px 600 1.45
fontFamily fontSize lineHeight
Figtree 17px 1.6
fontFamily fontSize lineHeight
Figtree 15px 1.55
fontFamily fontSize lineHeight
Figtree 13px 1.5
fontFamily fontSize lineHeight
Figtree 11px 1.45
fontFamily fontSize fontWeight letterSpacing textTransform
Figtree 13px 600 0.06em uppercase
fontFamily fontSize fontWeight letterSpacing lineHeight
Figtree 20px 400 -0.005em 1.5
fontFamily fontSize fontWeight letterSpacing textTransform
Figtree 11px 600 0.08em uppercase
fontFamily fontSize lineHeight
Figtree 11px 1.4
fontFamily fontSize
JetBrains Mono 13px
none sm md card panel icon pill
0 8px 12px 20px 24px 12px 9999px
0 1 2 3 4 5 6 7 8 9 10 11 12
0 4px 8px 12px 16px 20px 24px 32px 40px 48px 64px 80px 120px
duration easing
fast base slow
120ms 200ms 320ms
default emphasis
cubic-bezier(0.4, 0, 0.2, 1) cubic-bezier(0.2, 0.8, 0.2, 1)
comfortable cozy compact
rowHeight inputHeight paddingX paddingY
44px 40px 16px 12px
rowHeight inputHeight paddingX paddingY
36px 36px 12px 8px
rowHeight inputHeight paddingX paddingY
28px 30px 8px 4px
button-primary button-tonal button-ghost card input badge toast tile
backgroundColor textColor typography fontWeight rounded padding minHeight
{colors.primary} {colors.neutral-0} {typography.body-sm} 600 {rounded.pill} 10px 22px 40px
backgroundColor textColor typography fontWeight rounded padding
{colors.synapse-50} {colors.synapse-800} {typography.body-sm} 600 {rounded.pill} 10px 22px
backgroundColor textColor typography fontWeight
transparent {colors.neutral-700} {typography.body-sm} 600
backgroundColor rounded padding borderColor
{colors.neutral-0} {rounded.card} {spacing.6} {colors.neutral-200}
backgroundColor textColor borderColor rounded padding minHeight
{colors.neutral-0} {colors.neutral-900} {colors.neutral-200} {rounded.md} 10px 14px 40px
backgroundColor textColor typography fontWeight rounded padding
{colors.neutral-150} {colors.neutral-700} {typography.body-xs} 600 6px 2px 8px
backgroundColor borderColor rounded padding
{colors.neutral-0} {colors.neutral-200} 14px 14px 14px 14px 16px
backgroundColor borderColor rounded padding
{colors.neutral-0} {colors.neutral-200} {rounded.card} {spacing.6}

DSMMG — Design System ManageMate Group

Version 0.2 · La source de vérité visuelle, comportementale et accessible pour les produits ManageMate (Synapse, HRTime, Forge, Orbit, MSLM, Espace-Client, sites publics).

Overview

Le DSMMG est un design system headless-first construit sur Radix UI. Trois mots :

  • Cohérence — un bouton dans n'importe quel produit ManageMate a la même structure et la même couleur de base. La différenciation se fait par contenu, pas par couleur.
  • Accessibilité — RGAA 4.1 / WCAG 2.2 AA non-négociable. Validé axe-core en CI. Plusieurs clients (collectivités, opérateurs publics) sont soumis au RGAA par la loi.
  • Theming utilisateur — 9 presets accent (rose Synapse par défaut), chaque utilisateur choisit dans ses préférences. La sémantique (success/danger/warning/info) reste fixe.

Colors

Trois couches verticales :

primitives  →  semantic  →  accent (user-themable)
  1. Primitives — rampes brutes (neutral-0..900, synapse-50..900, et 8 presets). Ne JAMAIS référencer directement dans les composants.
  2. Sémantiques — bg-page, text-primary, border, success/warning/danger/info. Stables, ne changent pas avec l'accent user.
  3. Accent — --mmg-color-accent-*. Posé par [data-mmg-accent="<preset>"] sur <html>. SEUL token couleur user-themable.

Presets accent disponibles

synapse (défaut), rose, blue, violet, green, amber, red, cyan, slate.

Chaque preset a sa version dark adaptée (saturation -2pts, luminosité +3pts) pour confort visuel.

Règle absolue

  • ❌ Aucun hex en dur dans les composants.
  • ❌ Jamais de --mmg-color-synapse-* direct dans un composant — toujours via --mmg-color-accent-*.

Typography

Figtree partout (Google Fonts, sans-serif géométrique). 3 échelles selon contexte :

Famille Cas d'usage Tailles
Display Hero des landings produits (HRTime, Synapse…) 36px → 72px
Headlines Apps métier (h1-h6 sémantiques) 15px → 36px
Body Texte courant et UI 11px → 17px
Auxiliaires eyebrow, lead, overline, caption 11px → 20px

Modificateurs : mono, tabular, balance (titres), pretty (body), italic, emphasis (italique + accent), highlight, underline, strike, gradient, rainbow.

Choisir le tag (as) selon la SÉMANTIQUE, pas selon la taille. Un titre de page reste <h1> même si visuellement il s'affiche en display-xl.

Layout & Spacing

Grille 4 points stricte. Multiples de 4 ou 8 uniquement. Aucune valeur intermédiaire (10, 14, 22) qui casse l'alignement vertical.

12 niveaux : 0 (0) → 12 (120px).

Densité adaptable par utilisateur via [data-mmg-density="comfortable|cozy|compact"]. Touch target minimum 44×44 quel que soit le mode (WCAG SC 2.5.5).

Elevation & Depth

Light mode :

  • shadow-1 — 0 1px 4px ink + 1px ring
  • shadow-2 — 0 4px 16px ink + 1px ring
  • shadow-3 — 0 12px 32px ink (modals, dropdowns)
  • shadow-elevated — neutre, pour boutons elevated

Dark mode :

  • Ombres = noir + halo blanc subtil 4-6 % (jamais "noir s'évapore")
  • backdrop-filter blur 12-14px sur overlays/popovers/toasts pour effet verre dépoli

Ombres teintées accent via color-mix(in srgb, var(--mmg-color-accent) X%, transparent) — s'adaptent automatiquement au preset user.

Shapes

Pill par défaut sur interactifs (buttons, inputs, badges-pills) et conteneurs principaux (Tile, Card, Hero).

Token Valeur Usage
rounded-sm 8px inputs, badges-discrets
rounded-md 12px cards compact, popover, menu
rounded-card 20px cards principales, tiles
rounded-panel 24px modals, sheets
rounded-pill 9999px boutons, badges-pills

Motion

Animation = feedback fonctionnel, jamais décoratif. Trois durées :

  • 120ms — micro-interactions (hover, focus, ripple)
  • 200ms — transitions UI standard
  • 320ms — navigation (modals, drawers, sheets)

prefers-reduced-motion: reduce désactive tout (durée 0.001ms). WCAG SC 2.3.3 AAA.

Components

Catalogue complet (~62 composants) dans @managemate/react. Les principaux :

Forms : Button, Input, Textarea, Select, Combobox, Checkbox, Radio, Switch, Slider, ToggleGroup, FileUpload.

Layout : Container, Section, Stack, Inline, Card, Tile, Hero.

Feedback : Alert, Notice, Banner, Badge (avec dot indicator + pulse), Spinner, Skeleton, Toast (pile Sonner-style empilable).

Overlays : Tooltip, Popover, Menu, Dialog, ConfirmDialog, Sheet (4 sides × 5 sizes), Drawer, HoverCard, ContextMenu — tous Radix-backed.

Navigation : Header (mega-menu DSFR-style), Footer, Breadcrumb, Tabs, Pagination, AppShell, Sidebar, Topbar, SkipLink.

Profile & Cards : Avatar (status indicator + auto-color), AvatarGroup, UserCard, ProfileHeader (cover + débord), MetricCard (KPI avec trend), PricingCard, FeatureCard, Stat.

Article : ArticlePage, ArticleHeader, ArticleAside, ArticleFooter, ArticleCallout, ArticleTOC.

Theming : ThemePicker (radiogroup avec navigation flèches/Home/End).

Do's and Don'ts

✅ Do

  • Utiliser les tokens sémantiques (--mmg-color-text-primary, --mmg-color-bg-surface).
  • Choisir le tag HTML selon la sémantique, pas selon la taille visuelle.
  • Tester en clavier : Tab, Shift+Tab, Esc, flèches, Enter, Espace.
  • Tester en zoom 200 % et reflow 320px.
  • Tester avec prefers-reduced-motion: reduce activé.
  • Préférer les composants Radix-backed (Tooltip, Menu, Dialog…) aux implémentations custom.
  • Documenter le composant dans Storybook + MDX avant de le livrer.

❌ Don't

  • Aucun hex en dur dans les composants.
  • Aucune référence directe à --mmg-color-synapse-* — toujours via --mmg-color-accent-*.
  • Pas de couleur seule porteuse d'info (RGAA 9). Toujours redonder avec icône, texte ou pattern.
  • Pas de placeholder en remplacement de label (RGAA 11.1).
  • Pas de focus invisible ni outline: none sans alternative.
  • Pas de <div onClick> au lieu de <button>.
  • Pas d'animation sans prefers-reduced-motion.
  • Pas de composant sans navigation clavier complète.
  • Pas de composant sans test axe-core.
  • Pas de fichier monolithique > 300 lignes mélangeant N composants.

Accessibilité (engagement)

  • RGAA 4.1 / WCAG 2.2 AA ≥ 95 %, validé axe-core en CI.
  • Sanctions légales : jusqu'à 50 000 € par service en ligne non conforme (loi 2005-102 + décret 2019-768).
  • Couverture handicaps : visuels (cécité, malvoyance, daltonisme 8 % des hommes), auditifs, moteurs (paralysie, tremblements, bras cassé), cognitifs (dyslexie, TDAH, autisme, fatigue, langue non maternelle), temporaires/situationnels (soleil, mauvaise connexion, vieux device).

Tests automatisés

  • axe-core 4.10 (vitest-axe) — chaque composant interactif.
  • Couverture : wcag2a + wcag2aa + wcag21a + wcag21aa + best-practice.
  • Threshold CI : 60 % ligne / branche / function / statement (à monter à 80 % v0.3).

Tests manuels recommandés

  • NVDA (Windows), VoiceOver (macOS/iOS).
  • Clavier 100 % (souris débranchée).
  • Zoom 200 % + reflow 320px.
  • prefers-reduced-motion, prefers-contrast: more, forced-colors: active.

Distribution

Monorepo pnpm avec 4 packages :

Package Rôle
@managemate/tokens Source DTCG W3C des tokens. Génère CSS, JS/TS, Figma, Tailwind v3, Tailwind v4.
@managemate/css CSS vanilla — tokens, base, composants, utilitaires @layer.
@managemate/icons 96 icônes (line + fill) Remix Icon, subset par icône possible.
@managemate/react Composants React typés, headless-first sur Radix UI, tree-shakable (sideEffects: false).

Versioning : SemVer strict. Packages fixed (même version) pour éviter les incompatibilités cross-package. Changesets sur main → release auto.

Ce fichier est lisible par des agents IA via le format google-labs-code/design.md. Front matter YAML = tokens normatifs, corps Markdown = contexte d'application.

Reference in New Issue View Git Blame Copy Permalink