Wiz'rd
Shape & Elevation
Border radii are controlled by the scale base unit — adjust it on the Scale page to proportionally resize all radii. Shadows define elevation levels for cards and overlays.
Border Radius
Each radius maps to a scale step. Adjust the scale base unit on the Scale page to resize all radii proportionally.
none
scale.0 = 0px
sm
scale.1 = 4px
md
scale.2 = 8px
lg
scale.3 = 12px
full
9999px = 9999px
Shadows
none
sm
md
lg
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.