Wiz'rd

Colour Aliases

Alias tier — map semantic colour roles to your raw palette shades. Components reference these aliases (e.g. "primary", "danger") rather than specific hex values, so changing a mapping here cascades through every component that uses it.

Primary

White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)

Primary Hover

Primary Active

On Primary

Surface

Surface Default

Surface Muted

Surface Raised

On Surface Default

On Surface Muted

Border

Border Default

Border Strong

Border Focus

Danger

Danger Surface

On Danger

On Danger Surface

Success

Success Surface

On Success

On Success Surface

Warning

Warning Surface

On Warning

On Warning Surface

Info

Info Surface

On Info

On Info Surface

Disabled

On Disabled

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