/* ============================================================================= * colors_and_type.css — Slingshot Design System (Canonical, v2) * ============================================================================= * * The canonical brand: warm, structural, geometric. Carbon foundation, Signal * Amber accent, Space Grotesk for conviction, Inter for clarity, JetBrains Mono * for technical content. No serifs, no decorative faces, no container shapes * around the logo, no Amber on the logo itself. * * Anti-Mimicry test: every surface built on these tokens must contain at least * one element that a generic insurtech could not adopt by changing its logo — * the warm palette, the structural type system, or (preferably) both. * * Periods are the brand's punctuation. Exclamation marks are forbidden. * * Imported by every Slingshot artifact: drop into and you have the * tokens, the type ladder, and the provenance footer styles. Nothing else * needed. * ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ── Brand colors (canonical, named) ─────────────────────────────── */ --carbon: #1C1C1E; /* primary dark — headlines, hero, data-dense panels */ --warm-stone: #F5F0EB; /* primary light — content panels, warm surfaces */ --architect-white: #FAFAF8; /* default page background — max whitespace */ --slate: #6B7280; /* secondary text, metadata, borders */ --slate-aa: #595E68; /* AA-safe Slate for body text on Warm Stone */ --signal-amber: #D97706; /* the single accent — CTAs, active state, data highlights */ --deep-ember: #92400E; /* accent dark — hover, emphasis on light, secondary CTA */ --alert-vermillion: #DC2626; /* errors, drift indicators — used sparingly */ /* ── Carbon scale (for nested dark surfaces) ──────────────────────── */ --carbon-0: #0F0F10; /* deepest — beneath panels */ --carbon-1: #1C1C1E; /* base — Carbon */ --carbon-2: #232325; /* raised — cards on Carbon */ --carbon-3: #2D2D30; /* hairline border on Carbon */ --carbon-4: #3A3A3E; /* hover border on Carbon */ --carbon-5: #5A5A5F; /* muted text on Carbon */ /* ── Warm Stone scale (for nested light surfaces) ─────────────────── */ --stone-50: #FBFAF7; /* lightest — under panels */ --stone-100: #F5F0EB; /* base — Warm Stone */ --stone-200: #ECE4DB; /* raised — content panels */ --stone-300: #D8CDBE; /* hairline border on Warm Stone */ --stone-400: #B8AB9A; /* hover border on Warm Stone */ /* ── Signal Amber scale (10-step, derived from D97706) ────────────── */ --amber-50: #FDF6EC; --amber-100: #FBE4C0; --amber-200: #F7C887; --amber-300: #F1A94F; --amber-400: #E68C20; --amber-500: #D97706; /* canonical Signal Amber */ --amber-600: #B85F04; --amber-700: #92400E; /* canonical Deep Ember */ --amber-800: #6F300B; --amber-900: #4A2007; /* ── Semantic tokens (the API for components) ─────────────────────── */ --bg: var(--architect-white); /* default page background */ --bg-warm: var(--warm-stone); /* warm surface (alternate) */ --bg-hero: var(--carbon); /* hero / data-room / marketing */ --bg-panel: #FFFFFF; /* lifted content panels on light */ --fg: var(--carbon); /* primary text on light */ --fg-inverse: var(--warm-stone); /* primary text on Carbon */ --fg-muted: var(--slate-aa); /* secondary text on light, AA-safe */ --fg-muted-onDark: #BCB8B0; /* secondary text on Carbon */ --fg-faint: var(--slate); /* tertiary / captions */ --accent: var(--signal-amber); /* the breaker */ --accent-hover: var(--deep-ember); /* hover / pressed */ --accent-onLight-text: var(--deep-ember); /* AA-safe Amber substitute for body text on light */ --hairline: #E4DCD0; /* divider on light */ --hairline-onDark: var(--carbon-3); /* divider on Carbon */ --alert: var(--alert-vermillion); /* ── Type families ──────────────────────────────────────────────── */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* conviction */ --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* clarity */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* data */ /* ── Type scale (canonical 8-level ladder) ───────────────────────── * Spec says: Display/H1/H2/Label = Space Grotesk * H3/Body/Caption = Inter * Code/Data = JetBrains Mono * Rule 4: periods are the brand's punctuation. * Rule 5: headlines max 12 words. * Rule 7: labels create hierarchy through contrast, not size. * ─────────────────────────────────────────────────────────────── */ --t-display: 700 72px/1.05 var(--font-display); /* hero conviction */ --t-h1: 600 44px/1.1 var(--font-display); /* chapter / section opener */ --t-h2: 500 30px/1.2 var(--font-display); /* subsection */ --t-h3: 600 22px/1.3 var(--font-body); /* card title */ --t-body: 400 17px/1.6 var(--font-body); /* primary reading text */ --t-caption: 400 14px/1.55 var(--font-body); /* source attribution */ --t-data: 400 14px/1.5 var(--font-mono); /* feature IDs, values, schema */ --t-label: 500 12px/1.4 var(--font-display); /* UPPERCASE labels */ --tracking-display: -0.02em; --tracking-h1: -0.015em; --tracking-h2: -0.01em; --tracking-h3: 0; --tracking-body: 0; --tracking-caption: 0.01em; --tracking-data: 0; --tracking-label: 0.08em; /* ── Spacing — 8px base (all values are multiples of 8) ───────────── */ --space-0: 0; --space-1: 8px; --space-2: 16px; --space-3: 24px; /* desktop gutter */ --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 80px; /* desktop side margin (min) */ --space-8: 96px; --space-9: 120px; /* desktop side margin (max) */ --space-10: 160px; /* whitespace around headlines */ /* ── Grid system ─────────────────────────────────────────────────── */ --grid-desktop-cols: 12; /* @kind other */ --grid-desktop-gutter: 24px; --grid-desktop-margin-min: 80px; --grid-desktop-margin-max: 120px; --grid-tablet-cols: 8; /* @kind other */ --grid-tablet-gutter: 16px; --grid-tablet-margin: 40px; --grid-mobile-cols: 4; /* @kind other */ --grid-mobile-gutter: 12px; --grid-mobile-margin: 24px; /* ── Radii — strict, structural. No "rounded-2xl" anywhere. ──────── */ --radius-0: 0; /* most things — sharp */ --radius-1: 2px; /* fields, small buttons */ --radius-2: 4px; /* panels — the cap */ --radius-pill: 9999px;/* status pills only */ /* ── Hairlines & shadows ─────────────────────────────────────────── */ --border-hairline: 1px solid var(--hairline); --border-onDark: 1px solid var(--hairline-onDark); --shadow-panel: 0 1px 2px rgba(28,28,30,0.04), 0 1px 1px rgba(28,28,30,0.03); --shadow-raised: 0 4px 12px rgba(28,28,30,0.06), 0 1px 2px rgba(28,28,30,0.04); --shadow-overlay: 0 16px 40px rgba(28,28,30,0.16), 0 4px 12px rgba(28,28,30,0.08); /* Logo Rule 6: no drop shadows, outlines, gradients, embossing, 3D, animation on the LOGO. Panel shadows below are for component surfaces only. */ /* ── Motion — minimal, structural ────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* 120ms color, focus */ --ease-move: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* 200ms layout */ --dur-quick: 120ms; /* @kind other */ --dur-move: 200ms; /* @kind other */ /* ── Provenance footer (the visual signature) ────────────────────── */ --provenance-height: 24px; } /* ───────────────────────────────────────────────────────────────────── * Base — reset + body type * ───────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font: var(--t-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ───────────────────────────────────────────────────────────────────── * Type ladder — utility classes match the named levels * ───────────────────────────────────────────────────────────────────── */ .t-display { font: var(--t-display); letter-spacing: var(--tracking-display); } .t-h1 { font: var(--t-h1); letter-spacing: var(--tracking-h1); } .t-h2 { font: var(--t-h2); letter-spacing: var(--tracking-h2); } .t-h3 { font: var(--t-h3); letter-spacing: var(--tracking-h3); } .t-body { font: var(--t-body); letter-spacing: var(--tracking-body); } .t-caption { font: var(--t-caption); letter-spacing: var(--tracking-caption); color: var(--fg-muted); } .t-data { font: var(--t-data); letter-spacing: var(--tracking-data); } .t-label { font: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); } .t-label--amber { color: var(--accent); } /* Stat numerals — editorial weight, mono available */ .t-stat { font-family: var(--font-display); font-weight: 400; /* light, not bold — editorial */ font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; } .t-stat--small { font-size: clamp(36px, 4vw, 48px); } /* Default heading mappings */ h1 { font: var(--t-h1); letter-spacing: var(--tracking-h1); margin: 0; } h2 { font: var(--t-h2); letter-spacing: var(--tracking-h2); margin: 0; } h3 { font: var(--t-h3); letter-spacing: var(--tracking-h3); margin: 0; } p { margin: 0; max-width: 64ch; } code, kbd, samp { font: var(--t-data); } /* ───────────────────────────────────────────────────────────────────── * Surfaces — semantic helpers * ───────────────────────────────────────────────────────────────────── */ .surface-light { background: var(--bg); color: var(--fg); } .surface-warm { background: var(--bg-warm); color: var(--fg); } .surface-carbon { background: var(--bg-hero); color: var(--fg-inverse); } .surface-carbon .t-label, .surface-carbon .t-caption { color: var(--fg-muted-onDark); } .surface-carbon a { color: var(--accent); } .hairline { border: 0; border-top: var(--border-hairline); margin: 0; } .surface-carbon .hairline { border-top-color: var(--hairline-onDark); } /* ───────────────────────────────────────────────────────────────────── * Provenance footer — THE signature motif * Every product surface and every Slingshot artifact should carry one of * these. Read left-to-right: run-id · timestamp · R-rule version · hash. * "Every number is auditable. Every decision is attributed." * ───────────────────────────────────────────────────────────────────── */ .provenance { font: var(--t-data); font-size: 11px; color: var(--fg-faint); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-top: var(--border-hairline); letter-spacing: 0.01em; } .provenance .sep { color: var(--hairline); } .provenance .label { text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; color: var(--fg-faint); } .surface-carbon .provenance { color: var(--fg-muted-onDark); border-top-color: var(--hairline-onDark); } .surface-carbon .provenance .sep { color: var(--carbon-3); } /* ───────────────────────────────────────────────────────────────────── * Container — 12-col grid with 80–120px side margins on desktop * ───────────────────────────────────────────────────────────────────── */ .container { max-width: 1440px; margin: 0 auto; padding-left: clamp(var(--grid-mobile-margin), 6vw, var(--grid-desktop-margin-max)); padding-right: clamp(var(--grid-mobile-margin), 6vw, var(--grid-desktop-margin-max)); } /* ───────────────────────────────────────────────────────────────────── * Focus ring — single canonical treatment * ───────────────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-1); }