Colors
The Leucine color palette — brand blues, semantic colors, and a full spectrum of utility shades.
Primary Colors
Leucine Blue is the core brand color. Shade 700 (#0052FE) is the primary value used across buttons, links, and focus rings.
Leucine Blue
Gray
Error
Warning
Success
Semantic Tokens
Semantic tokens map raw color values to functional roles in the UI, consumed via Tailwind utility classes through CSS custom properties.
| Token | CSS Variable | Value | Usage | Preview |
|---|---|---|---|---|
| primary | --primary | #0052FE | Buttons, links, focus rings | |
| primary-foreground | --primary-foreground | #FFFFFF | Text on primary backgrounds | |
| secondary | --secondary | #F1F5FE | Secondary buttons, subtle highlights | |
| secondary-foreground | --secondary-foreground | #0052FE | Text on secondary backgrounds | |
| destructive | --destructive | #F04438 | Error states, delete actions | |
| warning | --warning | #F79009 | Warning states, caution indicators | |
| success | --success | #12B76A | Success states, confirmations | |
| muted | --muted | #F2F4F7 | Muted backgrounds, disabled states | |
| muted-foreground | --muted-foreground | #667085 | Secondary text, placeholders | |
| border | --border | #EAECF0 | Borders, dividers | |
| input | --input | #EAECF0 | Input borders | |
| background | --background | #FFFFFF | Page background | |
| foreground | --foreground | #101828 | Primary text color | |
| card | --card | #FFFFFF | Card backgrounds | |
| card-foreground | --card-foreground | #101828 | Card text | |
| popover | --popover | #FFFFFF | Popover backgrounds | |
| popover-foreground | --popover-foreground | #101828 | Popover text | |
| ring | --ring | #0052FE | Focus ring color |
Secondary Colors
Extended palette for charts, illustrations, badges, tags, and decorative elements.
Purple
Light Blue
Indigo
Pink
Rosé
Orange
Yellow
Teal
Light Green
WCAG Accessibility
Contrast Requirements
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced contrast (AAA). Large text (18px+ bold or 24px+ regular) needs only 3:1 (AA Large).
| Preview | Shade | Hex | Contrast vs White | Rating |
|---|---|---|---|---|
| 25 | #F9FBFE | 1.02:1 | Fail | |
| 50 | #F1F5FE | 1.06:1 | Fail | |
| 100 | #E5EDFE | 1.13:1 | Fail | |
| 200 | #CBDCFE | 1.35:1 | Fail | |
| 300 | #98B9FE | 1.83:1 | Fail | |
| 400 | #6697FE | 2.52:1 | Fail | |
| 500 | #4C86FE | 3.12:1 | AA Large | |
| 600 | #3374FE | 3.97:1 | AA Large | |
| 700 | #0052FE | 6.39:1 | AA | |
| 800 | #083CA9 | 9.47:1 | AAA | |
| 900 | #052A75 | 13.2:1 | AAA |