lib-theme-blueprint: initial import (calm-pro/dense-utility set, 2026-07)
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>
This commit is contained in:
43
README.md
Normal file
43
README.md
Normal file
@@ -0,0 +1,43 @@
|
||||
# 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
|
||||
```
|
||||
Reference in New Issue
Block a user