jules 5927d86c03 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>
2026-07-07 22:56:29 +10:00

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

Description
Crema theme — graphite (calm-pro/dense-utility set, 2026-07)
Readme 34 KiB
Languages
CSS 100%