Wiz'rd

Dimensions Reference

Read-only reference showing how alias names map to raw scale steps. Spacing, sizing, radius, and border-width all share the same scale — adjusting the base unit on the Scale page cascades through every alias.

Spacing

AliasRaw RefValue
none00px
xs14px
sm28px
md312px
lg416px
xl624px
2xl832px
3xl1248px
4xl1664px

Sizing

AliasRaw RefValue
3xs312px
2xs416px
xs520px
sm624px
md832px
lg1040px
xl1248px

Radius

AliasRaw RefValue
none00px
sm14px
md28px
lg312px
full99999999px

Border Width

AliasRaw RefValue
none00px
thin0-250-25
thick0-50-5

Opacity

Opacity uses numeric tokens directly (e.g. --opacity-70 = 0.7).

TokenValue
--opacity-00
--opacity-50.05
--opacity-100.1
--opacity-150.15
--opacity-200.2
--opacity-250.25
--opacity-300.3
--opacity-350.35
--opacity-400.4
--opacity-450.45
--opacity-500.5
--opacity-550.55
--opacity-600.6
--opacity-650.65
--opacity-700.7
--opacity-750.75
--opacity-800.8
--opacity-850.85
--opacity-900.9
--opacity-950.95
--opacity-1001

Live Preview

Display Large

Display Medium

Display Small

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Large body text for lead paragraphs.

Default body text in the surface colour.

Small text for captions and secondary content.

Extra-small text for fine print and labels.

Muted text for supporting information.

Code

const theme = createTheme(tokens);

export default theme;

Buttons

Badges

PrimarySuccessDangerWarningInfo

Inputs

Toggle

Radio Group

Box / Card

Elevated box with medium radius and padding.

Alerts

Avatars

Accordion

Content for the first accordion section.

Link

Default linkSmall link

Breadcrumb

Tabs

Overview panel content.

Details panel content.

Settings panel content.

Separator

Horizontal separator shown above and below.

Slider

Progress & Skeleton

Page Surface

Default Surface

Body text on the default page background.

Muted text for secondary information.

Muted Section

Muted Background

Body text on a muted surface.

Raised Card

Card content elevated above the muted surface.

Primary Section (Cascade)

Primary Surface

Body text inherits on-primary colour via cascade.

Muted text also resolves to on-primary.

Card Grid on Muted

Feature One

New

Card content on a raised surface over muted background.

Feature Two

Beta

Another card verifying consistent contrast and spacing.

Form Controls

Country

Alert Variants

Nested Composition

Subscription Plan

Your current plan includes all features.

Pro