Token Editor

Mode

LightDark

Base Colors

Background

Foreground

Card

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Card Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Primary

Primary

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Primary Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Secondary

Secondary

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Secondary Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Muted

Muted

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Muted Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Accent

Accent

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Accent Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Info

Info

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Info Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Success

Success

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Success Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Warning

Warning

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Warning Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Error

Error

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Error Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Neutral

Neutral

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Neutral Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Destructive

Destructive

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Destructive Foreground

FAIL

Aa

💡 Minimum 4.5:1 required for AA compliance.

💡 Consider using a darker or lighter color.

Borders & Inputs

Border

Input

Ring

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

Info

This is an informational alert message.

Error

This is an error alert message.

Dialog

Dropdown Menu

Tabs

Username

Tooltip

Form Example

Create Account

Enter your information to get started

Full Name

Email

Password

Role

I agree to the terms and conditions

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