Portail CEFISI Studio UML & Gantt

PRESETS :

Importer

1. Vision, Principes & Identité

Métadonnées du projet, objectifs, principes directeurs et UX Writing.

Section 1/7

Métadonnées & Liens du Projet

Nom du Design System / Produit

Version (SemVer)

Date MàJ

Responsables (Lead Design & Lead Front-end)

Lien Figma / Penpot

Lien Storybook / Portail

Dépôt Git (Source of Truth W3C Tokens)

1.1 Objectifs & Périmètre Applicatif

Problème résolu & Vision

Utilisateurs cibles du DS

Périmètre (Web, Mobile, SaaS...)

1.2 Principes Directeurs (Piliers UX/UI)

1.3 Ton & Voix (UX Writing / Microcopy)

Personnalité de la marque

Conventions (Tutoiement/Vouvoiement, Casse)

Structure type d'un message d'erreur

2. Architecture des Couleurs & Thèmes

Palettes primitives (50-950) et tokens sémantiques Light / Dark Mode en direct.

Section 2/7

2.1 Convention de nommage des Tokens

Pattern de nommage CSS / W3C

2.2 Couleurs Primitives & Générateur d'Échelles (Tier 1)

Primaire (Brand 600)

Secondaire / Accent

Neutre (Gris / Slate)

Échelle Primitive Primaire (50 → 900) Cliquer pour copier le HEX

Échelle Primitive Secondaire / Accent (50 → 900) Tier 1 W3C

2.3 Tokens Sémantiques (Light & Dark Mode)

Modifiez les couleurs pour voir l'impact à droite

Token	Rôle / Usage	Light Mode	Dark Mode

3. Typographie & Hiérarchie

Familles de polices, explorateur Google Fonts CDN, polices personnalisées et échelle modulaire.

Section 3/7

3.1 Familles de Polices Actives & Ratio Modulaire

Police des Titres (Heading)

Police de Corps (Body UI)

Police Monospace (Code)

Taille de base (px)

Ratio Modulaire

3.2 Explorateur Google Fonts & Polices Typographiques

60+ polices CDN

Testez le rendu en direct et appliquez en 1 clic aux Titres, au Corps ou au Code. Importation automatique via Google CDN.

Catégories :

Texte d'aperçu :

3.3 Échelle Typographique Complète

Token	Taille (rem)	Line-Height	Graisse	Usage

4. Espacements, Rayons, Élévation & Motion

Grille atomique, border-radius, box-shadows, Z-index et courbes d'animation.

Section 4/7

4.1 Grille Atomique & Rayons de Bordure (Border Radius)

Unité d'espacement de base 4px

Génère l'échelle : 1x, 2x, 3x, 4x, 6x, 8x, 12x, 16x

Radius SM (Inputs / Badges) 6px

Radius MD (Boutons / Cartes) 8px

Radius LG (Modales / Panneaux) 12px

4.2 Ombres & Profondeur (Box-Shadow)

shadow-xs (Cartes au repos)

shadow-md (Dropdowns, Popovers)

shadow-lg (Modales, Drawers)

4.3 Mouvement (Motion) & Iconographie

Transition Rapide

Transition Standard

Courbe d'Easing

Librairie d'icônes vectorielles

Épaisseur du trait (Stroke)

Règle Reduced Motion

Composant actif :

Catégorie @ui/button

Button

Spécification technique, tokens locaux, états et API Props.

Statut d'avancement

1. Tokens Fondamentaux & Géométrie

Ajustez en temps réel les dimensions, la typographie et le comportement tactile.

1.1 Espacements & Dimensions

Padding X (px) 16px

Padding Y (py) 8px

Gap Interne 8px

Hauteur min. 38px

1.2 Forme & Typographie

Rayon (border-radius)

Épaisseur bordure

Taille police (px)

Graisse (font-weight)

1.3 Ombres Portées & Micro-Interactions

Ombre portée (box-shadow)

Transition & Timing

Espacement lettres

Casse (text-transform)

2. Propriétés CSS Personnalisées & Pseudo-Classes

Définissez librement n'importe quelle règle CSS (ex: box-shadow, transform, border-color, cursor). Utilisez l'icône œil pour tester l'impact en direct sans supprimer vos règles.

Actif	Propriété CSS	Valeur CSS	Pseudo-classe / État	Validation

2. Documentation & Règles d'Usage (Do / Don't)

Description fonctionnelle du composant

✓ Quand l'utiliser (DO)

✕ Quand ne PAS l'utiliser (DON'T)

3. Anatomie & Structure Interne

4. API & Table des Propriétés (Props)

Prop	Type	Défaut	Requis	Description

5. Matrice des 8 États & Accessibilité (ARIA / Clavier)

Cochez les états pris en charge

Rôle & Attributs ARIA

Interactions Clavier obligatoires

⚡ Focus Composant Actif

Button

À faire

Simuler l'état :

Tokens locaux appliqués CSS Vars

✓ Quand l'utiliser (DO) :

✕ À éviter (DON'T) :

Accessibilité & Clavier :

● Design System Live v1.0.0

Nom du Design System

Actions & Boutons

Cliquez sur un composant ou sur « Configurer » pour modifier ses propriétés

Formulaires & Champs de Saisie

TextInput, Select, validation d'erreur, Switch et Checkbox

Adresse e-mail professionnelle

Utilisé pour les notifications de release SemVer.

Environnement de déploiement

Clé d'API Tokens Studio (État d'erreur)

Format de clé invalide — Vérifiez que le jeton commence par "ds_live_".

Activer le Focus Trap automatique Mode haute densité (Compact) WCAG 2.2 AA WCAG 2.2 AAA

Retours Système (Alerts & Badges)

● Stable (Éditer Badge) ▲ Beta Review ✕ Deprecated ℹ WCAG 2.2 AA

✓ Publication du package réussie

Les variables CSS et le thème Tailwind ont été mis à jour.

⚠ Migration requise avant la v2.0

Remplacez l'ancien token color-grey-100 par bg-elevated.

Carte & État Skeleton

DS

Architecture Multi-Marques

Synchronisé il y a 3 minutes

Cette carte utilise le token bg-elevated, le rayon radius-lg et l'ombre shadow-md.

Aperçu Skeleton (Chargement asynchrone)

DataTable — Inventaire des Packages UI

Police tabulaire (tabular-nums) et bordures subtiles

3 packages actifs

Package	Version	Couverture A11y	Bundle (gzip)
@ds/tokens	1.2.0	● 100% WCAG AA	1.8 kB
@ds/primitives-react	1.2.0	● Focus & ARIA OK	14.2 kB
@ds/icons	1.0.4	● Tree-shakeable	3.4 kB