Collection colors
Collection colors distinguish Lesli product areas, categories, charts, avatars, tabs, and accents. They support the product hierarchy but do not replace the application primary color.
Each palette provides five variants. Prefer 100 for soft backgrounds, 500 for accents, and 700–900 for text or strong iconography.
Palettes
Ruby
100
300
500
700
900
Ember
100
300
500
700
900
Maize
100
300
500
700
900
Agave
100
300
500
700
900
Jade
100
300
500
700
900
Cenote
100
300
500
700
900
Quetzal
100
300
500
700
900
Bugambilia
100
300
500
700
900
Cacao
100
300
500
700
900
Obsidian
100
300
500
700
900
| Palette | 100 | 300 | 500 | 700 | 900 |
|---|---|---|---|---|---|
| Ruby | #F6E5E5 | #D89C9C | #B23A3A | #8E2E2E | #5C1E1E |
| Ember | #F9EBDD | #E2B28D | #C86A2D | #A15625 | #673617 |
| Maize | #FBF2DF | #DAC18F | #B2852D | #926F25 | #5C4217 |
| Agave | #ECF2E7 | #ACBDA2 | #5D7C4D | #4F6942 | #34442C |
| Jade | #E2F1EC | #91BBB1 | #2D7A68 | #256656 | #143F33 |
| Cenote | #E3F0F3 | #8FB8C4 | #1F6F8B | #195D74 | #103B4A |
| Quetzal | #E8EBF6 | #A1AED8 | #4B5FA8 | #3E4F8C | #283259 |
| Bugambilia | #F5E6EE | #D49AB5 | #A83E6F | #8A345C | #58213B |
| Cacao | #EFE8E3 | #B9A394 | #6B4A35 | #593E2C | #38271C |
| Obsidian | #EAEEF2 | #ABB4BD | #5F6C7D | #505B69 | #313942 |
<span class="bg-cenote-100 text-cenote-700">Analytics</span>
<span class="border border-ruby-300 text-ruby-700">Integration</span>
Product aliases
Product aliases provide a stable default without coupling application markup to a particular palette name.
| Collection | Palette | Hex | Tailwind utility example |
|---|---|---|---|
| Administration | Cenote 500 | #1F6F8B | bg-collection-administration |
| Intelligence | Obsidian 500 | #5F6C7D | bg-collection-intelligence |
| Productivity | Ember 500 | #C86A2D | bg-collection-productivity |
| Integration | Ruby 500 | #B23A3A | bg-collection-integration |
| Analytics | Jade 500 | #2D7A68 | bg-collection-analytics |
| Security | Cacao 500 | #6B4A35 | bg-collection-security |
| Finance | Bugambilia 500 | #A83E6F | bg-collection-finance |
| Sales | Quetzal 500 | #4B5FA8 | bg-collection-sales |
| IT | Maize 500 | #B2852D | bg-collection-it |
Use aliases for product identity and named palettes for general visualization or categorization.
Last Update: 2026/09/14