DESIGN SYSTEM / BRICKS
Style guide
A live reference for the site colours, typography, spacing and component treatments. This page reads the variables already configured in Bricks. Edit the system once and inspect the results here.
Colours
Primitive brand colours and semantic roles. The labels show the variable used by each swatch.
Brand primary · --brand-primary
Brand secondary · --brand-secondary
Brand accent · --brand-accent
Neutral 0 · --neutral-0
Neutral 100 · --neutral-100
Neutral 200 · --neutral-200
Neutral 600 · --neutral-600
Neutral 900 · --neutral-900
Semantic colour roles
--color-text
--color-text-muted
--color-heading
--color-bg
--color-bg-alt
--color-surface
--color-border
--color-action
--color-action-text
--color-action-hover
Typography
Heading defaults should use Tinos; body text should use Roboto. Compare the hierarchy at mobile and desktop widths.
Heading 1: The quick brown fox
Heading 2: The quick brown fox
Heading 3: The quick brown fox
Heading 4: The quick brown fox
Heading 5: The quick brown fox
Heading 6: The quick brown fox
Body paragraph: The quick brown fox jumps over the lazy dog. This sample shows the standard text size, line height and paragraph colour. It should remain comfortable to read at narrow widths.
Muted supporting text uses the semantic muted colour.
--text-xs · A reusable text scale step
--text-s · A reusable text scale step
--text-m · A reusable text scale step
--text-l · A reusable text scale step
--text-xl · A reusable text scale step
--text-2xl · A reusable text scale step
Spacing
Each bar uses a Bricks generated spacing variable as its width. The labels remain readable even when the smallest bars are narrow.
--space-2xs
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-2xl
Section padding and page gutters are controlled separately by --section-space, --section-space-small and --page-gutter.
Surfaces and cards
Compare the neutral surface, alternate section background, border, radius and shadow tokens.
Standard card
Surface, border, radius and shadow use the component tokens.
Flat card
The same border and radius without a shadow.
Alternate surface
A pale background treatment for contextual content.
Buttons and links
These samples use the global Theme Style. The button is editable as a normal Bricks Button element.
Primary buttonAnother buttonBorders, radii and shadows
The underlying scale and component aliases remain independent, so future projects can change the visual character centrally.
--radius-none
--radius-s
--radius-m
--radius-l
--radius-xl
--radius-full
--shadow-s
--shadow-m
--shadow-l