Galerie du Design System

/dev/ui — Phase 2
← AccueilTester le Canvas →

Barre d'outils

Note texte
Image
Lien web
Liste de tâches
Colonne Kanban
Sous-board
Flèche de liaison

1. Palette des 9 couleurs de bandeaux

Couleurs désaturées appliquées en bandeau haut de 4px sur les cartes.

Red#ef4444
Orange#f97316
Yellow#f59e0b
Lime#84cc16
Green#10b981
Cyan#06b6d4
Indigo#6366f1
Purple#a855f7
Pink#ec4899

2. Cartes Note (États & Variantes)

Ombre douce par défaut, accentuée au survol, rayon strict 4px, bandeau haut.

État Normal (Indigo)

Idée de cadrage

Privilégier la sobriété : le contenu prime sur l'interface.

État Survol simulé (Lime)

Micro-interaction

L'ombre se diffuse et la carte s'élève de 1px.

État Sélectionné (Orange)

Sélection active

Liseré fin bleu accentuant le contour sans déplacer le layout.

État Soulèvement / Drag (Pink)

Déplacement en cours

Ombre large et profonde, légère échelle (1.02).

Note neutre (Sans couleur)

Note blanche épurée

Le papier pur ressort sur le fond teinté du studio.

3. Cartes Image, Lien et Todo

Composants visuels structurés respectant les mêmes tokens d'ombres et de rayons.

Carte Image avec légende
Image

Studio de création — lumière naturelle

Carte Lien (Open Graph)
Vue Flow — Highly Customizable Vue 3 Flow
vueflow.dev

Vue Flow — Highly Customizable Vue 3 Flow

Interactive node-based UIs and diagrams with real Vue components in the DOM.

Checklist de tâches

Checklist Phase 2

  • Extraire les tokens à la pipette
  • Valider les rayons stricts (3-4px)
  • Tester les ombres portées douces
  • Vérifier la transition à 150ms
+ Ajouter une tâche

4. Colonne Kanban & Insertion

Conteneur vertical empilant les cartes, avec indicateur visuel bleu d'insertion.

Colonne standard (2 cartes empilées)

En cours

2

Architecture Drizzle

9 tables synchronisées

Better-Auth sessions

Sécurité vérifiée côté serveur

Survol avec Ligne d'insertion (Drag)

À faire

1

Glisser une nouvelle carte ici

La ligne bleue indique l'endroit exact d'insertion.