byronwade/ui

Foundation · Theming

One variable re-skins everything.

The accent isn't scattered through components, it's derived from a single token, --brand. Override it once and rings, charts, success, buttons, and active states all follow, light and dark. Use the picker below to re-skin this entire site in real time, then paste the generated CSS into your project.

Live preview

Pick a color, the whole site re-skins in real time.

%

Presets

Generated CSS

:root { --brand: oklch(0.60 0.17 148); }
.dark { --brand: oklch(0.68 0.17 148); }

Component preview

Revenue+12%

$48.2k

Viewfilter

Tokens that follow --brand

--brand

--ring

--success

--chart-1

Active value

oklch(0.60 0.17 148)

light mode · paste both lines into globals.css

glow-brand

House utilities inherit the accent too.

The whole change

Two lines in globals.css.

No component edits, no theme fork. Pick a slightly lighter, more chromatic value for dark so the accent keeps its punch against the warm dark surface.

Anatomy of the token

oklch(L C H) , perceptual lightness, chroma, and hue. Each axis moves independently, so tuning an accent is predictable.

L · lightness

0 → 1 · how light

C · chroma

0 → 0.2 · how vivid

H · hue

0 → 360 · which color

Ready-to-paste accents

Drop any of these into --brand. Each is tuned to sit right on the warm canvas.

Forest

oklch(0.60 0.17 148)

Ocean

oklch(0.60 0.15 235)

Iris

oklch(0.58 0.19 290)

Ember

oklch(0.62 0.20 35)

Gold

oklch(0.72 0.16 75)

Rose

oklch(0.62 0.20 10)

The cascade

These tokens all resolve to --brand. Change the one and the family moves together.

--brand

Buttons, links, brand surfaces

--ring

Focus rings on every element

--success

Positive status + gauges

--chart-1

Primary chart series

Fixed exceptions

Two palettes carry meaning, so they don't follow --brand.

--chart-2 … --chart-5

--activity-* (agent pastels)

Do & don't

Override --brand (and its .dark value) in globals.css.
Tone with opacity, bg-brand/10, for soft chips and rings.
Hardcode a hex or Tailwind color in a component.
Pin --ring / --chart-1 / --success to a literal color.

Authored in oklch, so tints, dark values, and contrast stay honest across every accent.

Alternate skins

Warm, Linear, and Polaris

Beyond a single --brand override, the header Skin toggle switches the whole registry site between the house warm theme, a Linear product-OS look, and a Shopify Polaris admin look via data-skin. Hub pages explain in-place preview versus the sibling demo apps.