Colors
The FSAI color system is semantic-first. Use these tokens and utilities instead of raw palette steps in product UI.
Overview
The color system lives in fsai/packages/config-tailwind/theme.css, but most engineers should never need to think in raw palette steps.
Use this page as the source of truth for the public semantic API:
- Start with semantic utilities such as
text-strong,bg-gray-bg-surface, andborder-default. - When color meaning matters, prefer the hue-family tokens such as
text-blue-strong,bg-green-bg-subtle, orborder-red-accent. - Reach for raw palette steps only when there is no semantic token for the job.
The visuals below show the semantic tokens themselves, with light mode on top and dark mode on bottom.
Neutral Tokens
Text Hierarchy
text-strong
--text-color-strong
Light
#191919
Dark
#EFEFEF
text-regular
--text-color-regular
Light
#262626
Dark
#E3E3E3
text-subtle
--text-color-subtle
Light
#4D4D4D
Dark
#C1C1C1
text-minimal
--text-color-minimal
Light
#5C5C5C
Dark
#ADADAD
text-muted
--text-color-muted
Light
#6F6F6F
Dark
#808080
text-faint
--text-color-faint
Light
#828282
Dark
#6B6B6B
text-dim
--text-color-dim
Light
#959595
Dark
#5C5C5C
text-contrast
--text-color-contrast
Light
#FFFFFF
Dark
#1B1B1B
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-strong | --text-color-strong | #191919 | #EFEFEF | Primary headings, titles, and high-emphasis copy. |
text-regular | --text-color-regular | #262626 | #E3E3E3 | Default body text. |
text-subtle | --text-color-subtle | #4D4D4D | #C1C1C1 | Secondary and supporting text. |
text-minimal | --text-color-minimal | #5C5C5C | #ADADAD | Tertiary labels and lower-emphasis copy. |
text-muted | --text-color-muted | #6F6F6F | #808080 | Muted metadata and helper text. |
text-faint | --text-color-faint | #828282 | #6B6B6B | Placeholders and low-emphasis text. |
text-dim | --text-color-dim | #959595 | #5C5C5C | Disabled or strongly de-emphasized text. |
text-contrast | --text-color-contrast | #FFFFFF | #1B1B1B | Text on high-contrast fills. |
Icon Hierarchy
Use icon tokens for glyphs, adornments, and controls. Do not assume icon hierarchy should mirror text hierarchy one-to-one.
text-icon-strong
--text-color-icon-strong
Light
#191919
Dark
#EFEFEF
text-icon-default
--text-color-icon-default
Light
#363636
Dark
#D4D4D4
text-icon-subtle
--text-color-icon-subtle
Light
#5C5C5C
Dark
#ADADAD
text-icon-muted
--text-color-icon-muted
Light
#828282
Dark
#808080
text-icon-disabled
--text-color-icon-disabled
Light
color-mix(in srgb, #363636 50%, transparent)
Dark
color-mix(in srgb, #EFEFEF 35%, transparent)
text-icon-contrast
--text-color-icon-contrast
Light
#FFFFFF
Dark
#1B1B1B
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-icon-strong | --text-color-icon-strong | #191919 | #EFEFEF | Primary icons. |
text-icon-default | --text-color-icon-default | #363636 | #D4D4D4 | Default icon color. |
text-icon-subtle | --text-color-icon-subtle | #5C5C5C | #ADADAD | Secondary icon color. |
text-icon-muted | --text-color-icon-muted | #828282 | #808080 | Muted icon color. |
text-icon-disabled | --text-color-icon-disabled | color-mix(in srgb, #363636 50%, transparent) | color-mix(in srgb, #EFEFEF 35%, transparent) | Disabled icons. |
text-icon-contrast | --text-color-icon-contrast | #FFFFFF | #1B1B1B | Icons on high-contrast fills. |
Gray Component Surfaces
These are the default surface tokens for cards, popovers, menus, tables, inputs, and most component chrome.
bg-gray-bg-surface
--color-gray-bg-surface
Light
#FFFFFF
Dark
#1B1B1B
bg-gray-bg-subtle
--color-gray-bg-subtle
Light
#F7F7F7
Dark
#212121
bg-gray-bg-accent
--color-gray-bg-accent
Light
#F3F3F3
Dark
#272727
bg-gray-bg-strong
--color-gray-bg-strong
Light
#E5E5E5
Dark
#323232
bg-gray-bg-stronger
--color-gray-bg-stronger
Light
#D9D9D9
Dark
#393939
bg-gray-bg-strongest
--color-gray-bg-strongest
Light
#CCCCCC
Dark
#434343
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-gray-bg-surface | --color-gray-bg-surface | #FFFFFF | #1B1B1B | Default component surface. |
bg-gray-bg-subtle | --color-gray-bg-subtle | #F7F7F7 | #212121 | Subtle neutral surface. |
bg-gray-bg-accent | --color-gray-bg-accent | #F3F3F3 | #272727 | Hover, active, and accented neutral surface. |
bg-gray-bg-strong | --color-gray-bg-strong | #E5E5E5 | #323232 | Strong neutral emphasis. |
bg-gray-bg-stronger | --color-gray-bg-stronger | #D9D9D9 | #393939 | Heavier neutral emphasis. |
bg-gray-bg-strongest | --color-gray-bg-strongest | #CCCCCC | #434343 | Highest neutral emphasis before contrast colors. |
text-gray-text | --color-gray-text | #262626 | #EFEFEF | Gray family readable text color. Rarely needed; prefer text-* hierarchy first. |
text-gray-icon | --color-gray-icon | #5C5C5C | #D4D4D4 | Gray family icon color. Rarely needed; prefer text-icon-* first. |
Layout Backgrounds
Use bg-background-color-* utilities for app shells, split views, sidebars, and page structure.
bg-background-color-surface
--background-color-surface
Light
#FFFFFF
Dark
#1B1B1B
bg-background-color-subtle
--background-color-subtle
Light
#F7F7F7
Dark
#212121
bg-background-color-accent
--background-color-accent
Light
#F3F3F3
Dark
#272727
bg-background-color-strong
--background-color-strong
Light
#E5E5E5
Dark
#323232
bg-background-color-base
--background-color-base
Light
#FFFFFF
Dark
#1B1B1B
bg-background-color-page
--background-color-page
Light
#FFFFFF
Dark
#1B1B1B
bg-background-color-elevated
--background-color-elevated
Light
#F3F3F3
Dark
#212121
bg-background-color-emphasis
--background-color-emphasis
Light
#E5E5E5
Dark
#272727
bg-background-color-disabled
--background-color-disabled
Light
color-mix(in srgb, #363636 5%, transparent)
Dark
color-mix(in srgb, #EFEFEF 8%, transparent)
bg-background-color-contrast
--background-color-contrast
Light
#262626
Dark
#EFEFEF
bg-background-color-sidebar
--background-color-sidebar
Light
#F3F3F3
Dark
#212121
bg-background-color-navbar
--background-color-navbar
Light
#191919
Dark
#1B1B1B
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-background-color-surface | --background-color-surface | #FFFFFF | #1B1B1B | Inset structural surface. |
bg-background-color-subtle | --background-color-subtle | #F7F7F7 | #212121 | Default app shell background. |
bg-background-color-accent | --background-color-accent | #F3F3F3 | #272727 | Raised layout section. |
bg-background-color-strong | --background-color-strong | #E5E5E5 | #323232 | Strong structural separation. |
bg-background-color-base | --background-color-base | #FFFFFF | #1B1B1B | Base container background. |
bg-background-color-page | --background-color-page | #FFFFFF | #1B1B1B | Page background. |
bg-background-color-elevated | --background-color-elevated | #F3F3F3 | #212121 | Elevated shells and floating regions. |
bg-background-color-emphasis | --background-color-emphasis | #E5E5E5 | #272727 | High-emphasis layout fill. |
bg-background-color-disabled | --background-color-disabled | color-mix(in srgb, #363636 5%, transparent) | color-mix(in srgb, #EFEFEF 8%, transparent) | Disabled layout or control backgrounds. |
bg-background-color-contrast | --background-color-contrast | #262626 | #EFEFEF | High-contrast background. |
bg-background-color-sidebar | --background-color-sidebar | #F3F3F3 | #212121 | Sidebar and adjacent panel backgrounds. |
bg-background-color-navbar | --background-color-navbar | #191919 | #1B1B1B | Navbar and dark shell treatment. |
Borders
These are the neutral border tokens. Use them before reaching for hue-specific borders.
border-strong
--border-color-strong
Light
#D9D9D9
Dark
#323232
border-default
--border-color-default
Light
#E5E5E5
Dark
#272727
border-subtle
--border-color-subtle
Light
#F3F3F3
Dark
#272727
border-faint
--border-color-faint
Light
#F7F7F7
Dark
#212121
border-alpha-strong
--border-color-alpha-strong
Light
color-mix(in srgb, #363636 20%, transparent)
Dark
color-mix(in srgb, #EFEFEF 15%, transparent)
border-alpha-default
--border-color-alpha-default
Light
color-mix(in srgb, #363636 15%, transparent)
Dark
color-mix(in srgb, #EFEFEF 10%, transparent)
border-disabled
--border-color-disabled
Light
color-mix(in srgb, #363636 5%, transparent)
Dark
color-mix(in srgb, #EFEFEF 6%, transparent)
border-contrast
--border-color-contrast
Light
#191919
Dark
#EFEFEF
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
border-strong | --border-color-strong | #D9D9D9 | #323232 | Strong border and edge separation. |
border-default | --border-color-default | #E5E5E5 | #272727 | Default border color. |
border-subtle | --border-color-subtle | #F3F3F3 | #272727 | Soft separators. |
border-faint | --border-color-faint | #F7F7F7 | #212121 | Very light separation. |
border-alpha-strong | --border-color-alpha-strong | color-mix(in srgb, #363636 20%, transparent) | color-mix(in srgb, #EFEFEF 15%, transparent) | Transparent border with stronger presence. |
border-alpha-default | --border-color-alpha-default | color-mix(in srgb, #363636 15%, transparent) | color-mix(in srgb, #EFEFEF 10%, transparent) | Transparent default border. |
border-disabled | --border-color-disabled | color-mix(in srgb, #363636 5%, transparent) | color-mix(in srgb, #EFEFEF 6%, transparent) | Disabled border. |
border-contrast | --border-color-contrast | #191919 | #EFEFEF | High-contrast border. |
Focus And State
These are single-purpose semantic state colors exposed as reusable utilities.
border-focus / ring-focus
--color-focus
Light
#5381EB
Dark
#5D95E6
border-warning / bg-warning
--color-warning
Light
#FDB443
Dark
#EFAA50
border-positive / bg-positive
--color-positive
Light
#3FC128
Dark
#60C77B
border-destructive / bg-destructive
--color-destructive
Light
#FF3720
Dark
#F69AB0
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
border-focus / ring-focus | --color-focus | #5381EB | #5D95E6 | Focus treatment and accessibility affordance. |
border-warning / bg-warning | --color-warning | #FDB443 | #EFAA50 | Warning state color. |
border-positive / bg-positive | --color-positive | #3FC128 | #60C77B | Positive state color. |
border-destructive / bg-destructive | --color-destructive | #FF3720 | #F69AB0 | Destructive state color. |
Primary Actions
Primary CTA styling is intentionally abstracted behind dedicated button tokens so the system can evolve without changing component code.
bg-button-primary-bg
--color-button-primary-bg
Light
#262626
Dark
#245FB0
bg-button-primary-bg-hover
--color-button-primary-bg-hover
Light
#4D4D4D
Dark
#1C4680
text-button-primary-text
--color-button-primary-text
Light
#FFFFFF
Dark
#EFEFEF
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-button-primary-bg | --color-button-primary-bg | #262626 | #245FB0 | Primary button fill. |
bg-button-primary-bg-hover | --color-button-primary-bg-hover | #4D4D4D | #1C4680 | Primary button hover and active fill. |
text-button-primary-text | --color-button-primary-text | #FFFFFF | #EFEFEF | Primary button text color. |
Intent Text Shortcuts
These tokens exist and are part of the public API, but they are not the main path for most colorized text in product UI. In practice, teams more often use hue-family text tokens such as text-blue-strong, text-green-stronger, or text-red-accent because those expose a fuller emphasis range.
Use the intent shortcuts when the abstraction is helpful. Otherwise, prefer the hue-family text scale directly.
text-brand
--text-color-brand
Light
#1F54DE
Dark
#86B0F0
text-warning
--text-color-warning
Light
#D87203
Dark
#F7C379
text-positive
--text-color-positive
Light
#27A51D
Dark
#87DDA0
text-destructive
--text-color-destructive
Light
#B7101B
Dark
#F69AB0
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-brand | --text-color-brand | #1F54DE | #86B0F0 | Shortcut token for brand-linked text. Often replaced by a blue hue token such as text-blue-accent or text-blue-strong. |
text-warning | --text-color-warning | #D87203 | #F7C379 | Shortcut token for warning copy. Often replaced by orange hue text tokens. |
text-positive | --text-color-positive | #27A51D | #87DDA0 | Shortcut token for positive copy. Often replaced by green hue text tokens. |
text-destructive | --text-color-destructive | #B7101B | #F69AB0 | Shortcut token for destructive copy. Often replaced by red hue text tokens. |
Hue Families
Every chromatic family follows the same structure:
- Backgrounds:
bg-{hue}-bg-surfacethroughbg-{hue}-bg-strongest - Text:
text-{hue}-subtlethroughtext-{hue}-strongest - Borders:
border-{hue}-subtle,border-{hue}-accent,border-{hue}-strong
Choose the family by meaning, then choose the step by emphasis.
Blue
Use blue for informational, brand, selection, and focus-adjacent UI.
Backgrounds
bg-blue-bg-surface
--color-blue-bg-surface
Light
#FAFBFF
Dark
#0B1220
bg-blue-bg-subtle
--color-blue-bg-subtle
Light
#E8EFFB
Dark
#0F1B2E
bg-blue-bg-accent
--color-blue-bg-accent
Light
#D1E2FD
Dark
#132746
bg-blue-bg-emphasis
--color-blue-bg-emphasis
Light
#A5C4FB
Dark
#173560
bg-blue-bg-strong
--color-blue-bg-strong
Light
#5381EB
Dark
#245FB0
bg-blue-bg-stronger
--color-blue-bg-stronger
Light
#1F54DE
Dark
#3B79D6
bg-blue-bg-strongest
--color-blue-bg-strongest
Light
#1640BE
Dark
#5D95E6
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-blue-bg-surface | --color-blue-bg-surface | #FAFBFF | #0B1220 | Softest informational or brand-tinted surface. |
bg-blue-bg-subtle | --color-blue-bg-subtle | #E8EFFB | #0F1B2E | Subtle informational surface. |
bg-blue-bg-accent | --color-blue-bg-accent | #D1E2FD | #132746 | Accented informational surface. |
bg-blue-bg-emphasis | --color-blue-bg-emphasis | #A5C4FB | #173560 | Emphasized blue background. |
bg-blue-bg-strong | --color-blue-bg-strong | #5381EB | #245FB0 | Strong blue fill. |
bg-blue-bg-stronger | --color-blue-bg-stronger | #1F54DE | #3B79D6 | Stronger blue fill for active moments. |
bg-blue-bg-strongest | --color-blue-bg-strongest | #1640BE | #5D95E6 | Strongest blue family fill. |
Text
text-blue-subtle
--text-color-blue-subtle
Light
#5381EB
Dark
#5D95E6
text-blue-accent
--text-color-blue-accent
Light
#1F54DE
Dark
#86B0F0
text-blue-strong
--text-color-blue-strong
Light
#1640BE
Dark
#AED0F7
text-blue-stronger
--text-color-blue-stronger
Light
#0F2F9F
Dark
#D3E6FB
text-blue-strongest
--text-color-blue-strongest
Light
#05166A
Dark
#EDF4FF
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-blue-subtle | --text-color-blue-subtle | #5381EB | #5D95E6 | Subtle blue text. |
text-blue-accent | --text-color-blue-accent | #1F54DE | #86B0F0 | Default accent blue text. |
text-blue-strong | --text-color-blue-strong | #1640BE | #AED0F7 | Strong blue text. |
text-blue-stronger | --text-color-blue-stronger | #0F2F9F | #D3E6FB | Stronger blue text for emphasis. |
text-blue-strongest | --text-color-blue-strongest | #05166A | #EDF4FF | Highest-contrast blue text. |
Borders
border-blue-subtle
--border-color-blue-subtle
Light
#A5C4FB
Dark
#1C4680
border-blue-accent
--border-color-blue-accent
Light
#5381EB
Dark
#245FB0
border-blue-strong
--border-color-blue-strong
Light
#1F54DE
Dark
#3B79D6
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
border-blue-subtle | --border-color-blue-subtle | #A5C4FB | #1C4680 | Subtle blue border. |
border-blue-accent | --border-color-blue-accent | #5381EB | #245FB0 | Accent blue border. |
border-blue-strong | --border-color-blue-strong | #1F54DE | #3B79D6 | Strong blue border. |
Green
Use green for positive, confirmed, completed, and success states.
Backgrounds
bg-green-bg-surface
--color-green-bg-surface
Light
#FAFFFA
Dark
#0B1710
bg-green-bg-subtle
--color-green-bg-subtle
Light
#F1FCE7
Dark
#112317
bg-green-bg-accent
--color-green-bg-accent
Light
#E6FBD3
Dark
#163120
bg-green-bg-emphasis
--color-green-bg-emphasis
Light
#C8F8A9
Dark
#1C432A
bg-green-bg-strong
--color-green-bg-strong
Light
#75D958
Dark
#2F7A47
bg-green-bg-stronger
--color-green-bg-stronger
Light
#3FC128
Dark
#43A35F
bg-green-bg-strongest
--color-green-bg-strongest
Light
#27A51D
Dark
#60C77B
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-green-bg-surface | --color-green-bg-surface | #FAFFFA | #0B1710 | Softest positive-tinted surface. |
bg-green-bg-subtle | --color-green-bg-subtle | #F1FCE7 | #112317 | Subtle positive surface. |
bg-green-bg-accent | --color-green-bg-accent | #E6FBD3 | #163120 | Accented positive surface. |
bg-green-bg-emphasis | --color-green-bg-emphasis | #C8F8A9 | #1C432A | Emphasized green background. |
bg-green-bg-strong | --color-green-bg-strong | #75D958 | #2F7A47 | Strong green fill. |
bg-green-bg-stronger | --color-green-bg-stronger | #3FC128 | #43A35F | Stronger green fill. |
bg-green-bg-strongest | --color-green-bg-strongest | #27A51D | #60C77B | Strongest green family fill. |
Text
text-green-subtle
--text-color-green-subtle
Light
#3FC128
Dark
#60C77B
text-green-accent
--text-color-green-accent
Light
#27A51D
Dark
#87DDA0
text-green-strong
--text-color-green-strong
Light
#148A14
Dark
#AFEEC1
text-green-stronger
--text-color-green-stronger
Light
#0C6F14
Dark
#D2F7DE
text-green-strongest
--text-color-green-strongest
Light
#075C15
Dark
#ECFDF1
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-green-subtle | --text-color-green-subtle | #3FC128 | #60C77B | Subtle positive text. |
text-green-accent | --text-color-green-accent | #27A51D | #87DDA0 | Default positive accent text. |
text-green-strong | --text-color-green-strong | #148A14 | #AFEEC1 | Strong positive text. |
text-green-stronger | --text-color-green-stronger | #0C6F14 | #D2F7DE | Stronger positive text. |
text-green-strongest | --text-color-green-strongest | #075C15 | #ECFDF1 | Highest-contrast positive text. |
Borders
border-green-subtle
--border-color-green-subtle
Light
#C8F8A9
Dark
#245C37
border-green-accent
--border-color-green-accent
Light
#9EEC7B
Dark
#2F7A47
border-green-strong
--border-color-green-strong
Light
#75D958
Dark
#43A35F
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
border-green-subtle | --border-color-green-subtle | #C8F8A9 | #245C37 | Subtle green border. |
border-green-accent | --border-color-green-accent | #9EEC7B | #2F7A47 | Accent green border. |
border-green-strong | --border-color-green-strong | #75D958 | #43A35F | Strong green border. |
Red
Use red for destructive actions, errors, and negative outcomes.
Backgrounds
bg-red-bg-surface
--color-red-bg-surface
Light
#FFFCFA
Dark
#1C1013
bg-red-bg-subtle
--color-red-bg-subtle
Light
#FFF0E5
Dark
#2A1519
bg-red-bg-accent
--color-red-bg-accent
Light
#FFE5D2
Dark
#3C1B20
bg-red-bg-emphasis
--color-red-bg-emphasis
Light
#FFC4A6
Dark
#532128
bg-red-bg-strong
--color-red-bg-strong
Light
#FF7659
Dark
#A63545
bg-red-bg-stronger
--color-red-bg-stronger
Light
#FF3720
Dark
#D84B62
bg-red-bg-strongest
--color-red-bg-strongest
Light
#B7101B
Dark
#EE6D84
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-red-bg-surface | --color-red-bg-surface | #FFFCFA | #1C1013 | Softest destructive-tinted surface. |
bg-red-bg-subtle | --color-red-bg-subtle | #FFF0E5 | #2A1519 | Subtle destructive surface. |
bg-red-bg-accent | --color-red-bg-accent | #FFE5D2 | #3C1B20 | Accented destructive surface. |
bg-red-bg-emphasis | --color-red-bg-emphasis | #FFC4A6 | #532128 | Emphasized red background. |
bg-red-bg-strong | --color-red-bg-strong | #FF7659 | #A63545 | Strong destructive fill. |
bg-red-bg-stronger | --color-red-bg-stronger | #FF3720 | #D84B62 | Stronger destructive fill. |
bg-red-bg-strongest | --color-red-bg-strongest | #B7101B | #EE6D84 | Strongest red family fill. |
Text
text-red-subtle
--text-color-red-subtle
Light
#FF7659
Dark
#EE6D84
text-red-accent
--text-color-red-accent
Light
#FF3720
Dark
#F69AB0
text-red-strong
--text-color-red-strong
Light
#B7101B
Dark
#FBC4D1
text-red-stronger
--text-color-red-stronger
Light
#A4131B
Dark
#FDE2E8
text-red-strongest
--text-color-red-strongest
Light
#930A1E
Dark
#FFF1F4
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-red-subtle | --text-color-red-subtle | #FF7659 | #EE6D84 | Subtle destructive text. |
text-red-accent | --text-color-red-accent | #FF3720 | #F69AB0 | Default destructive accent text. |
text-red-strong | --text-color-red-strong | #B7101B | #FBC4D1 | Strong destructive text. |
text-red-stronger | --text-color-red-stronger | #A4131B | #FDE2E8 | Stronger destructive text. |
text-red-strongest | --text-color-red-strongest | #930A1E | #FFF1F4 | Highest-contrast destructive text. |
Borders
border-red-subtle
--border-color-red-subtle
Light
#FFC4A6
Dark
#742832
border-red-accent
--border-color-red-accent
Light
#FF9D7A
Dark
#A63545
border-red-strong
--border-color-red-strong
Light
#FF7659
Dark
#D84B62
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
border-red-subtle | --border-color-red-subtle | #FFC4A6 | #742832 | Subtle red border. |
border-red-accent | --border-color-red-accent | #FF9D7A | #A63545 | Accent red border. |
border-red-strong | --border-color-red-strong | #FF7659 | #D84B62 | Strong red border. |
Orange
Use orange for warnings, caution, and elevated attention without implying failure.
Backgrounds
bg-orange-bg-surface
--color-orange-bg-surface
Light
#FFFCFA
Dark
#1D1409
bg-orange-bg-subtle
--color-orange-bg-subtle
Light
#FFF6E0
Dark
#2C1F0D
bg-orange-bg-accent
--color-orange-bg-accent
Light
#FFF1CC
Dark
#402C11
bg-orange-bg-emphasis
--color-orange-bg-emphasis
Light
#FEE09A
Dark
#5B3C14
bg-orange-bg-strong
--color-orange-bg-strong
Light
#FC9105
Dark
#AB6D1E
bg-orange-bg-stronger
--color-orange-bg-stronger
Light
#D87203
Dark
#D98D2D
bg-orange-bg-strongest
--color-orange-bg-strongest
Light
#B45801
Dark
#EFAA50
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-orange-bg-surface | --color-orange-bg-surface | #FFFCFA | #1D1409 | Softest warning-tinted surface. |
bg-orange-bg-subtle | --color-orange-bg-subtle | #FFF6E0 | #2C1F0D | Subtle warning surface. |
bg-orange-bg-accent | --color-orange-bg-accent | #FFF1CC | #402C11 | Accented warning surface. |
bg-orange-bg-emphasis | --color-orange-bg-emphasis | #FEE09A | #5B3C14 | Emphasized orange background. |
bg-orange-bg-strong | --color-orange-bg-strong | #FC9105 | #AB6D1E | Strong warning fill. |
bg-orange-bg-stronger | --color-orange-bg-stronger | #D87203 | #D98D2D | Stronger warning fill. |
bg-orange-bg-strongest | --color-orange-bg-strongest | #B45801 | #EFAA50 | Strongest orange family fill. |
Text
text-orange-subtle
--text-color-orange-subtle
Light
#FC9105
Dark
#EFAA50
text-orange-accent
--text-color-orange-accent
Light
#D87203
Dark
#F7C379
text-orange-strong
--text-color-orange-strong
Light
#B45801
Dark
#FBD9A2
text-orange-stronger
--text-color-orange-stronger
Light
#914001
Dark
#FDEACA
text-orange-strongest
--text-color-orange-strongest
Light
#772F00
Dark
#FFF5E8
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-orange-subtle | --text-color-orange-subtle | #FC9105 | #EFAA50 | Subtle warning text. |
text-orange-accent | --text-color-orange-accent | #D87203 | #F7C379 | Default warning accent text. |
text-orange-strong | --text-color-orange-strong | #B45801 | #FBD9A2 | Strong warning text. |
text-orange-stronger | --text-color-orange-stronger | #914001 | #FDEACA | Stronger warning text. |
text-orange-strongest | --text-color-orange-strongest | #772F00 | #FFF5E8 | Highest-contrast warning text. |
Borders
border-orange-subtle
--border-color-orange-subtle
Light
#FEE09A
Dark
#7E5118
border-orange-accent
--border-color-orange-accent
Light
#FECA67
Dark
#AB6D1E
border-orange-strong
--border-color-orange-strong
Light
#FDB443
Dark
#D98D2D
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
border-orange-subtle | --border-color-orange-subtle | #FEE09A | #7E5118 | Subtle orange border. |
border-orange-accent | --border-color-orange-accent | #FECA67 | #AB6D1E | Accent orange border. |
border-orange-strong | --border-color-orange-strong | #FDB443 | #D98D2D | Strong orange border. |
Yellow
Use yellow for attention, highlight, and informational emphasis where orange would feel too severe.
Backgrounds
bg-yellow-bg-surface
--color-yellow-bg-surface
Light
#FFFDF5
Dark
#1D1707
bg-yellow-bg-subtle
--color-yellow-bg-subtle
Light
#FFF8E0
Dark
#2B230B
bg-yellow-bg-accent
--color-yellow-bg-accent
Light
#FFF3CC
Dark
#3F330F
bg-yellow-bg-emphasis
--color-yellow-bg-emphasis
Light
#FFE899
Dark
#594715
bg-yellow-bg-strong
--color-yellow-bg-strong
Light
#FFB800
Dark
#A28125
bg-yellow-bg-stronger
--color-yellow-bg-stronger
Light
#D69A00
Dark
#C8A430
bg-yellow-bg-strongest
--color-yellow-bg-strongest
Light
#B37D00
Dark
#DDBC54
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
bg-yellow-bg-surface | --color-yellow-bg-surface | #FFFDF5 | #1D1707 | Softest attention-tinted surface. |
bg-yellow-bg-subtle | --color-yellow-bg-subtle | #FFF8E0 | #2B230B | Subtle attention surface. |
bg-yellow-bg-accent | --color-yellow-bg-accent | #FFF3CC | #3F330F | Accented attention surface. |
bg-yellow-bg-emphasis | --color-yellow-bg-emphasis | #FFE899 | #594715 | Emphasized yellow background. |
bg-yellow-bg-strong | --color-yellow-bg-strong | #FFB800 | #A28125 | Strong yellow fill. |
bg-yellow-bg-stronger | --color-yellow-bg-stronger | #D69A00 | #C8A430 | Stronger yellow fill. |
bg-yellow-bg-strongest | --color-yellow-bg-strongest | #B37D00 | #DDBC54 | Strongest yellow family fill. |
Text
text-yellow-subtle
--text-color-yellow-subtle
Light
#FFB800
Dark
#DDBC54
text-yellow-accent
--text-color-yellow-accent
Light
#D69A00
Dark
#EBD17F
text-yellow-strong
--text-color-yellow-strong
Light
#B37D00
Dark
#F3E1A7
text-yellow-stronger
--text-color-yellow-stronger
Light
#8F6300
Dark
#F9EFCD
text-yellow-strongest
--text-color-yellow-strongest
Light
#754F00
Dark
#FDF8EA
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
text-yellow-subtle | --text-color-yellow-subtle | #FFB800 | #DDBC54 | Subtle attention text. |
text-yellow-accent | --text-color-yellow-accent | #D69A00 | #EBD17F | Default attention accent text. |
text-yellow-strong | --text-color-yellow-strong | #B37D00 | #F3E1A7 | Strong attention text. |
text-yellow-stronger | --text-color-yellow-stronger | #8F6300 | #F9EFCD | Stronger attention text. |
text-yellow-strongest | --text-color-yellow-strongest | #754F00 | #FDF8EA | Highest-contrast attention text. |
Borders
border-yellow-subtle
--border-color-yellow-subtle
Light
#FFE899
Dark
#7B611C
border-yellow-accent
--border-color-yellow-accent
Light
#FFD966
Dark
#A28125
border-yellow-strong
--border-color-yellow-strong
Light
#FFCA33
Dark
#C8A430
| Utility | Token | Light | Dark | Use |
|---|---|---|---|---|
border-yellow-subtle | --border-color-yellow-subtle | #FFE899 | #7B611C | Subtle yellow border. |
border-yellow-accent | --border-color-yellow-accent | #FFD966 | #A28125 | Accent yellow border. |
border-yellow-strong | --border-color-yellow-strong | #FFCA33 | #C8A430 | Strong yellow border. |
Usage Guidance
Default Component Recipe
Most product UI should start from this neutral recipe:
bg-gray-bg-surfaceorbg-gray-bg-subtleborder-defaultorborder-alpha-defaulttext-strongfor headings andtext-subtlefor supporting text
Choosing A Hue Family
blue: informational, selected, active, brand-adjacentgreen: positive, complete, successfulred: destructive, invalid, failedorange: warning, cautionyellow: attention, highlight
Hue Text Vs Intent Text
- Prefer hue-family text tokens when you need to control emphasis, for example
text-blue-subtlevstext-blue-strongest. - Use intent shortcuts like
text-brand,text-positive, andtext-destructivewhen the abstraction is clearer than choosing a hue step. - If both would work, prefer the token already established by the surrounding component pattern.
Forms And Inputs
Inputs and textareas should stay neutral, then add semantic state color only when needed.
- Use
bg-gray-bg-surfacefor the field background. - Use
border-defaultfor the resting border. - Use
focus:border-focusandring-focusfor focus. - Use
placeholder:text-faintfor placeholder text. - Use
border-destructive,text-destructive, or a red family token only for invalid and error states.
Layout Surfaces
Use layout background tokens for application shells and split views:
bg-background-color-subtlefor the main app framebg-background-color-surfacefor inset columns and side panelsbg-background-color-sidebarandbg-background-color-navbarfor dedicated navigation regions
When Raw Tokens Are Acceptable
Primitive utilities are still acceptable for a few cases:
- opacity overlays such as
bg-gray-16-light/60 - one-off visual effects and strokes
- raw SVG, chart, and slider colors driven by CSS variables
- explicit
dark:overrides where a component needs tighter control than the semantic utility provides
If a semantic token exists, prefer it.