Pro

Theme

Pick one color. The accent, the text on it and in it, the grays and the primary buttons follow, in light and dark, and every text color is checked to read at 4.5:1.

Hue
Grays
NeutralA hintTinted
Preview
LightDark
New

Guests see this on the invitation.

Seats filled9 of 12
x

Replies go to hosts@saturdaysupper.example.com.

  • Text on the accent4.59:1 needs 4.5
  • Accent text on the page, light4.90:1 needs 4.5
  • Accent text on the page, dark7.36:1 needs 4.5
  • Accent fill on the page, dark3.91:1 needs 3
theme.css
/* UI Polish theme: hue 262, a hint of grays, accent buttons. Paste after tokens.css. */:root {  --ui-canvas: light-dark(oklch(0.99 0.005 262), oklch(0.145 0.006 262));  --ui-surface: light-dark(oklch(1 0 262), oklch(0.19 0.006 262));  --ui-foreground: light-dark(oklch(0.21 0.006 262), oklch(0.93 0.006 262));  --ui-muted: light-dark(oklch(0.5 0.006 262), oklch(0.71 0.006 262));  --ui-subtle: light-dark(oklch(0.55 0.006 262), oklch(0.62 0.006 262));  --ui-border-subtle: light-dark(oklch(0.954 0.006 262), oklch(0.26 0.006 262));  --ui-border: light-dark(oklch(0.954 0.006 262), oklch(0.26 0.006 262));  --ui-border-strong: light-dark(oklch(0.954 0.006 262), oklch(0.26 0.006 262));  --ui-accent: light-dark(oklch(0.565 0.2 262), oklch(0.565 0.2 262));  --ui-on-accent: oklch(0.99 0 0);  --ui-accent-text: light-dark(oklch(0.55 0.2 262), oklch(0.72 0.145 262));  --ui-ink: var(--ui-accent);  --ui-on-ink: var(--ui-on-accent);}

Use it

Paste the CSS after tokens.css. It only sets the roles it changes, so it sits on top of the tokens, or of the shadcn/ui mapping if you use that. Agents can ask for the same thing: get_theme over MCP, or GET /api/theme?hue=262&tint=1&brand=true.