/* ═══════════════════════════════════════════════════════════════════════════ NCH Labs — Design System (canonical, portable) Source of truth for tokens + the dual serif/sans typeface modes + component patterns. Import this file directly, or copy the :root token block into your app's own stylesheet. Everything is plain CSS custom properties + classes — no build step, no JS. THIS FILE SUPERSEDES the reference/styles.css token sheet. The one change from the classical original is the RECONCILED ACCENT: the accent ramp is now anchored to the brand logo mark (#643312 / #c67139 / #ffe1d0) instead of the old #b68235. See "Reconciled accent" below. Fonts (load only the active mode's families via in the page head): serif mode : Cormorant Garamond (400,600), Lora (400,600), IBM Plex Mono (400) sans mode : Instrument Sans (400,500,600), IBM Plex Sans (400,600), IBM Plex Mono (400) ══════════════════════════════════════════════════════════════════════════ */ :root { /* — Ground / ink (classical light system) — */ --color-bg: #f3f2f2; /* page ground */ --color-surface: #eae9e9; /* image mats, quiet fills */ --color-text: #201f1d; /* body + headings */ --color-divider: color-mix(in srgb, #201f1d 16%, transparent); /* ── RECONCILED ACCENT ───────────────────────────────────────────────────── ONE canonical ramp, aligned to the brand logo. Anchors fixed by the mark: accent-200 = #ffe1d0 (logo tinted-patch ground) --color-accent = accent-600 = #c67139 (logo crossing / brand accent) accent-800 = #643312 (logo circle+axis / brand mark) The rest fills coherently on the same hue path. Contrast roles preserved from the classical system: --color-accent (#c67139) → 3.23:1 on --color-bg → chrome/strokes/large text ONLY --color-accent-700 → 5.16:1 on --color-bg → accent text at body size --color-accent-800 (mark) → 9.28:1 on --color-bg → strong accent text / the logo Accent is NEVER a large fill — it is 1–2px rules, borders, tags, small caps. */ --color-accent: #c67139; /* === accent-600 */ --color-accent-100: #fff1e6; --color-accent-200: #ffe1d0; /* logo tint ground */ --color-accent-300: #f6c6a3; --color-accent-400: #e5a06d; --color-accent-500: #d3823f; --color-accent-600: #c67139; /* brand accent (logo crossing) */ --color-accent-700: #9c5222; /* accent text at body size */ --color-accent-800: #643312; /* brand mark (logo circle+axis) */ --color-accent-900: #3f200b; /* — Neutral ramp (unchanged from classical; shared OKLCH lightness scale) — */ --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; /* secondary / meta text */ --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; /* — Brand dark-ground tokens (for deliberately-dark surfaces; see dark block) — */ --color-dark-bg: #201e1d; /* logo dark-ground */ --color-dark-mark: #f5ead8; /* logo mark on dark */ /* On dark grounds the accent stays #c67139 (4.60:1 on #201e1d). */ /* — Spacing (4px base @ 1.15× density) — */ --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px; --space-6: 27.6px; --space-8: 36.8px; /* — Radius — */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; /* — Elevation (a whisper — prefer borders; never shadow cards/article surfaces) — */ --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); } /* ═══════════════════════════════════════════════════════════════════════════ DUAL TYPEFACE MODES — [data-typeface="serif" | "sans"] on or a section root. Colors, spacing, hairlines, layout are IDENTICAL between modes; only the four type tokens + their metric adjustments change. Do NOT hard-code font sizes in components — read the tokens so a mode switch retunes them. ══════════════════════════════════════════════════════════════════════════ */ :root, [data-typeface="serif"] { --font-heading: "Cormorant Garamond", Georgia, serif; --font-body: "Lora", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --font-display-weight: 400; /* display takes the normal cut — it is large */ --font-heading-weight: 600; /* interface headings cap at semibold */ --font-body-weight: 400; --display-size: 58px; /* index featured / article h1 */ --display-tracking: -0.025em; --display-leading: 1.04; --h2-size: 30px; --body-size: 18px; --body-leading: 1.75; --measure: 68ch; --body-align: justify; /* justified column is the serif voice */ } [data-typeface="sans"] { --font-heading: "Instrument Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --font-display-weight: 600; /* sans needs weight where serif needed size */ --font-heading-weight: 600; --font-body-weight: 400; --display-size: 46px; /* sans sets larger on the body — step down */ --display-tracking: -0.02em; --display-leading: 1.1; --h2-size: 26px; --body-size: 17px; --body-leading: 1.65; --measure: 72ch; --body-align: left; /* NEVER justify the sans mode */ } /* ── Type rules that read the mode tokens ─────────────────────────────────── 1. Size, not just family — the per-mode --display-size/--body-size are the fix for Cormorant running small and Instrument running large. Don't override. 2. Weight compensates for the size drop — serif display 400 (large), sans display 600 (smaller). Never bold the serif body; italics + size carry emphasis there. 3. Justification is serif-only. Sans is flush-left, always. 4. Measure widens 68ch→72ch in sans (serif ch runs narrower in practice). 5. Small-caps META LABELS stay monospace in BOTH modes — this is the one type role that never changes, and it is what makes the two modes feel like one publication (see .kicker / .meta-label). 6. Tabular numerals wherever numbers stand as figures (kickers, dates, read times, table cells, contents numbering). Running prose keeps default figures. */ * , *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: var(--font-body-weight); font-size: var(--body-size); line-height: var(--body-leading); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } .display { /* index featured / article h1 */ font-size: var(--display-size); font-weight: var(--font-display-weight); line-height: var(--display-leading); letter-spacing: var(--display-tracking); } h2 { font-size: var(--h2-size); line-height: 1.15; } .prose { max-width: var(--measure); } .prose p { text-align: var(--body-align); text-wrap: pretty; margin: 0 0 var(--space-3); } /* ── Monospace meta labels — the through-line, identical in both modes ────── */ .kicker, .meta-label, .table th, .tag, .callout-label { font-family: var(--font-mono); text-transform: uppercase; font-variant-numeric: tabular-nums; } .kicker { /* Category · N min · Mon YYYY */ font-size: 11px; letter-spacing: 0.16em; color: var(--color-accent-700); } .meta-label { /* rail titles, "Contents", "Also this month" */ font-size: 10px; letter-spacing: 0.18em; color: var(--color-neutral-700); } /* ═══════════════════════════════════════════════════════════════════════════ COMPONENT PATTERNS Notes inline; each maps to the editorial parts in the design handoff. Apps may use these classes directly or re-implement in their own framework off the tokens — either is fine, the tokens are the contract. ══════════════════════════════════════════════════════════════════════════ */ /* — Masthead — brand at 28–34px heading; tagline in mono; nav flush right. Bottom rule: 2px solid --color-text on INDEX pages, 1px divider on ARTICLE pages. */ .masthead { display: flex; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-text); } .masthead--article { border-bottom: 1px solid var(--color-divider); } .masthead__brand { font-family: var(--font-heading); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; } .masthead__tagline { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-neutral-700); } .masthead__nav { margin-left: auto; display: flex; gap: var(--space-4); font-family: var(--font-body); font-size: 14px; } .masthead__nav a { color: inherit; text-decoration: none; } .masthead__nav a:hover, .masthead__nav a[aria-current="page"] { color: var(--color-accent-700); } /* — TL;DR block — accent left rule, no fill. — */ .tldr { border-left: 2px solid var(--color-accent); padding: 6px 0 6px 18px; margin: var(--space-4) 0; } /* — Pitfall / Recommendation callout — hairline box, accent-700 top rule. Variants differ ONLY in the label word. — */ .callout { border: 1px solid var(--color-divider); border-top: 2px solid var(--color-accent-700); border-radius: var(--radius-sm); padding: 16px 18px; margin: var(--space-4) 0; } .callout-label { /* mono 10px 0.16em uppercase accent-700 */ display: block; font-size: 10px; letter-spacing: 0.16em; color: var(--color-accent-700); margin-bottom: 6px; } .tldr .callout-label { font-family: var(--font-mono); } .callout-body, .tldr-body { font-size: 16px; line-height: 1.65; margin: 0; } /* — Pull quote — heading font, italic, centered; no ornament beyond curly quotes. */ .pullquote { font-family: var(--font-heading); font-style: italic; font-size: 24px; line-height: 1.32; text-align: center; max-width: var(--measure); margin: var(--space-6) auto; } /* — Tags — pill, never filled. Active = accent outline+text; inactive = divider+neutral. */ .tag { display: inline-flex; align-items: center; font-size: 10px; letter-spacing: 0.12em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--color-divider); color: var(--color-neutral-700); } .tag--active { border-color: var(--color-accent); color: var(--color-accent-700); } /* — Comparison table — mono header rule, hairline rows, no zebra, no vertical rules. */ .table { width: 100%; border-collapse: collapse; font-size: 15px; } .table th { text-align: left; font-size: 10px; letter-spacing: 0.16em; font-weight: 400; color: var(--color-neutral-700); padding: 0 14px 8px 0; border-bottom: 1px solid var(--color-text); } .table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--color-divider); } .table td.num, .table th.num { font-variant-numeric: tabular-nums; text-align: right; } /* — Figure "plate" — matted like a tipped-in book plate. Caption below in mono-neutral. */ .plate { box-sizing: border-box; border: 6px solid var(--color-surface); outline: 1px solid var(--color-divider); } .plate img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 12px; color: var(--color-neutral-700); margin-top: var(--space-1); } /* — Buttons — OUTLINES on transparent, never solid fills. — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn-primary { color: var(--color-accent-700); border-color: var(--color-accent); } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); } .btn-primary:active { border-color: var(--color-accent-600); background: color-mix(in srgb, var(--color-accent) 16%, transparent); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } /* — Links — accent-700, underline on hover only. — */ a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--color-accent-600); text-decoration: underline; } /* — Focus — always a visible accent ring; never the browser default. — */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — Hairline rule — */ .hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — Transitions — minimal; color + border only, 120–160ms ease-out. This is a reading system: no motion on layout, no reveal animations. — */ a, .btn, .tag { transition: color 140ms ease-out, background 140ms ease-out, border-color 140ms ease-out; } /* ═══════════════════════════════════════════════════════════════════════════ DARK-GROUND SURFACES (opt-in) — for apps with a deliberately-dark design (admin dashboard, the nch-labs.com landing page). Set data-theme="dark" on a root; the brand accent #c67139 is retained (4.60:1 on #201e1d). This is NOT the canonical publication look — the light classical system above is. See INTEGRATION.md "conflicts" for which apps stay dark by intent. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --color-bg: #201e1d; --color-surface: #2b2826; --color-text: #f5ead8; --color-divider: color-mix(in srgb, #f5ead8 16%, transparent); /* Accent stays brand #c67139; use lighter accent steps (#e5a06d / #f6c6a3) for accent TEXT on dark, since #c67139 clears UI/large but not small body. */ } /* ═══════════════════════════════════════════════════════════════════════════ BUNDLED — @nchlabs/theme toggle button (so one CSS import styles the switcher too). Token-driven; restyles itself in light and dark automatically. ══════════════════════════════════════════════════════════════════════════ */ .nch-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; cursor: pointer; color: var(--color-neutral-700); background: transparent; border: 1px solid var(--color-divider); border-radius: var(--radius-md); transition: color 140ms ease-out, border-color 140ms ease-out, background 140ms ease-out; } .nch-theme-toggle:hover { color: var(--color-accent-700); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); } .nch-theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .nch-theme-toggle svg { display: block; }