Opens in a new tab

Maison Doi

Design system

Every token,
on one page.

Colour ramps, type scale, spacing, radii and elevation — generated straight from the live variables, so this page can never drift from the build.
3 base colours
90 colour steps
9 type steps
11 space steps
12 radii
01 — Type

Typography

A single clamped scale, from caption to display. Every heading level maps onto one of these steps.
Aa
Grid, rhythm, restraint
text-xs
Grid, rhythm, restraint
text-s
Grid, rhythm, restraint
text-m · h6
Grid, rhythm, restraint
text-l · h5
Grid, rhythm, restraint
text-xl · h4
Grid, rhythm, restraint
text-2xl · h3
Grid, rhythm, restraint
text-3xl · h2
Grid, rhythm, restraint
text-4xl · h1
Grid, rhythm, restraint
text-5xl
Body

Aa

System font · 400
H1

Aa

System font · 700
H2

Aa

System font · 700
H3

Aa

System font · 700
H4

Aa

System font · 700
H5
Aa
System font · 700

The Art of Readable Design

Good typography goes unnoticed. It guides the eye, sets the pace and lets the words do the talking. This sample shows how headings, body text, links and quotes sit together on a real page.

Hierarchy Creates Momentum

Headings tell the reader what matters first, and body copy carries the story. Use bold for emphasis, italics for nuance, and links that stand out without shouting.

Rhythm and Space

Line length, line height and the space between paragraphs set the reading rhythm:

  • Keep lines between 45 and 75 characters.
  • Give headings more space above than below.
  • Use one link style everywhere.

A well-set page doesn’t ask for attention. It earns it, one line at a time.

A designer’s rule of thumb

Links in Context

Compare this paragraph with the one above to see how the gap under each heading changes, or jump back to the type scale.

Small Headings Still Lead

Smaller headings group related details without breaking the flow of the page.

Fine Print

Small text is for notes, captions and credits. It should stay comfortable to read.

02 — Colour

Colour ramps

Thirty steps per base colour, drawn edge to edge. Foreground colour on every step is contrast-picked, not guessed. Hover to copy a hex or a token.
Primary
--brxp-primary
l-1
light
l-2
light
l-3
light
l-4
light
l-5
light
l-6
light
l-7
light
l-8
light
l-9
light
l-10
light
d-1
dark
d-2
dark
d-3
dark
d-4
dark
d-5
dark
d-6
dark
d-7
dark
d-8
dark
d-9
dark
d-10
dark
t-1
alpha
t-2
alpha
t-3
alpha
t-4
alpha
t-5
alpha
t-6
alpha
t-7
alpha
t-8
alpha
t-9
alpha
t-10
alpha
Secondary
--brxp-secondary
l-1
light
l-2
light
l-3
light
l-4
light
l-5
light
l-6
light
l-7
light
l-8
light
l-9
light
l-10
light
d-1
dark
d-2
dark
d-3
dark
d-4
dark
d-5
dark
d-6
dark
d-7
dark
d-8
dark
d-9
dark
d-10
dark
t-1
alpha
t-2
alpha
t-3
alpha
t-4
alpha
t-5
alpha
t-6
alpha
t-7
alpha
t-8
alpha
t-9
alpha
t-10
alpha
Surface
--brxp-surface
l-1
light
l-2
light
l-3
light
l-4
light
l-5
light
l-6
light
l-7
light
l-8
light
l-9
light
l-10
light
d-1
dark
d-2
dark
d-3
dark
d-4
dark
d-5
dark
d-6
dark
d-7
dark
d-8
dark
d-9
dark
d-10
dark
t-1
alpha
t-2
alpha
t-3
alpha
t-4
alpha
t-5
alpha
t-6
alpha
t-7
alpha
t-8
alpha
t-9
alpha
t-10
alpha

Contextual

Info
--brxp-info
Success
--brxp-success
Warning
--brxp-warning
Danger
--brxp-danger
03 — Controls

Buttons

Sizes, solid, outline and the contextual set, on the default light surface. Switch the document’s color-scheme and the same rows come with it.
Sizes
SmallMediumLargeExtra Large
Solid
PrimarySecondaryLightDark
Outline
PrimarySecondaryLightDark
Contextual
MutedInfoSuccessWarningDanger
Ctx outline
MutedInfoSuccessWarningDanger
04 — Rhythm

Space & radius

Each bar is drawn at the token’s true computed height, so the curve of the scale is the real one. Radii sit on filled tiles where the corner reads hardest.

Spacing scale

3XS
2XS
XS
S
M
L
XL
2XL
3XL
4XL
5XL

Border radius

3XS
radius-3xs
2XS
radius-2xs
XS
radius-xs
S
radius-s
M
radius-m
L
radius-l
XL
radius-xl
2XL
radius-2xl
3XL
radius-3xl
4XL
radius-4xl
5XL
radius-5xl
Full
radius-full
05 — Depth

Elevation

Neutral shadows plus the tinted primary and secondary sets. Each group sits on the opposite lightness to its own shadow — the name describes the shadow, not the surface, so the light variants are shown dark and the dark variants light.

Standard

XS
brxw-shadow-xs
S
brxw-shadow-s
M
brxw-shadow-m
L
brxw-shadow-l
XL
brxw-shadow-xl

Primary dark

XS
brxp-shadow-xs-primary-dark
S
brxp-shadow-s-primary-dark
M
brxp-shadow-m-primary-dark
L
brxp-shadow-l-primary-dark
XL
brxp-shadow-xl-primary-dark

Primary light

XS
brxp-shadow-xs-primary-light
S
brxp-shadow-s-primary-light
M
brxp-shadow-m-primary-light
L
brxp-shadow-l-primary-light
XL
brxp-shadow-xl-primary-light

Secondary dark

XS
brxp-shadow-xs-secondary-dark
S
brxp-shadow-s-secondary-dark
M
brxp-shadow-m-secondary-dark
L
brxp-shadow-l-secondary-dark
XL
brxp-shadow-xl-secondary-dark

Secondary light

XS
brxp-shadow-xs-secondary-light
S
brxp-shadow-s-secondary-light
M
brxp-shadow-m-secondary-light
L
brxp-shadow-l-secondary-light
XL
brxp-shadow-xl-secondary-light

Surfaces

Each surface pairs a background with its text and link colours. Change them in Variables → Surfaces and every element using the class follows.
.brxp-surface1

Page

Body text on this surface, with a sample link.

Muted text for captions and metadata.
.brxp-surface2

Card

Body text on this surface, with a sample link.

Muted text for captions and metadata.
.brxp-surface3

Inset

Body text on this surface, with a sample link.

Muted text for captions and metadata.
.brxp-surface4

Accent

Body text on this surface, with a sample link.

Muted text for captions and metadata.