# lib-theme-klein

**Klein — ultramarine drench.** A bold, identity-forward Crema theme where the
background field itself is committed, saturated Yves-Klein ultramarine.

## Thesis

Most light themes are a neutral page with a colored accent. Klein inverts that:
the **field is the identity**. `:root` (light mode) sets `--background` to a
deep saturated ultramarine — `oklch(0.44 0.20 265)`, a commitment, not a
tint — carrying near-white ink. Content lives on clean near-white card panels
that float on the blue with deep blue-black shadows (a drenched field casts
blue shadow, never gray). By construction the brand blue carries 30–60% of
every screen.

One counterpoint does all the pointing: a warm amber-orange
(`oklch(0.72 0.17 60)`) with dark ink on top — the primary action, focus ring,
selection, link underlines, and the user chat bubble. Everything else stays
inside the blue family: secondary/muted are deeper stripes of the same hue,
the sidebar is a deeper band of ultramarine.

Dark mode is **ultramarine at midnight**: the field deepens to
`oklch(0.30 0.13 265)`, cards become deep blue panels stepping *lighter* off
the field (bg 0.30 → card 0.36 → popover 0.385 → muted 0.40), ink stays
near-white. The theme is unmistakably blue in both modes.

Border note: `--border` is a dark ink hairline because borders are drawn where
hairlines live — on the white cards and inputs. Hairlines on the blue field
itself are white-alpha and carried by `--sidebar-border`.

## Fonts

Consuming apps load the fonts at the very top of their entry CSS (per the
Crema token contract, themes never `@import` fonts):

```css
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
```

- **Syne** (600/700/800) — headings. The art-poster voice; the base heading
  rule uses **700**, with 800 available for hero moments. Syne runs wide, so
  headings carry `-0.015em` tracking.
- **Inter** (400/500/600/700) — body/UI. Legible, modern, stays out of the
  poster's way. Body register: 1rem / 1.6.
- **JetBrains Mono** (400/500/600) — code, `kbd`, code blocks.

## Register

Consumer: body 1rem/1.6, label 0.875rem, caption 0.75rem, subtitle 1.125rem,
title 1.375rem, headline 1.75rem, display 2.5rem, hero 3.25rem. Radius is a
generous `1rem`. Motion is confident (150/300/450/600ms) with real gentle
springs (`--ease-spring-*` are true overshoot curves, not aliases).

## Validation

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