/* ============================================================ VIVEKARASAN — DESIGN SYSTEM "Quiet Authority" Foundational tokens: color + type + space + line/shadow/motion ============================================================ */ /* ---- Webfonts (Google Fonts) ------------------------------- Newsreader — editorial serif, display & pull-quotes IBM Plex Sans — clean grotesque, body & UI IBM Plex Mono — analytical labels, indices, metadata These are the canonical brand faces (no licensed originals existed; chosen to fit "Quiet Authority"). Swap freely in one place here. ------------------------------------------------------------- */ @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;1,6..72,500&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;500;600&display=swap'); /* ============================================================ DARK THEME — "Quiet Authority, after hours" Warm near-black field, warm off-white ink, a lifted forest green so the accent keeps contrast. Apply via . All tokens above are overridden; components that use the vars need no other change. ============================================================ */ :root[data-theme="dark"] { --paper: #14130E; --surface: #1C1B15; --surface-2: #232219; --ink: #ECEAE0; --ink-2: #BEBBAF; --ink-3: #8C8A7E; --ink-4: #66645A; --line: #2C2B22; --line-strong: #3B3930; --line-faint: #232219; --accent: #84AB8F; /* lifted forest green for dark bg */ --accent-hover: #9DC0A6; --accent-press: #B4D2BC; --accent-tint: #20271F; --accent-line: #3C4B40; --on-accent: #14130E; --positive: #84AB8F; --critical: #C9837A; --notice: #C6A56E; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 6px 22px -8px rgba(0,0,0,0.55); --shadow-lg: 0 18px 50px -16px rgba(0,0,0,0.65); } /* Smooth the swap between themes (color only — never layout). */ html.theme-anim, html.theme-anim body, html.theme-anim * { transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease) !important; } :root { /* ---------- TYPE FAMILIES ---------- */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- COLOR — NEUTRALS (the 90%) ---------- Warm-tinted paper & ink. Never pure white or pure black — the warmth is what makes it read as a notebook, not a UI. */ --paper: #F6F5F1; /* primary page background */ --surface: #FCFBF8; /* raised cards / panels */ --surface-2: #FFFFFF; /* highest surface */ --ink: #1A1A17; /* fg1 — headlines, primary */ --ink-2: #45443D; /* fg2 — body text */ --ink-3: #76746A; /* fg3 — secondary / captions */ --ink-4: #9C9A8F; /* fg4 — faint / placeholders */ --line: #E4E2D9; /* hairline borders */ --line-strong: #D2CFC4; /* emphasised dividers */ --line-faint: #EDEBE4; /* barely-there rules */ /* ---------- COLOR — ACCENT (the 10%) ---------- Single muted accent: deep forest green. Used for links, active states, small marks — never as a fill for large areas. */ --accent: #34503D; /* deep forest green */ --accent-hover: #28402F; /* darker — hover/press */ --accent-press: #1F3325; --accent-tint: #E9EEEA; /* faint green wash bg */ --accent-line: #C9D6CD; /* green-tinted border */ --on-accent: #F6F5F1; /* text on accent fill */ /* Documented alternates (swap --accent to retheme): navy #25344A hover #1B273A tint #E7EAEF bronze #8A6A3E hover #6F5430 tint #F0EAE0 */ /* ---------- SEMANTIC (status) ---------- Muted to match the palette — no bright UI alerts. */ --positive: #3C5A45; --critical: #8A3A33; --notice: #8A6A3E; /* ---------- TYPE SCALE ---------- Editorial scale, slightly tightened. rem base = 16px. */ --text-display: 4.25rem; /* 68px — hero statement */ --text-h1: 3rem; /* 48px */ --text-h2: 2.125rem; /* 34px */ --text-h3: 1.5rem; /* 24px */ --text-h4: 1.1875rem; /* 19px */ --text-lead: 1.375rem; /* 22px — standfirst */ --text-body: 1.0625rem; /* 17px — default body */ --text-sm: 0.9375rem; /* 15px */ --text-label: 0.75rem; /* 12px — mono eyebrows */ --text-micro: 0.6875rem; /* 11px */ /* ---------- LINE HEIGHT ---------- */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.62; --lh-relaxed: 1.75; /* ---------- LETTER SPACING ---------- */ --ls-display: -0.02em; --ls-head: -0.01em; --ls-body: 0; --ls-label: 0.14em; /* mono eyebrows, all-caps */ /* ---------- WEIGHTS ---------- */ --w-reg: 400; --w-med: 500; --w-semi: 600; /* ---------- SPACE (8px base grid) ---------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ---------- LAYOUT ---------- */ --measure: 66ch; /* optimal reading width */ --container: 1180px; /* max content width */ --container-wide: 1320px; --gutter: 2rem; --grid-cols: 12; /* ---------- RADII (restrained) ---------- */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---------- SHADOWS (whisper-soft, rarely used) ---------- Structure comes from borders, not elevation. */ --shadow-sm: 0 1px 2px rgba(26,26,23,0.04); --shadow-md: 0 6px 20px -8px rgba(26,26,23,0.10); --shadow-lg: 0 18px 48px -16px rgba(26,26,23,0.16); /* ---------- MOTION (fade & reveal only) ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle ease-out */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 520ms; --reveal-y: 12px; /* subtle upward reveal distance */ } /* ============================================================ SEMANTIC ELEMENT STYLES Apply these directly or copy the rules. Class-based so they can be used without a CSS reset. ============================================================ */ .ds-display { font-family: var(--font-serif); font-size: var(--text-display); font-weight: var(--w-reg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--ink); text-wrap: balance; } .ds-h1 { font-family: var(--font-serif); font-size: var(--text-h1); font-weight: var(--w-reg); line-height: var(--lh-snug); letter-spacing: var(--ls-head); color: var(--ink); text-wrap: balance; } .ds-h2 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--w-reg); line-height: var(--lh-snug); letter-spacing: var(--ls-head); color: var(--ink); text-wrap: balance; } .ds-h3 { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: var(--w-med); line-height: 1.3; color: var(--ink); } .ds-h4 { font-family: var(--font-sans); font-size: var(--text-h4); font-weight: var(--w-semi); line-height: 1.4; letter-spacing: var(--ls-head); color: var(--ink); } .ds-lead { font-family: var(--font-serif); font-size: var(--text-lead); font-weight: var(--w-reg); line-height: var(--lh-relaxed); color: var(--ink-2); } .ds-body { font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--w-reg); line-height: var(--lh-body); color: var(--ink-2); } .ds-sm { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--w-reg); line-height: var(--lh-body); color: var(--ink-3); } /* Mono eyebrow / index label — the analytical "notebook" signal */ .ds-label { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--w-med); line-height: 1; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); } .ds-micro { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.08em; color: var(--ink-4); } /* Links — accent, underline offset, fade on hover */ .ds-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); padding-bottom: 1px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .ds-link:hover { color: var(--accent-hover); border-color: var(--accent); }