Semantic and Foundation colors

Semantic colors communicate state consistently across Lesli applications. Choose them by meaning, never only because a hue looks appropriate. Neutral belongs to the Foundation layer and supplies text, borders, surfaces, and disabled states.

Layer	Palette	Purpose
Foundation	`neutral`	Text, borders, surfaces, and disabled states
Semantic	`info`	Guidance and contextual information
Semantic	`success`	Completed actions and valid states
Semantic	`warning`	Situations that require attention
Semantic	`danger`	Errors, blocked flows, and destructive actions
Foundation	`black`	High-contrast neutral content and surfaces

Foundation

Neutral

100

Palette	50	100	200	300	400	500	600	700	800	900
Neutral	`#F8FAFC`	`#F1F4F8`	`#E5EAF0`	`#C7D0DA`	`#8F9BAA`	`#667383`	`#4B5663`	`#34404C`	`#28323D`	`#1F2933`
Info	`#F0FAFC`	`#DDF3F7`	`#BCE7EF`	`#8AD4E1`	`#4FB5C8`	`#167D9A`	`#126B84`	`#11586D`	`#124957`	`#123D49`
Success	`#F1FAF6`	`#DDF4E8`	`#BDE7D2`	`#8CD4B3`	`#52B88D`	`#23845D`	`#1D704F`	`#195C43`	`#174B38`	`#143E30`
Warning	`#FFF9EB`	`#FEF0C7`	`#FDE19A`	`#F8CB60`	`#EAA934`	`#C98518`	`#AA6C12`	`#8A560F`	`#714611`	`#5E3B12`
Danger	`#FFF4F3`	`#FFE5E2`	`#FDCBC6`	`#F5A69F`	`#E8756C`	`#C44A42`	`#A93D37`	`#8C332F`	`#742D2B`	`#612927`
Black	`#F5F5F5`	`#E0E0E0`	`#C2C2C2`	`#A3A3A3`	`#525252`	`#333333`	`#1F1F1F`	`#141414`	`#0A0A0A`	`#000000`

Every palette is available through generated variables such as --lesli-color-success-500 and through the corresponding LesliAssets color utilities.

<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 a dark foreground on Warning 50–600; white is appropriate at Warning 700 and darker.
Use a dark foreground on Danger 50–400 and white at Danger 500 and darker.
Do not communicate status with color alone. Pair it with text, an icon, or both.

Semantic and categorical palettes are independent. Do not substitute Cyan for Info, Teal for Success, Gold for Warning, or Rose for Danger.

Edit this page

Last Update: 2026/09/27