/* * Context Design Co — Design Tokens * Locked: 2026-05-26 * Version: v3.2 (navy + copper + steel + deeper-green for BlitzBox sub-brand) * * The visual register is sourced from three brand photos located at * design/brand-photos/ — wordmark-on-steel.jpg, monogram-on-steel.jpg, * logomark-copper-on-navy.jpg. The photos ARE the brand brief; these * tokens express them as CSS values. * * Aesthetic register: * - Deep warm navy + saturated orange (the two brand colors, never traded) * - Brushed stainless steel as the primary "key art" surface (hero, feature panels) * - White / pale-cool body surface for readable content * - Inter typography, two-color wordmark ("Context" navy + "Design Co" orange) * - Subtle depth (industrial-design sculptural feel), not flat-Apple * * Deprecates v1.0 (dark + aurora + glass + serif-italic, 2026-05-16) and the * never-built v2.0 Apple-product-page register (2026-05-26 morning). * * v3.2 (2026-05-27) — adds the BlitzBox sub-brand additive layer * (--bb-* tokens). See docs/superpowers/specs/2026-05-27-blitzbox-portal-design.md. * * Anti-patterns: see design/README.md. */ :root { /* ---- COLOR — brand (the two non-negotiable colors) ---- */ --cdc-navy: #15233F; /* primary navy — from monogram-on-steel.jpg */ --cdc-navy-2: #1E2D4D; /* lighter navy, hover / pressed */ --cdc-navy-deep: #0B1426; /* deepest navy, used on the dark-section logo plate */ --cdc-navy-glow: rgba(21,35,63,.42); /* Primary brand accent is now the burnt-COPPER variant from logomark-copper-on-navy.jpg (the canonical brand photo). The brighter "orange" tones remain available for warm rim lighting in steel renders, but are not the brand color anymore. */ --cdc-copper: #C6711F; /* PRIMARY brand accent — from logomark-copper-on-navy.jpg */ --cdc-copper-2: #D6831F; /* hover / pressed */ --cdc-copper-deep: #8B4A14; /* deepest copper, for pressed states and shadow lines */ --cdc-copper-hi: #E9A65F; /* highlight on copper gradients / metallic faces */ --cdc-copper-glow: rgba(198,113,31,.36); --cdc-copper-veil: rgba(198,113,31,.10); /* Legacy bright-orange tones — reserved for steel rim light and atmospheric warmth. Do NOT use as the brand accent on CTAs, wordmarks, or eyebrows. */ --cdc-orange: #E87722; --cdc-orange-2: #F38B3D; --cdc-orange-deep: #B4571A; --cdc-orange-hi: #F5A858; --cdc-orange-glow: rgba(232,119,34,.32); --cdc-orange-veil: rgba(232,119,34,.08); /* ---- COLOR — brushed stainless steel ramp ---- */ --cdc-steel-hi: #C8CCD4; /* brightest brushed area */ --cdc-steel-mid: #8E939C; /* mid brushed */ --cdc-steel: #6A6F78; /* default steel value */ --cdc-steel-deep: #3F434B; /* shadow brushed */ --cdc-steel-edge: #2A2D33; /* darkest brushed edge */ --cdc-steel-veil: rgba(255,255,255,.04); /* ---- COLOR — light surfaces (for readable body content) ---- */ --cdc-bg: #FFFFFF; --cdc-bg-pale: #F7F8FA; --cdc-bg-soft: #EFF1F5; --cdc-bg-tint: #F4F0EA; /* faint warm tint, from steel-photo edge warmth */ /* ---- COLOR — ink (text) ---- */ --cdc-ink: var(--cdc-navy); --cdc-ink-2: #2E3A56; --cdc-ink-3: #5B6478; --cdc-ink-4: #8B92A1; --cdc-ink-on-steel: #FFFFFF; /* text laid on steel surfaces */ --cdc-ink-on-navy: #FFFFFF; /* text laid on deep-navy surfaces */ /* ---- COLOR — lines & borders ---- */ --cdc-line: #DCDEE5; --cdc-line-soft: #ECEEF2; --cdc-line-strong: #B5B8C0; --cdc-line-on-dark: rgba(255,255,255,.14); /* ---- COLOR — semantic state ---- */ --cdc-good: #30A46C; --cdc-warn: var(--cdc-orange); --cdc-bad: #D14242; --cdc-info: #3B82F6; /* ---- TYPOGRAPHY — families ---- * One sans family: Inter. Matches the Yield SPM parent brand standard. * Mono: JetBrains Mono. Reserved for code blocks, audit lines, structured data. * Serif: NONE. The v1.0 Instrument Serif accent is deprecated. */ --cdc-font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; --cdc-font-body: var(--cdc-font-display); --cdc-font-ui: var(--cdc-font-display); --cdc-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* ---- TYPOGRAPHY — display ramp ---- */ --cdc-h1-size: clamp(2.6rem, 6.2vw, 5rem); --cdc-h1-lh: 1.04; --cdc-h1-ls: -.028em; --cdc-h1-weight: 700; --cdc-h2-size: clamp(1.8rem, 3.2vw, 2.8rem); --cdc-h2-lh: 1.12; --cdc-h2-ls: -.022em; --cdc-h2-weight: 600; --cdc-h3-size: 1.4rem; --cdc-h3-lh: 1.3; --cdc-h3-ls: -.01em; --cdc-h3-weight: 600; /* ---- TYPOGRAPHY — body ramp ---- */ --cdc-lede-size: 1.32rem; --cdc-body-size: 1.0625rem; /* 17px */ --cdc-body-sm-size: 0.9375rem; /* 15px */ --cdc-body-xs-size: 0.8125rem; /* 13px */ --cdc-body-weight: 400; --cdc-body-weight-mid: 500; --cdc-body-weight-bold: 600; /* ---- TYPOGRAPHY — eyebrow / labels ---- */ --cdc-eyebrow-size: 0.78rem; --cdc-eyebrow-ls: .14em; --cdc-eyebrow-weight: 600; /* ---- 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; /* ---- RADIUS ---- */ --cdc-r-sm: 6px; --cdc-r: 8px; --cdc-r-lg: 12px; --cdc-r-xl: 18px; --cdc-r-pill: 999px; /* ---- ELEVATION ---- */ --cdc-shadow-card: 0 1px 2px rgba(21,35,63,.06), 0 8px 20px -12px rgba(21,35,63,.12); --cdc-shadow-lift: 0 2px 4px rgba(21,35,63,.08), 0 18px 36px -18px rgba(21,35,63,.18); --cdc-shadow-cta: 0 1px 2px rgba(180,87,26,.25), 0 10px 20px -8px rgba(180,87,26,.35); --cdc-shadow-steel: 0 4px 12px rgba(0,0,0,.22), 0 28px 56px -24px rgba(0,0,0,.35); /* ---- MOTION ---- */ --cdc-ease: cubic-bezier(.4, 0, .2, 1); --cdc-ease-out: cubic-bezier(.0, 0, .2, 1); --cdc-dur-fast: 120ms; --cdc-dur: 220ms; --cdc-dur-slow: 360ms; /* ---- LAYOUT ---- */ --cdc-max-page: 1280px; --cdc-max-narrow: 840px; --cdc-page-pad: 2rem; --cdc-page-pad-sm: 1.25rem; /* ---- STEEL RECIPES ---- * Two stainless steel finishes, used in different contexts. * Use via the .cdc-steel-brushed / .cdc-steel-polished primitives — do not inline. */ /* BRUSHED — visible horizontal grain, matte, industrial. Default for feature bands. */ --cdc-steel-brush: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0px, rgba(0,0,0,.04) 2px, transparent 2px, transparent 5px); --cdc-steel-grad-brushed: linear-gradient(90deg, var(--cdc-steel-edge) 0%, var(--cdc-steel-deep) 12%, var(--cdc-steel) 30%, var(--cdc-steel-hi) 52%, var(--cdc-steel-mid) 72%, var(--cdc-steel-deep) 90%, var(--cdc-steel-edge) 100%); /* POLISHED — smooth gradient, mirror-leaning, no brushing. Used for cleaner reflective sections. */ --cdc-steel-grad-polished: linear-gradient(180deg, var(--cdc-steel-hi) 0%, var(--cdc-steel-mid) 22%, var(--cdc-steel) 50%, var(--cdc-steel-deep) 78%, var(--cdc-steel-edge) 100%); --cdc-steel-polish-sheen: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,.22) 0%, transparent 60%), radial-gradient(ellipse 70% 40% at 30% 100%, rgba(255,255,255,.08) 0%, transparent 55%); /* Warm rim light — copper-toned glow used in steel compositions */ --cdc-steel-rim: radial-gradient(ellipse 60% 80% at 0% 30%, var(--cdc-copper-glow) 0%, transparent 55%); /* Legacy alias for v3.0 compatibility — points to brushed by default */ --cdc-steel-grad: var(--cdc-steel-grad-brushed); /* ───────────────────────────────────────────────────────────── * v3.2 — BLITZBOX SUB-BRAND (additive; does not replace any CDC token) * Used only on /blitzbox/* pages and app.contextdesign.tech. * CDC pages remain copper-led. * Locked: 2026-05-27 per docs/superpowers/specs/2026-05-27-blitzbox-portal-design.md §4 * ───────────────────────────────────────────────────────────── */ /* Deeper green — distinct from #007749 Springbok green, cool undertone */ --bb-green-deep: #054035; /* shadow / pressed */ --bb-green: #0A5E47; /* PRIMARY action accent */ --bb-green-2: #11725A; /* hover */ --bb-green-hi: #1F8A6E; /* metallic highlight stop */ --bb-green-glint: #3DA88A; /* polish/rim highlight */ --bb-green-wash: rgba(10,94,71,.10); /* atmospheric tint, alt sections */ --bb-green-wash-2: rgba(10,94,71,.16); /* atmospheric tint, stronger */ /* Metallic gold — warm honey, full 4-stop recipe matching CDC steel/copper */ --bb-gold-deep: #7A5814; --bb-gold: #BF9426; --bb-gold-2: #D4A732; --bb-gold-hi: #E8C865; --bb-gold-glint: #F4E2A1; /* Composed gradients — mirror --cdc-steel-grad-* and --cdc-copper recipes */ --bb-green-grad: linear-gradient(135deg, var(--bb-green-hi) 0%, var(--bb-green) 55%, var(--bb-green-deep) 100%); --bb-green-grad-brushed: repeating-linear-gradient(105deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px), linear-gradient(135deg, var(--bb-green-glint) 0%, var(--bb-green-hi) 22%, var(--bb-green) 55%, var(--bb-green-deep) 100%); --bb-gold-grad: linear-gradient(135deg, var(--bb-gold-hi) 0%, var(--bb-gold) 50%, var(--bb-gold-deep) 100%); --bb-gold-grad-brushed: repeating-linear-gradient(105deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px), linear-gradient(135deg, var(--bb-gold-glint) 0%, var(--bb-gold-hi) 22%, var(--bb-gold) 55%, var(--bb-gold-deep) 100%); /* Composed header surface — Blitzbox dark with copper seam */ --bb-header-bg: linear-gradient(95deg, var(--cdc-navy-deep) 0%, var(--cdc-navy-deep) 35%, var(--bb-green-deep) 100%); --bb-header-seam: linear-gradient(90deg, transparent 0%, var(--cdc-copper-hi) 30%, var(--cdc-copper) 70%, transparent 100%); /* Shadows — green-tinted versions of CDC's existing shadow tokens */ --bb-shadow-cta: 0 1px 2px rgba(5,64,53,.25), 0 10px 20px -8px rgba(5,64,53,.35); --bb-shadow-card: 0 1px 2px rgba(5,64,53,.06), 0 8px 20px -12px rgba(5,64,53,.14); /* Semantic mappings (preferred over raw color tokens in component code) */ --bb-action: var(--bb-green); --bb-action-hover: var(--bb-green-2); --bb-status-active: var(--bb-gold); --bb-status-edge: var(--bb-gold-deep); --bb-accent-text: var(--bb-green-deep); } /* ----------------------------------------------------------------- * BASE — every CDC page imports this. * Body defaults to the light register; steel is layered in via primitives. * No body.cdc class needed. * ----------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { margin: 0; color: var(--cdc-ink); background: var(--cdc-bg); font-family: var(--cdc-font-body); font-size: var(--cdc-body-size); font-weight: var(--cdc-body-weight); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }