07a721eba2
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-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:
@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 @imports 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
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:
node create-crema-app/scripts/validate-theme.mjs lib-theme-blueprint/theme.css