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-flint
Flint — instrument panel. Braun/Dieter-Rams workshop calm with one signal spark: a warm-stone gray field, white cards, graphite-umber ink, and a single signal-orange accent — the machine's indicator lamp — spent only on the primary action, selection, focus, and the live dot. Dark mode is the panel at night: dark warm graphite (never blue) with the orange glowing luminous under dark ink. Dense/pro register, machined 0.625rem radius, crisp low shadows, mechanical-quick motion (120/220/320/450ms, springs aliased — a good tool clicks, it doesn't bounce). Built for operator/console/admin surfaces.
Fonts
Themes never @import fonts (PostCSS ordering). The consuming app loads them at the very top of
its entry CSS (app/app.css):
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
| Role | Stack |
|---|---|
Headings (--font-heading) |
Archivo → Inter → system sans. Grotesk with DIN-instrument character; headings render at weight 600. |
Body (--font-sans) |
Inter → system sans. Body 0.9375rem / 1.5. |
Code (--font-mono) |
JetBrains Mono → ui-monospace → SF Mono → Menlo → Consolas. |
Notes: tables ([data-slot="table"]) and the .num utility class get font-variant-numeric: tabular-nums — instrument readouts demand aligned digits. Keyboard-first focus is a signature:
buttons get an always-visible 2px signal-orange outline (2px offset); inputs a flush 1px ring +
border-color change.
Validate
node ../create-crema-app/scripts/validate-theme.mjs theme.css