Themes

One token contract.
Every piece obeys it.

Nothing in the catalogue hard-codes a colour. Every template and animation reads the same CSS variables, so restyling all of it means editing one block in globals.css.

Surfaces

Both modes are authored side by side, in oklch, so lightness stays even as the hue moves.

light

--background

--card

--subtle

--secondary

--muted

--accent

--primary

--destructive

dark

--background

--card

--subtle

--secondary

--muted

--accent

--primary

--destructive

Type

Sans — InterShip the interface

Serif — Instrument SerifShip the interface

Mono — JetBrains Mononpx ui.artbloom add

Radius

Derived from a single --radius. Move it and every corner in the catalogue moves with it.

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

Retheme in one block

An installed piece never sets a colour of its own. Override the variables and the whole catalogue follows — including the animations, whose gradients are built from --primary and --foreground.

Paste the block into app/globals.css, below the @import "tailwindcss" line.
Keep the variable names. ui.artbloom reads them by name, not by value.
Author both modes. A piece that only looks right in one is a piece with a bug.

Shareable theme presets are not built yet — this page is the contract they will be written against. Until then, the block on the right is the whole story. The docs cover the rest of the install.

app/globals.css

/* app/globals.css — after the ui.artbloom install */
:root {
  --radius: 0.75rem;
  --background: oklch(0.99 0.005 95);
  --foreground: oklch(0.22 0.02 95);
  --primary: oklch(0.55 0.19 25);
  --border: oklch(0.9 0.01 95);
}

.dark {
  --background: oklch(0.16 0.01 265);
  --card: oklch(0.19 0.015 265);
  --primary: oklch(0.72 0.16 25);
  --border: oklch(0.28 0.02 265);
}