Token Editor

LightDark

Base Colors

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Primary

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Secondary

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Muted

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Accent

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Info

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Success

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Warning

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Error

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Neutral

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Destructive

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

FAIL
Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Borders & Inputs

Component Preview

Components update in real-time as you edit tokens

Buttons

Cards

Card Title
Card description

Card content goes here

Another Card

More content

Badges

Default
Secondary
Outline
Destructive

Inputs

Select

Avatar

JDABCD

Alert

Dialog

Dropdown Menu

Tabs

Tooltip

Form Example

Create Account
Enter your information to get started

Card Variations

Messages
You have 3 unread messages
JD

John Doe

Hey, how are you?

New
Statistics
Last 30 days
Total Users1,234
Active856
Growth
+12%
Quick Actions
Common tasks