/* Copy of the Build Theory DS colors_and_type.css with the Geist / Geist Mono @import removed (Cohort 02 type v3 loads its own fonts). Keep tokens in sync with the DS. */ /* ===================================================================== Build Theory — Colors & Type ===================================================================== Source of truth for the design system's foundations. Import this once at the top of any HTML file: The fonts are Geist + Geist Mono via Google Fonts (preconnect handled below). Geist closely matches the thin geometric letterforms of the Build Theory wordmark. ===================================================================== */ /* ---------- COLORS ---------------------------------------------------- */ :root { /* Canvas — warm, paper-like off-white is the brand's default surface. Pure #fff is reserved for cards/forms layered ON paper. */ --bt-paper: #F2EFE8; /* primary canvas */ --bt-paper-deep: #E9E5DB; /* recessed paper, blueprint zones */ --bt-white: #FFFFFF; /* cards, forms, raised surfaces */ /* Ink — near-black, never pure #000. */ --bt-ink: #0B0B0C; /* primary text + primary CTAs */ --bt-graphite: #1B1B1F; /* dark product/feature bands */ --bt-graphite-2: #2A2A2F; /* dark surface, raised on graphite */ /* Concrete neutrals — for borders, metadata, muted UI. */ --bt-concrete-900: #2A2A2F; --bt-concrete-700: #4A4A52; /* secondary text */ --bt-concrete-500: #7B7B85; /* tertiary text, captions */ --bt-concrete-300: #B8B8BF; /* hairlines on dark */ --bt-concrete-200: #DAD7CF; /* dividers, soft borders on paper */ --bt-concrete-100: #E5E2D9; /* card borders, faint rules */ --bt-concrete-050: #EFECE3; /* recessed wash on paper */ /* Signal Coral — the one brand accent. Used for momentum, shipping, active states, status pills, single-purpose attention. Never as a broad surface fill or gradient. Replaces an earlier lime exploration. */ --bt-signal: #FF7759; --bt-signal-deep: #E55A3D; /* hover/pressed coral */ --bt-signal-soft: #FFAD9B; /* soft coral border / chip outline */ --bt-signal-wash: #FFE3DA; /* faint coral wash, soft chip bg */ /* Semantic */ --bt-success: #2BAE6A; --bt-warn: #E0A82E; --bt-error: #C8392B; --bt-focus: #1C40F2; /* keyboard focus ring (rarely visible, but defined) */ /* Semantic foreground / background aliases */ --fg-1: var(--bt-ink); --fg-2: var(--bt-concrete-700); --fg-3: var(--bt-concrete-500); --fg-on-dark: #F4F2EC; --fg-on-dark-2: #A8A8B0; --bg-canvas: var(--bt-paper); --bg-surface: var(--bt-white); --bg-recessed: var(--bt-paper-deep); --bg-dark: var(--bt-graphite); --bg-dark-raised: var(--bt-graphite-2); --border-hairline: var(--bt-concrete-100); --border-rule: var(--bt-concrete-200); --border-strong: var(--bt-ink); --border-on-dark: rgba(244,242,236,0.14); /* ---------- TYPE TOKENS ------------------------------------------- */ --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Sizes — the system prefers BIG display type and modest body type. Display weights are kept LIGHT (200–400) to echo the logo's thin geometry. Avoid heavy weights for hierarchy; use scale + spacing. */ --fs-display-xl: clamp(64px, 9vw, 128px); /* hero declaration */ --fs-display-l: clamp(48px, 6vw, 88px); /* page hero */ --fs-display-m: clamp(36px, 4.5vw, 64px); /* section heading */ --fs-h1: clamp(32px, 3.4vw, 48px); --fs-h2: clamp(24px, 2.4vw, 32px); --fs-h3: 20px; --fs-h4: 17px; --fs-body-l: 18px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 13px; --fs-micro: 11px; --fs-mono-label: 12px; /* uppercase bracketed mono labels */ --fs-mono-meta: 13px; /* Line heights — display copy is TIGHT (1.0–1.1), body relaxed (1.5). */ --lh-display: 1.02; --lh-heading: 1.12; --lh-body: 1.55; --lh-mono: 1.4; /* Tracking */ --tr-display: -0.025em; /* tight, almost carved */ --tr-heading: -0.012em; --tr-body: 0; --tr-mono: 0.08em; /* mono labels are SPACED */ /* ---------- SHAPE / SPACE TOKENS ---------------------------------- */ --r-none: 0; --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* 8-pt scale, with a few intermediates for typography rhythm */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* Borders — Build Theory uses thin hairlines, not shadows. */ --bw-hair: 1px; --bw-rule: 1.5px; --bw-bold: 2px; /* Shadows — used sparingly, on media cards / floating UI / modals. Lift is meaningful enough to read on warm paper, never glowy. */ --shadow-card: 0 1px 0 rgba(11,11,12,0.04), 0 2px 4px rgba(11,11,12,0.05); --shadow-lift: 0 1px 2px rgba(11,11,12,0.06), 0 8px 16px -4px rgba(11,11,12,0.10), 0 24px 40px -12px rgba(11,11,12,0.18); --shadow-modal: 0 4px 8px rgba(11,11,12,0.08), 0 16px 32px -8px rgba(11,11,12,0.18), 0 40px 72px -16px rgba(11,11,12,0.32); /* Motion — subtle, deliberate, no bounce. */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 420ms; } /* ---------- BASE ------------------------------------------------------ */ html, body { margin: 0; background: var(--bg-canvas); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--tr-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--bt-signal-wash); color: var(--bt-ink); } /* ---------- SEMANTIC TYPE CLASSES ------------------------------------- */ .bt-display-xl, .bt-display-l, .bt-display-m, .bt-h1, .bt-h2, .bt-h3, .bt-h4 { font-family: var(--font-display); color: var(--fg-1); margin: 0; text-wrap: balance; } .bt-display-xl { font-size: var(--fs-display-xl); font-weight: 200; line-height: var(--lh-display); letter-spacing: var(--tr-display); } .bt-display-l { font-size: var(--fs-display-l); font-weight: 300; line-height: var(--lh-display); letter-spacing: var(--tr-display); } .bt-display-m { font-size: var(--fs-display-m); font-weight: 300; line-height: var(--lh-heading); letter-spacing: var(--tr-display); } .bt-h1 { font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--tr-heading); } .bt-h2 { font-size: var(--fs-h2); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--tr-heading); } .bt-h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; } .bt-h4 { font-size: var(--fs-h4); font-weight: 500; line-height: 1.4; } .bt-body-l { font-size: var(--fs-body-l); line-height: 1.5; color: var(--fg-2); } .bt-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); } .bt-body-s { font-size: var(--fs-body-s); line-height: 1.5; color: var(--fg-2); } .bt-caption { font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-3); } .bt-micro { font-size: var(--fs-micro); line-height: 1.4; color: var(--fg-3); } /* Mono labels are the system's secondary voice: bracketed, uppercase, spaced. They mark coordinates, status, build-week, cohort, etc. */ .bt-mono-label { font-family: var(--font-mono); font-size: var(--fs-mono-label); font-weight: 500; line-height: var(--lh-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--fg-2); } .bt-mono-meta { font-family: var(--font-mono); font-size: var(--fs-mono-meta); font-weight: 400; line-height: var(--lh-mono); letter-spacing: 0.04em; color: var(--fg-3); } .bt-mono-data { font-family: var(--font-mono); font-size: var(--fs-body-s); font-variant-numeric: tabular-nums; color: var(--fg-1); letter-spacing: 0; } /* Link */ .bt-link { color: var(--fg-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--bt-concrete-200); transition: text-decoration-color var(--dur-fast) var(--ease-out); } .bt-link:hover { text-decoration-color: var(--bt-ink); } /* Dark-surface overrides — apply via class on a wrapping element. */ .bt-on-dark { color: var(--fg-on-dark); } .bt-on-dark .bt-body, .bt-on-dark .bt-body-l, .bt-on-dark .bt-body-s { color: var(--fg-on-dark-2); } .bt-on-dark .bt-link { color: var(--fg-on-dark); text-decoration-color: rgba(244,242,236,0.3); } .bt-on-dark .bt-link:hover { text-decoration-color: var(--fg-on-dark); } .bt-on-dark .bt-mono-label, .bt-on-dark .bt-mono-meta { color: var(--fg-on-dark-2); } /* ---------- BRACKET MARK (recurring motif) ---------------------------- */ /* Use on a mono label to add [ … ] framing in CSS. */ .bt-bracket::before { content: '['; margin-right: 0.55em; opacity: 0.55; } .bt-bracket::after { content: ']'; margin-left: 0.55em; opacity: 0.55; } /* ---------- HAIRLINE + BLUEPRINT GRID UTILITIES ----------------------- */ .bt-hairline { border-top: var(--bw-hair) solid var(--border-hairline); } .bt-rule { border-top: var(--bw-hair) solid var(--border-rule); } /* Blueprint grid background — extremely subtle, evokes the "Theory" half of the brand. Apply to large sections only. */ .bt-grid-bg { background-color: var(--bg-canvas); background-image: linear-gradient(to right, rgba(11,11,12,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(11,11,12,0.035) 1px, transparent 1px); background-size: 32px 32px; background-position: -0.5px -0.5px; } .bt-on-dark.bt-grid-bg, .bt-grid-bg.bt-on-dark { background-color: var(--bg-dark); background-image: linear-gradient(to right, rgba(244,242,236,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(244,242,236,0.05) 1px, transparent 1px); }