lib-theme-graphite: 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:
jules
2026-07-07 22:56:29 +10:00
commit 5927d86c03
2 changed files with 462 additions and 0 deletions

36
README.md Normal file
View File

@@ -0,0 +1,36 @@
# 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`).