lib-theme-grape

Grape — violet night-lounge. A bold, identity-forward Crema theme where the committed color IS the surface: the entire world is a deep luminous grape-violet field (hue 300) — Skyrise's violet ancestry taken to a full drench, without glass or iridescence. There are no white cards; cards are clearly-lighter violet panels lifted off the field, popovers a step above cards, the sidebar a deeper violet stripe, and everything separates with white-alpha hairlines — light, not darkness. Ink is near-white with a violet tint.

One counterpoint does all the pointing: a hot coral-pink primary (oklch(0.7 0.19 20)) carrying dark wine ink, spent on the action, the selection, the focus ring, and the user's chat bubble. Destructive stays a deep crimson fill with a light label — a different lightness class and construction from the bright coral primary, so the two hue-20 neighbours never read as the same swatch. Success is mint, warning amber, info cool cyan — all bright swatches with dark ink, tuned to read on violet panels.

The theme is violet in both modes. .dark is simply later that night: the field deepens (0.38 → 0.26 L), the panels keep the same visible step above it, and the coral burns slightly brighter. The dark violet ladder keeps muted above popover: bg 0.26 → card 0.32 → popover 0.34 → muted 0.36.

Radius is a soft-lounge 1.125rem. Motion is languid-confident (160/320/480/640ms) with a real gentle spring on the emphasized ease. Shadows are deep violet-black pools. Consumer type register: 1rem body at 1.6 line-height.

All contract contrast floors verified in both modes on both surfaces (field and card) — including the risky one in an all-violet world, muted-foreground, which lands ≥5:1 on field, card, and the muted wash in both modes. ✓ PASS from validate-theme.mjs.

Fonts

Load in the consuming app's entry CSS (very top, before anything else — themes never @import fonts themselves):

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

Role	Family	Notes
Headings	Instrument Serif	Single weight (400) — the serif itself is the emphasis; the theme pins headings to font-weight: 400; letter-spacing: -0.01em and never fakes bold.
Body / UI	Instrument Sans	400 / 500 / 600 / 700. Warm modern grotesque; buttons sit at 500.
Code	Geist Mono	400 / 500 / 600. Inline code renders as a white-alpha tint chip with foreground ink.

Usage

/* app entry CSS */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");
@import "../../lib-theme-grape/theme.css";

Validate:

node create-crema-app/scripts/validate-theme.mjs lib-theme-grape/theme.css