Design Tokens

This portal, the blog, and the web client all draw from the same small token set, sourced from fates-edge-apps/utilities/javascript/fates-edge-web-client/css/app.css. Each site keeps its own src/styles/theme.css as a curated subset rather than importing the app shell directly — update by hand if the source palette changes.

Color

--gold ■ #f0a500

--red ■ #e74c3c

--green ■ #2ecc71

--blue ■ #3498db

--purple ■ #9b59b6

Gold is reserved for accents and calls to action — it means "pay attention here," matching the Art Bible's own rule that gold "always means something has a price attached." Base surface colors (--bg through --bg4) stay dark and muted so gold reads as significant rather than decorative — the same palette philosophy the Art Bible states for illustration, applied to UI.

Type

--font-body: Inter, with system-UI fallbacks. --font-mono: JetBrains Mono, for code and repo references.

Shape & elevation

--radius (12px), --radius-sm (6px), --radius-md (9px), --radius-full (pill). --shadow-glow for hover states on interactive cards, --shadow-elevated for modals and popovers.

Light mode

Every token has a light-mode override under html.light, matching the web client's own light theme. Contrast ratios were audited for WCAG AA — see fates-edge-apps's ACCESSIBILITY.md if you're adding new color tokens.