/* * design-tokens.css — shop.kstanchev.com "Warm Workshop" design system * --------------------------------------------------------------------- * Direction: artisan boutique maker brand. Small-batch hardware studio, * not gamer RGB. Cream canvas, warm charcoal ink, one confident * terracotta accent, amber + olive as functional support colors only. * * HOW TO USE * 1. Load this file site-wide BEFORE site-dark.css (or paste the :root * blocks at the top of site-dark.css and delete the old :root there). * 2. The COMPATIBILITY MAP at the bottom re-points every legacy token * (--d-* and the #hpv2 locals) at the new palette, so the existing * 1090-line site-dark.css recolors itself almost for free. * 3. Hardcoded hexes that do NOT go through tokens still need manual * replacement — the full list is in redesign-spec.md §0.3. * * Contrast (checked against WCAG AA): * ink #2B2520 on bg #F7F2E9 ~12.9:1 (body text) * body #4A4239 on bg #F7F2E9 ~8.2:1 * muted #6E6354 on bg #F7F2E9 ~4.6:1 (ok at 12px+) * accent-ink #FFF9F0 on accent #B45327 ~5.2:1 (buttons) * accent-text #9A431D on bg ~6.0:1 (links) */ :root { /* ============ 1. COLOR — CREAM CANVAS ============ */ --ks-bg: #F7F2E9; /* page canvas: warm off-white */ --ks-bg-alt: #F1EADC; /* alternating sections, subtle zebra */ --ks-surface: #FFFDF8; /* cards, panels, buy box: near-white warm */ --ks-surface-2: #EFE7D8; /* inputs, wells, quantity steppers */ --ks-border: #E3D9C6; /* hairlines, card borders */ --ks-border-strong: #CDBFA6; /* emphasized rules, table heads */ --ks-border-input: #8F897D; /* form-control boundaries — >=3:1 non-text contrast on white inputs (WCAG 1.4.11); --ks-border-strong fails that rule there */ /* ============ 2. COLOR — INK ============ */ --ks-ink: #2B2520; /* headings, prices: warm near-black */ --ks-body: #4A4239; /* paragraph text */ --ks-muted: #6E6354; /* metadata, captions, placeholders */ --ks-faint: #9C8F7C; /* disabled, decorative only (fails AA, never body) */ /* ============ 3. COLOR — TERRACOTTA ACCENT (the one accent) ============ */ --ks-accent: #B45327; /* primary buttons, active states, sale badge */ --ks-accent-hover: #9A431D; /* button hover, link hover */ --ks-accent-ink: #FFF9F0; /* text ON accent fills */ --ks-accent-text: #9A431D; /* terracotta used AS text/links on cream */ --ks-accent-soft: #F2DFCF; /* tinted chips, kicker backgrounds */ --ks-accent-soft-ink:#8A3B18; /* text on accent-soft */ /* ============ 4. COLOR — FUNCTIONAL SUPPORT (small doses only) ============ */ --ks-amber: #C08A2D; /* star ratings, "featured" sparkle */ --ks-amber-soft: #F3E6C9; --ks-stock: #5C7048; /* IN STOCK badge: muted olive */ --ks-stock-soft: #E7EAD9; --ks-wait: #8A6A52; /* WAITLIST / BUILT TO ORDER badge: warm taupe */ --ks-wait-soft: #EEE3D6; --ks-danger: #B3402E; /* errors, required asterisks, remove icons */ --ks-danger-soft: #F4DCD5; /* ============ 5. COLOR — ESPRESSO (dark contrast blocks) ============ */ /* Footer + the hero "stage" panel. The ONLY dark surfaces left on the site. */ --ks-espresso: #2E2620; --ks-espresso-2: #3A3128; /* raised card on espresso */ --ks-espresso-ink: #F4EDE1; --ks-espresso-muted: #B5A893; --ks-espresso-border: #4A3F33; /* ============ 6. TYPOGRAPHY ============ */ /* Display serif = the artisan voice. Self-host Fraunces (SemiBold 600 + Light 300 italic) — see redesign-spec.md §0.4 for the woff2 drop. Until the files land, Georgia carries the look acceptably. */ --ks-font-display: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif; --ks-font-body: "Inter", -apple-system, ui-sans-serif, "Segoe UI", sans-serif; /* Mono survives ONLY for prices, SKUs and spec values — a workshop "engraved label" touch. Never for headings, nav or buttons. */ --ks-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Type scale — 1.25 major third on a 16px base, display sizes fluid */ --ks-text-xs: 0.75rem; /* 12px badges, utility row, fine print */ --ks-text-sm: 0.875rem; /* 14px metadata, card spec lines */ --ks-text-base: 1rem; /* 16px body */ --ks-text-md: 1.125rem; /* 18px lead paragraphs, card titles */ --ks-text-lg: 1.25rem; /* 20px h4, PDP price base */ --ks-text-xl: 1.5625rem; /* 25px h3, section heads */ --ks-text-2xl: 1.9375rem; /* 31px h2 */ --ks-text-3xl: clamp(2rem, 1.4rem + 2.2vw, 2.625rem); /* 32-42px h1 / PDP title */ --ks-text-4xl: clamp(2.375rem, 1.5rem + 3.6vw, 3.5rem); /* 38-56px hero display */ --ks-leading-tight: 1.12; /* display + h1/h2 */ --ks-leading-snug: 1.3; /* h3/h4, card titles */ --ks-leading-body: 1.65; /* paragraphs */ --ks-tracking-caps: 0.14em; /* uppercase kickers/badges (always with text-xs/sm) */ --ks-tracking-tight:-0.015em;/* display serif sizes 3xl/4xl */ --ks-weight-regular: 400; --ks-weight-medium: 500; --ks-weight-semibold:600; --ks-weight-bold: 700; /* ============ 7. SPACING — 4px base ============ */ --ks-space-1: 4px; --ks-space-2: 8px; --ks-space-3: 12px; --ks-space-4: 16px; --ks-space-5: 24px; --ks-space-6: 32px; --ks-space-7: 48px; --ks-space-8: 64px; --ks-space-9: 96px; /* desktop section rhythm */ --ks-section-pad: clamp(48px, 4vw + 24px, 96px); /* vertical padding per homepage section */ --ks-maxw: 1200px; /* content max width (matches --sf-maxw) */ --ks-maxw-prose: 68ch; /* about/contact text measure */ /* ============ 8. RADII ============ */ --ks-radius-sm: 6px; /* inputs, chips, swatches */ --ks-radius-md: 10px; /* buttons, small cards */ --ks-radius-lg: 16px; /* product cards, panels, buy box, hero stage */ --ks-radius-pill: 999px; /* badges, category pills */ /* ============ 9. SHADOWS — warm-tinted, never pure black ============ */ --ks-shadow-xs: 0 1px 2px rgba(43, 37, 32, 0.06); --ks-shadow-sm: 0 2px 6px rgba(43, 37, 32, 0.07), 0 1px 2px rgba(43, 37, 32, 0.05); --ks-shadow-md: 0 6px 16px rgba(43, 37, 32, 0.09), 0 2px 4px rgba(43, 37, 32, 0.05); --ks-shadow-lg: 0 16px 40px rgba(43, 37, 32, 0.13), 0 4px 8px rgba(43, 37, 32, 0.06); /* card hover = sm -> md transition, 0.2s ease; no translateY bigger than -3px */ /* ============ 10. MISC ============ */ --ks-transition: 0.18s ease; --ks-focus-ring: 2px solid #9A431D; /* focus-visible outline, offset 2px */ color-scheme: light; } /* ===================================================================== * COMPATIBILITY MAP — legacy tokens re-pointed at the new palette. * Lets site-dark.css + storefront.css recolor without a rewrite. * ===================================================================== */ :root { --d-bg: var(--ks-bg); --d-surface: var(--ks-surface); --d-surface-2: var(--ks-surface-2); --d-border: var(--ks-border); --d-ink: var(--ks-ink); --d-muted: var(--ks-muted); --d-accent: var(--ks-accent); --d-accent-ink: var(--ks-accent-ink); --d-danger: var(--ks-danger); --d-radius: var(--ks-radius-md); } /* #hpv2 homepage locals — the hero stage stays espresso-dark (the frame * JPGs are shot on black), but every down-page section flips to cream. */ #hpv2 { --bg: var(--ks-bg); /* section background -> cream */ --bg2: var(--ks-bg-alt); /* alt section -> deeper cream */ --ink: var(--ks-ink); --muted: var(--ks-muted); --cyan: var(--ks-accent); /* every old cyan use -> terracotta */ --neon: var(--ks-wait); /* old neon pink -> warm taupe */ --trace: var(--ks-stock); /* old teal -> olive */ --line: var(--ks-border); } /* Inside the dark hero stage only, re-flip the locals to espresso values * (scope: .hpv2-sticky — see redesign-spec.md §2). */ #hpv2 .hpv2-sticky { --ink: var(--ks-espresso-ink); --muted: var(--ks-espresso-muted); --line: var(--ks-espresso-border); --cyan: #D87A4A; /* terracotta lightened for AA on espresso (~5.1:1) */ --trace: #A9BC8B; /* olive lightened for the SHIPS TODAY chip on dark */ } /* A11y amendment: the default focus ring #9A431D fails 3:1 against the * espresso #2E2620 surfaces. Lighten it inside the two dark scopes only * (hero stage + footer). */ #hpv2 .hpv2-sticky :focus-visible, .site-footer :focus-visible, #colophon :focus-visible { outline-color: #D87A4A; }