Theming playground

This page renders Balance's current theme tokens directly from useTheme(), so the values you see here are always the real ones shipping in the design system — not a hand-maintained copy that can drift out of date.

See the Theme package documentation for the hooks and helpers (useTheme, theme, ThemeProvider, …) that expose these tokens to your own components.

Note: this page is a reference, not an editor — there's no way to save or switch themes here. Balance currently ships one theme (Reckon web: Light); a per-consumer theme switcher isn't something either this site or the design system has built.

Colors

colors is the flat, top-level palette most components reference directly.

Decorative / variant

colors.variant is an array, used for categorical data (e.g. chart series or avatar backgrounds) rather than semantic meaning.

Semantic colours

Most components read from semantic.colour instead of the flat colors object — a much larger, structured set of tokens (primary, secondary, neutral, plus reserved tones like critical/positive/cautious/info, each with foreground/background/container/inverse/interactions variants). See theme's own documentation for the full shape — it's too large to usefully flatten into a swatch grid here.

Spacing

Sizing

sizing is a smaller scale used for icon/control dimensions, distinct from spacing.

Radii

Typography

Font weights (typography.fontWeight) and the three font families (typography.fontFamily.body/heading/monospace) are covered by the Text and Heading packages, which are the components that actually apply them.

Elevation

The stacking order dedicated components render at — see Elevate if you need to reason about it directly, which is rarely necessary outside Balance internals.

Breakpoints

Use these through the media-query package's mq, minBreak and maxBreak helpers rather than reading the raw values directly.