--- version: "0.2" name: DSMMG description: > 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. # ═══════════════════════════════════════════════════════════════════ # COULEURS — primitives → semantic → accent (user-themable) # ═══════════════════════════════════════════════════════════════════ colors: # — Neutrals (warm-cool mix : frais en light, neutre en dark) —————— neutral-0: "#FFFFFF" neutral-50: "#F7F6FB" neutral-100: "#F0EFF9" neutral-150: "#EDEDFA" neutral-200: "#E4E3F4" neutral-300: "#C9C7E0" neutral-400: "#AAA8C9" neutral-500: "#7875A1" neutral-600: "#56557A" neutral-700: "#3B3A56" neutral-800: "#1F1E32" neutral-900: "#111120" # — Synapse (rose corporate ManageMate, défaut accent) —————— synapse-50: "#FEF0F4" synapse-100: "#FCE0EA" synapse-200: "#FAD0DF" synapse-300: "#F4A0BD" synapse-400: "#ED608E" synapse-500: "#D12B6A" # ★ marque ManageMate synapse-600: "#BA245F" synapse-700: "#A82257" synapse-800: "#831B45" synapse-900: "#5A132F" # — Presets accent user (8 alternatives au synapse) —————— rose-500: "#E11D48" blue-500: "#2563EB" violet-500: "#7C3AED" green-500: "#0E9F6E" amber-500: "#D97706" red-500: "#DC2626" cyan-500: "#0891B2" slate-500: "#475569" # — Sémantique fixe (NE CHANGE JAMAIS avec l'accent user) —————— success: "#059669" warning: "#D97706" danger: "#DC2626" info: "#2563EB" # — Active accent (alias dynamique, par défaut synapse) —————— primary: "{colors.synapse-500}" secondary: "{colors.neutral-600}" tertiary: "{colors.neutral-300}" # ═══════════════════════════════════════════════════════════════════ # TYPOGRAPHIE — Figtree partout, 3 échelles selon contexte # ═══════════════════════════════════════════════════════════════════ typography: # — Display (landings produits — HRTime, Synapse, Forge, Orbit) —— display-2xl: fontFamily: Figtree fontSize: 72px fontWeight: 800 letterSpacing: "-0.035em" lineHeight: 1.0 display-xl: fontFamily: Figtree fontSize: 60px fontWeight: 800 letterSpacing: "-0.03em" lineHeight: 1.05 display-lg: fontFamily: Figtree fontSize: 48px fontWeight: 700 letterSpacing: "-0.025em" lineHeight: 1.1 display-md: fontFamily: Figtree fontSize: 36px fontWeight: 700 letterSpacing: "-0.02em" lineHeight: 1.15 # — Headlines (apps métier — h1 → h6 sémantiques) ———————— h1: fontFamily: Figtree fontSize: 36px fontWeight: 700 letterSpacing: "-0.02em" lineHeight: 1.2 h2: fontFamily: Figtree fontSize: 30px fontWeight: 700 letterSpacing: "-0.015em" lineHeight: 1.25 h3: fontFamily: Figtree fontSize: 24px fontWeight: 700 letterSpacing: "-0.01em" lineHeight: 1.3 h4: fontFamily: Figtree fontSize: 20px fontWeight: 600 letterSpacing: "-0.005em" lineHeight: 1.35 h5: fontFamily: Figtree fontSize: 17px fontWeight: 600 lineHeight: 1.4 h6: fontFamily: Figtree fontSize: 15px fontWeight: 600 lineHeight: 1.45 # — Body ———————————————————————————————————————— body-lg: fontFamily: Figtree fontSize: 17px lineHeight: 1.6 body: fontFamily: Figtree fontSize: 15px lineHeight: 1.55 body-sm: fontFamily: Figtree fontSize: 13px lineHeight: 1.5 body-xs: fontFamily: Figtree fontSize: 11px lineHeight: 1.45 # — Auxiliaires ———————————————————————————————— eyebrow: fontFamily: Figtree fontSize: 13px fontWeight: 600 letterSpacing: "0.06em" textTransform: uppercase lead: fontFamily: Figtree fontSize: 20px fontWeight: 400 letterSpacing: "-0.005em" lineHeight: 1.5 overline: fontFamily: Figtree fontSize: 11px fontWeight: 600 letterSpacing: "0.08em" textTransform: uppercase caption: fontFamily: Figtree fontSize: 11px lineHeight: 1.4 code: fontFamily: "JetBrains Mono" fontSize: 13px # ═══════════════════════════════════════════════════════════════════ # RAYONS — pill par défaut sur interactifs et conteneurs # ═══════════════════════════════════════════════════════════════════ rounded: none: 0 sm: 8px md: 12px card: 20px panel: 24px icon: 12px pill: 9999px # ═══════════════════════════════════════════════════════════════════ # ESPACEMENT — grille 4pt (multiples de 4 ou 8 exclusivement) # ═══════════════════════════════════════════════════════════════════ spacing: "0": 0 "1": 4px "2": 8px "3": 12px "4": 16px "5": 20px "6": 24px "7": 32px "8": 40px "9": 48px "10": 64px "11": 80px "12": 120px # ═══════════════════════════════════════════════════════════════════ # MOTION — animation = feedback fonctionnel, jamais décoratif # ═══════════════════════════════════════════════════════════════════ motion: duration: fast: 120ms # micro-interactions (hover, focus) base: 200ms # transitions UI standard slow: 320ms # navigation (modals, drawers) easing: default: "cubic-bezier(0.4, 0, 0.2, 1)" # matériel, doux emphasis: "cubic-bezier(0.2, 0.8, 0.2, 1)" # rebond léger # ═══════════════════════════════════════════════════════════════════ # DENSITÉ — 3 modes adaptables par préférence user # ═══════════════════════════════════════════════════════════════════ density: comfortable: rowHeight: 44px inputHeight: 40px paddingX: 16px paddingY: 12px cozy: rowHeight: 36px inputHeight: 36px paddingX: 12px paddingY: 8px compact: rowHeight: 28px inputHeight: 30px paddingX: 8px paddingY: 4px # ═══════════════════════════════════════════════════════════════════ # COMPOSANTS — extraits clé. Liste exhaustive : @managemate/react # ═══════════════════════════════════════════════════════════════════ components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.neutral-0}" typography: "{typography.body-sm}" fontWeight: 600 rounded: "{rounded.pill}" padding: "10px 22px" minHeight: 40px button-tonal: backgroundColor: "{colors.synapse-50}" textColor: "{colors.synapse-800}" typography: "{typography.body-sm}" fontWeight: 600 rounded: "{rounded.pill}" padding: "10px 22px" button-ghost: backgroundColor: transparent textColor: "{colors.neutral-700}" typography: "{typography.body-sm}" fontWeight: 600 card: backgroundColor: "{colors.neutral-0}" rounded: "{rounded.card}" padding: "{spacing.6}" borderColor: "{colors.neutral-200}" input: backgroundColor: "{colors.neutral-0}" textColor: "{colors.neutral-900}" borderColor: "{colors.neutral-200}" rounded: "{rounded.md}" padding: "10px 14px" minHeight: 40px badge: backgroundColor: "{colors.neutral-150}" textColor: "{colors.neutral-700}" typography: "{typography.body-xs}" fontWeight: 600 rounded: 6px padding: "2px 8px" toast: backgroundColor: "{colors.neutral-0}" borderColor: "{colors.neutral-200}" rounded: 14px padding: "14px 14px 14px 16px" tile: backgroundColor: "{colors.neutral-0}" borderColor: "{colors.neutral-200}" rounded: "{rounded.card}" padding: "{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=""]` sur ``. 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 `

` 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 `
`** au lieu de `