Norbielink's color system is built on a purple gradient as the primary brand identity (#5C2ED4 → #A614C3) and Teal as the secondary accent. Both light and dark schemes are fully supported.
Primary Gradient
#5C2ED4 → #A614C3
Primary Deep
#5C2ED4
Primary Highlight
#A614C3
Primary Tint
#EDE7FF
Teal (Accent)
#4ECDC4
Teal Light
#74C3B7
Teal Tint
#E0F6F5
On Surface
#111827
Outline Variant
Outline
Surface Variant
Surface Container
Surface / Background
Success
Warning
Error
Color roles
Each color role has a specific purpose. Primary roles drive brand identity; secondary roles drive actions; error/semantic roles communicate state.
Primary Gradient
#5C2ED4 → #A614C3
Buttons, nav active state, focus rings, highlights
Primary Tint
#EDE7FF
Tonal button fill, icon backgrounds, active chip
Teal (Accent)
#4ECDC4
Secondary actions, accent badges, avatar fills
Teal Container
#E0F6F5
Teal badge backgrounds, tonal teal fills
Error
#EF4444
Declined status, destructive actions
Error Container
#FEE2E2
Error badge backgrounds
Surface
#FFFBFE
Main page background (light mode)
Surface Container
#F5F5F7
Component example areas, section backgrounds
Color scale
Full tone scales for both brand colors. Use named roles rather than raw scale values in product code.
Purple — Primary Deep
50
#EDE7FF
100
#D4C5FF
200
#B09AF7
300
#8A6EEB
400
#7050DC
500 ★
#5C2ED4
600
#4B25B0
700
#3C1C8C
800
#2D1468
900
#1E0D44
Purple — Primary Highlight
50
#FCE6FA
100
#F5BEF0
200
#EC8CE2
300
#E060D4
400
#CB33CB
500 ★
#A614C3
600
#8C10A6
700
#6F0C85
800
#520964
900
#360645
Teal — Accent
50
#E0F6F5
100
#B3ECEB
200
#80DFDB
300 ★
#4ECDC4
400
#38B8AE
500
#74C3B7
600
#2A9A92
700
#1F7A74
800
#155C58
900
#0C3D3A
Semantic colors
Status and state colors communicate meaning across the platform — used in badges, record statuses, and inline alerts.
Success
#10B981
Sold/Issued
Warning
#F97316
Upcoming Renewals, Pending
Error
#EF4444
Declined, destructive actions
Info
#3B82F6
Add'l Insured, informational
Dark scheme
Dark mode uses very deep navy surfaces with identical brand accents. All color roles maintain a consistent mapping.
Background
#0F1120
Surface / Sidebar
#191D35
Surface Raised
#27272a
Surface Overlay
rgba(#FFF, 6%)
Primary (same)
#5C2ED4 → #A614C3
Teal Accent (same)
#4ECDC4
On Surface
rgba(#FFF, 85%)
Outline
rgba(#FFF, 12%)
Color tokens
Reference these token names in all design and code decisions.
| Token | Light | Dark | Usage |
|---|---|---|---|
color.primary | #5C2ED4 → #A614C3 | #5C2ED4 → #A614C3 | Buttons, nav active, focus ring, highlights |
color.primary-tint | #EDE7FF | #2D1260 | Tonal btn fill, chip bg, icon bg |
color.teal-accent | #4ECDC4 | #4ECDC4 | Secondary actions, accent badges, avatars |
color.background | #FFFBFE | #0F1120 | Page background |
color.surface | #FFFFFF | #191D35 | Cards, sidebar |
color.on-surface | #111827 | rgba(FFF,85%) | Primary text |
color.outline | #E5E7EB | rgba(FFF,12%) | Borders, dividers |
color.error | #EF4444 | #EF4444 | Declined, errors |