/* ============================================================ IGNITE MY AI — Core tokens: color + type ------------------------------------------------------------ Warm, human, light. Clean but not clinical. Reference vibe: Xero / Monzo for Business / Linear. All colors are OKLCH. Hex appears only in third-party assets. Fonts load from Google Fonts (see note at bottom). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Hanken+Grotesk:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---------- FONT FAMILIES ---------- */ --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --font-text: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ============================================================ COLOR — SURFACES (warm paper, never pure white) ============================================================ */ --paper: oklch(98.6% 0.006 84); /* page ground — warm off-white */ --paper-2: oklch(97.2% 0.008 80); /* alternating section ground */ --surface: oklch(99.6% 0.003 84); /* cards / raised panels */ --sunk: oklch(96.2% 0.009 78); /* inset fields, wells */ --ink-invert: oklch(24% 0.018 56); /* dark sections (footer/CTA band) */ /* ============================================================ COLOR — INK / TEXT (warm charcoal, never pure black) ============================================================ */ --ink: oklch(26% 0.018 55); /* headings, strong text */ --body: oklch(40% 0.014 55); /* body copy */ --muted: oklch(54% 0.012 58); /* captions, secondary labels */ --faint: oklch(67% 0.010 62); /* meta, disabled-ish */ --on-dark: oklch(95% 0.008 84); /* text on ink-invert surfaces */ --on-dark-mut: oklch(76% 0.012 70); /* muted text on dark */ /* ============================================================ COLOR — EMBER (primary brand — "ignite", warm & confident) ============================================================ */ --ember: oklch(64% 0.172 47); /* primary accent / CTA */ --ember-deep: oklch(57% 0.158 44); /* hover / press */ --ember-rich: oklch(70% 0.165 52); /* bright lift */ --ember-soft: oklch(93.5% 0.05 58); /* tint fill / chip bg */ --ember-pale: oklch(96.8% 0.024 64); /* faint wash */ --ember-line: oklch(64% 0.13 50 / 0.30); /* ember hairline */ /* ============================================================ COLOR — SUPPORT ============================================================ */ /* Pine — results, savings, positive ("money saved / time back") */ --pine: oklch(52% 0.082 165); --pine-soft: oklch(93.5% 0.035 165); --pine-line: oklch(52% 0.07 165 / 0.28); /* Clay — secondary warm neutral accent for diagrams / illustration */ --clay: oklch(72% 0.07 60); --clay-soft: oklch(94.5% 0.03 66); /* Denim — trust / quiet links / info (used sparingly, never AI-blue glow) */ --denim: oklch(52% 0.072 250); --denim-soft: oklch(94% 0.03 250); /* Amber — highlight / attention */ --amber: oklch(78% 0.13 78); --amber-soft: oklch(95% 0.05 84); /* ============================================================ COLOR — LINES & BORDERS ============================================================ */ --line: oklch(90% 0.008 78); /* default hairline */ --line-strong: oklch(85% 0.010 75); /* emphasised divider */ --line-faint: oklch(93.5% 0.006 80); /* barely-there divider */ /* ============================================================ ELEVATION — soft, diffuse, warm-tinted (never harsh black) ============================================================ */ --shadow-color: 32 18% 38%; /* warm brown-grey, used via hsl */ --shadow-xs: 0 1px 2px oklch(40% 0.03 50 / 0.05); --shadow-sm: 0 1px 2px oklch(40% 0.03 50 / 0.05), 0 2px 6px oklch(40% 0.03 50 / 0.05); --shadow-md: 0 2px 4px oklch(40% 0.03 50 / 0.04), 0 6px 16px oklch(40% 0.03 50 / 0.07); --shadow-lg: 0 4px 8px oklch(40% 0.03 50 / 0.04), 0 16px 36px oklch(40% 0.03 50 / 0.09); --shadow-xl: 0 8px 16px oklch(40% 0.03 50 / 0.05), 0 30px 64px oklch(40% 0.03 50 / 0.12); --shadow-ember: 0 6px 20px oklch(64% 0.16 47 / 0.28); /* ============================================================ RADII — friendly, soft (squircle-ish), never sharp ============================================================ */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* ============================================================ SPACING — 4px base ============================================================ */ --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: 160px; /* ============================================================ MOTION — strong custom easings (per Emil Kowalski craft notes) ============================================================ */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --dur-press: 140ms; --dur-ui: 200ms; --dur-panel: 320ms; } /* ============================================================ SEMANTIC TYPE — apply these classes/elements directly Scales tuned for screen. Min body 16px; large, breathable. ============================================================ */ .t-display { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.9rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.022em; color: var(--ink); } .t-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .t-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.018em; color: var(--ink); } .t-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.18; letter-spacing: -0.012em; color: var(--ink); } .t-title { font-family: var(--font-text); font-weight: 600; font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.006em; color: var(--ink); } .t-lead { font-family: var(--font-text); font-weight: 400; font-size: clamp(1.18rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--body); } .t-body { font-family: var(--font-text); font-weight: 400; font-size: 1.0625rem; /* 17px */ line-height: 1.65; color: var(--body); } .t-small { font-family: var(--font-text); font-weight: 400; font-size: 0.9375rem; /* 15px */ line-height: 1.55; color: var(--muted); } .t-eyebrow { font-family: var(--font-text); font-weight: 600; font-size: 0.8rem; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-deep); } .t-mono { font-family: var(--font-mono); font-weight: 500; font-size: 0.8rem; line-height: 1.4; letter-spacing: 0.02em; color: var(--muted); } .t-code { font-family: var(--font-mono); font-weight: 400; font-size: 0.9rem; line-height: 1.6; color: var(--ink); } /* Optical niceties */ .t-display, .t-h1, .t-h2, .t-h3, .t-title { text-wrap: balance; } .t-lead, .t-body { text-wrap: pretty; } /* ============================================================ FONT NOTE ------------------------------------------------------------ Display : Bricolage Grotesque (characterful, warm, modern) Text/UI : Hanken Grotesk (humanist, friendly, legible) Mono : JetBrains Mono (workflow / code snippets) These are loaded via Google Fonts CDN (@import above). No local .woff2 files are bundled. If you need offline/self-host builds, drop the files in /fonts and swap the @import for @font-face. These are brand-chosen faces, not substitutions. ============================================================ */