Design system — Catalyst — Base

Socle neutre et non thématisé : 48 modules, 10 familles. Catalyst n’a pas de tokens propres, il consomme le thème Tailwind v4. Le rebranding tient dans un seul fichier : src/styles/theme.css.

Règle d’agnosticisme

Ce socle sert des clients de tous secteurs. Aucun composant ne porte de vocabulaire métier — ni dans son nom, ni dans ses props, ni dans ses libellés par défaut. Le spécifique va dans la couche produit.

Couleur

Palette Tailwind par défaut. Button accepte 24 valeurs de color, Badge18. On garde le nom de la teinte dans le markup et on change ce qu’elle signifie dans le thème.

redorangeamberlimeemeraldcyanblueindigovioletpinkzinc

Typographie

Inter avec font-feature-settings: ‘cv11’ — la variante à « a » et « g » simple étage.

Titre de page — text-2xl/8

Sous-titre — text-base/7

Corps de texte — text-base/6, sm:text-sm/6

Mention secondaire — text-xs/5

Espacement et rayons

Échelle 4 px : --spacing(n) = n × 4 px. Séparation par anneaux translucides (ring-zinc-950/10), jamais de traits opaques.

4px

8px

12px

16px

24px

32px

48px

sm · 2px

md · 6px

lg · 8px

xl · 12px

full · 9999px

États

Les états sont pilotés par Headless UI via data-hover, data-focus, data-active, data-disabled et data-invalid — jamais par :hover CSS.

Champ au repos

Champ en erreur

Adresse e-mail incomplète.

Champ désactivé

Retours utilisateur

Enregistré

Les modifications sont en ligne.

Quota atteint

Supprimez des fichiers pour continuer à déposer.

Export lancé

Vous recevrez un e-mail à la fin du traitement.

Envoi en cours62 %

Indexation

Aucun document

Déposez un premier fichier pour le retrouver ici.

Une erreur est survenue

Le service de documents n’a pas répondu.

Familles

Famille	Modules	Origine
actions	Button, Link, Dropdown	Catalyst
forms	Input, Textarea, Select, Checkbox, Radio, Switch, Combobox, Listbox, Fieldset, DatePicker, DateRangePicker, TimePicker, TimeSlotPicker, CounterInput, ColorField, AddressField	Catalyst + ajouts
forms/creation	CreationForm, CreationSection, CreationField	Remonté du prototype LYNÉO
forms/edition	EditableSection, AutoField, ReadOnlyField, EmptyValue, UndoBar, useAutoSave	Remonté du prototype LYNÉO
forms/règles	autofill (remplissage automatique), validation (e-mail, téléphone)	Remonté du prototype LYNÉO
layout	SidebarLayout, StackedLayout, AuthLayout, Sidebar, Navbar, Divider, Card, Tabs, Breadcrumb	Catalyst + ajouts
data	Table, DescriptionList, Pagination, Badge, Avatar	Catalyst
overlays	Dialog, Alert, ProfileDialog, OnboardingDialog, Tooltip, Lightbox	Catalyst + ajouts
typography	Heading, Text	Catalyst
feedback	Banner, EmptyState, ErrorState, ProgressBar, Skeleton, Stepper, Toast	Ajouté après audit
pickers	FilePickerDialog, VideoPickerDialog, ImagePickerField, SearchDialog	Ajouté après audit
dataviz	Chart, StatTile	Ajouté après audit
backoffice	ListPageHeader, ListPageToolbar, ListPageFilterMenu, ListPageActiveFilters, BulkActionBar, BulkAction, ListRow, ListPagination, SortableHeader, SortableColumn, useTableSort, ColumnPicker, RowActions, ViewToggle, SelectionCell, SelectAllCell, useListSelection	Ajouté après audit, complété par LYNÉO
prototypage	NoteContexte, NotesContexte	Remonté du prototype LYNÉO

Où aller ensuite

Page de liste

Recherche, filtres, sélection, actions groupées.

Voir /clients

Création en étapes

Stepper, fieldsets, pickers de date et de couleur.

Voir /clients/nouveau

Formulaire long

Switch, listbox, heures, image, dialogue de profil.

Voir /parametres