caee7f6672
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-phosphor
Terminal heritage, dark-first. Phosphor's dark mode is its native identity: deep charcoal
with a barely-there green undertone (never blue-gray, never pure black), cards stepping
lighter off the background, and hairline light-alpha borders doing all the separation work —
the elevation ladder exists but is whisper-quiet. One phosphor-green accent
(oklch(0.75 0.16 148) carrying dark ink in dark mode; deepened to oklch(0.45 0.12 150)
under white labels in light mode) is spent on the primary action, focus, and selection only.
Light mode is the "paper terminal": warm-white paper, deep green-charcoal ink. Success is teal
(hue 178) so state-green never collides with action-green. Dense/pro register, radius
0.375rem, instant-feeling motion (100/180/280/400ms, springs aliased — no bounce),
keyboard-first focus (2px offset phosphor outline on buttons, flush 1px ring on inputs),
tabular numerals on tables and via the .num class.
Built as one of four candidates for the calm-pro / dense-utility family (operator, console, and admin surfaces; Skyrise successor for developer-product screens).
Fonts
The signature is IBM Plex Mono for headings (weight 500/600, slightly tight tracking) over IBM Plex Sans body, with Plex Mono again for code. Mono headings run wide, so the display ramp is deliberately modest.
Per the Crema token contract, theme.css does not @import fonts. The consuming app must
load them at the very top of its entry CSS (app/app.css):
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
Stacks (already wired in theme.css):
--font-sans/--body-family:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif--font-heading/--heading-family:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace--font-mono: same mono stack as headings
Validate
node create-crema-app/scripts/validate-theme.mjs lib-theme-phosphor/theme.css