/* ============================================================ clawbak — DESIGN TOKENS (v4, May 2026) ------------------------------------------------------------ Canonical source of truth for the clawbak visual system. Consumed today by the v4 website (homepage, case study, blog). Intended to ALSO drive the product/dashboard UI in a future post-GTM refactor, so both surfaces converge from one file. HOW TO CONSUME - Website: import this file once, before page CSS. - Product (React/Tailwind): mirror these into the Tailwind theme (tailwind.config) OR import this file at the app root and reference the CSS vars. Keep THIS file authoritative — if a value changes, change it here first. IMPORTANT — TWO SURFACES, SHARED TOKENS, DIFFERENT DENSITY The website is a marketing surface (airy, editorial). The dashboard is an operator surface (dense, scannable). They share COLOR, TYPE, RADIUS, and ACCENT — they do NOT share spacing density. The dashboard should define its own tighter spacing values; it should not inherit --sec-y landing/reading rhythm. Only the *palette and type* cross over wholesale. ============================================================ */ :root { /* ---- SURFACES ---------------------------------------- */ --bg: #FCFCFD; /* page background (warm near-white) */ --bg-soft: #F7F8FA; /* alternating section / strip bg */ --bg-card: #FFFFFF; /* cards, raised surfaces */ /* ---- INK (text) -------------------------------------- */ --ink: #0A0E1A; /* headings, primary text, CTA fills */ --ink-2: #1F2433; /* strong body, emphasis */ --ink-3: #3D4458; /* default body copy */ --muted: #6B7180; /* secondary text, captions */ --muted-2: #9CA1AE; /* faint labels, disabled, tertiary */ /* ---- LINES ------------------------------------------- */ --line: #E7E9ED; /* default borders, card edges */ --line-soft: #EFF1F4; /* hairlines, dividers, subtle splits */ /* ---- ACCENT (indigo) --------------------------------- */ /* Deliberately indigo, NOT the legacy dashboard cyan. The website is intentionally a distinct brand expression. When the product adopts these tokens, indigo becomes the shared accent and the dashboard migrates off cyan. */ --accent: #4F46E5; --accent-soft: #EEF0FE; /* tinted fills, active chips */ --accent-line: #D8DBFA; /* accent borders */ /* ---- STATUS ------------------------------------------ */ --pos: #16A34A; --pos-soft: #DCFCE7; /* success/high */ --warn: #D97706; --warn-soft: #FEF3C7; /* caution/med */ --neg: #DC2626; /* error/low */ /* ---- TYPE -------------------------------------------- */ /* Inter — UI + body (geometric sans, the workhorse) Newsreader — italic display accents ONLY (never body) JetBrains — mono labels, eyebrows, code, metadata */ --sans: 'Inter', system-ui, -apple-system, sans-serif; --serif: 'Newsreader', 'Times New Roman', serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* Google Fonts load string: Inter:wght@300;400;450;500;600;700 Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400 JetBrains+Mono:wght@400;500 */ /* Inter feature settings (used on body for refined glyphs) */ --font-features: 'cv11', 'ss01'; /* ---- RADIUS ------------------------------------------ */ --r-btn: 7px; /* buttons */ --r-card: 12px; /* standard cards, mock frames */ --r-card-lg: 16px; /* featured cards, inline CTAs */ --r-pill: 100px; /* chips, badges, bars */ /* ---- SHADOWS ----------------------------------------- */ --shadow-sm: 0 1px 2px rgba(10,14,26,0.04); --shadow-md: 0 1px 2px rgba(10,14,26,0.04), 0 6px 20px rgba(10,14,26,0.05); --shadow-lg: 0 1px 2px rgba(10,14,26,0.04), 0 8px 28px rgba(10,14,26,0.06), 0 28px 64px rgba(10,14,26,0.08); /* ---- LAYOUT WIDTHS ----------------------------------- */ --w-site: 1180px; /* homepage / nav container max */ --w-blog: 1100px; /* blog index container */ --w-prose: 760px; /* case study text column */ --w-read: 680px; /* blog post reading column (optimal) */ /* ---- SPACING SCALE (WEBSITE ONLY) -------------------- */ /* Two density tiers. Mobile base shown here; desktop values are bumped at the 768px breakpoint (see below). TIER A — "landing" : homepage, blog index (more air) TIER B — "reading" : case study, blog post (tighter) Section gaps = 2 × --sec-y (both sides contribute). */ --sec-y: 56px; /* mobile, both tiers */ --sec-y-sm: 32px; /* compact connector band (mobile) */ --hero-top: 120px; /* hero clears the fixed nav */ --hero-bot: 64px; /* ---- BREAKPOINT -------------------------------------- */ --bp: 768px; } /* ===== DESKTOP SPACING (>= 768px) ===== Landing tier bumps to 96; reading tier bumps to 80. Apply ONE of these on the page root depending on page type. Implemented in each page's @media (min-width:768px) block. */ @media (min-width: 768px) { :root { --sec-y-sm: 48px; --hero-top: 156px; --hero-bot: 88px; } /* Landing-tier pages set: --sec-y: 96px; Reading-tier pages set: --sec-y: 80px; (kept per-page so a page declares its own tier) */ } /* ============================================================ COMPONENT PATTERNS (reference — implemented per page) ------------------------------------------------------------ These class names recur across pages and should stay stable so the system reads as one product: .btn-primary dark ink fill, white text (NEVER accent fill) .btn-ghost bg-card, --line border, ink text .btn-link accent text, gap-grows-on-hover arrow eyebrow --mono, .72rem, --muted, uppercase, 0.04em accent-italic --serif italic, used on key phrases in heads .mock / .artifact white card, --line, soft shadow, mono header chips --mono .62-.65rem; states: accent / pos / warn / neg ACCENT USAGE RULE Accent (indigo) is for EMPHASIS and INFO state only: links, active chips/rungs, the "after/high" data state, italic display accents. Primary CTAs are dark ink, not accent. This is the Linear/Vercel restraint that keeps it premium. ============================================================ */