Go to file

jules 8f6afab89e lib-theme-siena: initial import (warm-consumer set, 2026-07)

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>

2026-07-07 22:35:56 +10:00

README.md

lib-theme-siena: initial import (warm-consumer set, 2026-07)

2026-07-07 22:35:56 +10:00

theme.css

lib-theme-siena: initial import (warm-consumer set, 2026-07)

2026-07-07 22:35:56 +10:00

README.md

lib-theme-siena

Siena — drenched Mediterranean courtyard. Warmth carried by the surface itself: the background is a real terracotta wall (not a tinted near-white), cards are sun-bleached plaster panels resting on it, and the ink is deep warm olive-brown. Primary is burnt sienna; one cool Mediterranean blue is spent on accent and info so the heat has a counterpoint. Dark mode is the same courtyard at dusk — umber-brown surfaces, terracotta turned to glow. Fraunces display voice over Albert Sans, modest 0.75rem corners, low warm shadows: things rest on the wall, they don't float.

Fonts

Consuming apps must load the theme's fonts at the very top of their entry CSS (app/app.css), before any other statement:

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

Fraunces (500/600/700, variable optical size) — --font-heading / --heading-family
Albert Sans (400/500/600/700 + 400 italic) — --font-sans / --body-family
JetBrains Mono (400/500) — --font-mono

Do not @import fonts inside theme.css — per the token contract, fonts load from the consuming app's entry CSS only.

Usage

Clone as a sibling lib and point the app's theme import at it:

/* app/app.css */
@import "../../lib-theme-siena/theme.css";

Contract

Passes the Crema token contract v1:

node create-crema-app/scripts/validate-theme.mjs lib-theme-siena/theme.css

All Tier-1 tokens defined in both :root and .dark; contrast floors verified (foreground/background 10.0:1 light / 14.1:1 dark; every paired -foreground ≥ 5.3:1). Glass tokens are inert stubs; springs alias to standard easings (calm-theme pattern); no font-size on root.