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
| Alias | Raw Ref | Value |
|---|---|---|
| none | 0 | 0px |
| xs | 1 | 4px |
| sm | 2 | 8px |
| md | 3 | 12px |
| lg | 4 | 16px |
| xl | 6 | 24px |
| 2xl | 8 | 32px |
| 3xl | 12 | 48px |
| 4xl | 16 | 64px |
Sizing
| Alias | Raw Ref | Value |
|---|---|---|
| 3xs | 3 | 12px |
| 2xs | 4 | 16px |
| xs | 5 | 20px |
| sm | 6 | 24px |
| md | 8 | 32px |
| lg | 10 | 40px |
| xl | 12 | 48px |
Radius
| Alias | Raw Ref | Value |
|---|---|---|
| none | 0 | 0px |
| sm | 1 | 4px |
| md | 2 | 8px |
| lg | 3 | 12px |
| full | 9999 | 9999px |
Border Width
| Alias | Raw Ref | Value |
|---|---|---|
| none | 0 | 0px |
| thin | 0.25 | 1px |
| thick | 0.5 | 2px |
Opacity
Opacity uses numeric tokens directly (e.g. --opacity-70 = 0.7).
| Token | Value |
|---|---|
| --opacity-0 | 0 |
| --opacity-5 | 0.05 |
| --opacity-10 | 0.1 |
| --opacity-15 | 0.15 |
| --opacity-20 | 0.2 |
| --opacity-25 | 0.25 |
| --opacity-30 | 0.3 |
| --opacity-35 | 0.35 |
| --opacity-40 | 0.4 |
| --opacity-45 | 0.45 |
| --opacity-50 | 0.5 |
| --opacity-55 | 0.55 |
| --opacity-60 | 0.6 |
| --opacity-65 | 0.65 |
| --opacity-70 | 0.7 |
| --opacity-75 | 0.75 |
| --opacity-80 | 0.8 |
| --opacity-85 | 0.85 |
| --opacity-90 | 0.9 |
| --opacity-95 | 0.95 |
| --opacity-100 | 1 |
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
Inputs
Radio Group
Box / Card
Elevated box with medium radius and padding.
Alerts
Avatars
Accordion
Content for the first accordion section.
Content for the second accordion section.
Content for the third accordion section.
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
NewCard content on a raised surface over muted background.
Feature Two
BetaAnother card verifying consistent contrast and spacing.
Form Controls
Alert Variants
Nested Composition
Subscription Plan
Your current plan includes all features.