Wiz'rd
Typography
Alias tier — map semantic text roles (body, headings, display) to your raw type scale values. Each dropdown references keys defined on the Type Scale step.
Font Families
Body
Sans-Serif
Serif
Monospace
Enter any CSS font-family stack. You are responsible for loading web fonts in your project.
Heading
Sans-Serif
Serif
Monospace
Enter any CSS font-family stack. You are responsible for loading web fonts in your project.
Display
Sans-Serif
Serif
Monospace
Enter any CSS font-family stack. You are responsible for loading web fonts in your project.
Mono
Sans-Serif
Serif
Monospace
Enter any CSS font-family stack. You are responsible for loading web fonts in your project.
Body Text
XS
Weight
Line Height
Letter Spacing
SM
Weight
Line Height
Letter Spacing
Body (base)
Weight
Line Height
Letter Spacing
LG
Weight
Line Height
Letter Spacing
Headings
H1
Weight
Line Height
Letter Spacing
H2
Weight
Line Height
Letter Spacing
H3
Weight
Line Height
Letter Spacing
H4
Weight
Line Height
Letter Spacing
H5
Weight
Line Height
Letter Spacing
H6
Weight
Line Height
Letter Spacing
Display
Display Small
Weight
Line Height
Letter Spacing
Display Medium
Weight
Line Height
Letter Spacing
Display Large
Weight
Line Height
Letter Spacing
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.