/* ============================================================================= BELKINS.APP — PRODUCT LAB OS · DESIGN TOKENS ----------------------------------------------------------------------------- Single source of truth for the design language of belkins.app. Two layers live here: 1. CANONICAL TOKENS — copied verbatim from hub/build.js :root (lines 325-342). These already ship on the live site. Do not drift them. 2. SYSTEM TOKENS — the formalisation layer. Values that are currently hard-coded inline in build.js (type scale, spacing, motion, elevation, icons) lifted into named tokens so new surfaces inherit the same rhythm instead of re-guessing magic numbers. Adopt incrementally. Theme: light is default; dark overrides under prefers-color-scheme:dark, exactly as the source does. Every value is real — nothing invented. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1 · CANONICAL — SURFACES & INK (build.js:326) bg page canvas (under the grid paper) bg-card raised surface: cards, pills, board, buttons bg-soft recessed surface: previews, screenshot wells, tab tray ink primary text + inverted-surface fills (capture strip, btn.primary) ink-2 secondary body copy ink-3 tertiary / mono metadata / muted captions --------------------------------------------------------------------------- */ --bg: #f6f7f8; --bg-card: #ffffff; --bg-soft: #eef2f7; --ink: #15171a; --ink-2: #4b5563; --ink-3: #6b7280; /* ---- LINES (build.js:327) ---------------------------------------------- */ --line: #dfe4ea; /* default 1px hairline on every card/divider */ --line-2: #c8d1dc; /* stronger line: button borders, hover borders, rules */ /* ---- BRAND + STATUS HUES (build.js:328-329) ---------------------------- */ --accent: #ef4444; /* signature red — links:hover, h1 .accent, focus ring */ --accent-2: #b91c1c; /* deep red — eyebrow text/border */ --green: #15803d; /* status: live / shipped / pulse dot */ --blue: #2563eb; /* info hue (also == --cat-folderly in light) */ --amber: #b45309; /* status: testing */ --slate: #475569; /* status: external */ /* ---- CATEGORY ENCODING (build.js:330-331) ------------------------------ The 5-way colour code. Each product category owns one hue; the hue is piped into --cat-color per card via [data-category-type] (see :595-599). */ --cat-folderly: #2563eb; /* email deliverability · icon: mail */ --cat-ai: #7c3aed; /* ai-ops · icon: bolt */ --cat-research: #0f766e; /* research · icon: search */ --cat-doc: #ea580c; /* document-to-link · icon: doc */ --cat-external: #64748b; /* external ventures · icon: arrow */ /* ---- ELEVATION + TEXTURE (build.js:329-330) ---------------------------- */ --shadow: 0 18px 48px -32px rgba(15, 23, 42, .38); /* resting card lift */ --grid: rgba(148, 163, 184, .16); /* grid-paper line colour */ /* ---- RADII (build.js:332) ---------------------------------------------- */ --r: 8px; /* default radius: cards, board, buttons, capture strip */ --r-sm: 6px; /* small radius: icon chips, tabs, preview-open, focus ring */ /* =========================================================================== 2 · SYSTEM TOKENS — formalisation layer (proposed, not yet wired in source) =========================================================================== */ /* ---- TYPOGRAPHY · families (build.js:346,355) -------------------------- */ --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Mono is a *system-signal* font: metadata, status, prices, counters, numbers, eyebrows. Sans is for human prose: headlines, descriptions. */ --font-feature-settings: "ss01", "cv11"; /* body, build.js:347 */ /* ---- TYPOGRAPHY · size scale (de-facto, lifted from selectors) --------- */ --fs-display: 54px; /* h1 hero (≤760 → 34px, ≤520 → 30px) build.js:389 */ --fs-display-md: 34px; --fs-display-sm: 30px; --fs-stat: 22px; /* .proof-value build.js:456 */ --fs-h2: 21px; /* .sec-head h2 build.js:549 */ --fs-h3: 17px; /* .product-card h3 build.js:604 */ --fs-lead: 18px; /* hero / subhero paragraph (≤760 → 16) build.js:393 */ --fs-base: 16px; /* html root build.js:344 */ --fs-summary: 15px; /* .summary section intro build.js:551 */ --fs-body: 14px; /* .btn, .outcome, dt — primary UI text build.js:398 */ --fs-copy: 13.5px; /* .desc, .cluster p, .faq p build.js:609 */ --fs-sm: 13px; /* meta copy, footer, top-meta, capture span */ --fs-meta: 12px; /* mono metadata, sec-meta, footer-row, eyebrow */ --fs-micro: 11px; /* .num, proof-label, product-meta, lab micro text */ --fs-badge: 10px; /* .badge build.js:583 */ /* ---- TYPOGRAPHY · weights --------------------------------------------- */ --fw-regular: 500; /* .name-suffix build.js:605 */ --fw-bold: 700; /* .btn, .outcome, .filter-btn */ --fw-bold-2: 740; /* fact dt, .faq-item h3 build.js:649 */ --fw-brand: 750; /* .brand, capture-strip a build.js:364 */ --fw-head: 760; /* h2, product-card h3, quick em, preview-open */ --fw-stat: 800; /* .proof-value build.js:456 */ --fw-display: 820; /* h1 build.js:389 */ /* ---- TYPOGRAPHY · line-heights ---------------------------------------- */ --lh-display: 1.04; /* h1 (≤760 → 1.08) build.js:389 */ --lh-tight: 1.15; /* truncated strong labels (quick/lab) */ --lh-snug: 1.25; /* .product-card h3 build.js:604 */ --lh-heading: 1.35; /* .outcome build.js:608 */ --lh-body: 1.5; /* .desc build.js:609 */ --lh-prose: 1.55; /* body default build.js:347 */ /* ---- TYPOGRAPHY · measure (max line length) --------------------------- */ --measure-prose: 72ch; /* hero/subhero p build.js:393 */ --measure-wide: 78ch; /* .summary build.js:551 */ /* ---- SPACING SCALE (de-facto rhythm, structural steps) ---------------- This design hand-tunes spacing on a ~2px grid. These are the structural steps; the optical odd values (7/9/11/13/15px) used for fine icon gaps and pill padding are documented in foundations.md, not tokenised. */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-28: 28px; --space-34: 34px; /* hero column gap build.js:379 */ --space-38: 38px; --space-50: 50px; /* section top rhythm build.js:547 */ --space-64: 64px; /* footer top margin build.js:660 */ --grid-module: 72px; /* background grid pitch build.js:349 */ /* ---- RADII (extension) ------------------------------------------------- */ --radius-pill: 999px; /* eyebrow, badge, product-meta, activity, filter-btn */ --radius-full: 50%; /* brand dot, .pulse */ /* ---- ELEVATION LADDER (canonical in build.js; themed) ----------------- rest → hover. --shadow (above) is the resting card lift. Dark overrides live in the dark block below so hover depth survives dark mode. */ --shadow-hover-soft: 0 18px 34px -30px rgba(15, 23, 42, .5); /* quick-card */ --shadow-hover-card: 0 22px 44px -30px rgba(15, 23, 42, .55); /* product-card */ /* ---- MOTION · durations (build.js transitions) ------------------------- */ --dur-fast: .12s; /* .arrow nudge build.js:616 */ --dur-snap: .15s; /* .btn, .quick-card, .filter-btn */ --dur-base: .16s; /* .product-card, .preview-open build.js:560 */ --dur-reveal: .18s; /* accent bar scaleX build.js:417 */ --dur-slow: .22s; /* .preview img zoom build.js:571 */ --dur-float: .42s; /* lab-board floatIn entrance build.js:460 */ --dur-row: .5s; /* lab-row rowReveal entrance build.js:494 */ --dur-pulse: 2s; /* live pulse loop build.js:436 */ --dur-scan: 6s; /* lab-board sheen sweep build.js:465 */ --dur-ticker: 26s; /* activity rail marquee build.js:510 */ /* ---- MOTION · easing --------------------------------------------------- */ --ease: ease; /* the only curve used for UI transitions */ --ease-linear: linear;/* continuous loops (ticker) */ --lift-1: -1px; /* .btn / .filter-btn hover translateY */ --lift-2: -2px; /* .quick-card hover translateY */ --lift-4: -4px; /* .product-card hover translateY build.js:567 */ /* ---- ICONOGRAPHY (build.js:372-377) ----------------------------------- */ --icon: 16px; --icon-sm: 14px; --icon-lg: 18px; --icon-stroke: 1.9; /* line icons, round caps, no fill, currentColor */ /* ---- LAYOUT (build.js:358) -------------------------------------------- */ --container: 1240px; --container-pad-x: 24px; /* ≤640 → 16px */ --container-pad-y: 28px; /* ≤640 → 22px */ /* Breakpoints are documentation-only (CSS vars can't be read in @media): 960 hero stacks · 980 featured→2col · 760 mobile type/nav · 640 1col · 520 narrow-phone clamp. See foundations.md → Layout. */ } /* ============================================================================= DARK THEME — overrides only the canonical hues (build.js:334-342). System tokens (type, spacing, motion, icons) are theme-agnostic. ============================================================================= */ @media (prefers-color-scheme: dark) { :root { --bg: #0b0d10; --bg-card: #12161b; --bg-soft: #171d24; --ink: #f8fafc; --ink-2: #cbd5e1; --ink-3: #94a3b8; --line: #26303b; --line-2: #3b4857; --accent: #f87171; --accent-2: #ef4444; --green: #22c55e; --blue: #60a5fa; --amber: #fbbf24; --slate: #94a3b8; --shadow: 0 18px 48px -34px rgba(0, 0, 0, .9); --grid: rgba(148, 163, 184, .08); --cat-folderly: #60a5fa; --cat-ai: #a78bfa; --cat-research: #2dd4bf; --cat-doc: #fb923c; --cat-external: #94a3b8; --shadow-hover-soft: 0 18px 34px -30px rgba(0, 0, 0, .7); --shadow-hover-card: 0 22px 44px -30px rgba(0, 0, 0, .75); } } /* ============================================================================= CATEGORY CHANNEL — how a category hue reaches a component (build.js:595-603). Set [data-category-type] on a .product-card / .quick-card / .lab-tab and the matching hue flows into --cat-color, which drives the accent bar, icon chip tint, and active state. This is the single mechanism behind the colour code. ============================================================================= */ [data-category-type="folderly"] { --cat-color: var(--cat-folderly); } [data-category-type="ai-ops"] { --cat-color: var(--cat-ai); } [data-category-type="research"] { --cat-color: var(--cat-research); } [data-category-type="document-link"] { --cat-color: var(--cat-doc); } [data-category-type="external"] { --cat-color: var(--cat-external); }