Buttons

Buttons | Light Background

Sizes
Small
Medium
Large
Extra Large
Solid
Primary
Secondary
Light
Dark
Outline
Primary
Secondary
Light
Dark
Rounded
Primary
Secondary
Light
Dark

Buttons | Dark Background

Sizes
Small
Medium
Large
Extra Large
Solid
Primary
Secondary
Light
Dark
Outline
Primary
Secondary
Light
Dark
Rounded
Primary
Secondary
Light
Dark

Shadow Variants

Standard

XS
S
M
L
XL

Primary Dark

XS
S
M
L
XL

Primary Light

XS
S
M
L
XL

Secondary Dark

XS
S
M
L
XL

Secondary Light

XS
S
M
L
XL

Color Palette

Primary | Light Background

Primary
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10

Primary | Dark Background

Primary
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10

Secondary | Light Background

Secondary
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10

Secondary | Dark Background

Secondary
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10

Surface | Light Background

Surface
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10

Surface | Dark Background

Surface
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t-1
t-2
t-3
t-4
t-5
t-6
t-7
t-8
t-9
t-10

Typography Layout

This layout shows the default BRXW typgrography settings. There is one type scale for text. This shows which values are set for Heading levels etc. Change Typography using the Style Manager Scale.
Body Text - Defaults to text-m
text-xs - Here goes your text.
text-s - Here goes your text.
text-m (h6) - Here goes your text.
text-l (h5) - Here goes your text.
text-xl (h4) - Here goes your text.
text-2xl (h3) - Here goes your text.
text-3xl (h2) - Here goes your text.
text-4xl (h1) - Here goes your text.
text-5xl - Here goes your text.

Example standard Copy:

Where Curiosity Takes Form

Ideas rarely arrive fully formed. They emerge as fragments—questions, tensions, half-sentences—waiting for structure. Typography gives those fragments a voice, turning abstract thought into something visible, readable, and persuasive.

Clarity Before Decoration

Good type doesn’t shout. It guides. Through rhythm, spacing, and hierarchy, it tells the reader what matters first and what can wait. When clarity leads, style follows naturally.

The Quiet Power of Restraint

White space is not empty; it’s intentional silence. It gives words room to breathe and meaning room to land. Restraint is what allows a message to feel confident rather than crowded.

A System, Not a Single Choice

Typography works best as a system of relationships. Headings signal intent, subheadings provide direction, and body copy carries the narrative forward with consistency and ease.

Hierarchy Creates Momentum

From bold declarations to subtle details, hierarchy pulls the reader down the page. Each level answers a question: Why should I care? What is this about? What do I do next?

Readability Is a Form of Respect

Line length, contrast, and font size are not aesthetic afterthoughts—they’re promises to the reader. When text is easy to read, ideas feel easier to trust.

Design That Sounds Human

Typography isn’t neutral. It has tone, posture, and mood. The right choices make words feel warm, authoritative, playful, or precise—without changing a single sentence.

Let the Words Do the Work

When typography is well chosen, it disappears. The reader remembers the message, not the mechanics. That invisibility is the mark of thoughtful design.

End With Intention

Every typographic journey should resolve with purpose. Whether it invites action or reflection, the final lines should feel deliberate—like a full stop, not a fade-out.