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

@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

node create-crema-app/scripts/validate-theme.mjs lib-theme-acid/theme.css
# ✓ PASS — all mandatory tokens present, contrast floors met, no ban violations.