Semantic colors
Semantic colors communicate meaning consistently across Lesli applications. Choose them by intent, not by visual preference.
| Palette | Purpose |
|---|---|
neutral | Text, borders, surfaces, and disabled states |
info | Guidance and contextual information |
success | Completed actions and valid states |
warning | Situations that require attention |
danger | Errors, blocked flows, and destructive actions |
black | High-contrast neutral content and surfaces |
Palettes
Neutral
50
100
200
300
400
500
600
700
800
900
Information
50
100
200
300
400
500
600
700
800
900
Success
50
100
200
300
400
500
600
700
800
900
Warning
50
100
200
300
400
500
600
700
800
900
Danger
50
100
200
300
400
500
600
700
800
900
Black
50
100
200
300
400
500
600
700
800
900
| Palette | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| Neutral | #F8FAFC | #F1F4F8 | #E5EAF0 | #C7D0DA | #8F9BAA | #667383 | #4B5663 | #34404C | #28323D | #1F2933 |
| Info | #F2F7FB | #E3EEF6 | #BDD5E8 | #8DAEC9 | #4F83AE | #245F93 | #1F527F | #1A466C | #153A59 | #123553 |
| Success | #F1FAF7 | #DDF2EA | #B8E2D2 | #8DD0B8 | #399C77 | #267E60 | #1F694F | #19543F | #154836 | #123F30 |
| Warning | #FFF9ED | #FFF1D6 | #FDE2A8 | #F8CF74 | #D29A2E | #B67D1F | #95651B | #775117 | #684614 | #5B3D12 |
| Danger | #FFF3F1 | #FFE3DE | #F8C1B8 | #EE9A8E | #C94E3C | #A93B2D | #8B3126 | #6F281F | #60231B | #541E18 |
| Black | #F5F5F5 | #E0E0E0 | #C2C2C2 | #A3A3A3 | #525252 | #333333 | #1F1F1F | #141414 | #0A0A0A | #000000 |
Every palette works with Tailwind utilities such as bg-*, text-*, border-*, ring-*, fill-*, and stroke-*.
<div class="border border-warning-300 bg-warning-50 text-warning-800">
Review the highlighted fields.
</div>
<p class="text-success-700">Changes saved successfully.</p>
Accessibility
- Prefer shades 50–100 for message backgrounds and 700–900 for text.
- Use dark text on Warning 50–500; white text is appropriate at Warning 600 and darker.
- Use white text on Danger 400 and darker.
- Do not communicate status with color alone. Pair it with text, an icon, or both.
Last Update: 2026/09/14