Design system

Construire unbackoffice qui pousse.

Fondations et composants pour l’interface PotaCoach. Palette potager & jardin, cohérente, accessible et prête pour la production.

TailwindRadix UICVA

Installation

tailwind.config — couleurs primaires

theme: {
  extend: {
    colors: {
      primary: {
        DEFAULT: 'hsl(var(--color-primary))',
        50: '#ecfdf5',
        // ... scale emerald
      }
    }
  }
}

Vue d’ensemble

Composants réutilisables pour rester cohérent, accessible et rapide à maintenir.

Button

Card

Input

Actif

Badge

Info

Alert

Couleurs

Scale sémantique et tokens. Primary = emerald (potager, croissance).

Scale Emerald (primary)

50 → 950

100

200

300

400

500

600

700

800

950

Tokens sémantiques

Token	Tailwind	Hex	Usage
primary	emerald-600	#059669	CTA, liens principaux
secondary	teal-600	#0d9488	Actions secondaires
accent	lime-400	#a3e635	Highlights
success	green-500	#22c55e	Validation, succès
warning	amber-400	#fbbf24	Attention
destructive	red-500	#ef4444	Suppression, erreur

Typographie

Hiérarchie claire : titres, corps, labels, muted.

text-3xl font-bold

Titre page

Mon potager

text-xl font-semibold

Titre de section

text-base

Body

Texte de corps pour le backoffice. Lisible et sobre.

text-sm text-stone-500

Muted

Description secondaire ou hint.

text-sm font-medium

Label

Label de champ

Espacements & rayons

Grille 4px. Utiliser p-*, gap-*, m-* et rounded-* de façon cohérente.

Espacements (4px base)

0, 1, 2, 3, 4, 6, 8, 10, 12, 16, 20, 24

Rayons (rounded-*)

none → full

Boutons

Actions principales (primary), secondaires (outline/ghost), destructives (destructive).

Quand l’utiliser

Une seule action principale par zone. Primary pour le CTA, outline pour annuler ou alternative.

À éviter

Plusieurs boutons primary côte à côte. Texte trop long dans le bouton. Icône sans label pour les actions importantes.

Button — usage

<Button className="bg-emerald-600 hover:bg-emerald-700">Enregistrer</Button>
<Button variant="outline">Annuler</Button>

Cartes

Regrouper du contenu : stats, listes, formulaires. Variante accent pour conseils / focus.

Actif

Carte standard

Header, contenu, footer avec actions.

Contenu principal.

Carte accent

Conseils, rappels, succès.

Arrose le matin. Paille les tomates.

Tâches

Rappels

En attente

Formulaires

Label au-dessus, hint en dessous. Focus visible via tokens `ring`.

Badges & états

Statuts (pills) et tags (plein / outline) pour listes et filtres.

ActifNeutreEn attenteErreur Info

TomatesCourgettes

Alertes & feedback

Conseil (emerald), attention (amber), erreur (red). Icône + titre + description.

Conseil du jour

Arrose le matin.

Attention

Vérifier l’arrosage.

Erreur

Impossible de sauvegarder.

Guidelines

Principes pour garder le backoffice cohérent.

À faire

· Une action primary par zone (formulaire, modal).

· Labels explicites sur les champs.

· Feedback immédiat (loading, succès, erreur).

· Hiérarchie visuelle claire (titres, corps, muted).

À éviter

· Plusieurs CTA primary en concurrence.

· Couleurs hors palette (sauf cas exceptionnel).

· Boutons ou liens sans état hover/focus.

· Texte trop long dans les boutons.

Accessibilité

Focus visible, contraste, clavier. Composants basés sur Radix (ARIA).

Focus visible

ring-2 ring-emerald-500 ring-offset-2 sur les contrôles. Ne pas supprimer outline sans équivalent.

Contraste

Texte sur fond clair : stone-700 minimum. Primary sur blanc : emerald-600 OK (contraste AA).

Clavier

Navigation complète au clavier. Radix gère focus trap dans modales/dropdowns.

Screen readers

Labels associés aux inputs. Boutons avec aria-label si icône seule.

Animation

Transitions courtes pour hover/focus. Pas d’animation distrayante.

Usage	Duration	Tailwind
Hover / focus	150ms	duration-150
Ouverture modal / dropdown	200ms	duration-200
Toast / notification	300ms	duration-300

Easing : default (ease) ou ease-out pour les entrées.

Exemple layout

Structure type backoffice : sidebar + zone de contenu avec cartes.

App

Dashboard

Calendrier

Paramètres