d7565f448a
One of four divergent candidates for the bold consumer theme family (committed saturated color at 30-60% surface coverage, strong display type). Includes the post-diverge fixes: heading color:inherit so brand slabs keep their foreground pairing, plus per-theme refinements. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
63 lines
2.9 KiB
Markdown
63 lines
2.9 KiB
Markdown
# 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
|
|
```
|