5927d86c03
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>
37 lines
1.5 KiB
Markdown
37 lines
1.5 KiB
Markdown
# lib-theme-graphite
|
||
|
||
**Graphite — achromatic precision.** Dieter-Rams calm for operator/console/admin
|
||
surfaces. Every neutral is true achromatic (chroma 0) — near-white grey field,
|
||
pure white cards, near-black ink — with ONE electric azure accent spent only on
|
||
the primary action, links, selection, and focus. Dark mode is true dark grey
|
||
(never blue-black) with cards stepping visibly lighter. Dense/pro type register,
|
||
compact 0.5rem radius, product-fast motion, crisp low elevation, tabular
|
||
numerals wired for tables.
|
||
|
||
## Fonts
|
||
|
||
Consuming apps must load the fonts at the very top of their entry CSS
|
||
(`app/app.css`), before anything else — the theme file itself does not
|
||
`@import` fonts (Crema token-contract rule):
|
||
|
||
```css
|
||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
|
||
```
|
||
|
||
### Font stacks
|
||
|
||
| Token | Stack | Notes |
|
||
|---|---|---|
|
||
| `--font-sans` / `--body-family` | `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` | body text |
|
||
| `--font-heading` / `--heading-family` | same Inter stack | headings differentiate via weight 600 + tight tracking (−0.022em), **not** a second family |
|
||
| `--font-mono` | `"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace` | code, tabular data |
|
||
|
||
## Validation
|
||
|
||
```bash
|
||
node create-crema-app/scripts/validate-theme.mjs lib-theme-graphite/theme.css
|
||
```
|
||
|
||
Passes the Crema v1 token contract (all Tier 1 tokens both modes, WCAG AA
|
||
contrast floors, no font `@import`, no root `font-size`).
|