Overview
Foundations
Brand
Colors
Typography
Spacing & Layout
Semantic Tokens
Icons
Shadows
Components
Patterns
Design System
Color Scales
Complete color palettes with accessibility ratings and usage guidance.
Primary / Brand
Brand communicates confident direction and action. Use it for primary buttons, key CTAs, links, focus rings, and high-priority interactive highlights where you want users to take action. Because it's vibrant, keep it consistent and restrained so important actions stay clear.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
16.15
Black text
#F9F2FF
50
14.56
Black text
#F2E4FD
100
11.67
Black text
#E4C7FB
200
8.88
Black text
#D4A5F9
300
6.73
Black text
#C484F7
400
4.61
Black text
#AE57F4
500
5.68
White text
#931FF0
600
7.26
White text
#7D1ACC
700
9.3
White text
#6716A8
800
11.91
White text
#511184
900
14.92
White text
#3B0C60
950
17.69
White text
#250840
Secondary / Accent
Secondary communicates emphasis and identity. Use it for navigation highlights, brand identity marks, avatars, selection states, and subtle UI accents that help users stay oriented. It carries the brand's personality while letting the action color drive interaction.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
14.31
Black text
#FAFAFC
50
13.67
Black text
#F6F4FA
100
12.48
Black text
#EDE9F4
200
10.03
Black text
#D8D0E9
300
7.99
Black text
#C4B8DD
400
6.18
Black text
#AF9FD1
500
4.74
Black text
#9B87C5
600
4.94
Black text
#866EB9
700
5.79
White text
#7255AE
800
7.91
White text
#5D3DA2
900
10.63
White text
#492496
950
14.92
White text
#2E1760
Tertiary / Brand
Tertiary supports your primary brand color and adds depth to the interface. Use it for foundational surfaces like sidebars, headers, dark-mode backgrounds, and layered containers. Tertiary should feel structural, not interactive, so it doesn't compete with buttons or key actions.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
17.16
Black text
#FAFAFB
50
16.33
Black text
#F5F4F6
100
14.81
Black text
#EAE9ED
200
11.53
Black text
#D1CED7
300
8.81
Black text
#B8B4C1
400
6.48
Black text
#9E99AB
500
4.62
Black text
#857E95
600
5.57
White text
#6C647F
700
8.32
White text
#534969
800
11.56
White text
#3E3357
900
14.76
White text
#2D2148
950
17.9
White text
#1A1230
Blue
Blue communicates trust, calm, and information. Use it for informational alerts, neutral status indicators, and UI accents where you want clarity without implying success, risk, or failure. Blue is ideal for 'info' states and guidance content.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
13.82
Black text
#F5F8FF
50
13.5
Black text
#EFF6FF
100
12.04
Black text
#DBEAFE
200
10.34
Black text
#BFDBFE
300
8.15
Black text
#93C5FD
400
5.78
Black text
#60A5FA
500
5.71
Black text
#3B82F6
600
5.17
White text
#2563EB
700
6.7
White text
#1D4ED8
800
8.72
White text
#1E40AF
900
10.36
White text
#1E3A8A
950
14.69
White text
#172554
Green
Green communicates success, completion, and verified progress. Use it for success alerts, 'done' steps, validated checks, and positive status indicators (e.g., Completed, Passed Validation, Synced). Reserve green for truly confirmed outcomes so it stays credible.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
14.76
Black text
#F6FEF9
50
14.38
Black text
#ECFDF5
100
13.36
Black text
#D1FAE5
200
11.81
Black text
#A7F3D0
300
9.94
Black text
#6EE7B7
400
7.88
Black text
#34D399
500
5.97
Black text
#10B981
600
5.57
Black text
#059669
700
5.48
White text
#047857
800
7.68
White text
#065F46
900
9.72
White text
#064E3B
950
15.15
White text
#022C22
Amber
Amber communicates caution and 'needs attention.' Use it for warning alerts, due-soon states, review-required flags, and non-blocking issues that should be addressed soon. Amber should signal risk or urgency without implying failure.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
14.62
Black text
#FFFCF5
50
14.44
Black text
#FFFBEB
100
13.45
Black text
#FEF3C7
200
12.03
Black text
#FDE68A
300
10.39
Black text
#FCD34D
400
8.97
Black text
#FBBF24
500
6.97
Black text
#F59E0B
600
4.7
Black text
#D97706
700
5.02
White text
#B45309
800
7.09
White text
#92400E
900
9.07
White text
#78350F
950
14.98
White text
#451A03
Red
Red communicates errors and destructive actions. Use it for failure states, blocking issues, critical alerts, and destructive confirmations (e.g., Delete, Revoke, Remove). Keep red highly scoped so it always feels serious and unambiguous.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
15.71
Black text
#FFFBFA
50
14.76
Black text
#FEF2F2
100
13.22
Black text
#FEE2E2
200
11.16
Black text
#FECACA
300
8.51
Black text
#FCA5A5
400
5.84
Black text
#F87171
500
5.58
Black text
#EF4444
600
4.83
White text
#DC2626
700
6.47
White text
#B91C1C
800
8.31
White text
#991B1B
900
10.02
White text
#7F1D1D
950
16.14
White text
#450A0A
Gray / Neutral
Neutral is the foundation of the system and carries most of the UI. Use it for backgrounds, surfaces, borders, dividers, and the full range of text emphasis. A strong neutral scale keeps the product calm and readable, allowing brand and semantic colors to stand out when they matter.
Shade Guide
25-100
Subtle backgrounds, hover states, and low-emphasis surfaces
200-400
Borders, dividers, disabled states, and muted UI elements
500-700
Primary interactive elements, buttons, links, and focus states
800-950
Text, high-contrast elements, and dark mode surfaces
25
18.66
Black text
#FCFCFD
50
18.31
Black text
#F9FAFB
100
17.39
Black text
#F3F4F6
200
15.46
Black text
#E5E7EB
300
12.99
Black text
#D1D5DB
400
7.54
Black text
#9CA3AF
500
4.83
White text
#6B7280
600
7.56
White text
#4B5563
700
10.31
White text
#374151
800
14.68
White text
#1F2937
900
17.74
White text
#111827
950
19.13
White text
#0B0F1A
Base
Base colors are the universal foundation across the system. Use white and black as reference points for contrast, typography, and foundational surfaces, especially in edge cases where brand or semantic colors shouldn't be introduced.
white
21.1
Black text
#FFFFFF
black
21.1
White text
#000000