30ef4c71cf
An avatar filled with a chart colour drew its initials in white, on the assumption that every tint is dark enough to carry it. Measured, white clears AA on two of the ten tint-and-mode combinations: a palette is tuned so series stay distinct from each other, and dark mode lifts every tint to stay visible against the dark ground, which puts all five out of reach. The reported 3.4:1 assistant avatar was dark chart-1, at 3.36. Each tint now names its own foreground, chosen by measurement — worst chosen pair 5.32:1. Consumers read them with a white fallback, so a theme that has not defined them renders exactly as it did.
lib-theme-prism
Crystal-clear glass theme. Iridescent multi-hue palette (lavender → peach → cyan → mint) refracted through frosted-glass surfaces.
Forked from lib-theme-skyrise with four product-driven changes that became theme-wide:
- Bakes in
--warning+--warning-foreground— any product that displays health or risk needs warning semantics in both modes. Skyrise had it; pristine did not. - Adds a
--text-herosize step (3.5rem) abovedisplay, for KPI hero numbers and editorial mastheads. Exposed astext-heroonce the consuming app maps it into Tailwind's@theme inline. - Ships a
.numutility —font-feature-settings: "tnum","ss01","cv01",font-variant-numeric: tabular-nums,letter-spacing: 0. Apply to any element that displays money or counts. Non-negotiable on finance numbers; useful anywhere digits matter. - Redesigned dark-mode background. Skyrise's dark blobs sat at
L≈0.18with chroma≈0.12, which clipped to muddy gray near OKLCH gamut edges. Prism pushes the four corner glows toL≈0.30with lower chroma (0.06–0.09) over a cleaner near-black base. They read as soft brand-accent light rather than tinted fog.
Also dropped: the 11 background atmospheres and 4 surface tints skyrise shipped for white-label flexibility. Prism picks one brand surface (light + dark) and ships it. If alternates return, re-import them from skyrise.
Install
Sibling-clone like the other Crema themes:
your-workspace/
your-app/
lib-theme-prism/ ← this dir
lib-action-bus/
...
In the consuming app's app/app.css, swap the active theme import:
@import "../../lib-theme-prism/theme.css"; /* CREMA:THEME */
Then load the fonts at the very top of app.css (Google Fonts URL):
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Instrument+Sans:wght@400..700&family=Geist+Mono:wght@400..600&display=swap");
And expose the hero size step + --font-heading to Tailwind in your @theme inline block:
@theme inline {
--font-heading: "Instrument Sans", "Inter", sans-serif;
--text-hero: var(--text-hero-size);
--text-hero--line-height: var(--text-hero-lh);
/* … plus the usual --color-* mappings the lib expects */
}
What's in the box
- Iridescent lavender→peach→cyan→mint light surface (the brand)
- Clean deep-violet dark surface with four soft corner glows
- Glass surfaces (blur + saturate + brightness stack) on every shadcn
[data-slot] - Apple-style spring physics motion tokens
- Premium primary button gradient + wet-sheen highlight
- AI orb avatar (rainbow conic) — opt in via
<AvatarFallback data-ai> - Heading face: Instrument Sans 600 / -0.02em
- Body face: Inter 17px (1.0625rem),
letter-spacing: -0.011em - Mono: Geist Mono
.numutility — slashed zero, tabular nums, zero tracking--text-hero/--text-display/--text-headline/--text-title/--text-body/--text-label/--text-caption- Full semantic colour set: primary, secondary, accent, muted, destructive, success, warning + foregrounds
- 5-step
--elevation-{1..5}shadow scale (primary-tinted at e4/e5)
What's not
- Background atmosphere variants (
pearl,linen,mist, …) — strip fromDisplayMenutoo. - Surface tints (
snow,stone,sage,slate) — same. - Multiple syntax themes.
If you need either, fork back to lib-theme-skyrise.
Origin
Born inside skyai-finance as lib-theme-skyai-finance during a craft pass on the finance dashboard. Renamed and extracted once the choices stabilised and a senior-designer review confirmed the system was generalisable beyond finance KPIs.