Colors

The FSAI color system provides raw color palettes and semantic tokens for consistent UI styling.

Overview

The color system is defined in packages/config-tailwind/theme.css and follows a two-layer approach:

Raw color palettes — Numbered scales for gray (16 steps) and five chromatic colors (12 steps each)
Semantic tokens — Purpose-driven aliases that reference the raw palette, used throughout application code

Always prefer semantic tokens over raw color values. For example, use text-strong instead of text-gray-16-light.

Raw Color Palettes

Gray (16 steps)

#FFFFFF

#F7F7F7

#F3F3F3

#E5E5E5

#D9D9D9

#CCCCCC

#BFBFBF

#A6A6A6

#959595

#828282

#6F6F6F

#5C5C5C

#4D4D4D

#363636

#262626

#191919

Blue (12 steps)

#FAFBFF

#E8EFFB

#D1E2FD

#A5C4FB

#76A0F5

#5381EB

#1F54DE

#1640BE

#0F2F9F

#092080

#05166A

#000E33

Green (12 steps)

#FAFFFA

#F1FCE7

#E6FBD3

#C8F8A9

#9EEC7B

#75D958

#3FC128

#27A51D

#148A14

#0C6F14

#075C15

#083300

Red (12 steps)

#FFFCFA

#FFF0E5

#FFE5D2

#FFC4A6

#FF9D7A

#FF7659

#FF3720

#B7101B

#A4131B

#930A1E

#7B0620

#330500

Orange (12 steps)

#FFFCFA

#FFF6E0

#FFF1CC

#FEE09A

#FECA67

#FDB443

#FC9105

#D87203

#B45801

#914001

#772F00

#331C00

Yellow (12 steps)

#FFFDF5

#FFF8E0

#FFF3CC

#FFE899

#FFD966

#FFCA33

#FFB800

#D69A00

#B37D00

#8F6300

#754F00

#332300

Semantic Tokens

Text Colors

Use these for all text content. The Tailwind class is what you use in your code.

Class	Purpose	Raw Token
`text-strong`	Headings, emphasized text (darkest)	gray-16 `#191919`
`text-regular`	Standard body text	gray-15 `#262626`
`text-subtle`	Secondary/supporting text	gray-13 `#4D4D4D`
`text-minimal`	Tertiary/helper text (lightest)	gray-12 `#5C5C5C`
`text-contrast`	Text on dark backgrounds	gray-01 `#FFFFFF`
`text-brand`	Links, brand-colored text	blue-07 `#1F54DE`
`text-warning`	Warning text	orange-08 `#D87203`
`text-positive`	Success text	green-08 `#27A51D`
`text-destructive`	Error/destructive text	red-08 `#B7101B`

Icon Colors

Class	Purpose	Raw Token
`text-icon-strong`	Emphasized icons	gray-16 `#191919`
`text-icon-default`	Standard icons	gray-14 `#363636`
`text-icon-subtle`	De-emphasized icons	gray-12 `#5C5C5C`
`text-icon-muted`	Least prominent icons	gray-10 `#828282`
`text-icon-disabled`	Disabled state icons	gray-14 @ 50% opacity
`text-icon-contrast`	Icons on dark backgrounds	gray-01 `#FFFFFF`

Background Colors

Class	Purpose	Raw Token
`bg-surface`	Main content surface	gray-01 `#FFFFFF`
`bg-subtle`	Slightly tinted surface	gray-02 `#F7F7F7`
`bg-accent`	Hover states, lightly emphasized areas	gray-03 `#F3F3F3`
`bg-strong`	More prominent backgrounds	gray-04 `#E5E5E5`
`bg-base`	Base page background	gray-01 `#FFFFFF`
`bg-elevated`	Elevated cards/panels	gray-03 `#F3F3F3`
`bg-emphasis`	Strongly emphasized areas	gray-04 `#E5E5E5`
`bg-disabled`	Disabled state backgrounds	gray-14 @ 5% opacity
`bg-contrast`	High contrast (dark) backgrounds	gray-15 `#262626`
`bg-sidebar`	Sidebar background	gray-03 `#F3F3F3`
`bg-navbar`	Navbar background	gray-16 `#191919`

Border Colors

Class	Purpose	Raw Token
`border-strong`	Prominent borders	gray-04 `#E5E5E5`
`border-default`	Standard borders	gray-03 `#F3F3F3`
`border-alpha-strong`	Semi-transparent prominent borders	gray-14 @ 20%
`border-alpha-default`	Semi-transparent standard borders	gray-14 @ 15%
`border-disabled`	Disabled state borders	gray-14 @ 5%
`border-contrast`	High contrast (dark) borders	gray-16 `#191919`

Status / Accent Colors

Used for focus rings, success/warning/error borders and backgrounds.

Class	Purpose	Raw Token
`border-focus` / `ring-focus`	Focus ring styling	blue-06 `#5381EB`
`border-warning`	Warning border	orange-06 `#FDB443`
`border-positive`	Success border	green-06 `#75D958`
`border-destructive`	Error/destructive border	red-06 `#FF7659`

Per-Color Semantic Tokens

Each chromatic color has a set of semantic tokens for backgrounds, text, and icons:

Pattern	Example Classes	Purpose
`bg-{color}-bg-surface`	`bg-blue-bg-surface`, `bg-red-bg-surface`	Light tinted surface
`bg-{color}-bg-subtle`	`bg-green-bg-subtle`	Very light tinted surface
`bg-{color}-bg-accent`	`bg-orange-bg-accent`	Medium emphasis background
`bg-{color}-bg-strong`	`bg-blue-bg-strong`	Strong emphasis background
`text-{color}-text`	`text-green-text`, `text-red-text`	Colored text
`text-{color}-icon`	`text-blue-icon`	Colored icons

Usage Guidelines

Do use semantic tokens (text-strong, bg-surface) in application code
Do reference raw palette steps only in the theme configuration itself
Don't hardcode hex values in component styles
Don't use raw palette tokens like text-gray-16-light directly — use the semantic alias text-strong instead

Colors

On this page