/* ============================================================================
design-system.css — Thumbprinted Design System v2.0 (Primer-grounded)
----------------------------------------------------------------------------
A layered token system + component library modeled on GitHub Primer's
architecture (primer.style/product/primitives/token-names), SKINNED to the
Thumbprinted brand: cream canvas, one disciplined ember accent, Fraunces
(display) + DM Mono (labels) over a system sans body. Editorial, premium —
NOT GitHub's gray utilitarian look. Primer gives us the RIGOR; the values
give us the brand.
THREE TOKEN TIERS (Primer methodology):
1. PRIMITIVE / base --tp-base-* raw values, referenced only by L2
2. FUNCTIONAL / role --tp-fgColor-*, --tp-bgColor-*, --tp-borderColor-*,
--tp-space-*, --tp-text-* (semantic, mode-aware)
3. COMPONENT --tp-button-*, --tp-card-*, --tp-control-*, ...
named {component}-{variant}-{prop}-{state}
SAFE-BY-DESIGN: every custom property is namespaced --tp-*, so this sheet
never clobbers a page's own bare :root vars (legacy pages define --paper /
--ink / --accent). Every component selector is namespaced .tp-* and element
selectors only ever match INSIDE an opted-in .tp-* scope (e.g. .tp-nav a).
Dropping this on a page changes nothing until that page adopts a
.tp-* class. The build injects it site-wide on that guarantee.
Authored 2026-06-15. Documented in /DESIGN_SYSTEM.md (v2).
============================================================================ */
/* ===========================================================================
TIER 1 — PRIMITIVES (base tokens) raw values; L2 references these
Primer analog: base-color-*, base-size-*, base-fontWeight-*
=========================================================================== */
:root {
/* Brand color ramps -------------------------------------------------- */
--tp-base-color-cream: #F5EFE6; /* canvas */
--tp-base-color-paper: #FAF6EE; /* raised surface */
--tp-base-color-panel: #EFE4D4; /* deeper inset */
--tp-base-color-sand: #D4C7B5; /* hairline */
--tp-base-color-ink-900: #1A1714; /* primary text / emphasis */
--tp-base-color-ink-700: #3A332C;
--tp-base-color-ink-500: #5C544A; /* secondary text */
--tp-base-color-ink-400: #6E655A; /* captions — 5.31:1 on cream (AA) */
--tp-base-color-ember-700: #5C1A10; /* pressed */
--tp-base-color-ember-600: #8B2E1F; /* THE accent */
--tp-base-color-ember-400: #B85B45; /* accent on dark */
--tp-base-color-white: #FFFFFF;
/* Size / spacing primitives (4px base) ------------------------------- */
--tp-base-size-2: 0.125rem; --tp-base-size-4: 0.25rem; --tp-base-size-6: 0.375rem;
--tp-base-size-8: 0.5rem; --tp-base-size-12: 0.75rem; --tp-base-size-16: 1rem;
--tp-base-size-20: 1.25rem; --tp-base-size-24: 1.5rem; --tp-base-size-32: 2rem;
--tp-base-size-48: 3rem; --tp-base-size-64: 4rem; --tp-base-size-96: 6rem;
/* Typography primitives --------------------------------------------- */
--tp-base-fontStack-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Charter, Georgia, serif;
--tp-base-fontStack-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--tp-base-fontStack-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--tp-base-fontSize-12: 0.75rem; --tp-base-fontSize-14: 0.875rem; --tp-base-fontSize-16: 1rem;
--tp-base-fontSize-18: 1.125rem; --tp-base-fontSize-20: 1.25rem; --tp-base-fontSize-24: 1.5rem;
--tp-base-fontSize-32: 2rem; --tp-base-fontSize-48: 3rem;
--tp-base-fontWeight-light: 300; --tp-base-fontWeight-normal: 400;
--tp-base-fontWeight-medium: 500; --tp-base-fontWeight-semibold: 600;
--tp-base-letterSpacing-wide: 0.18em;
--tp-base-letterSpacing-label: 0.16em;
--tp-base-letterSpacing-tight: -0.04em;
/* Border / radius / motion primitives ------------------------------- */
--tp-base-borderWidth-thin: 1px;
--tp-base-borderWidth-thick: 2px;
--tp-base-borderWidth-accent: 3px;
--tp-base-borderRadius-sharp: 2px; /* editorial: near-zero rounding */
--tp-base-borderRadius-card: 4px;
--tp-base-duration-fast: 140ms;
--tp-base-duration-slow: 320ms;
--tp-base-easing: cubic-bezier(0.2, 0, 0.2, 1);
}
/* ===========================================================================
TIER 2 — FUNCTIONAL / SEMANTIC ROLES reference primitives only
Primer analog: fgColor-*, bgColor-*, borderColor-*, focus-outlineColor
These are the tokens components and pages SHOULD reference day to day.
=========================================================================== */
:root {
/* Foreground (text/icon) roles -------------------------------------- */
--tp-fgColor-default: var(--tp-base-color-ink-900);
--tp-fgColor-muted: var(--tp-base-color-ink-500);
--tp-fgColor-subtle: var(--tp-base-color-ink-400);
--tp-fgColor-accent: var(--tp-base-color-ember-600);
--tp-fgColor-onEmphasis: var(--tp-base-color-cream); /* text on ink/ember */
--tp-fgColor-onDark: var(--tp-base-color-cream);
--tp-fgColor-onDarkMuted: rgba(245, 239, 230, 0.72);
/* Background (surface) roles ---------------------------------------- */
--tp-bgColor-default: var(--tp-base-color-cream); /* page canvas */
--tp-bgColor-raised: var(--tp-base-color-paper); /* cards */
--tp-bgColor-inset: var(--tp-base-color-panel); /* deeper panel */
--tp-bgColor-emphasis: var(--tp-base-color-ink-900);/* strong neutral fill */
--tp-bgColor-emphasis-hover: var(--tp-base-color-ink-700);
--tp-bgColor-accentEmphasis: var(--tp-base-color-ember-600);
--tp-bgColor-accentEmphasis-hover: var(--tp-base-color-ember-700);
--tp-bgColor-dark: var(--tp-base-color-ink-900);
/* Border roles ------------------------------------------------------ */
--tp-borderColor-default: var(--tp-base-color-sand);
--tp-borderColor-muted: rgba(212, 199, 181, 0.55);
--tp-borderColor-strong: var(--tp-base-color-ink-900);
--tp-borderColor-accent: var(--tp-base-color-ember-600);
--tp-borderColor-onDark: rgba(245, 239, 230, 0.22);
/* Focus -------------------------------------------------------------- */
--tp-focus-outlineColor: var(--tp-base-color-ember-600);
/* Functional spacing aliases ---------------------------------------- */
--tp-space-1: var(--tp-base-size-4); --tp-space-2: var(--tp-base-size-8);
--tp-space-3: var(--tp-base-size-12); --tp-space-4: var(--tp-base-size-16);
--tp-space-6: var(--tp-base-size-24); --tp-space-8: var(--tp-base-size-32);
--tp-space-12: var(--tp-base-size-48); --tp-space-16: var(--tp-base-size-64);
--tp-space-24: var(--tp-base-size-96);
/* Functional typography --------------------------------------------- */
--tp-font-display: var(--tp-base-fontStack-serif);
--tp-font-label: var(--tp-base-fontStack-mono);
--tp-font-body: var(--tp-base-fontStack-sans);
--tp-text-xs: var(--tp-base-fontSize-12);
--tp-text-sm: var(--tp-base-fontSize-14);
--tp-text-base: var(--tp-base-fontSize-16);
--tp-text-lg: var(--tp-base-fontSize-18);
--tp-text-xl: var(--tp-base-fontSize-24);
--tp-text-2xl: var(--tp-base-fontSize-32);
--tp-text-3xl: var(--tp-base-fontSize-48);
--tp-text-display: clamp(2.6rem, 6vw, 4.6rem);
--tp-tracking-wide: var(--tp-base-letterSpacing-wide);
--tp-tracking-label: var(--tp-base-letterSpacing-label);
--tp-tracking-tight: var(--tp-base-letterSpacing-tight);
/* Functional radius / motion / measure ------------------------------ */
--tp-radius-control: var(--tp-base-borderRadius-sharp);
--tp-radius-surface: var(--tp-base-borderRadius-card);
--tp-motion-fast: var(--tp-base-duration-fast) var(--tp-base-easing);
--tp-motion-slow: var(--tp-base-duration-slow) var(--tp-base-easing);
--tp-measure: min(1120px, calc(100% - 48px));
}
/* ===========================================================================
TIER 3 — COMPONENT TOKENS reference functional roles
Primer analog: button-primary-bgColor-hover, control-borderColor-rest, ...
=========================================================================== */
:root {
/* Button — primary (ember; the conversion action) ------------------- */
--tp-button-primary-bgColor-rest: var(--tp-bgColor-accentEmphasis);
--tp-button-primary-bgColor-hover: var(--tp-bgColor-accentEmphasis-hover);
--tp-button-primary-fgColor: var(--tp-fgColor-onEmphasis);
--tp-button-primary-borderColor: var(--tp-borderColor-accent);
/* Button — secondary (strong neutral ink fill) ---------------------- */
--tp-button-secondary-bgColor-rest: var(--tp-bgColor-emphasis);
--tp-button-secondary-bgColor-hover: var(--tp-bgColor-accentEmphasis);
--tp-button-secondary-fgColor: var(--tp-fgColor-onEmphasis);
--tp-button-secondary-borderColor: var(--tp-borderColor-strong);
/* Button — quiet (link-like, button padding) ------------------------ */
--tp-button-quiet-fgColor-rest: var(--tp-fgColor-default);
--tp-button-quiet-bgColor-hover: var(--tp-bgColor-emphasis);
--tp-button-quiet-fgColor-hover: var(--tp-fgColor-onEmphasis);
/* Card --------------------------------------------------------------- */
--tp-card-bgColor: var(--tp-bgColor-raised);
--tp-card-borderColor: var(--tp-borderColor-default);
--tp-card-accent-borderColor: var(--tp-borderColor-accent);
--tp-card-padding: 1.5rem 1.6rem;
/* Nav ---------------------------------------------------------------- */
--tp-nav-link-fgColor-rest: var(--tp-fgColor-muted);
--tp-nav-link-fgColor-hover: var(--tp-fgColor-accent);
--tp-nav-link-fgColor-current: var(--tp-fgColor-accent);
/* Control (form inputs) --------------------------------------------- */
--tp-control-bgColor-rest: var(--tp-base-color-white);
--tp-control-fgColor-rest: var(--tp-fgColor-default);
--tp-control-fgColor-placeholder: var(--tp-fgColor-subtle);
--tp-control-borderColor-rest: var(--tp-borderColor-default);
--tp-control-borderColor-focus: var(--tp-focus-outlineColor);
/* Footer ------------------------------------------------------------- */
--tp-footer-bgColor: var(--tp-bgColor-dark);
--tp-footer-fgColor: var(--tp-fgColor-onDarkMuted);
--tp-footer-linkColor: rgba(245, 239, 230, 0.85);
--tp-footer-linkColor-hover: var(--tp-base-color-white);
--tp-footer-headColor: rgba(245, 239, 230, 0.45);
}
/* ===========================================================================
GLOBAL OPT-IN PRIMITIVES
focus ring follows Primer's convention (outline + offset, focus-visible).
Scoped to .tp-* so it never overrides a host page's own focus styling.
=========================================================================== */
.tp-btn:focus-visible,
.tp-nav a:focus-visible,
.tp-link:focus-visible,
.tp-input:focus-visible,
.tp-textarea:focus-visible,
.tp-select:focus-visible,
.tp-wordmark:focus-visible {
outline: var(--tp-base-borderWidth-thick) solid var(--tp-focus-outlineColor);
outline-offset: 2px;
}
/* Container ------------------------------------------------------------ */
.tp-wrap { width: var(--tp-measure); margin-inline: auto; }
/* ===========================================================================
COMPONENTS (opt-in, namespaced .tp-*)
=========================================================================== */
/* Wordmark — typographic mark + whorl glyph --------------------------------
Thumbprint */
.tp-wordmark {
display: inline-flex; align-items: center; gap: 0.6rem;
border: 0; text-decoration: none; color: var(--tp-fgColor-default); line-height: 1;
}
.tp-wordmark__mark { display: block; width: 30px; height: 30px; flex: 0 0 30px; overflow: visible; }
.tp-wordmark__mark .tp-ridge { fill: none; stroke: var(--tp-fgColor-default); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.tp-wordmark__mark .tp-core { fill: none; stroke: var(--tp-fgColor-accent); stroke-width: 1.9; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.tp-wordmark__text { font-family: var(--tp-font-display); font-weight: var(--tp-base-fontWeight-medium); font-size: 1.18rem; letter-spacing: -0.012em; color: var(--tp-fgColor-default); }
.tp-wordmark__text b { font-weight: var(--tp-base-fontWeight-medium); font-style: italic; color: var(--tp-fgColor-accent); }
.tp-wordmark:hover .tp-core { stroke: var(--tp-base-color-ember-400); transition: stroke var(--tp-motion-fast); }
/* Eyebrow / label ----------------------------------------------------------
01 - Section */
.tp-eyebrow {
font-family: var(--tp-font-label); font-size: 0.7rem; font-weight: var(--tp-base-fontWeight-medium);
letter-spacing: var(--tp-tracking-wide); text-transform: uppercase; color: var(--tp-fgColor-accent);
}
.tp-eyebrow .tp-idx, .tp-eyebrow .idx { color: var(--tp-fgColor-subtle); }
.tp-eyebrow--onDark { color: var(--tp-base-color-ember-400); }
.tp-eyebrow--onDark .tp-idx, .tp-eyebrow--onDark .idx { color: rgba(245, 239, 230, 0.4); }
/* Section header (eyebrow + display heading group) -------------------------- */
.tp-section-head { font-family: var(--tp-font-display); font-weight: var(--tp-base-fontWeight-medium); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--tp-fgColor-default); margin: 0.9rem 0 1.2rem; max-width: 20em; }
.tp-section-head em { font-style: italic; color: var(--tp-fgColor-accent); }
/* Link --------------------------------------------------------------------- */
.tp-link { color: var(--tp-fgColor-accent); text-decoration: none; border-bottom: 1px solid rgba(139, 46, 31, 0.35); transition: border-color var(--tp-motion-fast); }
.tp-link:hover { border-bottom-color: var(--tp-fgColor-accent); }
/* Buttons — primary / secondary / quiet ------------------------------------
… */
.tp-btn {
display: inline-block; font-family: var(--tp-font-label); font-size: 0.74rem;
letter-spacing: var(--tp-tracking-wide); text-transform: uppercase;
padding: 0.95rem 1.7rem; text-align: center; text-decoration: none; cursor: pointer;
border: var(--tp-base-borderWidth-thin) solid var(--tp-button-secondary-borderColor);
border-radius: var(--tp-radius-control);
background: var(--tp-button-secondary-bgColor-rest); color: var(--tp-button-secondary-fgColor);
transition: background var(--tp-motion-fast), border-color var(--tp-motion-fast), transform var(--tp-motion-fast);
}
.tp-btn:hover { background: var(--tp-button-secondary-bgColor-hover); border-color: var(--tp-button-secondary-bgColor-hover); color: var(--tp-button-secondary-fgColor); transform: translateY(-1px); }
.tp-btn--secondary { /* default = secondary; explicit alias */ }
.tp-btn--primary {
background: var(--tp-button-primary-bgColor-rest); border-color: var(--tp-button-primary-borderColor);
color: var(--tp-button-primary-fgColor);
}
.tp-btn--primary:hover { background: var(--tp-button-primary-bgColor-hover); border-color: var(--tp-button-primary-bgColor-hover); }
.tp-btn--quiet {
background: transparent; border-color: transparent; color: var(--tp-button-quiet-fgColor-rest);
}
.tp-btn--quiet:hover { background: var(--tp-button-quiet-bgColor-hover); border-color: var(--tp-button-quiet-bgColor-hover); color: var(--tp-button-quiet-fgColor-hover); }
/* Cards -------------------------------------------------------------------- */
.tp-card {
background: var(--tp-card-bgColor); border: var(--tp-base-borderWidth-thin) solid var(--tp-card-borderColor);
border-radius: var(--tp-radius-surface); padding: var(--tp-card-padding);
}
.tp-card--accent { border-left: var(--tp-base-borderWidth-accent) solid var(--tp-card-accent-borderColor); }
.tp-card--ember { border-color: var(--tp-card-accent-borderColor); }
.tp-card__num { font-family: var(--tp-font-label); font-size: 0.66rem; letter-spacing: var(--tp-base-letterSpacing-label); color: var(--tp-fgColor-accent); display: block; margin-bottom: 0.5rem; }
.tp-card__title { font-family: var(--tp-font-display); font-weight: var(--tp-base-fontWeight-medium); font-size: 1.25rem; margin-bottom: 0.45rem; color: var(--tp-fgColor-default); }
.tp-card p { font-size: 0.92rem; color: var(--tp-fgColor-muted); margin: 0; }
/* Nav ---------------------------------------------------------------------- */
.tp-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.tp-nav a {
font-family: var(--tp-font-label); font-size: 0.68rem; letter-spacing: var(--tp-tracking-label);
text-transform: uppercase; color: var(--tp-nav-link-fgColor-rest);
border: 0; padding: 0.2rem 0; text-decoration: none; transition: color var(--tp-motion-fast);
}
.tp-nav a:hover { color: var(--tp-nav-link-fgColor-hover); }
.tp-nav a[aria-current="page"] { color: var(--tp-nav-link-fgColor-current); border-bottom: var(--tp-base-borderWidth-thick) solid var(--tp-borderColor-accent); }
.tp-nav__cta {
background: var(--tp-bgColor-emphasis); color: var(--tp-fgColor-onEmphasis) !important;
padding: 0.55rem 1.1rem; border-radius: var(--tp-radius-control);
}
.tp-nav__cta:hover { background: var(--tp-bgColor-accentEmphasis); }
/* Form controls -----------------------------------------------------------
*/
.tp-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.tp-label { font-family: var(--tp-font-label); font-size: 0.66rem; letter-spacing: var(--tp-tracking-label); text-transform: uppercase; color: var(--tp-fgColor-muted); }
.tp-input, .tp-textarea, .tp-select {
font-family: var(--tp-font-body); font-size: var(--tp-text-base); color: var(--tp-control-fgColor-rest);
background: var(--tp-control-bgColor-rest);
border: var(--tp-base-borderWidth-thin) solid var(--tp-control-borderColor-rest);
border-radius: var(--tp-radius-control); padding: 0.7rem 0.85rem; width: 100%;
transition: border-color var(--tp-motion-fast), box-shadow var(--tp-motion-fast);
}
.tp-textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
.tp-input::placeholder, .tp-textarea::placeholder { color: var(--tp-control-fgColor-placeholder); }
.tp-input:focus, .tp-textarea:focus, .tp-select:focus { outline: none; border-color: var(--tp-control-borderColor-focus); box-shadow: inset 0 0 0 1px var(--tp-control-borderColor-focus); }
.tp-input:focus-visible, .tp-textarea:focus-visible, .tp-select:focus-visible { box-shadow: inset 0 0 0 1px var(--tp-control-borderColor-focus); }
.tp-help { font-size: 0.78rem; color: var(--tp-fgColor-subtle); margin: 0; }
/* Brand rule — hairline + whorl mark divider ------------------------------- */
.tp-brand-rule { display: flex; align-items: center; justify-content: center; gap: 1rem; border: none; margin: 3rem auto; max-width: 60%; }
.tp-brand-rule::before, .tp-brand-rule::after { content: ''; flex: 1; height: 0.5px; background: var(--tp-borderColor-default); }
.tp-brand-rule__mark { width: 16px; height: 16px; flex: 0 0 16px; color: var(--tp-fgColor-accent); }
/* Footer ------------------------------------------------------------------- */
.tp-footer { background: var(--tp-footer-bgColor); color: var(--tp-footer-fgColor); }
.tp-footer a { color: var(--tp-footer-linkColor); text-decoration: none; border-bottom: 1px solid var(--tp-borderColor-onDark); }
.tp-footer a:hover { color: var(--tp-footer-linkColor-hover); }
.tp-footer__head { font-family: var(--tp-font-label); font-size: 0.62rem; letter-spacing: var(--tp-tracking-wide); text-transform: uppercase; color: var(--tp-footer-headColor); margin-bottom: 0.7rem; }
/* Motion courtesy ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.tp-btn, .tp-nav a, .tp-link, .tp-wordmark .tp-core,
.tp-input, .tp-textarea, .tp-select { transition: none; }
.tp-btn:hover { transform: none; }
}
/* === end design-system.css v2.0 === */