/* * Context Design Co — v4.0 "Obsidian Glass" Design Tokens * Ratified: 2026-07-11 (Karel: carte-blanche redesign) * Brief: design/v4/SMART-PROMPT.md · Supersedes design/tokens.css (v3.x) * for MARKETING surfaces. Operational/financial docs keep the * print-first register. Pages import EITHER v3 OR v4, never both. * * Register in one line: terafab's cinematic restraint, on CDC's navy-black, * lit by copper, surfaced in glass. The mood anchor is the brand photo * design/brand-photos/logomark-copper-on-navy.jpg. */ :root { /* ---- CANVAS — the obsidian ramp (never pure black) ---- */ --cdc-obsidian-0: #05080F; /* deepest — vignette edges, footer floor */ --cdc-obsidian: #070B14; /* page base */ --cdc-obsidian-2: #0A0F1E; /* raised wash — section warmth */ --cdc-obsidian-3: #0B1426; /* highest wash — navy-deep, from the brand photo */ --cdc-obsidian-rgb: 7, 11, 20; /* ---- INK — alpha-tiered monochrome hierarchy (terafab pattern) ---- */ --cdc-ink: #F2F3F5; /* headlines, lit words */ --cdc-ink-2: rgba(242, 243, 245, 0.64); /* body */ --cdc-ink-3: rgba(242, 243, 245, 0.42); /* dimmed context, kickers, captions */ --cdc-ink-4: rgba(242, 243, 245, 0.26); /* ghost — unlit statement words */ /* ---- COPPER — the only hue (values carried from v3, unchanged) ---- */ --cdc-copper: #C6711F; /* primary accent */ --cdc-copper-2: #D6831F; /* hover / lit */ --cdc-copper-deep: #8B4A14; /* pressed / shadow lines */ --cdc-copper-hi: #E9A65F; /* metallic highlight, links on dark */ --cdc-copper-glow: rgba(198, 113, 31, 0.36); --cdc-copper-veil: rgba(198, 113, 31, 0.10); --cdc-copper-air: rgba(198, 113, 31, 0.05); /* ambient atmosphere glows */ /* ---- HAIRLINES — lines, not borders ---- */ --cdc-hairline: rgba(255, 255, 255, 0.10); --cdc-hairline-soft: rgba(255, 255, 255, 0.06); --cdc-hairline-strong: rgba(255, 255, 255, 0.16); --cdc-hairline-copper: rgba(198, 113, 31, 0.38); --cdc-gridline: rgba(255, 255, 255, 0.03); /* ambient dot field */ /* ---- GLASS — the v4 signature material ---- * Recipe (industry-converged, see SMART-PROMPT §7): * tint (solid-enough for AA text) + blur+saturate + top-edge inset * highlight + outer hairline + deep soft shadow. Copper glow sits * BEHIND glass, never on it. Never nest glass in glass. * Use via .g-panel / .g-card / .g-pill in glass.css — do not inline. */ --cdc-glass-tint: rgba(13, 19, 35, 0.55); /* hero-grade panels */ --cdc-glass-tint-2: rgba(13, 19, 35, 0.45); /* content cards */ --cdc-glass-tint-3: rgba(16, 23, 42, 0.38); /* pills, chips */ --cdc-glass-tint-solid:#0D1323; /* no-backdrop-filter fallback */ --cdc-glass-blur: 18px; --cdc-glass-blur-2: 14px; --cdc-glass-blur-3: 10px; --cdc-glass-sat: 1.6; /* blur without saturate = gray mud */ --cdc-glass-bright: 1.06; /* lifts glass off the near-black canvas */ --cdc-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04); /* top highlight + inner wall */ --cdc-glass-border: 1px solid rgba(255, 255, 255, 0.10); --cdc-glass-border-top: rgba(255, 255, 255, 0.18); /* asymmetric light: top edge brighter */ --cdc-glass-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.55); --cdc-glass-shadow-lift: 0 32px 80px -28px rgba(0, 0, 0, 0.65), 0 8px 40px -8px var(--cdc-copper-veil); /* ---- TYPOGRAPHY — families ---- * Display: Inter Tight, LIGHT weights (300/400). Weight restraint is the * polish: big + light + tight, never big + bold. * Body: Inter. Mono: JetBrains Mono (terminal chrome + data only). */ --cdc-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --cdc-font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --cdc-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* ---- TYPOGRAPHY — display ramp ---- */ /* Research finding (survey §1): premium dark heroes cap ~62px at weight 300 — "murmur with perfect diction", not shout. */ --cdc-h1-size: clamp(2.35rem, 4.3vw, 3.9rem); --cdc-h1-lh: 1.05; --cdc-h1-ls: -0.03em; --cdc-h1-weight: 300; --cdc-h2-size: clamp(1.9rem, 3.4vw, 3.05rem); --cdc-h2-lh: 1.07; --cdc-h2-ls: -0.028em; --cdc-h2-weight: 300; --cdc-h3-size: 1.32rem; --cdc-h3-lh: 1.3; --cdc-h3-ls: -0.014em; --cdc-h3-weight: 500; /* statement — the scroll-lit paragraph tier (between h2 and lede) */ --cdc-statement-size: clamp(1.6rem, 3.2vw, 2.7rem); --cdc-statement-lh: 1.24; --cdc-statement-ls: -0.026em; /* ---- TYPOGRAPHY — body ramp ---- */ --cdc-lede-size: clamp(1.14rem, 1.4vw, 1.3rem); --cdc-body-size: 1.0625rem; /* 17px */ --cdc-body-sm-size: 0.9375rem; /* 15px */ --cdc-body-xs-size: 0.8125rem; /* 13px */ /* ---- TYPOGRAPHY — kicker (terafab: small, medium, normal-case, dim) ---- */ --cdc-kicker-size: 0.8125rem; --cdc-kicker-weight: 500; --cdc-kicker-ls: 0.02em; /* near-normal tracking — the wide-tracked uppercase eyebrow is retired in v4 */ /* ---- SPACING ---- */ --cdc-space-1: .25rem; --cdc-space-2: .5rem; --cdc-space-3: .75rem; --cdc-space-4: 1rem; --cdc-space-6: 1.5rem; --cdc-space-8: 2rem; --cdc-space-10: 2.5rem; --cdc-space-12: 3rem; --cdc-space-16: 4rem; --cdc-space-20: 5rem; --cdc-space-28: 7rem; --cdc-space-36: 9rem; --cdc-section-pad: clamp(5.5rem, 12vh, 9.5rem); /* ---- RADIUS — capsule-leaning ---- */ --cdc-r-sm: 8px; --cdc-r: 12px; --cdc-r-lg: 16px; --cdc-r-xl: 24px; --cdc-r-pill: 999px; /* ---- MOTION ---- */ --cdc-ease: cubic-bezier(0.4, 0, 0.2, 1); --cdc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* out-expo — entrances, reveals */ --cdc-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* hover default */ --cdc-dur-fast: 150ms; --cdc-dur: 220ms; --cdc-dur-slow: 600ms; --cdc-dur-enter: 780ms; /* ---- LAYOUT ---- */ --cdc-max-page: 1180px; --cdc-max-narrow: 840px; --cdc-page-pad: clamp(1.25rem, 4vw, 3rem); } /* ----------------------------------------------------------------- * BASE — every v4 page imports this first, then glass.css. * The body IS the obsidian canvas; sections never re-paint it. * ----------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { margin: 0; color: var(--cdc-ink-2); background: /* copper atmosphere — two faint radial glows, fixed depths */ radial-gradient(ellipse 70% 42% at 78% -6%, var(--cdc-copper-air) 0%, transparent 60%), radial-gradient(ellipse 58% 36% at 12% 32%, rgba(198, 113, 31, 0.03) 0%, transparent 60%), /* obsidian ramp */ linear-gradient(180deg, var(--cdc-obsidian-3) 0%, var(--cdc-obsidian) 26%, var(--cdc-obsidian) 100%); background-color: var(--cdc-obsidian); font-family: var(--cdc-font-body); font-size: var(--cdc-body-size); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--cdc-copper-deep); color: #fff; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } }