Colors
Primary Palette
The primary palette anchors the brand identity. Use the accent color for interactive elements and key actions.
Accent
#364FC7 / rgb(54, 79, 199)
Accent Light
#EDF2FF / rgb(237, 242, 255)
Info
#1C7ED6 / rgb(28, 126, 214)
Success
#2B8A3E / rgb(43, 138, 62)
Warning
#E67700 / rgb(230, 119, 0)
Danger
#C92A2A / rgb(201, 42, 42)
Neutral Palette
Neutrals form the foundation of the interface -- surfaces, text, borders. The scale runs from pure white to near-black.
White
#FFFFFF / rgb(255, 255, 255)
Gray 50
#F8F9FA / rgb(248, 249, 250)
Gray 100
#F1F3F5 / rgb(241, 243, 245)
Gray 200
#E9ECEF / rgb(233, 236, 239)
Gray 300
#DEE2E6 / rgb(222, 226, 230)
Gray 400
#CED4DA / rgb(206, 212, 218)
Gray 500
#ADB5BD / rgb(173, 181, 189)
Gray 600
#868E96 / rgb(134, 142, 150)
Gray 700
#495057 / rgb(73, 80, 87)
Gray 800
#343A40 / rgb(52, 58, 64)
Gray 900
#212529 / rgb(33, 37, 41)
Token Reference
| Token | Value | Usage |
|---|---|---|
--surface-0 |
#FFFFFF |
Card backgrounds, modals |
--surface-1 |
#F8F9FA |
Page background |
--surface-2 |
#F1F3F5 |
Hover states, subtle fills |
--surface-3 |
#E9ECEF |
Dividers, disabled backgrounds |
--text-primary |
#212529 |
Headings, body text |
--text-secondary |
#495057 |
Descriptions, secondary labels |
--text-tertiary |
#868E96 |
Placeholders, captions |
--text-muted |
#ADB5BD |
Disabled text |
--accent |
#364FC7 |
Primary actions, links |
--border-light |
#E9ECEF |
Subtle separators |
--border-default |
#DEE2E6 |
Input borders |
--border-strong |
#CED4DA |
Emphasized borders |