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.3.0

Dé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.5.1">
<script src="https://design.vena.city/vnct-common.js?v=1.5.1"></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

--text-5xl
Aa Display
--text-4xl
Aa Hero
--text-3xl
Aa H1
--text-2xl
Aa H2
--text-xl
Aa H3
--text-lg
Aa Lead
--text-base
Aa Paragraphe (16px)
--text-sm
Aa Secondaire
--text-xs
Aa Légende

Espacements échelle 4px

Border radius 5 niveaux

--radius-sm · 6px
--radius-md · 10px
--radius-lg · 14px
--radius-xl · 20px
--radius-full · 9999px

Ombres / néon 3 + 3 niveaux

--shadow-elevation-1
--shadow-elevation-2
--shadow-elevation-3
--neon-shadow-sm
--neon-shadow-md
--neon-shadow-lg

Easings / durées 4 courbes

--ease-smooth
--ease-spring
--ease-out-expo
linear

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

Cards

Card standard

Conteneur classique

Contenu de la card. Texte d'exemple sur plusieurs lignes pour illustrer la mise en forme du body.

Card interactive

Avec hover effect

Cette card réagit au hover (élévation + bordure accent).

Inputs / Forms

Ce champ est requis.

Callouts v1.0.3

Info. Information neutre ou contextuelle utile à l'utilisateur.
Success. Action effectuée avec succès, état positif confirmé.
Warning. Attention requise — action à vérifier ou conséquence non triviale.
Danger. Erreur critique ou action irréversible — confirmer avant de continuer.

Toasts success · error · warning · info

Progress bars

Animation déclenchée par le bouton Rejouer.

Beta banners

⚡ Cette fonctionnalité est en beta — merci de remonter tout problème via Sema.

Animations d'apparition 8 délais staggered

vnct-appear--hero
vnct-appear (delay 0.1s)
vnct-appear (delay 0.2s)
vnct-appear (delay 0.3s)
vnct-appear--subtle (delay 0.4s)
vnct-appear (delay 0.5s)

Stagger automatique avec .vnct-stagger sur le parent (jusqu'à 12 enfants).

Modals JS

API : VNCT.Modal.open({ title, body, isHtml?, footer? }) et VNCT.Modal.close(). Esc et clic overlay ferment automatiquement.

FAB & Késako auto-monté

Le FAB (Floating Action Button) est monté automatiquement par vnct-common.js sur chaque page. Il propose un menu à trois entrées : Késako (présentation du service), Signaler un bug et Suggestion. Les deux derniers ouvrent un formulaire qui pousse vers DevPortal (Sema) avec fallback webhook Discord.

Pour personnaliser le contenu de Késako, déclare un <template data-kesako-content> n'importe où dans la page. Son innerHTML sera injecté dans la modal Késako quand l'utilisateur clique. Sans template, un fallback générique s'affiche. 

<template data-kesako-content>
  <p>Bienvenue sur <strong>MonService</strong> !</p>
  <p>Description courte de ce que fait l'outil et comment l'utiliser.</p>

  <hr style="margin-top: var(--space-5); border: none; border-top: 1px solid var(--border-default);">
  <p style="margin-top: var(--space-4); color: var(--text-secondary); font-weight: var(--font-medium);">🔍 Pour les curieux</p>
  <p style="margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-sm);">
    Détails techniques, mentions de l'écosystème, lien vers Atlas, etc.
  </p>

  <div style="margin-top: var(--space-5); display: flex; justify-content: center;">
    <button class="vnct-btn vnct-btn--primary" onclick="VNCT.Modal.close()">Compris !</button>
  </div>
</template>

À configurer côté service : VNCT.config.serviceName, VNCT.config.serviceVersion, VNCT.config.devReportUrl.

Hero landing v1.3.0

ServiceOS

Tagline du service en une phrase courte et claire.

Logo en clamp(2.5rem, 6vw, 3.75rem), suffixe accent dans <span>. Pattern extrait des services en v1.3.0 — remplace .atlas-hero__logo, .lyra .logo, etc.

Lore — origine du nom v1.3.0

D'où vient le nom ?

Lyra est la constellation de la lyre d'Orphée, le musicien légendaire dont la musique transcendait toutes les barrières. Un lien musical sur une plateforme ne devrait pas y rester prisonnier. Lyra prend un lien depuis n'importe quel service de streaming et le rend accessible sur tous les autres. Une musique, un lien, toutes les plateformes. Partage musical universel.

Convention : <em> pour les mots d'inspiration (couleur accent), <strong> pour le nom du service. Pattern unifié — remplace .atlas-lore, .lyra-lore, etc.

Steps — comment ça marche v1.5.0

1

Première étape

Description courte de la première étape, deux à trois lignes max.

2

Deuxième étape

Le service prend le relais et fait l'opération principale qui le caractérise.

3

Troisième étape

Résultat final livré à l'utilisateur, avec mention de ce qu'il peut en faire.

Cards numérotées en grille 3 colonnes (1 colonne sur mobile). Container .vnct-steps + items .vnct-step avec __number / __icon / __title / __desc. Pattern extrait de Lyra / Kayros / Calyx en v1.5.0.

Tags / Pills v1.5.0

Cas d'usage 1 Cas d'usage 2 Cas d'usage 3 Cas d'usage 4 Cas d'usage 5

Pills horizontales pour énumérer des cas d'usage / publics-cibles. Container .vnct-tags (flex wrap centré) + items .vnct-tag. Pattern extrait de Lyra / Kayros / Calyx / Strata en v1.5.0.

Trust card v1.5.0

Sans compte. Sans tracking.

Encart de réassurance — privacy, no-tracking, RGPD, etc. Centré, max 640px de large.

Encart de confiance avec icône SVG centrée + titre + description. .vnct-trust + __icon / __title / __desc. Pattern extrait de Lyra / Myco en v1.5.0.

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

Tabs nouveau

Contenu du panneau Aperçu — vue synthétique avec les infos principales.
Contenu du panneau Détails — toutes les propriétés détaillées.
Contenu du panneau Historique — timeline des changements.

Accordion nouveau

Contenu du premier item, ouvert par défaut.
Contenu du deuxième item.
Contenu du troisième item, plus long pour montrer la transition de hauteur. Texte additionnel pour étaler le contenu.

Stepper nouveau

✓Compte
✓Profil
3Préférences
4Confirmation

Tooltip nouveau

Tooltip court Explication contextuelle

Pills / Badges nouveau

Default Accent Success Warning Danger Solid

Status dots nouveau

Online Offline Idle Neutral Live (pulse)

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

ServiceStatusVersionDomaine
AtlasOnlinev2.1.0atlas.vena.city
AxisOnlinev1.2.0axis.vena.city
SemaIdlev0.9.3sema.vena.city

Avatars nouveau

LE LE LE LE
AS BJ CK +5

Dividers nouveau

Section

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.

ComposantDefaultHover/ActiveDisabledDanger
Bouton
Pill Default Accent Disabled Danger
Input
Status Neutral Online Idle Offline