Colors
Seven semantic tokens, the stripes and the mesh gradients behind every page.
Semantic tokens
Seven colors run the whole theme. Change a value in src/styles/colors.css and every page follows.
Background
background
oklch(0.145 0 0)
The page ground and the ink on light buttons.
Foreground
foreground
oklch(0.985 0 0)
Headings, body copy, light stripes and the default button.
Muted foreground
muted-foreground
oklch(0.708 0 0)
Paragraphs, captions, placeholders and resting links.
Muted
muted
oklch(0.205 0 0)
Cards, panels, fields and tiles.
Secondary
secondary
oklch(0.269 0 0)
Raised panels, the muted button, hairlines and the base stripes.
Accent
accent
oklch(50.89% 0.233 290.96)
The accent button, focus rings and the call to action panel.
Accent light
accent-light
oklch(69% 0.147 297.95)
Violet text and hovers that stay readable on the dark ground.
Pairings
The grounds and the ink that sits on them.
Make AI less boring
Foreground on muted
Make AI less boring
Foreground on accent
Make AI less boring
Background on foreground
States
Hovers and tints use opacity on the same tokens, so there are no extra shades to keep in sync.
Default hover
foreground/80
Accent hover
accent/80
Muted hover
secondary/70
Table stripe
foreground/2
Stripes
One pixel lines every eight pixels, drawn from the secondary, accent and foreground tokens. Use them through StripesBG.
Base vertical
bg-base-vertical-stripes
Base horizontal
bg-base-horizontal-stripes
Accent vertical
bg-accent-vertical-stripes
Accent horizontal
bg-accent-horizontal-stripes
Light vertical
bg-light-vertical-stripes
Light horizontal
bg-light-horizontal-stripes
Mesh gradients
Grainy gradients for portraits, cards and the alternative button. They live in src/styles/gradients.css.
Light blue
bg-meshLightBlue
Rainbow
bg-meshRainbow
Purple
bg-meshPurple
Yellow
bg-meshYellow
Magenta
bg-meshMagenta
Green
bg-meshGreen