lib-theme-vermilion: 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:
56
README.md
Normal file
56
README.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# lib-theme-vermilion
|
||||
|
||||
**Poster chrome.** A bold, identity-forward Crema theme: one hot vermilion
|
||||
red-orange is the brand, and it is carried by the *chrome* — the primary
|
||||
action, hero panels, the entire sidebar, selection — in big committed slabs,
|
||||
editorial-poster style. Roughly 30–40% of a typical screen is drenched
|
||||
vermilion, while the content well stays warm paper with near-black warm ink,
|
||||
so the color reads as identity, not noise. Massive condensed display type
|
||||
(Anton) is the other half of the voice: the vermilion and the type do the
|
||||
pointing together, and everything else stays quiet ink-on-paper.
|
||||
|
||||
Key decisions:
|
||||
|
||||
- `--primary` is the poster vermilion `oklch(0.55 0.21 30)` — deepened from
|
||||
the nominal 0.60 so near-white ink clears the 4.5:1 floor with margin.
|
||||
- `--sidebar` is fully drenched vermilion (near-white foreground, white-alpha
|
||||
hairline borders); the active item is a paper chip punched out of the slab.
|
||||
- `--destructive` is deliberately not a sibling of the brand: deeper crimson
|
||||
(`oklch(0.48 0.19 15)`, light label) vs the brighter orange-leaning primary,
|
||||
so a destructive button and a primary button never look related.
|
||||
- Dark mode is the poster at night: near-black warm charcoal
|
||||
(`oklch(0.18 0.01 40)`), cards stepping ≥0.05 lighter, and the vermilion
|
||||
glowing slightly brighter (`oklch(0.64 0.2 33)`) with dark ink on top. The
|
||||
chrome stays vermilion — the sidebar does not go grey at night.
|
||||
- Radius `0.5rem` (poster edges), snappy motion (120/240/360/500ms, springs
|
||||
aliased), low warm-black shadows.
|
||||
|
||||
## Fonts
|
||||
|
||||
Consuming apps load the fonts via a Google Fonts `@import` at the very top of
|
||||
their entry CSS (never inside `theme.css` — see the token contract):
|
||||
|
||||
```css
|
||||
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
|
||||
```
|
||||
|
||||
Notes:
|
||||
|
||||
- **Anton** (headings) ships in a single weight, 400 — it is already
|
||||
black-condensed, so the theme keeps heading `font-weight: 400`, opens
|
||||
tracking a hair (`letter-spacing: 0.01em`; condensed faces need air), and
|
||||
does **not** force uppercase — the face carries the register on its own.
|
||||
Big sizes stay narrow: the ramp tops out at a 4rem hero.
|
||||
- **Archivo** (body) at 400/500/600/700 — a grotesque with enough width
|
||||
contrast against Anton to keep reading text calm.
|
||||
- **JetBrains Mono** (code) at 400/500/600.
|
||||
|
||||
## Validation
|
||||
|
||||
```bash
|
||||
node create-crema-app/scripts/validate-theme.mjs lib-theme-vermilion/theme.css
|
||||
```
|
||||
|
||||
Passes the Crema v1 token contract: full Tier-1 token set in both modes,
|
||||
status quartet with ≥4.5:1 label pairs, contrast floors in light and dark,
|
||||
chart hues ≥60° apart, inert glass stubs, springs aliased (never absent).
|
||||
Reference in New Issue
Block a user