Includes the 2026-07-07 UX sweep: neutral inline-code chips (accent reserved for actions/links/focus), dark-mode card/popover lightness lift for visible surface separation, 44px touch-target floor on coarse pointers, card-title pinned to a named ramp role. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
lib-theme-sorbet
Sherbet pop, playful-first. Sorbet is the toybox theme of the Crema family:
clean cool near-white paper with berry-charcoal ink, a peach-coral hero spent
surgically, and a full sherbet set where every hue owns a semantic role —
butter = warning, mint = success, sky = info, raspberry = destructive. Corners
are chunky (1.375rem radius, buttons verging on pill), shadows are crisp
small-offset stamps tinted toward berry, and motion is the springy one of the
family — genuine linear() spring curves with real overshoot, not aliases.
Dark mode is "sorbet at midnight": deep plum-charcoal with a berry undertone,
the sherbets luminous against it. Bright fills always carry dark berry ink
(the ivrea pattern), so every pairing clears the 4.5:1 contract floor.
Fonts
The consuming app must load the fonts at the very top of its entry CSS
(app/app.css), per the Crema font convention — the theme itself never
imports fonts:
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap");
- Bricolage Grotesque (600–800) —
--font-heading: bold friendly geometric; headings run 700–800, the chunk is part of the voice. - Figtree (400–700) —
--font-sans: tuned legible sans for UI and body. - JetBrains Mono (400–600) —
--font-mono.
Contract
Passes create-crema-app/scripts/validate-theme.mjs (token contract v1):
all Tier-1 tokens in :root and .dark, every foreground/background pair at
or above the WCAG AA floors, no font @import, no root font-size, inert
glass stubs (0px / 100% / 1 / 1).
Usage
/* app/app.css — fonts first, then under CREMA:SOURCES */
@import "../../lib-theme-sorbet/theme.css";
Chart tokens are the five sherbets straight from the tub — coral 38°, butter 98°, mint 160°, sky 230°, berry 330° — hues ≥60° apart with staggered adjacent lightness so series stay legible for color-blind readers.