/* ============================================================ ERULIA DESIGN TOKENS — v1 (2026-07-18) Canonical drop-in for: official erulia site, Revula, Lurest. Derived from field research: Quizlet, Anki, Notion, Goodnotes, Duolingo, Knowt, RemNote, Khan Academy, Linear (measured live). Spec + rationale: ERULIA-DESIGN.md (do not fork values ad hoc) ============================================================ */ /* Fonts — web usage (marketing site, apps). Artifacts embed instead. @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400..800&family=Inter:wght@400..700&display=swap'); */ :root { /* ---- type ---- */ --font-display: 'Hanken Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif; /* headlines: the Anki font */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* everything else: the Notion/RemNote font */ /* Anchors/timestamps. A system stack on purpose: it is the one shared token role that costs a network request if it names a webfont, and a mono utility face is invisible to the user. Byte-identical in Revula and Lurest (P-APP5a). */ --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* ---- IN-APP TYPE ROLES (P-APP2) — the bounded table for Revula + Lurest ---- The marketing scale above (.display/h1/h2/h3/.lead/.small/.caption) governs the SITE. Apps had no type law at all, which is how Revula reached 17 rendered sizes on its five core surfaces and Lurest 23 (incl. fractional ones from an `0.8em` anchor rule). These seven roles are the whole in-app vocabulary. Rules this table is built to satisfy, so don't "tidy" it without re-checking: · exactly 7 roles (an 8th needs written justification; the Phase-3 `kbd` glyph is pre-authorized as a TREATMENT of --fs-mono, not a new role) · 13px floor — nothing in either app renders below it, which also satisfies "≥13px for anything conveying content or state" without a case-by-case call · weights ⊆ {400,500,600,650,700} · one line-height per role; 4 distinct values total; monotonically non-increasing as size increases (13→1.6 … 112→0.90) · shared roles measure IDENTICAL in both apps (P-APP5e) — that is why these live here and are copied verbatim into each app's token block. Eyebrow is a declared TREATMENT of the meta role (same size/family/line-height, weight 600 + uppercase + 0.08em), not an eighth role. */ --fs-hero: 112px; --lh-hero: 0.90; --tr-hero: -0.03em; /* the ONE data number per screen (X3) — display face */ --fs-display: 38px; --lh-display: 1.05; --tr-display: -0.022em; /* full-screen headlines — display face, >=28px so Hanken is sanctioned */ --fs-title: 20px; --lh-title: 1.30; --tr-title: -0.015em; /* panel / card / modal titles — UI face */ --fs-body: 15px; --lh-body: 1.60; --tr-body: 0; /* prose, long-form (45-75ch) */ --fs-ui: 14px; --lh-ui: 1.60; --tr-ui: 0; /* controls, nav, labels — matches .btn-app */ --fs-meta: 13px; --lh-meta: 1.60; --tr-meta: 0; /* captions, secondary; eyebrow treatment adds 0.08em + uppercase */ --fs-mono: 13px; --lh-mono: 1.60; --tr-mono: 0.02em; /* anchors, timestamps — --font-mono */ /* ---- neutrals (cool undertone — Quizlet #282E3E / RemNote #292936 family) ---- */ --bg: #FFFFFF; --bg-soft: #F7F8FB; /* alternating sections, app canvas */ --bg-tint: #EDF7F3; /* accent-tinted band (Quizlet's periwinkle move, in our green) */ --ink: #1E2430; /* headings + primary text — never pure #000 */ --ink-2: #4B5364; /* secondary text */ --ink-3: #5D6575; /* captions, placeholders, meta — see the elevation note below */ --line: #E7E9F0; /* default 1px borders */ --line-strong: #D6DAE3; /* input borders, hover borders */ /* ---- app-shell elevation (Revula/Lurest only; the site never leaves --bg/--bg-soft) ---- These lived only inside Revula's own