/* =========================================================================== OTTO DESIGN IDENTITY — TOKENS Portable visual-identity tokens extracted verbatim from Otto's live theme sheets (app/src/v2/styles/tokens/). VISUAL IDENTITY ONLY — palette, fonts, radii, spacing, motion, shadow/glow. No layout, views or modal structure. PRIMARY SKIN = "synthesis" (Otto's default; default theme = dark, default accent = indigo). It is exposed here as the plain :root / [data-theme] contract so any project can drop it in. The alt skin, "industrial" (amber + mono), follows as a clearly-labelled, opt-in block. HOW TO ADOPT 1. Link this file. 2. Light is the default (:root). Dark = set data-theme="dark" on (or add class .dark to a wrapper). 3. Everything is a CSS custom property — use var(--token) in your CSS. 4. ACCENT IS USER-PICKABLE. The whole --accent-* family is derived from one hue/sat/lum. To re-theme live, set --accent / --accent-soft / --accent-glow / --accent-text on (see "ACCENT — pick-your-own" at the bottom). 5. Opt into the industrial skin by adding data-skin="industrial". Source of truth: synthesis-dark.css / synthesis-light.css / industrial-dark.css / industrial-light.css / motion-density-overlays.css. =========================================================================== */ /* =========================================================================== PRIMARY SKIN — SYNTHESIS · LIGHT (default) =========================================================================== */ :root, :root[data-theme="light"], :root[data-skin="synthesis"][data-theme="light"] { /* -- Surfaces (low -> high) -------------------------------------------- */ --bg-0: #fafafb; /* app background */ --bg-1: #f3f3f5; /* recessed surface */ --bg-2: #e9e9ed; /* card / panel surface */ --bg-3: #dededf; /* raised surface */ --line: #e0e0e5; /* hairline divider */ --line-strong: #c4c4cb; /* emphasised border */ /* -- Ink (text) levels (faint -> strong) ------------------------------- */ --ink-5: #a1a1ab; /* disabled / faintest */ --ink-4: #71717a; /* tertiary / muted */ --ink-3: #52525b; /* secondary */ --ink-2: #3f3f46; /* strong body */ --ink: #1a1a1f; /* primary text */ /* -- Accent (user-pickable; see bottom) -------------------------------- */ --accent: #6366f1; /* indigo — fills/borders/glow */ --accent-soft: rgba(99, 102, 241, 0.12); /* tint fill */ --accent-glow: rgba(99, 102, 241, 0.28); /* signature halo */ --accent-text: #3a3dbf; /* AA-safe accent for text */ --accent-ink: #ffffff; /* text drawn ON accent fills */ --accent-h: 239; --accent-s: 84%; --accent-l: 67%; /* HSL decomposition */ /* -- Semantic ---------------------------------------------------------- */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --accent-amber: #d97706; --accent-amber-soft: rgba(217, 119, 6, 0.18); --accent-critical: #dc2626; --accent-critical-soft: rgba(220, 38, 38, 0.16); /* -- Category hues (teal / purple / gold / green family) --------------- */ --c-wip: var(--accent); --c-showroom: #0d9488; /* teal */ --c-design: #7c3aed; /* purple */ --c-oneoff: #b45309; /* gold */ --c-focus: #15803d; /* green */ /* -- Typography -------------------------------------------------------- */ --font-sans: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-lg: 18px; --t-xl: 24px; --t-2xl: 32px; --fw-regular: 400; --fw-medium: 500; --fw-emphasis: 600; --fw-bold: 700; /* -- Spacing scale ----------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; /* -- Radii ------------------------------------------------------------- */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px; /* -- Motion ------------------------------------------------------------ */ --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* -- Backdrops --------------------------------------------------------- */ --backdrop-light: rgba(0, 0, 0, 0.32); --backdrop-std: rgba(0, 0, 0, 0.5); --backdrop-heavy: rgba(0, 0, 0, 0.7); /* -- Shadow + GLOW (the signature aesthetic) --------------------------- * Elevation = soft dark drops; the glow = accent halo (focal cards/rings). */ --shadow-sm: 0 8px 24px -8px rgba(0, 0, 0, 0.4); /* toasts / popovers */ --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.5); /* compose / drawers */ --shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.5); /* modals */ /* Signature glow: a 1px accent-soft ring + a 32px accent-glow halo. This is the exact recipe used by Otto's Now Card / Focus card / Momentum tile. */ --glow-focal: 0 0 0 1px var(--accent-soft), 0 0 32px 4px var(--accent-glow); --glow-soft: 0 0 10px var(--accent-glow); /* recap / chip */ --glow-ring: drop-shadow(0 0 8px var(--accent-soft)); /* focus ring (filter) */ --glow-orb: drop-shadow(0 0 3px var(--accent-soft)) drop-shadow(0 0 14px var(--accent-soft)); /* avatar orb */ } /* =========================================================================== PRIMARY SKIN — SYNTHESIS · DARK (Otto's default theme) Activate with: (or wrap in .dark) =========================================================================== */ :root[data-theme="dark"], .dark, :root[data-skin="synthesis"][data-theme="dark"] { /* -- Surfaces ---------------------------------------------------------- */ --bg-0: #101012; --bg-1: #161618; --bg-2: #1c1c1f; --bg-3: #232327; --line: #2e2e33; --line-strong: #3f3f46; /* -- Ink levels -------------------------------------------------------- */ --ink-5: #52525b; --ink-4: #8b8b96; --ink-3: #b4b4bd; --ink-2: #d4d4dc; --ink: #f0f0f4; /* -- Accent ------------------------------------------------------------ */ --accent: #6366f1; --accent-soft: rgba(99, 102, 241, 0.16); --accent-glow: rgba(99, 102, 241, 0.36); --accent-text: #9fa0f8; /* lighter indigo, AA on dark */ --accent-ink: #000000; /* text on accent fills */ --accent-h: 239; --accent-s: 84%; --accent-l: 67%; /* -- Semantic ---------------------------------------------------------- */ --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --accent-amber: #f59e0b; --accent-amber-soft: rgba(245, 158, 11, 0.16); --accent-critical: #ef4444; --accent-critical-soft: rgba(239, 68, 68, 0.18); /* -- Category hues ----------------------------------------------------- */ --c-wip: var(--accent); --c-showroom: #5eead4; /* teal */ --c-design: #a98cff; /* purple */ --c-oneoff: #d9a441; /* gold */ --c-focus: #3fb37f; /* green */ /* Typography / spacing / radii / motion are theme-agnostic and inherited from the :root block above — Otto re-declares them per sheet only because CSS vars don't cascade between sibling [data-theme] selectors; here the dark block layers onto :root so they carry over. Backdrops + shadows are identical across themes (a dim scrim reads black on any surface). */ } /* =========================================================================== ALT SKIN — INDUSTRIAL (opt-in: ) Amber accent, monospace type, tighter radii/spacing, faster motion. A clearly-labelled second identity — not the default. =========================================================================== */ /* INDUSTRIAL · LIGHT (warm cream) */ :root[data-skin="industrial"], :root[data-skin="industrial"][data-theme="light"] { --bg-0: #fdfbf7; /* warm cream, not pure white */ --bg-1: #f0e9d9; --bg-2: #dcd0b3; --bg-3: #bdac88; --line: #a69877; --line-strong: #7d6f4d; --ink: #1c1810; --ink-2: #382e1a; --ink-3: #564930; --ink-4: #7a6c4f; --ink-5: #a89c80; --accent: #f59e0b; /* amber */ --accent-soft: rgba(245, 158, 11, 0.18); --accent-glow: rgba(245, 158, 11, 0.38); --accent-text: #8a4f08; /* darker amber, AA on cream */ --accent-ink: #000000; --accent-h: 38; --accent-s: 92%; --accent-l: 50%; --success: #3d7a47; --warning: #8a6314; --danger: #b91c1c; --accent-amber: #b97308; --accent-amber-soft: rgba(185, 115, 8, 0.20); --accent-critical: #b91c1c; --accent-critical-soft: rgba(185, 28, 28, 0.18); --c-wip: var(--accent); --c-showroom: #0d9488; --c-design: #7c3aed; --c-oneoff: #b45309; --c-focus: #15803d; /* Industrial type = monospace for BOTH sans + mono. Slightly smaller scale. */ --font-mono: "JetBrains Mono", "JetBrains Mono Variable", "SF Mono", "Söhne Mono", ui-monospace, Menlo, Consolas, monospace; --font-sans: var(--font-mono); --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-base: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 28px; --fw-regular: 400; --fw-medium: 500; --fw-emphasis: 600; --fw-bold: 700; /* Tighter spacing + adds --sp-7 */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 12px; --sp-5: 20px; --sp-6: 28px; --sp-7: 36px; --sp-8: 40px; /* Sharper radii */ --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-full: 9999px; /* Faster motion + adds --dur-instant */ --dur-instant: 60ms; --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* INDUSTRIAL · DARK (near-black, warm ink) */ :root[data-skin="industrial"][data-theme="dark"] { --bg-0: #0c0c0d; --bg-1: #121214; --bg-2: #181a1c; --bg-3: #22252a; --line: #2a2c30; --line-strong: #3d4046; --ink: #f4ede3; --ink-2: #dcd5c9; --ink-3: #b5ad9f; --ink-4: #6a6358; --ink-5: #54504a; --accent: #f59e0b; --accent-soft: rgba(245, 158, 11, 0.14); --accent-glow: rgba(245, 158, 11, 0.32); --accent-text: #f59e0b; /* amber already passes AA on near-black */ --accent-ink: #000000; --accent-h: 38; --accent-s: 92%; --accent-l: 50%; --success: #52a55c; --warning: #d4a83e; --danger: #ef4444; --accent-amber: #f59e0b; --accent-amber-soft: rgba(245, 158, 11, 0.14); --accent-critical: #ef4444; --accent-critical-soft: rgba(239, 68, 68, 0.16); --c-wip: var(--accent); --c-showroom: #5eead4; --c-design: #a98cff; --c-oneoff: #d9a441; --c-focus: #3fb37f; } /* =========================================================================== MOTION OVERLAYS (reduced / off) — honour the user's motion preference. Otto scopes these per skin; here they apply globally via data-motion. =========================================================================== */ :root[data-motion="reduced"] { --dur-fast: 80ms; --dur-normal: 130ms; --dur-slow: 200ms; --ease-spring: var(--ease-out); } :root[data-motion="none"] { --dur-instant: 0ms; --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; --ease-spring: linear; --ease-out: linear; --ease-default: linear; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 80ms; --dur-normal: 130ms; --dur-slow: 200ms; --ease-spring: var(--ease-out); } } /* =========================================================================== ACCENT — PICK-YOUR-OWN (the signature idea) Otto lets the user choose ANY accent; one HSL re-themes the whole UI because every accent token derives from it. Replicate by setting these on (e.g. from JS on a colour-picker change). Example shows Otto's teal preset. --accent-text lightness is pushed legible: >=76% on dark, <=42% on light. document.documentElement.style.setProperty('--accent', `hsl(${h} ${s}% ${l}%)`); document.documentElement.style.setProperty('--accent-soft', `hsla(${h} ${s}% ${l}% / .16)`); document.documentElement.style.setProperty('--accent-glow', `hsla(${h} ${s}% ${l}% / .36)`); Built-in presets from Otto: Indigo hsl(238 84% 67%) · Amber hsl(38 92% 50%) · Teal hsl(174 84% 67%) · Rose hsl(340 84% 67%). =========================================================================== */ .example-accent-teal { --accent: hsl(174 84% 67%); --accent-soft: hsla(174, 84%, 67%, 0.16); --accent-glow: hsla(174, 84%, 67%, 0.36); --accent-text: hsl(174 84% 76%); }