07a721eba2
One of four divergent candidates for the operator/console theme family (successor to Skyrise for developer-product screens). Dense/pro type register, keyboard-first focus treatment, tabular numerals, coarse-pointer 44px touch floor, neutral code chips, dark card separation per house sweep. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
44 lines
1.7 KiB
Markdown
44 lines
1.7 KiB
Markdown
# 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
|
|
```
|