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

Documentation

Axes and brand packs

Use the header theme control. Light or dark, density, direction and brand all resolve through --bw-* tokens on the same components.

  • Theme light / dark
  • Density comfortable / compact
  • Direction ltr / rtl
  • Brand Kiln plus Slate, Sage and Indigo axis packs

Registered brand packs on this site

  • kiln Kiln (default)
  • slate Slate
  • sage Sage
  • indigo Indigo

Open the Kiln L3 theme preview (shell, card, form, marketing band, and token specimen).

Theming

Brickwork reads every visual value from a set of --bw-* CSS custom properties. Rebrand by overriding the tokens, never by touching component classes. This site's own palette below is one example, not the only look brickwork can produce.

Load-bearing --bw-* colour tokens for the active theme and brand. Change theme or brand in the header switch; the chips update with the same components, not a second kit.

Defaults should be beautiful: that is the founding ambition. If a consumer never touches a token, the site they ship should still look considered. VISUAL-BAR certification awaits an independent scorecard sign-off, not a count of shipped examples.

Brickwork founding statement
Light mode

A light surface with dark text, authored from the eight unconditional load-bearing colour tokens that drive the rest of the palette.

Dark mode

Authored per token rather than computed by inverting light mode, so each dark-mode value is deliberate, not derived.

Documentation