Colors
Tokens are named by role. Switching the theme in the header changes the values below. Click a token to copy it.
Surfaces
| Token | Used for | |
|---|---|---|
| Page | ||
| Text | ||
| Subtle fills, table headers | ||
| Secondary text, inactive nav | ||
| Hover, active nav link | ||
| Text on accent | ||
| Menus, toasts, dialogs | ||
| Cards (Delete User tools, GIF tiles) |
Borders
| Token | Used for | |
|---|---|---|
| Dividers, header | ||
| Control borders | ||
| Search fields (border-neutral-600) | ||
| Focus ring, at 50% |
Actions
| Token | Used for | |
|---|---|---|
| Primary button | ||
| Primary button hover | ||
| Text on primary | ||
| Destructive actions, errors | ||
| Brand button (Assign 20 GIFs), logo lime | ||
| Brand accent (Clerk colorPrimary) | ||
| Info icons (text-info) |
Messages
| Token | Used for | |
|---|---|---|
| Error message under a form | ||
| Success message under a form |