d1e3727587
Includes the 2026-07-07 UX sweep: neutral inline-code chips (accent reserved for actions/links/focus), dark-mode card/popover lightness lift for visible surface separation, 44px touch-target floor on coarse pointers, card-title pinned to a named ramp role. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
lib-theme-harbor
Cool neutral, warm spark. The most neutral of the warm-consumer set: the entire surface is a calm, faintly-cool light grey (morning harbor light on soft slate — a whisper of blue-grey that reads as clean neutral, never cream, never enterprise blue), and all the warmth is carried by a single honey/amber accent spent surgically on the primary action, selection, and focus. Grey stone warmed by lamplight. Light + dark. Built for me.sky-ai.com back-of-house.
- Surface: faintly-cool light grey
--background(oklch(0.975 0.005 248)); clean white cards, hairline-separated. Ink is a deep, very-slightly-cool charcoal. - Accent: one honey/amber primary (
oklch(0.8 0.14 78)) with dark ink on top (the bright-swatch / dark-ink pairing) — the sole warmth, ≤10% of the surface. - Status:
warningis pulled toward amber-orange (hue 52) and set darker than the honey primary (hue 78) so the two never read as the same swatch. - Dark: harbor at night — deep cool-neutral charcoal (
oklch(0.2 0.008 252), not pure black, never warm-brown), amber glowing warm against it. - Shape: crisp
--radius: 0.75rem; low, neutral cool shadows; product-fast motion (base 280ms), springs aliased to the standard eases. - Type: crisp modern-neutral — Inter Tight (text) + Geist (headings) + Geist Mono (code).
Fonts
Themes must not @import fonts (breaks PostCSS ordering — see the Crema token contract). The
consuming app loads them at the top of its entry CSS via this Google Fonts URL:
https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter+Tight:wght@400;500;600;700&display=swap
Usage
Consumed by the Studio lab as a sibling. The consuming app imports theme.css (or, in
Studio, scripts/build-themes.mjs copies it to public/themes/harbor.css). Dark mode is
class-based (.dark); the app owns the toggle and should respect prefers-color-scheme on first
load.
Validation
node ../create-crema-app/scripts/validate-theme.mjs theme.css
Passes the Crema v1 token contract: every Tier-1 token present in both modes, all contrast floors
met, no font @import, no root font-size.