lib-theme-acid: initial import (bold/identity-forward set, 2026-07)

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>
This commit is contained in:
jules
2026-07-07 23:20:55 +10:00
commit b25596c281
2 changed files with 487 additions and 0 deletions

61
README.md Normal file
View File

@@ -0,0 +1,61 @@
# lib-theme-acid
**Chartreuse on black.** Festival/Wrapped energy for consumer surfaces that
want an unmistakable identity — the committed color carries 3060% 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.
```