Source de vérité
Venacity Design System
Tous les composants, variables et animations partagés dans l'écosystème VNCT. Showroom interactif — toggle dark / light, rejoue les animations, change l'accent (rose, cyan, etc.) pour voir le système réagir en direct.
v1.0.3Démarrage
Utilisation
Charge le CSS et le JS depuis l'URL publique dans le <head> de chaque service VNCT. Le paramètre ?v= correspond à la version du design system (ce repo), pas du service consommateur.
<link rel="stylesheet" href="https://design.vena.city/vnct-design-system.css?v=1.0.3">
<script src="https://design.vena.city/vnct-common.js?v=1.0.3"></script>Statut de migration des services consommateurs sur MIGRATION.md.
Section 1
Fondations
Les tokens visuels qui composent le système : couleurs, typographie, espacements, radius, ombres et easings. Tout dérive de variables CSS résolues à l'exécution selon le thème actif (data-theme) et l'accent (data-accent).
Couleurs 16 tokens
Typographie échelle ~1.25
Espacements échelle 4px
Border radius 5 niveaux
Ombres / néon 3 + 3 niveaux
Easings / durées 4 courbes
Durées : --duration-fast (150ms) · --duration-normal (250ms) · --duration-slow (400ms)
Section 2
Composants existants
Composants déjà déployés dans l'écosystème VNCT.
Boutons primary · secondary · ghost · danger
Tiles avec status & badge
Cards
Card standard
Conteneur classique
Card interactive
Avec hover effect
Inputs / Forms
Ce champ est requis.
Callouts v1.0.3
Toasts success · error · warning · info
Progress bars
Animation déclenchée par le bouton Rejouer.
Beta banners
Animations d'apparition 8 délais staggered
Stagger automatique avec .vnct-stagger sur le parent (jusqu'à 12 enfants).
Section 3
Composants additionnels
Composants migrés depuis le playground v0.x — disponibles à partir de la v1.0.3 du design system.
Checkbox / Radio / Toggle nouveau
Slider nouveau
Dropdown nouveau
Tabs nouveau
Accordion nouveau
Stepper nouveau
Tooltip nouveau
Pills / Badges nouveau
Status dots nouveau
Skeleton nouveau
Empty state nouveau
Aucun résultat
Pattern à utiliser quand une liste, une recherche ou une vue est vide. Personnalise le titre, la description et l'action principale selon le contexte.
Composé de vnct-empty__icon, __title et __desc. Ajoute un bouton VNCT en bas si une action est pertinente.
Tables nouveau
| Service | Status | Version | Domaine |
|---|---|---|---|
| Atlas | Online | v2.1.0 | atlas.vena.city |
| Axis | Online | v1.2.0 | axis.vena.city |
| Sema | Idle | v0.9.3 | sema.vena.city |
Pagination nouveau
Breadcrumb nouveau
Avatars nouveau
Dividers nouveau
Scrollbar custom nouveau
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Code blocks nouveau
Texte avec code inline à l'intérieur d'un paragraphe.
// Exemple de bloc de code
const hello = (name) => {
return `Bonjour ${name}`;
};Animations supplémentaires nouveau
spin
bounce
glow
float
Section 4
Matrice d'états
Combinatoire des composants × variantes pour vérifier rapidement la cohérence visuelle.
| Composant | Default | Hover/Active | Disabled | Danger |
|---|---|---|---|---|
| Bouton | ||||
| Pill | Default | Accent | Disabled | Danger |
| Input | ||||
| Status | Neutral | Online | Idle | Offline |