/* ========================================================================== Lumen Design System — Tokens Clean, bright, and soft. A blog/reading brand. ========================================================================== */ /* ---------- Fonts ---------- Fraunces is overused per the house rules — using Newsreader (editorial serif with soft, humanist terminals) for display and reading, and Plus Jakarta Sans for UI. JetBrains Mono for code. All three are available as free webfonts. */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ------------------------------------------------------------------ COLOR — Foundations Warm off-whites, a dusty peach accent, soft sky, and ink neutrals. Bright via luminosity (high L* backgrounds), soft via desaturation (chroma capped ~0.08 for surfaces). ------------------------------------------------------------------ */ /* Surfaces — warm off-whites, not pure white */ --paper: oklch(99.2% 0.006 80); /* app background */ --paper-warm: oklch(97.6% 0.012 75); /* card / panel */ --paper-sunk: oklch(95.4% 0.018 72); /* input / well */ --paper-tint: oklch(98.4% 0.014 55); /* peach-tinted surface */ /* Ink — warm near-blacks, never pure black */ --ink: oklch(22% 0.018 65); /* primary text */ --ink-2: oklch(38% 0.014 65); /* secondary text */ --ink-3: oklch(56% 0.012 65); /* tertiary / meta */ --ink-4: oklch(72% 0.008 65); /* disabled / hairline text */ /* Lines */ --line: oklch(91% 0.008 70); /* default hairline */ --line-strong: oklch(84% 0.012 70); /* emphasized border */ /* Accents — dusty, never candy */ --peach: oklch(78% 0.09 40); /* primary accent */ --peach-ink: oklch(52% 0.13 38); /* peach on light */ --peach-soft: oklch(94% 0.04 45); /* peach surface */ --sky: oklch(82% 0.07 230); /* cool accent */ --sky-ink: oklch(52% 0.11 235); --sky-soft: oklch(95% 0.03 225); --sage: oklch(82% 0.06 155); /* tertiary accent */ --sage-ink: oklch(50% 0.09 155); --sage-soft: oklch(95% 0.025 155); --butter: oklch(92% 0.08 90); /* highlight / marker */ --butter-soft: oklch(97% 0.04 90); /* Semantic */ --fg: var(--ink); --fg-muted: var(--ink-2); --fg-subtle: var(--ink-3); --bg: var(--paper); --bg-elev: var(--paper-warm); --bg-sunk: var(--paper-sunk); --border: var(--line); --border-strong: var(--line-strong); --accent: var(--peach-ink); --accent-bg: var(--peach-soft); --link: var(--peach-ink); --success: oklch(55% 0.12 155); --success-bg: var(--sage-soft); --warning: oklch(62% 0.15 65); --warning-bg: oklch(96% 0.05 80); --danger: oklch(55% 0.16 25); --danger-bg: oklch(96% 0.03 25); --info: var(--sky-ink); --info-bg: var(--sky-soft); /* ------------------------------------------------------------------ TYPE — Families ------------------------------------------------------------------ */ --font-serif: 'Newsreader', 'Iowan Old Style', 'Georgia', serif; --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale — generous, reading-first */ --t-display: clamp(44px, 5.2vw, 72px); --t-h1: clamp(36px, 4vw, 52px); --t-h2: 32px; --t-h3: 24px; --t-h4: 20px; --t-lead: 20px; --t-body: 17px; --t-small: 15px; --t-caption: 13px; --t-micro: 12px; --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.5; --lh-reading: 1.65; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-caps: 0.08em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ------------------------------------------------------------------ SPACING — 4pt grid with generous rhythm ------------------------------------------------------------------ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ------------------------------------------------------------------ RADII — soft, editorial; never pill-shaped except on tags ------------------------------------------------------------------ */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* ------------------------------------------------------------------ SHADOWS — diffuse, low-contrast, warm-tinted Avoid the default grey; shadows pick up the paper's warmth. ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px oklch(30% 0.03 65 / 0.04); --shadow-sm: 0 1px 2px oklch(30% 0.03 65 / 0.05), 0 2px 6px oklch(30% 0.03 65 / 0.04); --shadow-md: 0 2px 4px oklch(30% 0.03 65 / 0.04), 0 8px 20px oklch(30% 0.03 65 / 0.06); --shadow-lg: 0 4px 8px oklch(30% 0.03 65 / 0.04), 0 16px 40px oklch(30% 0.03 65 / 0.08); --shadow-inset: inset 0 1px 2px oklch(30% 0.03 65 / 0.05); /* Focus ring — peach tinted, not browser blue */ --focus-ring: 0 0 0 3px oklch(78% 0.09 40 / 0.35); /* ------------------------------------------------------------------ MOTION ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 380ms; /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --max-prose: 68ch; --max-page: 1200px; --max-wide: 1440px; } /* ========================================================================== Semantic element defaults ========================================================================== */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display, h1.display { font-family: var(--font-serif); font-size: var(--t-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg); } h1, .h1 { font-family: var(--font-serif); font-size: var(--t-h1); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } h2, .h2 { font-family: var(--font-serif); font-size: var(--t-h2); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); } h3, .h3 { font-family: var(--font-sans); font-size: var(--t-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); } h4, .h4 { font-family: var(--font-sans); font-size: var(--t-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } .lead { font-family: var(--font-serif); font-size: var(--t-lead); line-height: var(--lh-reading); color: var(--fg-muted); font-style: italic; } p, .p { font-size: var(--t-body); line-height: var(--lh-reading); color: var(--fg); } .prose { font-family: var(--font-serif); font-size: 19px; line-height: var(--lh-reading); max-width: var(--max-prose); } small, .small { font-size: var(--t-small); color: var(--fg-muted); } .caption { font-size: var(--t-caption); color: var(--fg-subtle); line-height: var(--lh-normal); } .eyebrow { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--fg-muted); font-weight: var(--fw-semibold); } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.92em; } a, .link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, var(--link), transparent 60%); transition: text-decoration-color var(--dur-fast) var(--ease-out); } a:hover { text-decoration-color: var(--link); }