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>
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):
@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
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).