b25596c281
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>
62 lines
2.9 KiB
Markdown
62 lines
2.9 KiB
Markdown
# lib-theme-acid
|
||
|
||
**Chartreuse on black.** Festival/Wrapped energy for consumer surfaces that
|
||
want an unmistakable identity — the committed color carries 30–60% of the
|
||
surface, the opposite of a calm settings app.
|
||
|
||
## Thesis
|
||
|
||
Dark mode is the native identity: a near-black green-cast field
|
||
(`oklch(0.16 0.01 130)`) with electric acid chartreuse
|
||
(`oklch(0.87 0.21 128)`) carrying the type accents, the panels, and the
|
||
fills. The signature pair is **black ink on acid** (~13:1) — the primary
|
||
button, the user chat bubble, and the sidebar accents all run black-on-acid,
|
||
never white-on-green. Cards step a clear ≥0.05 lighter than the field; the
|
||
sidebar drops to a pure-black stripe so the acid accents hit hardest there.
|
||
|
||
`:root` is the brand's **paper mode** — an honest light mode on a committed
|
||
chartreuse-washed paper (`oklch(0.96 0.05 120)`, visibly acid, not cream)
|
||
with near-black green ink. The primary inverts the signature: a deep
|
||
green-black fill (`oklch(0.3 0.09 130)`) carrying acid-bright labels.
|
||
|
||
Status never borrows the brand's lane: destructive is hot red (hue 25,
|
||
light label); warning is amber 85, held clearly apart from the chartreuse in
|
||
both hue and chroma; **success is pushed to teal (hue 175, dark ink)** so no
|
||
second green ever fights the brand; info is cool blue 240. Charts are
|
||
acid-led with a cool spectrum behind (128 / 240 / 330 / 190 / 40).
|
||
|
||
Radius is a chunky-sharp `0.75rem`. Motion is punchy and fast
|
||
(100/200/320/450ms) with **one real snappy spring**
|
||
(`--ease-spring-snappy: cubic-bezier(0.2, 1.4, 0.3, 1)` — actual overshoot)
|
||
reserved for affordances; gentle/bouncy alias to the standard ease.
|
||
Selection is acid at 40% alpha. Elevation in dark mode is pure-black
|
||
shadows; no glass (inert stubs).
|
||
|
||
## Fonts
|
||
|
||
Load in the **consuming app's** entry CSS, at the very top (never `@import`
|
||
inside `theme.css` — it breaks PostCSS ordering):
|
||
|
||
```css
|
||
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
|
||
```
|
||
|
||
- **Archivo Black** — headings. A single-weight display black: it only ships
|
||
weight 400, so the theme's heading rule pins `font-weight: 400` and lets
|
||
the blackness of the cut do the work. Tracking is tight (`-0.02em`).
|
||
Don't ask for bold — faux-bolding this face ruins it.
|
||
- **Space Grotesk** (400/500/600/700) — body, labels, buttons. Consumer
|
||
register: body 1rem/1.55, label 0.875rem, caption 0.75rem, title
|
||
1.375rem, subtitle 1.125rem, headline 1.875rem, display 2.75rem,
|
||
hero 3.5rem.
|
||
- **JetBrains Mono** (400/500/600) — code. Dark-mode syntax is a rave
|
||
terminal with discipline: acid keyword, cool companions (teal strings,
|
||
magenta numbers, blue functions, orange types).
|
||
|
||
## Validation
|
||
|
||
```bash
|
||
node create-crema-app/scripts/validate-theme.mjs lib-theme-acid/theme.css
|
||
# ✓ PASS — all mandatory tokens present, contrast floors met, no ban violations.
|
||
```
|