La source de vérité
du design ZLEF.

Surfaces

Accent primaire — Olive Leaf

Accent secondaire — Vintage Grape

Texte

Sémantique

Action destructive — la paire canonique

Quand l'action principale détruit quelque chose (supprimer, révoquer, purger), elle passe en --destructive : rose-rouge plein, même construction que --primary. Elle est toujours accompagnée d'un « Annuler » en --secondary (ou --ghost sur les interfaces denses). La variante --danger (contour) reste la version discrète — lignes de tableau, barres d'outils.

<!-- copier/coller -->
<button class="zl-btn zl-btn--primary">Action principale</button>
<button class="zl-btn zl-btn--ghost zl-btn--sm">Annuler</button>

<!-- dialogue destructif : action pleine + annuler en secondaire -->
<button class="zl-btn zl-btn--destructive">Supprimer le projet</button>
<button class="zl-btn zl-btn--secondary">Annuler</button>

Select personnalisé — .zl-pick, partout sauf iOS

Hors iOS, le <select> natif est remplacé de bout en bout par .zl-pick — le même composant que le sélecteur de langue .zl-langpick (mêmes règles CSS dans tokens.css, le drapeau en moins) : bouton + menu stylé tokens, ✓ sur l'option choisie, clavier complet (↑/↓/Home/End/Entrée/Échap), fermeture au clic extérieur, valeur recopiée dans un input caché (ou un vrai <select>). Exception iOS : on garde le <select class="zl-select"> natif — le picker système (HIG Apple) offre une meilleure UX tactile que n'importe quel menu maison.

// exception iOS : garder le <select class="zl-select"> natif (picker système, HIG Apple)
const isIOS = /iP(hone|ad|od)/.test(navigator.userAgent) ||
              (navigator.maxTouchPoints > 1 && /Mac/.test(navigator.userAgent));

// .zl-pick — comportement complet (ouverture, clavier, clic extérieur, sync)
function zlPick(root) {
  const btn  = root.querySelector('.zl-pick__btn');
  const menu = root.querySelector('.zl-pick__menu');
  const opts = [...root.querySelectorAll('.zl-pick__opt')];
  const nameEl = btn.querySelector('[data-name]');
  const input  = root.querySelector('input[type="hidden"]');  // ou un vrai <select> caché
  let hi = Math.max(0, opts.findIndex(o => o.getAttribute('aria-selected') === 'true'));

  const open   = () => { root.setAttribute('aria-expanded', 'true'); setHi(hi); menu.focus(); };
  const close  = () => { root.setAttribute('aria-expanded', 'false'); btn.focus(); };
  const isOpen = () => root.getAttribute('aria-expanded') === 'true';
  const setHi  = (i) => { hi = (i + opts.length) % opts.length;
    opts.forEach((o, k) => o.classList.toggle('is-active', k === hi));
    opts[hi].scrollIntoView({ block: 'nearest' }); };

  function select(opt) {
    opts.forEach(o => o.setAttribute('aria-selected', String(o === opt)));   // le ✓ suit aria-selected
    nameEl.textContent = opt.querySelector('.zl-pick__name').textContent;
    if (input) { input.value = opt.dataset.value;
      input.dispatchEvent(new Event('change', { bubbles: true })); }
  }

  btn.addEventListener('click', () => isOpen() ? close() : open());
  opts.forEach((o, i) => { o.addEventListener('mouseenter', () => setHi(i));
    o.addEventListener('click', () => { select(o); close(); }); });
  menu.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown') { e.preventDefault(); setHi(hi + 1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); setHi(hi - 1); }
    else if (e.key === 'Home') { e.preventDefault(); setHi(0); }
    else if (e.key === 'End') { e.preventDefault(); setHi(opts.length - 1); }
    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); select(opts[hi]); close(); }
    else if (e.key === 'Escape') { e.preventDefault(); close(); }
  });
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
  });
  document.addEventListener('click', (e) => { if (isOpen() && !root.contains(e.target)) close(); });
}
if (!isIOS) document.querySelectorAll('.zl-pick').forEach(zlPick);

Spinner & bouton en cours

Squelette — miroir de la mise en page finale

Progression

Cas d'usage — tableau en chargement

Cas d'usage — graphique en chargement

Cas d'usage — formulaire à l'envoi

Cas d'usage — galerie / grille média

Cas d'usage — chargement pleine page (transitions de route)

Cas d'usage — téléversement

État vide — une invitation à agir

Chiffres — stat tiles & jauge

Graphiques — barres, lignes, aire, nuage, heatmap

Timeline — événements & périodes

Données temporelles — zoom & défilement interne

Marquer une série x.type:"time" (ou un nombre de points élevé) active auto le zoom : boutons − ⤡ +, ⌘/Ctrl + molette ou pinch pour zoomer, glisser / balayer pour défiler. L'axe Y reste figé pendant qu'on parcourt toute la plage.

Palette catégorielle — ordre fixe, assignée 1→N, jamais recyclée

<!-- 1. importer (après tokens.css) -->
<link rel="stylesheet" href="https://da.zlef.fr/zl-charts.css">
<script defer src="https://da.zlef.fr/zl-charts.js"></script>

<!-- 2a. déclaratif (idéal en SSR) : le moteur hydrate au chargement -->
<figure class="zlc" data-zlc>
  <script type="application/json" class="zlc-spec">
    {"type":"bar","title":"Ventes",
     "x":{"values":["Nord","Sud"]},
     "series":[{"name":"2025","data":[120,90]}]}
  </script>
</figure>

// 2b. impératif
ZLC.mount(el, { type:'line', x:{ values:[2019,2020,2021] },
  series:[{ name:'Paris', data:[12.1,12.8,12.4] }], valueFmt:'number' });

Header · App — .zl-header

Le chrome d'application par défaut : translucide, flou, hairline, sticky (--zl-z-nav, opt-out --static). Pour tout produit connecté ou outil du quotidien.

— contenu de page —

📱 375 px

— le nav passe à la ligne, rien ne déborde —

Header · Hero — .zl-header--hero

L'humeur marketing/landing : transparent, sans flou ni bordure, marque un cran plus grande. Posé sur un hero ou le champ de particules ; non sticky — une barre transparente n'a rien sur quoi coller.

Bêta

Le hero respire dessous.

<!-- une humeur = la base + un modificateur, même markup -->
<header class="zl-header zl-header--hero">
  <div class="zl-header__brand">…</div>
  <nav class="zl-header__nav"><a class="zl-navlink">…</a></nav>
</header>

<footer class="zl-footer zl-footer--columns">
  <div class="zl-footer__col">
    <div class="zl-footer__col-title">Produit</div>
    <a href="…">Tarifs</a>
  </div>
  <div class="zl-footer__bottom">© 2026 …</div>
</footer>

Le sélecteur (3+ langues) — composant .zl-langpick, livré dans tokens.css

// résolution de la langue au chargement (ordre de priorité)
const read = () => (document.cookie.match(/(?:^|; )zl-lang=([^;]+)/)||[])[1];
let lang = read() || navigator.language.slice(0,2) || 'en';
if (!LOCALES.includes(lang)) lang = 'en';  // fallback anglais

// au changement : cookie partagé pour TOUS les sites zlef.fr
function setLang(l) {
  document.cookie = `zl-lang=${l}; domain=.zlef.fr; path=/; max-age=31536000; samesite=lax`;
  apply(l);
}

<!-- intégrer le design ZLEF dans n'importe quel projet -->
<link rel="stylesheet" href="https://da.zlef.fr/tokens.css">
<script src="https://assets.zlef.fr/particles.js"></script>  <!-- champ atmosphérique -->

<body class="zl-body">
  <button class="zl-btn zl-btn--primary">Go</button>
</body>