{ "$schema": "https://da.zlef.fr/design.json", "name": "ZLEF Direction Artistique", "version": "3.2.0", "updated": "2026-07-14", "summary": "Dark, atmospheric, minimal design system for all zlef.fr properties. Two deep, desaturated accents — olive leaf (#3E4618) and vintage grape (#4C3B4D) — over a near-black canvas. Lightly rounded corners (3–8px), flat crisp components (no gradients, no glow), large legible type. No light theme, no web fonts, no blue.", "canonical_stylesheet": "https://da.zlef.fr/tokens.css", "usage": "Import https://da.zlef.fr/tokens.css and use the CSS variables (--zl-*) and component classes (.zl-btn, .zl-card, .zl-badge, .zl-input, …). Components reference palette-agnostic role variables (--zl-accent* = primary, --zl-accent2* = secondary); raw ramps are exposed as --zl-olive* / --zl-grape*. Editing tokens.css changes the language everywhere.", "principles": [ "Dark only — the background is near-black #06060a; there is no light theme.", "Minimal & atmospheric — restraint over decoration; depth comes from a subtle particle field, haze and vignette (assets.zlef.fr/particles.js), not from heavy chrome.", "Two accents only — olive leaf is primary, vintage grape is secondary. Both are deep and desaturated. Everything else is neutral.", "Light rounding — corners are subtle: 3px chips/badges, 5px buttons/inputs, 8px cards. Never pill-shaped UI, never heavily rounded.", "Flat, crisp components — solid fills, 1px borders, no gradients, no coloured glow. Hover shifts the fill one shade; it never jumps or blooms.", "Legible by default — body text sits at 17px and never drops below 16px. Generous line-height (1.6). Controls are ≥44px tall.", "Subtle motion — eases are smooth (cubic-bezier(.22,.61,.36,1)), durations 110–360ms, no bounce. Respect prefers-reduced-motion." ], "colors": { "surfaces": { "bg": { "value": "#06060a", "use": "page background — the canonical near-black" }, "surface-1": { "value": "#0e0e13", "use": "raised panels and cards" }, "surface-2": { "value": "#15151c", "use": "inputs, nested panels" }, "surface-3": { "value": "#1d1d25", "use": "hover / active raised state" } }, "text": { "text": { "value": "#e9eae2", "use": "primary copy (faint warm-neutral)" }, "text-soft": { "value": "#b6b7ad", "use": "secondary copy" }, "text-muted": { "value": "#7d7e76", "use": "captions, labels, placeholders" }, "text-faint": { "value": "#54554f", "use": "disabled / decorative" } }, "accent_primary_olive_leaf": { "role": "PRIMARY accent — main CTAs, links, focus, active nav. Base #3E4618 fills solid surfaces; the soft tint is used for text/links on dark.", "deep": { "value": "#2c3212", "var": "--zl-olive-deep" }, "base": { "value": "#3e4618", "var": "--zl-olive / --zl-accent" }, "mid": { "value": "#59642a", "var": "--zl-olive-mid" }, "soft": { "value": "#9dae50", "var": "--zl-olive-soft / --zl-accent-soft" }, "bright": { "value": "#bdce74", "var": "--zl-olive-bright" } }, "accent_secondary_vintage_grape": { "role": "SECONDARY accent — alternate CTA, secondary highlights, info. Base #4C3B4D fills solid surfaces; the soft tint is used for text/links on dark.", "deep": { "value": "#382b39", "var": "--zl-grape-deep" }, "base": { "value": "#4c3b4d", "var": "--zl-grape / --zl-accent2" }, "mid": { "value": "#6b5470", "var": "--zl-grape-mid" }, "soft": { "value": "#b095b3", "var": "--zl-grape-soft / --zl-accent2-soft" }, "bright": { "value": "#cdb6cf", "var": "--zl-grape-bright" } }, "semantic": { "success": { "value": "#6f9a3a", "note": "leafy green — sibling of olive" }, "warning": { "value": "#c79a3e", "note": "muted amber" }, "danger": { "value": "#c2566a", "note": "dusty rose-red — the single error/destructive hue" }, "info": { "value": "#b095b3", "note": "info reuses grape-soft — never blue" } }, "lines": { "line": { "value": "rgba(255,255,255,.07)", "use": "default hairline" }, "line-strong": { "value": "rgba(255,255,255,.13)", "use": "emphasised border / control outline" }, "line-focus": { "value": "rgba(157,174,80,.55)", "use": "focused control border (olive)" } }, "atmospheric_only": { "haze-grape": { "value": "rgba(76,59,77,.10)", "use": "ONLY inside background haze gradients — never as a UI fill" } } }, "banned": [ "Light / white backgrounds or a light theme of any kind.", "Blue as an accent or link colour in UI chrome — use olive instead. (Data-series colours from zl-charts --zlc-cat-* are exempt.)", "Pure black #000000 fills for surfaces — use #06060a and the surface ramp.", "Full pills and systematically heavy rounding — keep rounding light (3–8px); circles stay circles.", "The 'AI-generated' aesthetic: gradients on buttons, coloured glows, scale/zoom on hover. Flat, crisp, one-shade hover shift.", "Body text below 16px; low-contrast grey-on-grey for primary copy; thin hairline text.", "Web-font dependencies — use the system sans stack and a monospace for code/data.", "Glossy gradients, skeuomorphism, bouncy/elastic motion.", "Generic framework defaults (unstyled Bootstrap/Material) that ignore these tokens." ], "typography": { "font_sans": "system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif", "font_mono": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Consolas, monospace", "scale": { "xs": "13px", "sm": "14.5px", "base": "17px", "lg": "19px", "xl": "22px", "2xl": "28px", "3xl": "clamp(30px,4vw,38px)", "4xl": "clamp(40px,6vw,56px)" }, "body_size": "17px (minimum 16px anywhere)", "leading": { "body": 1.6, "tight": 1.15 }, "weights": { "normal": 400, "medium": 550, "bold": 700 }, "tracking": { "tight": "-0.02em (headings)", "wide": "0.14em (uppercase eyebrows/labels)" } }, "spacing": { "base": "4px", "scale_px": [4, 8, 12, 16, 24, 32, 48, 64] }, "radius": { "note": "light rounding only", "sm": "3px (badges, chips, code)", "md": "5px (buttons, inputs)", "lg": "8px (cards)", "xl": "12px", "pill": "999px (reserve for genuinely circular elements)" }, "elevation": { "shadow_sm": "0 1px 2px rgba(0,0,0,.4)", "shadow_md": "0 6px 22px rgba(0,0,0,.45)", "shadow_lg": "0 18px 50px rgba(0,0,0,.55)", "note": "Plain dark shadows only. No coloured glow on accents — flatness is intentional." }, "motion": { "ease": "cubic-bezier(.22,.61,.36,1)", "durations_ms": { "fast": 110, "base": 170, "slow": 360 }, "rule": "subtle, no bounce; honour prefers-reduced-motion" }, "components": { "button": { "class": "zl-btn", "variants": ["zl-btn--primary (solid olive)", "zl-btn--secondary (solid grape)", "zl-btn--ghost (outline)", "zl-btn--destructive (solid rose-red — destructive MAIN action; fill --zl-danger, ink --zl-on-danger, hover --zl-danger-mid, active --zl-danger-deep)", "zl-btn--danger (outline rose-red — the QUIET destructive variant: table rows, toolbars)", "zl-btn--loading (+ zl-spinner--btn, disabled)"], "destructive_pairing": "Canonical destructive dialog: the solid zl-btn--destructive action + « Annuler » as zl-btn--secondary (or zl-btn--ghost on dense UIs). Never make a destructive action the olive primary.", "sizes": ["zl-btn--sm", "(default)", "zl-btn--lg"], "min_height": "44px", "style": "flat, lightly rounded (5px), 1px border; hover shifts fill one shade — no gradient, no glow, no scale; works identically as