Couleurs 16 tokens

--accent reste une couleur plate (rose en sombre, cyan en clair). La signature irisée rose → violet → cyan est portée par le gradient --gradient-iris et les utilitaires .vnct-iris-text / .vnct-iris-fill / .vnct-iris-border (le titre ci-dessus en est un exemple).

Typographie échelle ~1.25

Espacements échelle 4px

Border radius 6 niveaux

Ombres / néon 3 + 3 niveaux

Easings / durées 4 courbes Rejouer

Durées : --duration-fast (150ms) · --duration-normal (250ms) · --duration-slow (400ms)

Boutons primary · secondary · ghost · danger

Tiles avec status & badge

Cards

Inputs / Forms

Callouts v1.0.3

Toasts success · error · warning · info Déclencher

Progress bars Rejouer

Beta banners

Animations d'apparition 8 délais staggered Rejouer

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é Déprécié 2.1.0

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

Navigation desktop + mobile Déprécié 2.1.0

<nav class="vnct-nav-desktop">
  <a href="/" class="vnct-nav-desktop__home">
    <span class="vnct-nav-desktop__logo">VENACITY</span>
  </a>
  <div class="vnct-nav-desktop__separator"></div>
  <div class="vnct-nav-desktop__links"><!-- liens --></div>
  <div class="vnct-nav-desktop__actions"><!-- actions --></div>
</nav>

<header class="vnct-header-mobile">
  <a class="vnct-header-mobile__action">←</a>
  <span class="vnct-header-mobile__title">Service</span>
  <button class="vnct-header-mobile__action">⚙</button>
</header>

Hero landing v1.3.0

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

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

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

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

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.

Bloc légal v2.4.0

Le markup reste statique dans chaque service, copié depuis snippets/legal-links.html : ce bloc n'est délibérément pas injecté par JavaScript depuis design.vena.city, parce qu'une obligation légale ne se délègue pas à un CDN. Le design system ne mutualise que les styles ; la duplication est contrôlée par scripts/audit-legal-links.sh. Le raisonnement complet et les emplacements par famille de page sont dans MIGRATION.md, section « Bloc légal — contrat obligatoire ».

Markup canonique — libellés, ordre, URL et attributs sont normatifs, à copier tel quel :

<footer class="vnct-legal">
  <nav class="vnct-legal__links" aria-label="Informations légales">
    <a href="https://strata.vena.city/ml" target="_blank" rel="noopener noreferrer">Mentions légales<span class="vnct-sr-only"> (nouvelle fenêtre)</span></a>
    <span class="vnct-legal__sep" aria-hidden="true">&middot;</span>
    <a href="https://strata.vena.city/pdc" target="_blank" rel="noopener noreferrer">Politique de confidentialité<span class="vnct-sr-only"> (nouvelle fenêtre)</span></a>
    <span class="vnct-legal__sep" aria-hidden="true">&middot;</span>
    <a href="https://strata.vena.city/cgu" target="_blank" rel="noopener noreferrer">Conditions générales d'utilisation<span class="vnct-sr-only"> (nouvelle fenêtre)</span></a>
  </nav>
  <p class="vnct-legal__brand">&copy; 2026 Venacity</p>
</footer>

Éléments : .vnct-legal + __links / __sep / __brand. Sous 480 px, les liens passent en colonne et les séparateurs disparaissent. Pour une app qui porte le chrome VNCT, les liens vont dans le menu « … » et non dans ce bloc. Pour une page d'erreur, utiliser la variante à styles embarqués snippets/legal-links-inline.html, qui doit s'afficher même quand l'origine est morte.

Footer Déprécié 2.1.0

Footer historique des pages publiques (.vnct-footer + __inner / __brand / __links / __sep). Conservé tel quel pour les services qui le consomment encore ; sur mobile (< 480 px), les liens passent en colonne. Pour une nouvelle page, partir du bloc légal.

Header flottant .vnct-header

Deux variantes. Statique : marque (avec sa partie irisée .vnct-iris-text) + libellé contextuel + une action ghost. Applicative : pilule de compte, pastille de bascule thème et menu « … » fonctionnel. Les headers ci-dessous sont encapsulés dans des cartes de démo — ce n'est pas le vrai header de la page.

Variante statique

Variante applicative — le menu « … » est fonctionnel (clique dessus)

Ancré dans le flux (position: relative), z-index: var(--z-header) (800), padding safe-area. Largeur bornée par .vnct-header__inner (surcharge --vnct-header-max).

Menu overflow « … » VNCT.HeaderMenu

Menu déclaratif et service-agnostique, monté automatiquement par vnct-common.js (délégation sur document). Bouton et panneau sont frères dans .vnct-menu-wrap ; les items <a> naviguent, les boutons d'action restent pilotés par le service.

Markup contractuel (le CSS est écrit sur ces noms) :

<div class="vnct-menu-wrap">
  <button class="vnct-header__icon" data-vnct-menu type="button"
          aria-haspopup="true" aria-expanded="false" aria-label="Plus d'options">…</button>
  <div class="vnct-menu" data-vnct-menu-panel role="menu" hidden>
    <button class="vnct-menu__item" role="menuitem" data-service-action="report">…</button>
    <a class="vnct-menu__item" role="menuitem" href="…">…</a>
    <div class="vnct-menu__sep"></div>
    <a class="vnct-menu__item vnct-menu__item--ext" role="menuitem" href="…">…</a>
    <div class="vnct-menu__foot">© 2026 Venacity</div>
  </div>
</div>

Segmented control .vnct-seg · tablist

Sélecteur façon pilule (role="tablist" + aria-selected). Utilisé en tête de la modale Feedback pour basculer entre les deux modes. Clique pour basculer le segment actif.

Le segment actif porte aria-selected="true" (fond --accent, encre lisible en dark ET light). Roving tabindex géré côté service (ou par la modale Feedback).

Account chip .vnct-account-chip

Pilule de compte irisée (conventions Cardo). Deux états : bouton « Se connecter » (invite interactive) et badge « Connecté·e » (non interactif, --badge). La forme vient de .vnct-account-chip, la surface irisée + l'encre sombre de .vnct-iris-fill (à composer dans le markup).

Convention Cardo — écriture inclusive obligatoire sur les libellés (« Connecté·e »). Halo irisé au survol sur l'état interactif uniquement ; le badge garde son ombre lavande de repos.

Feedback VNCT.Feedback API publique

Envoi via VNCT.Sema.submit() (endpoint /api/public/report, fallback webhook Discord). Sur ce showroom aucun devReportUrl n'est configuré : le bouton « Envoyer » ne poste rien (retour d'erreur).

Échelle z-index tokens --z-*

Échelle tokenisée dans :root : les composants n'inventent plus de z-index en dur, ils consomment ces tokens.

Piège résolu : le header porte --z-header (800), au-dessus du contenu de page (2) — les services retirent leurs hacks z-index: 800 codés en dur (ex. Lyra). Un éventuel écran de login plein écran reste hors de cette échelle, géré par le service concerné.

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

Tables nouveau

Pagination nouveau

Breadcrumb nouveau

Avatars nouveau

Dividers nouveau

Scrollbar custom nouveau

Code blocks nouveau

// Exemple de bloc de code
const hello = (name) => {
  return `Bonjour ${name}`;
};

Animations supplémentaires nouveau Rejouer