Colors
Official color palette synced from Figma Design System. Use CSS variables for consistency.
Figma source: VHojBlhdQnI1WdhzDHxwAE (Multiple-returns) | View Sync Status
Primary Colors Figma Synced
Main brand colors used throughout the admin interface.
var(--xcart-text-primary)
Black
--xcart-text-primary
var(--xcart-primary)
Blue
--xcart-primary
Neutral Colors (Greys) Figma Synced
Used for backgrounds, borders, and secondary text.
var(--xcart-text-secondary)
Dark Grey
--xcart-text-secondary
var(--xcart-text-muted)
Grey
--xcart-text-muted
var(--xcart-border-light)
Mid-Grey
--xcart-border-light
var(--xcart-bg-main)
Light Grey
--xcart-bg-main
var(--xcart-bg-white)
White
--xcart-bg-white
Status Colors Figma Synced
Semantic colors for statuses, alerts, and visual accents.
var(--xcart-success)
Dark Green (Success)
--xcart-success
var(--xcart-danger)
Red (Error)
--xcart-danger
var(--xcart-warning)
Yellow (Warning)
--xcart-warning
var(--xcart-purple)
Purple
--xcart-purple
Light Colors (Backgrounds) Figma Synced
Light tints for alert backgrounds, highlights, and subtle accents.
var(--xcart-info-bg)
Light Blue
--xcart-info-bg
var(--xcart-danger-bg)
Light Red
--xcart-danger-bg
var(--xcart-warning-bg)
Light Yellow
--xcart-warning-bg
var(--xcart-success-bg)
Light Green
--xcart-success-bg
Color Reference Table
| Color | Hex | CSS Variable | Figma Token | Usage |
|---|---|---|---|---|
| Black | #333333 |
--xcart-text-primary |
Black | Primary text, headings |
| Blue | #2274A6 |
--xcart-primary |
Blue | Links, buttons, icons |
| Dark Grey | #757575 |
--xcart-text-secondary |
Derived | Secondary text |
| Grey | #ABABAB |
--xcart-text-muted |
Greys/Grey | Muted text, placeholders |
| Mid-Grey | #E2E2E2 |
--xcart-border-light |
Greys/Mid Grey | Borders, dividers |
| Light Grey | #F5F5F5 |
--xcart-bg-main |
Greys/Light Grey | Page background |
| Red | #BB1F34 |
--xcart-danger |
Red | Errors, destructive actions |
| Yellow | #ECAF0F |
--xcart-warning |
Yellow | Warnings, caution |
| Dark Green | #2B7616 |
--xcart-success |
Dark Green | Success, completed |
| Purple | #AE71BF |
--xcart-purple |
Purple | Special accents |
| Alt Link | #386EAF |
--xcart-link-alt |
Crisp/link | Alternative link color |
| Light Yellow | #F7E9C6 |
--xcart-warning-bg |
Light Yellow | Warning backgrounds |
Usage Guidelines
/* ALWAYS use CSS variables - never hardcode colors! */
/* Good */
color: var(--xcart-text-primary);
background: var(--xcart-bg-main);
border-color: var(--xcart-border-light);
/* Bad - hardcoded values */
color: var(--xcart-text-primary);
background: var(--xcart-bg-main);
border-color: var(--xcart-border-light);