Colors
The Syhrezz color system is built on semantic CSS custom properties. Never hardcode hex values in components — always reference the token. Every color has a defined purpose and must not be used outside that purpose.
Color discipline: Do NOT use full-saturation colors as backgrounds in the UI. Always use the soft
-bg tinted variants for backgrounds and the dark -text variants for text. The full color is only used for icons, borders, and accent bars.Brand Colors
Primary
#3B5BDB
--primary
Primary Light
#EEF2FF
--primary-light
Primary Dark
#2F4AC7
--primary-dark
Director Accent
#6366F1
--accent-director
Admin Accent
#0F172A
--accent-admin
Sales Accent
#2563EB
--accent-sales
Semantic Colors
Success
#0E9F6E
--success
Success BG
#DEF7EC
--success-bg
Success Text
#03543F
--success-text
Warning
#E3A008
--warning
Warning BG
#FEF3C7
--warning-bg
Warning Text
#92400E
--warning-text
Danger
#F05252
--danger
Danger BG
#FDE2E2
--danger-bg
Danger Text
#9B1C1C
--danger-text
Info
#3B5BDB
--info
Info BG
#E1EFFE
--info-bg
Info Text
#1E429F
--info-text
Surface & Text
Surface
#F8FAFC
--surface
Surface Director
#F0F4FF
--surface-dir
Card
#FFFFFF
--card
Border
#E2E8F0
--border
Text Primary
#0F172A
--text-primary
Text Secondary
#64748B
--text-secondary
Text Muted
#94A3B8
--text-muted
Lead Temperature (app)
Hot BG
#fef2f2
--hot-bg
Hot Text
#dc2626
--hot-text
Warm BG
#fff7ed
--warm-bg
Warm Text
#ea580c
--warm-text
Cold BG
#f0f9ff
--cold-bg
Cold Text
#0284c7
--cold-text
Deal BG
#f0fdf4
--deal-bg
Deal Text
#16a34a
--deal-text
Lost BG
#f9fafb
--lost-bg
Lost Text
#6b7280
--lost-text
Sidebar Backgrounds
Primary Role
#0F172A
--sidebar-bg
Director
#0C0F1A
--sidebar-bg-director
Sales / Manager
#1e3a8a
--sidebar-bg-sales
Sidebar Text
#94A3B8
--sidebar-text
Usage Rules
| Token | Use | Never Use For |
|---|---|---|
| --primary | Links, focus rings, active indicators | Backgrounds, large surfaces |
| --primary-light | Badge backgrounds, hover states, tinted surfaces | Text color |
| --accent-director | Accent role primary buttons, active nav, accent bars | Any non-director context |
| --success / --danger / --warning | Icons, left accent borders, SVG strokes | Text color or large background fills |
| --success-bg / --danger-bg / --warning-bg | Badge backgrounds, alert backgrounds, callout fills | Button backgrounds, hover states |
| --surface | Page background | Card backgrounds (use --card) |
| --text-muted | Placeholders, timestamps, secondary metadata | Primary content, headings |