Wiz'rd

Component Overrides

System tier — override tokens for individual components. Each component has system tokens (e.g. button padding, input radius) that default to alias values. Overriding a token here only affects that specific component, without changing the global alias.

Component

Preview

First section

Content for the first section.

Second section

System Tokens

Change a value to override the default. Overrides emit as system-tier CSS variables.

accordion-border-width

(border-width)

default

accordion-trigger-padding-x

(spacing)

default

accordion-trigger-padding-y

(spacing)

default

accordion-trigger-font-size

(font-size)

default

accordion-panel-padding-x

(spacing)

default

accordion-panel-padding-y

(spacing)

default

accordion-indicator-size

(sizing)

default

Surface Colours

accordion-trigger-surface-default

default

accordion-trigger-on-surface-default

default

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

Checkbox

Toggle

Radio Group

First option

Second option

Third option

Box / Card

Elevated box with medium radius and padding.

Alerts

Informational message.

Success message.

Warning message.

Error message.

Avatars

Accordion

First section

Content for the first accordion section.

Second section

Third section

Link

Default link Small 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

Full name

Country

Alert Variants

Informational — check your email for a confirmation link.

Success — your changes have been saved.

Warning — your trial expires in 3 days.

Error — payment could not be processed.

Nested Composition

Subscription Plan

Your current plan includes all features.

Pro