/* ========================================================================== SimpleGrid Design System - Colors & Typography v1.0 | Based on SimpleGrid Brand Guidelines v1.0 (March 2026) ========================================================================== */ /* ----- FONTS ----- */ /* Brand guidelines v1.0 specified Geist Medium 500. Production ships Calibri because (a) it's a system font on Windows + many corporate manufacturer desktops, (b) no extra font request, (c) renders identically across the factory-floor IT estate we sell into. Geist is kept as `--font-brand` for logo/wordmark surfaces and as the first fallback in --font-heading - if a future build self-hosts it (woff2 in /assets/fonts/), all headings upgrade automatically with zero markup changes. Code: Consolas (system). */ :root { /* ----- PRIMARY COLORS ----- */ --sg-black: #1A1A1A; /* Logo, headings, primary text */ --sg-blue: #3461E0; /* CTAs, links, tags, interactive (darkened to pass WCAG AA contrast on white - was #4A7BF7) */ --sg-white: #FFFFFF; /* Page + card backgrounds */ --sg-off-white: #FAFBFC; /* Alt backgrounds, table headers */ /* ----- SUPPORTING COLORS ----- */ --sg-blue-dark: #2A52BD; /* Hover / pressed buttons */ --sg-blue-light: #EBF0FF; /* Highlight backgrounds, callouts */ --sg-charcoal: #2D2D2D; /* Dark mode bg, closing slides */ --sg-dark-gray: #4A5568; /* Body text, secondary copy */ --sg-mid-gray: #6B7280; /* Muted text, captions, metadata (darkened to pass WCAG AA on white - was #9CA3AF) */ --sg-light-gray: #E5E8ED; /* Borders, dividers, card strokes */ /* ----- SEMANTIC / ACCENT COLORS ----- */ --sg-teal: #0EA5E9; /* Secondary category / architecture */ --sg-red: #EF4444; /* Errors, warnings, pain points */ --sg-green: #10B981; /* Success, approvals, positive */ --sg-gold: #F59E0B; /* Traction stats, timeline accents */ --sg-purple: #7C3AED; /* Tech/AI category, roadmap */ /* ----- WCAG-DARK SEMANTIC VARIANTS ----- Use these for small text + large numbers on white where the base semantic colors fail AA contrast (e.g. results panels, toast text). */ --sg-green-dark: #047857; /* AA-safe positive text on white */ --sg-red-dark: #B91C1C; /* AA-safe negative text on white */ --sg-gold-dark: #B45309; /* AA-safe caution text on white */ /* ----- SEMANTIC TOKENS ----- */ --bg: var(--sg-white); --bg-alt: var(--sg-off-white); --bg-dark: var(--sg-black); --bg-highlight: var(--sg-blue-light); --fg: var(--sg-black); --fg1: var(--sg-black); /* high-emphasis */ --fg2: var(--sg-dark-gray); /* body */ --fg3: var(--sg-mid-gray); /* muted */ --fg-on-dark: var(--sg-white); --accent: var(--sg-blue); --accent-hover: var(--sg-blue-dark); --accent-bg: var(--sg-blue-light); --border: var(--sg-light-gray); --border-strong: var(--sg-mid-gray); --success: var(--sg-green); --danger: var(--sg-red); --warning: var(--sg-gold); --info: var(--sg-teal); --tech: var(--sg-purple); /* ----- FONT FAMILIES ----- */ --font-brand: 'Geist', -apple-system, 'SF Pro Display', 'Segoe UI', sans-serif; --font-heading: 'Geist', Calibri, 'Trebuchet MS', -apple-system, sans-serif; --font-body: 'Geist', Calibri, -apple-system, 'Segoe UI', sans-serif; --font-mono: Consolas, 'SF Mono', 'Liberation Mono', monospace; /* ----- TYPE SCALE (web) ----- */ --fs-hero: 50px; /* 36-48 */ --fs-h1: 35px; /* 28-32 */ --fs-h2: 25px; /* 20-24 */ --fs-h3: 21px; --fs-body: 18px; /* 14-16 */ --fs-small: 15px; --fs-caption: 13px; /* 10-12 */ --fs-tag: 12px; /* 8-10, uppercase */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.5; --lh-loose: 1.65; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-tag: 0.14em; /* ~2px for tags */ /* ----- SPACING SCALE (4px base) ----- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ----- RADII ----- */ --radius-sm: 4px; /* inputs, tags */ --radius-md: 6px; /* buttons, small cards */ --radius-lg: 10px; /* cards */ --radius-xl: 16px; /* large panels */ --radius-pill: 999px; /* ----- SHADOWS (subtle; brand prefers low elevation) ----- */ --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.04); --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04); --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04); --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.08), 0 4px 8px rgba(26, 26, 26, 0.04); --shadow-focus: 0 0 0 3px rgba(74, 123, 247, 0.25); /* ----- BORDERS ----- */ --border-width: 1px; --border-width-strong: 2px; --accent-bar: 4px; /* left-side accent bars on cards */ /* ----- MOTION ----- */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ========================================================================== SEMANTIC ELEMENT STYLES ========================================================================== */ body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--fg1); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin: 0 0 var(--space-3); } .sg-hero, h1.hero { font-size: var(--fs-hero); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.025em; } h1 { font-size: var(--fs-h1); font-weight: 700; } h2 { font-size: var(--fs-h2); font-weight: 600; color: var(--sg-blue); } h2.ink { color: var(--fg1); } h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--fg1); } p { margin: 0 0 var(--space-3); color: var(--fg2); } small, .sg-caption { font-size: var(--fs-caption); color: var(--fg3); } code, pre, .sg-mono { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg1); } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--accent-hover); border-bottom-color: currentColor; } /* Brand wordmark in Geist */ .sg-brand { font-family: var(--font-brand); font-weight: 500; letter-spacing: -0.3px; color: var(--fg1); } /* Section tag: uppercase, blue, letter-spaced - the signature label */ .sg-tag { display: inline-block; font-family: var(--font-body); font-size: var(--fs-tag); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-tag); color: var(--accent); } /* Caption tag variant on dark */ .sg-tag.on-dark { color: var(--sg-white); opacity: 0.85; }