/* GENERATED by design/sync.mjs from design/tokens.css — do not edit. */ /* ───────────────────────────────────────────────────────────────────────── agentbuzz — design tokens SINGLE SOURCE OF TRUTH. The landing page consumes this directly; the iOS app consumes design/Tokens.swift, which is GENERATED from this file by design/gen-swift.mjs. Change a value here, re-run the generator, never hand-edit the Swift. The one rule that holds the system together: CHROME IS MONOCHROME. Colour is spent only on the three agent states — done / blocked / failed. If a surface is not reporting state, it is ink on paper. That is what makes a web section and a push notification read as the same object. ───────────────────────────────────────────────────────────────────────── */ :root { /* ── ink & paper ────────────────────────────────────────────────────── Warm paper, cool-black ink. Never pure #fff / #000: pure white glares on an OLED phone at 2am, which is exactly when this product fires. */ --ink: #0B0B0C; --paper: #FBFAF8; --paper-sunk: #F3F1ED; /* recessed surfaces: terminal wells, code */ --paper-rise: #FFFFFF; /* raised surfaces: notification cards */ /* Ink at opacity. Explicit steps, not ad-hoc alpha, so the web and the app can't drift apart. */ --ink-72: rgba(11, 11, 12, 0.72); /* body copy on paper */ --ink-52: rgba(11, 11, 12, 0.52); /* secondary copy */ --ink-38: rgba(11, 11, 12, 0.38); /* captions, timestamps */ --ink-14: rgba(11, 11, 12, 0.14); /* strong hairline */ --ink-08: rgba(11, 11, 12, 0.08); /* hairline — the only "border" */ --ink-04: rgba(11, 11, 12, 0.04); /* tint fill */ /* ── state: the ONLY colour in the system ──────────────────────────── Desaturated toward printer's ink so they sit on paper without shouting. Each state has a fill for tint chips and a line for text. */ --ok: #1B6E45; --ok-fill: #E4F0E9; --blocked: #A8650C; --blocked-fill: #F7EBD9; --fail: #B03A2E; --fail-fill: #F6E3E0; /* ── type ───────────────────────────────────────────────────────────── Two families, both OFL, both bundled into the iOS app so the wordmark and the notification body are literally the same typeface. */ --font-sans: "Geist", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Display is set LOWERCASE with tight tracking — the single most recognisable trait of the reference language, and free to reproduce on iOS with .tracking() + .textCase(.lowercase). */ --track-display: -0.035em; --track-title: -0.02em; --track-body: 0em; --track-mono: -0.01em; /* Fluid display scale. min/max are the iOS values (see Tokens.swift): the phone always renders the small end. */ --size-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem); /* 44 → 88 */ --size-title: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); /* 28 → 44 */ --size-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);/* 18 → 22 */ --size-body: 1rem; /* 16 */ --size-small: 0.875rem; /* 14 */ --size-micro: 0.75rem; /* 12 */ --leading-display: 0.96; --leading-title: 1.08; --leading-body: 1.6; /* ── space — 8pt grid, no exceptions ──────────────────────────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --measure: 62ch; /* readable line length */ --page: 1080px; /* content column */ --gutter: var(--s5); /* ── form ───────────────────────────────────────────────────────────── Hairlines, not shadows. Exactly ONE shadow exists in the system and it belongs to the notification card, because a notification is the only thing that floats above the page. */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --hairline: 1px solid var(--ink-08); --shadow-notification: 0 1px 2px rgba(11, 11, 12, 0.04), 0 8px 24px -6px rgba(11, 11, 12, 0.12), 0 24px 48px -12px rgba(11, 11, 12, 0.10); /* ── device chrome ──────────────────────────────────────────────────── Deliberately NOT derived from --ink. A phone and a Watch are physical objects: their bodies and screens stay dark when the page goes dark, because real hardware does not invert. Defined only here and never in the dark blocks, so they survive the role swap unchanged. */ --device-body: #0B0B0C; --device-screen-a: #14201A; /* top of the lockscreen wash */ --device-screen-b: #0B0B0C; /* bottom */ --device-fg: rgba(255, 255, 255, 0.92); --device-fg-dim: rgba(255, 255, 255, 0.50); --device-fill: rgba(255, 255, 255, 0.10); /* State hues as they appear ON a device screen — always the dark values, because a phone screen is dark regardless of the page's theme. */ --device-ok: #5CC08C; --device-blocked: #E0A34A; --device-fail: #E07567; /* A notification card sitting ON one of those screens. The hero renders real hardware, and hardware does not invert, so the card's ink & paper are pinned here too — the white banner on the iPhone looks the same whichever theme the page is in. */ --device-card: #FFFFFF; --device-card-ink: #0B0B0C; --device-card-ok: #1B6E45; --device-card-blocked: #A8650C; --device-card-fail: #B03A2E; /* Hardware is the one thing on the page that is genuinely an object in space, so it is allowed to cast a real shadow. Notifications get the other one. */ --shadow-device: 0 2px 6px rgba(11, 11, 12, 0.10), 0 18px 40px -10px rgba(11, 11, 12, 0.22), 0 44px 80px -24px rgba(11, 11, 12, 0.20); /* ── motion ─────────────────────────────────────────────────────────── One easing, three durations. The notification uses --ease-enter, an overshoot that mimics the real iOS banner spring. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-enter: cubic-bezier(0.16, 1.02, 0.3, 1.0); --dur-fast: 140ms; --dur: 280ms; --dur-slow: 620ms; } /* ── dark ──────────────────────────────────────────────────────────────── Roles swap; state hues brighten just enough to hold contrast on ink. Declared for both the explicit toggle and the system default. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #F4F2EE; --paper: #0B0B0C; --paper-sunk: #131315; --paper-rise: #1A1A1D; --ink-72: rgba(244, 242, 238, 0.72); --ink-52: rgba(244, 242, 238, 0.52); --ink-38: rgba(244, 242, 238, 0.38); --ink-14: rgba(244, 242, 238, 0.16); --ink-08: rgba(244, 242, 238, 0.10); --ink-04: rgba(244, 242, 238, 0.05); --ok: #5CC08C; --ok-fill: #10241A; --blocked: #E0A34A; --blocked-fill: #2A1F0E; --fail: #E07567; --fail-fill: #2B1512; --shadow-notification: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 24px 48px -12px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { --ink: #F4F2EE; --paper: #0B0B0C; --paper-sunk: #131315; --paper-rise: #1A1A1D; --ink-72: rgba(244, 242, 238, 0.72); --ink-52: rgba(244, 242, 238, 0.52); --ink-38: rgba(244, 242, 238, 0.38); --ink-14: rgba(244, 242, 238, 0.16); --ink-08: rgba(244, 242, 238, 0.10); --ink-04: rgba(244, 242, 238, 0.05); --ok: #5CC08C; --ok-fill: #10241A; --blocked: #E0A34A; --blocked-fill: #2A1F0E; --fail: #E07567; --fail-fill: #2B1512; --shadow-notification: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 24px 48px -12px rgba(0, 0, 0, 0.5); }