Skip to main content
brickwork
GitHub Log in Get started
Display
Theme
Density
Direction
Brand

Brickwork Themes

Change the look without rewriting the kit.

Colours, type, light and dark, then your brand look across the kit. Preview a different face without rebuilding.

How theming works

Four plain steps. Same components at every step; only the look changes.

Colour and type

You control the pigments and fonts the whole kit reads from.

Light and dark

Switch appearance (and density if you need it) without a second component set.

Your brand

Apply your look once; buttons, forms and pages pick it up together.

Live preview

Try another look on the same UI before you commit a rebuild.

Brand packs

Ready-made faces you can try. Kiln is this site. Open the live preview to switch light and dark.

Kiln

This site. Warm accent on a clear canvas.

Slate

Cool grey for product and ops surfaces.

Sage

Soft green for calmer editorial looks.

Indigo

Blue accent when you want a sharper signal.

Live preview

Same components under Kiln. Open the full preview for light and dark side by side.

Same UI ยท different look

This site

Project overview

Status, owners and the next action in one place.

Continue In review

Another brand

Project overview

Status, owners and the next action in one place.

Continue In review

Under Kiln on this page

Card

Colours follow the brand pack. Same card, new look.

Marketing band

A call-to-action block using the same brand as the card above.

Need token tables? Theming guide in Docs

Ready to install?

Get started opens the install guide. Match your brand after you pin a version.