15558df0ff
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>
36 lines
1.7 KiB
Markdown
36 lines
1.7 KiB
Markdown
# 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`):
|
|
|
|
```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
|
|
|
|
```bash
|
|
node ../create-crema-app/scripts/validate-theme.mjs theme.css
|
|
```
|