Skip to content

Design system

Every color, type size, spacing step and component on this site comes from one set of design tokens. This page is rendered live from those tokens and the Blade components, so it is always the current state of the theme. Switch between light and dark to compare.

Tokens

Colours, typography, shadows and spacing, drawn straight from the active design tokens.

Typography

.text-display Display
.text-h1 Heading 1
.text-h2 Heading 2
.text-h3 Heading 3
.text-h4 Heading 4
.text-h5 Heading 5
.text-body-large Body Large
.text-body Body
.text-body-small Body Small
.text-caption Caption
.text-overline Overline
.text-code Code

Surfaces

Aa

surface

--bg-primary
Aa

surface-secondary

--bg-secondary
Aa

surface-tertiary

--bg-tertiary
Aa

surface-brand

--bg-brand
Aa

surface-brand-subtle

--bg-brand-subtle
Aa

surface-accent

--bg-accent
Aa

surface-accent-subtle

--bg-accent-subtle
Aa

surface-inverse

--bg-inverse
Aa

surface-success

--bg-success
Aa

surface-warning

--bg-warning
Aa

surface-error

--bg-error
Aa

surface-disabled

--bg-disabled

Text colours

Sample text --text-primary
Sample text --text-secondary
Sample text --text-tertiary
Sample text --text-brand
Sample text --text-accent
Sample text --text-link
Sample text --text-success
Sample text --text-warning
Sample text --text-error
Sample text --text-disabled

Borders

line

--border-default

line-subtle

--border-subtle

line-strong

--border-strong

line-control

--border-control

line-brand

--border-brand

line-focus

--border-focus

line-error

--border-error

Shadows

shadow-sm

--shadow-sm

shadow-md

--shadow-md

shadow-lg

--shadow-lg

shadow-xl

--shadow-xl

shadow-button

--rafael-shadow-button

shadow-card

--rafael-shadow-card

shadow-card-hover

--rafael-shadow-card-hover

shadow-input

--rafael-shadow-input

shadow-dropdown

--rafael-shadow-dropdown

shadow-modal

--rafael-shadow-modal

shadow-focus-ring

--rafael-shadow-focus-ring

Gradients

primary

--gradient-primary-start → --gradient-primary-end

primary hover

--gradient-primary-hover-start → --gradient-primary-hover-end

primary active

--gradient-primary-active-start → --gradient-primary-active-end

subtle

--gradient-subtle-start → --gradient-subtle-end

dark

--gradient-dark-start → --gradient-dark-end

Spacing

--rafael-spacing-1
--rafael-spacing-2
--rafael-spacing-3
--rafael-spacing-4
--rafael-spacing-5
--rafael-spacing-6
--rafael-spacing-8
--rafael-spacing-10
--rafael-spacing-12
--rafael-spacing-16
--rafael-spacing-20
--rafael-spacing-24

Radii

radius-sm

radius-md

radius-lg

radius-xl

card-radius

radius-full

Components

Rendered from the Blade components themselves. What you see here is the current state.

Buttons

Variant Default Hover Focus Active Disabled
Primary Primary Primary Primary Primary Primary
Secondary Secondary Secondary Secondary Secondary Secondary
Subtle Subtle Subtle Subtle Subtle Subtle
Warning Warning Warning Warning Warning Warning
Inverted Inverted Inverted Inverted Inverted Inverted

Sizes. Visibly 32, 40 and 48 pixels tall; on touch the target is at least 44 pixels everywhere.

Small Medium Large Full width

On the inverse surface

Primary Secondary Subtle

On the brand surface

Inverted Secondary Subtle

Badges

Gray Brand Accent Success Warning Error
Outline With dot Small Large

Notices

A notice with neutral information.
The action was successful.
Please check this entry.

Form elements

A hint below the field.

Please correct this entry.

Cards

Default

Card with border and a light shadow.

Elevated

Card without a border that stands out through its shadow.

Filled

Card with background colour and border.

Links and icons

Accent link Dark link With icon Disabled
calendar check close download eye info lock mail phone search user warning

Layout helpers

x-grid with four columns. x-section frames every section of this page, x-prose the body text areas of the flexible layouts.

Column 1
Column 2
Column 3
Column 4