# 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):

```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");
```

| 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

```css
/* 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:

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