Design system

Pulse ERP repose sur un design system sobre et dense conçu pour des usages mixtes : technicien SAV en magasin sous néon, commercial sur tablette en clientèle, ADV sur triple écran. La même grammaire visuelle traverse tous les portails ; seul un accent de couleur identifie l'espace de l'utilisateur.

Principes fondateurs

• Lisibilité d'abord — contrastes nets, jamais de décoration pour la décoration.
• Densité maîtrisée — tables compactes mais zones cliquables ≥ 44 × 44 px sur mobile.
• Cohérence multi-portail — même grammaire, accent de couleur différent par portail.
• Composants Nuxt UI 4 par défaut — aucun composant ré-implémenté si un équivalent stock existe.
• Accessibilité WCAG 2.2 AA non négociable — testée en CI via axe-core.
• Mobile-first pour les rôles terrain (commercial, technicien, logisticien) ; desktop-friendly pour les rôles bureau.

Tokens couleur

Palette de marque

@theme {
  /* Pulse — couleur primaire (logo, CTA) */
  --color-pulse-500: #06b6d4;   /* base — cyan teal */
  --color-pulse-600: #0891b2;   /* hover */
  --color-pulse-700: #0e7490;   /* active */

  /* Atmo — couleur secondaire (admin, accents techniques) */
  --color-atmo-500: #6366f1;    /* indigo */
  --color-atmo-600: #4f46e5;
  --color-atmo-700: #4338ca;

  /* Neutral — gris froids (stone alias) */
  --color-neutral-50:  #fafaf9;
  --color-neutral-500: #78716c;
  --color-neutral-900: #1c1917;
}

Couleurs sémantiques

@theme {
  --color-success: #16a34a;   /* green-600 */
  --color-warning: #d97706;   /* amber-600 */
  --color-danger:  #dc2626;   /* red-600 */
  --color-info:    #2563eb;   /* blue-600 */
}

Couleurs métier (statuts)

Thèmes de portail

Chaque portail partage la même grammaire mais s'identifie par un bandeau d'accent de 4 px en haut de la topbar et un label visible.

Typographie

@theme {
  --font-family-sans: 'Inter Variable', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
}

Graisses autorisées : font-normal (400), font-medium (500), font-semibold (600), font-bold (700). font-light est banni (illisible sous-pixel).

Espacements & rayons

Échelle Tailwind 4 (rem × 4 = px) stricte, pas de valeurs custom.

Espacements clés : px-4 py-2 (bouton primaire), px-3 py-2 / px-4 py-3 (cellule table desktop/mobile), gap-y-6 à gap-y-8 (sections), p-4 à p-6 (cards).

Ombres sobres : shadow-xs (survol), shadow-sm (card flottante), shadow-md (dropdown), shadow-lg (modal).

Composants Nuxt UI 4

Tous les composants interactifs passent par Nuxt UI 4. Aucun composant ré-implémenté si un équivalent stock existe. Les wrappers partagés vivent sous app/components/shared/.

Conventions composants partagés

• <script setup lang="ts"> exclusivement.
• Props et émissions typées strict : defineProps<T>() / defineEmits<{ ... }>().
• Pas de <style scoped> — Tailwind. Variantes complexes via cva.
• Aucune logique métier dans les composants : toujours un composable.
• Slots nommés explicitement (#empty, #header, #actions).

Iconographie

Source : Iconify via @nuxt/icon. Collections privilégiées : lucide (sobre, ligne, cohérent) et tabler. mdi (Material Design Icons, héritage Quasar) est banni.

Tailles : size-4 (table), size-5 (bouton), size-6 (header), size-8 (état vide).

Accessibilité (WCAG 2.2 AA)

Règles techniques

• Tous les inputs ont un <label> associé (for=) ou un aria-label.
• Tous les boutons icône ont un aria-label.
• La couleur ne véhicule jamais une info seule — toujours doublée par icône ou texte.
• Ratios de contraste : ≥ 4,5:1 (texte normal), ≥ 3:1 (texte large, UI).
• Focus visible : ring pulse-500 2 px, non supprimable via CSS.
• Skip link <a href="#main">Aller au contenu</a> en début de page.
• <h1> unique par page, hiérarchie cohérente.
• Pas de tabindex > 0, pas d'auto-play vidéo/audio.
• Cibles tactiles min 44 × 44 px, espacement min 8 px entre cibles.

Tests

Playwright + @axe-core/playwright sur chaque page principale (CI bloquante). Audit manuel trimestriel par un consultant a11y.

Mode sombre

Activé via @nuxt/color-mode, défaut system.

@variant dark {
  --color-pulse-500: #22d3ee;   /* plus clair en dark pour contraste */
  --color-neutral-50: #0c0a09;  /* inversion */
  --color-neutral-100: #1c1917;
  /* etc. */
}

• Pas de blanc pur (#fff) en surface dark — utiliser neutral-50 ou plus foncé.
• Images sombres → variante claire en dark (ou bordure pour les distinguer du fond).
• Charts : palette dédiée dark, plus saturée pour le contraste.

Responsive & layouts

Breakpoints Tailwind 4 standard : sm 640 px, md 768 px, lg 1024 px, xl 1280 px, 2xl 1536 px.

Sidebar : visible lg:+, drawer lg:max-. Modal : centrée desktop, fullscreen mobile.