Default Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Colours
Colour Palettes
Three HSL palettes — primary, secondary, and neutral — each with five light variants, a base value, and five dark variants.
Primary
l-6
l-5
l-4
l-3
l-2
l-1
base
d-1
d-2
d-3
d-4
d-5
d-6
Transparency Variants
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10
t-11
Secondary
l-6
l-5
l-4
l-3
l-2
l-1
base
d-1
d-2
d-3
d-4
d-5
d-6
Transparency Variants
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10
t-11
Neutral
l-6
l-5
l-4
l-3
l-2
l-1
base
d-1
d-2
d-3
d-4
d-5
d-6
Transparency Variants
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10
t-11
Black & White
Near-black and near-white tokens with full transparency scales.
Base Values
--color-white
--color-black
White Transparency
t-5
t-10
t-20
t-30
t-40
t-50
t-60
t-70
t-80
t-90
t-95
Black Transparency
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10
t-11
Status Colours
Semantic status colours in OKLCH. Each has a matching -surface variant for background use.
Status Base & Surface
--color-success
--color-success-surface
--color-danger
--color-danger-surface
--color-warning
--color-warning-surface
--color-info
--color-info-surface
Semantic Tokens
Role-based aliases that map to palette primitives — the tokens you use in production. They resolve correctly in light and dark modes.
Surfaces
Layered surface hierarchy for cards, panels, modals, and backgrounds.
--color-surface-sunken
--color-surface
--color-surface-raised
--color-surface-overlay
Backgrounds
Page-level and themed backgrounds. Use --color-bg for the default page background.
--color-bg
--color-bg-alt
--color-bg-light
--color-bg-dark
--color-bg-primary
--color-bg-secondary
--color-bg-neutral
Foreground & Text
Text and heading colours. --color-text is the default body colour.
--color-heading
--color-text
--color-text-muted
--color-text-inverted
Borders
Border colours.
--color-border
--color-border-muted
Interactive
Links, buttons, and interactive element colours.
--color-interactive
--color-interactive-hover
--color-interactive-text
Shadow Colours
Tints used by the shadow scale.
--color-shadow
--color-shadow-strong
Typography
Font Families
Three family tokens. --font-family defaults to --font-sans and is applied to the body.
Sans --font-sans
The quick brown fox jumps over the lazy dog.
Serif --font-serif
The quick brown fox jumps over the lazy dog.
Mono --font-mono
The quick brown fox jumps over the lazy dog.
Type Scale
Eight steps from --text-size-xs to --text-size-4xl, fluid to the viewport via Utopia clamp().
--text-size-xs · step −2
The quick brown fox jumps over the lazy dog
--text-size-sm · step −1
The quick brown fox jumps over the lazy dog
--text-size-md · step 0
The quick brown fox jumps over the lazy dog
--text-size-lg · step 1
The quick brown fox jumps over the lazy dog
--text-size-xl · step 2
The quick brown fox jumps over the lazy dog
--text-size-2xl · step 3
The quick brown fox jumps over the lazy dog
--text-size-3xl · step 4
The quick brown fox jumps over the lazy dog
--text-size-4xl · step 5
The quick brown fox jumps over the lazy dog
Fluid Type Scale .fluid-text-container
The same --text-size-* aliases, but inside a .fluid-text-container they re-point to --fl-step-* and size against the container width (cqi) instead of the viewport. Drag the right edge to resize.
--text-size-xs · fl-step −2
The quick brown fox jumps over the lazy dog
--text-size-sm · fl-step −1
The quick brown fox jumps over the lazy dog
--text-size-md · fl-step 0
The quick brown fox jumps over the lazy dog
--text-size-lg · fl-step 1
The quick brown fox jumps over the lazy dog
--text-size-xl · fl-step 2
The quick brown fox jumps over the lazy dog
--text-size-2xl · fl-step 3
The quick brown fox jumps over the lazy dog
--text-size-3xl · fl-step 4
The quick brown fox jumps over the lazy dog
--text-size-4xl · fl-step 5
The quick brown fox jumps over the lazy dog
↔ Drag the right edge to resize the container
Heading Sizes
Applied directly to h1–h6 via the base layer.
--heading-size-1
Heading One
--heading-size-2
Heading Two
--heading-size-3
Heading Three
--heading-size-4
Heading Four
--heading-size-5
Heading Five
--heading-size-6
Heading Six
Font Weights
Seven weight tokens from light to black. --font-weight defaults to --font-weight-regular (400).
--font-weight-light · 300
The quick brown fox jumps over the lazy dog.
--font-weight-regular · 400
The quick brown fox jumps over the lazy dog.
--font-weight-medium · 500
The quick brown fox jumps over the lazy dog.
--font-weight-semibold · 600
The quick brown fox jumps over the lazy dog.
--font-weight-bold · 700
The quick brown fox jumps over the lazy dog.
--font-weight-extrabold · 800
The quick brown fox jumps over the lazy dog.
--font-weight-black · 900
The quick brown fox jumps over the lazy dog.
Line Height
Five line-height tokens. --line-height defaults to --line-height-base (1.5).
--line-height-none · 1
This text demonstrates the line-height token — adjust the leading between wrapped lines of body copy.
--line-height-tight · 1.25
This text demonstrates the line-height token — adjust the leading between wrapped lines of body copy.
--line-height-base · 1.5
This text demonstrates the line-height token — adjust the leading between wrapped lines of body copy.
--line-height-relaxed · 1.625
This text demonstrates the line-height token — adjust the leading between wrapped lines of body copy.
--line-height-loose · 2
This text demonstrates the line-height token — adjust the leading between wrapped lines of body copy.
Letter Spacing
Five tracking tokens from --letter-spacing-tighter to --letter-spacing-wider.
--letter-spacing-tighter · −0.05ch
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
--letter-spacing-tight · −0.025ch
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
--letter-spacing-normal · 0ch
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
--letter-spacing-wide · 0.16ch
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
--letter-spacing-wider · 0.22ch
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
Reading Widths
Character-based width constraints. --prose-width defaults to --prose-width-base (60ch).
--prose-width-narrow · 45ch
This block is constrained to the narrow reading width of 45ch. The measure controls how many characters land on each line before the text wraps, which directly shapes how comfortably the eye travels from the end of one line back to the start of the next across longer passages of running body copy — too narrow feels choppy, too wide loses its place.
--prose-width-base · 60ch
This block is constrained to the base reading width of 60ch. The measure controls how many characters land on each line before the text wraps, which directly shapes how comfortably the eye travels from the end of one line back to the start of the next across longer passages of running body copy — too narrow feels choppy, too wide loses its place.
--prose-width-wide · 80ch
This block is constrained to the wide reading width of 80ch. The measure controls how many characters land on each line before the text wraps, which directly shapes how comfortably the eye travels from the end of one line back to the start of the next across longer passages of running body copy — too narrow feels choppy, too wide loses its place.
--prose-width-max · 100ch
This block is constrained to the max reading width of 100ch. The measure controls how many characters land on each line before the text wraps, which directly shapes how comfortably the eye travels from the end of one line back to the start of the next across longer passages of running body copy — too narrow feels choppy, too wide loses its place.
UI Tokens
Border Radius
Seven radius steps from --radius-none (0) to --radius-full (100vw pill).
Steps
none
0
xs
0.25rem
sm
0.5rem
md
0.75rem
lg
1rem
xl
1.5rem
full
100vw
Box Shadows
Five elevation levels using --color-shadow and --color-shadow-strong for consistent tinting.
Levels
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
Spacing
Fluid Spacing Scale
Scale
Nine fluid steps from --space-3xs to --space-3xl, generated with clamp() to scale smoothly between viewport breakpoints. --space aliases --space-md.
--space-3xs
--space-2xs
--space-xs
--space-sm
--space-md
--space-lg
--space-xl
--space-2xl
--space-3xl
Spacing Pairs
Pairs
One-up fluid jumps — each pair spans from one scale step to the next. Use for responsive gaps that grow more aggressively than single-step tokens.
--space-3xs-2xs
--space-2xs-xs
--space-xs-sm
--space-sm-md
--space-md-lg
--space-lg-xl
--space-xl-2xl
--space-2xl-3xl
Gap Aliases
Aliases
Semantic gap tokens for common layout contexts. --gap-content defaults to --gap-content-md; --gap-container is for large section-level spacing.
--gap-content-sm
--gap-content-md
--gap-content-lg
--gap-container
Components
Button
Inline-flex button with a full custom-property API for colour, border, radius, icon, and transitions. Size via --button-* tokens.
Colour Variants
Outline
Ghost
Sizes
With Icons
Icon Only
Box
Surface container with padding, background, border, radius, and shadow — all via --card-* custom properties.
Custom Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image
Default image styles aspect-ratio, object-fit, radius, border, box-shadow — all via --image-* custom properties.
Card
Surface container with padding, background, border, radius, and shadow — all via --card-* custom properties.
Default Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Image Card
Uses framework surface, border, and shadow defaults.
Custom Card
Overridden with a primary-tint background and medium shadow.
Nav List
Vertical navigation list with hover-row styling. Add .inline for a horizontal bar, .divided for separators.
Styled List
Icon list with inline SVG markers. Add .divided for gradient-fade dividers between items.
Default
- List item
- List item
- List item
Divided
- First item with a gradient divider below
- Second item with a gradient divider below
- Third item — the last has no divider
Slider
The native Bricks Slider (nested) element, Splide-powered. A .slider wrapper pastes with default options (3→2→1 per page, autoplay, drag) plus arrows and pagination — tune per-slider in Bricks. Assign arrow icons in Bricks.
Slide heading
Replace this slide with your card or query-loop content.
Slide heading
Replace this slide with your card or query-loop content.
Slide heading
Replace this slide with your card or query-loop content.
Swiper
Pure-CSS scroll-snap carousel — no JavaScript. Items snap to start on horizontal scroll. Set item width with --swiper-item-inline-size.
Horizontal
Slide 1
Scroll horizontally →
Slide 2
Scroll horizontally →
Slide 3
Scroll horizontally →
Slide 4
Scroll horizontally →
Slide 5
Scroll horizontally →
Vertical
Slide 1
Scroll vertically ↓
Slide 2
Scroll vertically ↓
Slide 3
Scroll vertically ↓
Slide 4
Scroll vertically ↓
Slide 5
Scroll vertically ↓
Native
Native <details> / <summary> with animated open/close. The + marker rotates 45° on open.
Native
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Accordion 2
A modern, token-driven CSS framework built on custom properties, cascade layers, and fluid typography.
Bricks
Bricks accordion element
Bricks
Accordion 1
Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.
Accordion 2
Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.
Form (Gravity Forms)
Gravity Form styled with .form
"*" indicates required fields
Badge
Inline-flex pill for labels, tags, and status indicators.
Variants
DefaultMuted
Status
DangerWarningSuccessInfo
Callout
Left-border accent box for notices, tips, and alerts. Status modifiers set the border colour and surface automatically.
Status Variants
Callout heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Danger — errors, destructive actions, critical warnings.
Warning — cautions, deprecations, non-critical alerts.
Success — confirmations and completed actions.
Info — tips, notes, supplementary information.
Layouts
Stack
Vertical flex column with configurable gap. Override with --stack-gap.
Stacked
Stacked
Stacked
Cluster
Horizontal wrapping flex row — tag groups, button bars, nav links.
Tag OneTag TwoTag ThreeTag FourTag Five
Grid · Auto Columns
Targets a column count with --grid-cols; wraps below --grid-min.
1
2
3
4
5
6
Grid · Auto Fit
Like auto-cols but stretches remaining items to fill the row.
1
2
3
4
5
Grid · Split
Two explicit columns; stacks at the threshold width.
Left
Right
Grid · Three Column
Three equal columns; stacks at narrow widths.
1
2
3
Flex · Auto Columns
Equal responsive columns via flex-basis calc. Target count with --flex-cols.
1
2
3
4
Flex · Split
Two-column layout that stacks at a threshold. Proportions via --flex-first / --flex-second.
Media (1.2×)
Body (1×)
Content Grid
Full-width named-track grid. Children default to the content track; opt wider with .inset, .breakout, .full.
.full.breakout.content (default).insetReadable
Character-based max-width for optimal reading measure. Defaults to 60ch; modifiers set --prose-width.
Constrained to 45ch. The measure sets how many characters sit on each line before wrapping, which shapes how comfortably the eye returns from the end of one line to the start of the next across a longer run of body copy.
Constrained to 60ch (default). The measure sets how many characters sit on each line before wrapping, which shapes how comfortably the eye returns from the end of one line to the start of the next across a longer run of body copy.
Constrained to 80ch. The measure sets how many characters sit on each line before wrapping, which shapes how comfortably the eye returns from the end of one line to the start of the next across a longer run of body copy.
Constrained to 100ch. The measure sets how many characters sit on each line before wrapping, which shapes how comfortably the eye returns from the end of one line to the start of the next across a longer run of body copy.
Motion
Durations
Five duration steps from instant to slower. Bar width is illustrative.
--duration-instant · 0ms
--duration-fast · 200ms
--duration-normal · 300ms
--duration-slow · 400ms
--duration-slower · 500ms
Transition Properties
Pre-composed transition shorthands — property + duration + easing in one token. Hover each.
--transition-color + --transition-bg
hover me
--transition-border
hover me
--transition-opacity
hover me
--transition-transform
hover me
--transition-shadow
hover me
--transition-filter
hover me
Easing Functions
Six easing curves including linear() spring and bounce. Hover to compare.
--ease-linear
hover me
--ease-in
hover me
--ease-out
hover me
--ease-in-out
hover me
--ease-spring
hover me
--ease-bounce
hover me
Utilities
Flow
Adds vertical spacing between direct children. .flow is content-level, .flow-prose is text-level (1em). Override with --flow-gap.
.flow
.flow-prose
Heading
First paragraph of text content.
Heading
Second paragraph — the gap is 1em, relative to font-size.
Heading
Second paragraph — the gap is 1em, relative to font-size.
Alignment
.self-center sets margin-inline: auto; .self-end pushes to the inline end.
Centred
End-aligned
Aspect Ratio
Sets aspect-ratio: var(--ratio). Use with any --ratio-* token.
square
1/1
widescreen
16/9
landscape
4/3
Edge Mask
Fades content edges with a transparent gradient mask. Base masks all edges; modifiers target one side. Override --mask-amount (25%).
.has-mask
.has-mask.top
.has-mask.bottom
.has-mask.left
.has-mask.right
Texture
Layers a generated pattern over the background colour. Chain a preset onto .has-texture; override --texture-color / --texture-spacing.
.dots
.lines-horizontal
.grid
.halftone
Background Colours
Semantic background utilities mapping to --color-bg-* tokens.
.bg-alt
.bg-light
.bg-dark
.bg-primary
.bg-secondary
.bg-neutral
Lists
A real list keeps its semantics; .no-list or [role="list"] strips the bullets and indent while preserving the list role for screen readers (add role="list" so Safari/VoiceOver keep it).
Default list:
- Item one
- Item two
- Item three
[role="list"] applied:
- Item one
- Item two
- Item three
Text Wrapping
.text-balance evens lines; .text-pretty avoids orphans; .text-nowrap keeps one line.
.text-balance
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
.text-pretty
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
.text-nowrap
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
External link indicator
External links (target="_blank") get an automatic ↗ arrow inside content areas (.brxe-post-content / .brxe-text). .is-plain is a container modifier — chain it on the content class (.brxe-post-content.is-plain) to suppress the arrow on all links within. .is-external is the explicit opt-in — put it on a link itself, or on a wrapper to give every a inside it the arrow.
Automatically applied to rich text
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.
.is-plain removes indicator
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.
.is-external adds indicator
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.
Visibility
[hidden] is display: none; .visually-hidden hides visually but stays for screen readers (revealed on :focus-within).
[hidden] — removed from layout entirely.
.visually-hidden — Tab to reveal the skip link: