# lib-theme-blueprint

**Technical drawing.** A calm-pro / dense-utility theme for operator, console,
and admin surfaces. Light mode is drafting paper: a faint cool blue-grey field,
pure-white cards, and deep **navy ink** — separated by hairline rules, not
shadow. One azure accent (hue 232) owns primary, links, selection, and focus;
info status is pushed to violet (285) so the two never read as the same swatch.
Dark mode is the iconic inversion — **the dark mode is the blueprint**: a deep
drafting-blue field, near-white blue-tinted ink, and the accent turned luminous
cyan with dark ink. Radius is a sharp 0.375rem, motion is instrument-quick
(120/220/320/450ms, springs aliased), and tables render tabular numerals.

## Fonts

Consuming apps must load the fonts at the very top of their entry CSS
(`app/app.css`), before anything else:

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

Per the Crema token contract, `theme.css` never `@import`s fonts itself.

| Token | Stack | Role |
|---|---|---|
| `--font-heading` / `--heading-family` | Space Grotesk → Inter → system | Headings, card/dialog/sheet titles — geometric, technical |
| `--font-sans` / `--body-family` | Inter → system | Body, controls, dense UI |
| `--font-mono` | JetBrains Mono → ui-monospace | Code, kbd, terminal surfaces |

## Usage

```bash
crema theme blueprint
```

Or manually: point the theme `@import` in `app/app.css` at
`../../lib-theme-blueprint/theme.css` and add the Google Fonts `@import` above it.

Validate with:

```bash
node create-crema-app/scripts/validate-theme.mjs lib-theme-blueprint/theme.css
```