Primary Colors (Teal)
The primary teal colors represent our main brand identity and are used for key elements like navigation, buttons, and highlighted content.
Primary 50
#E6FFFA
RGB: 230, 255, 250
Very light backgrounds, hover states
Primary 100
#B2F5EA
RGB: 178, 245, 234
Light backgrounds, dividers
Primary 200
#81E6D9
RGB: 129, 230, 217
Light UI elements
Primary 300
#4FD1C5
RGB: 79, 209, 197
Light accents, success indicators
Primary 400
#38B2AC
RGB: 56, 178, 172
Primary brand color, main buttons
Primary 500
#319795
RGB: 49, 151, 149
Alternate primary, deeper variation
Primary 600
#2C7A7B
RGB: 44, 122, 123
Primary dark, button hover
Primary 700
#285E61
RGB: 40, 94, 97
Dark accents, active states
Primary 800
#234E52
RGB: 35, 78, 82
Very dark accents
Primary 900
#1D4044
RGB: 29, 64, 68
Darkest brand color
Secondary Colors (Orange)
The secondary orange colors provide complementary energy and are used for secondary actions, highlighting, and supporting elements.
Secondary 50
#FFF7ED
RGB: 255, 247, 237
Very light secondary backgrounds
Secondary 100
#FFEDD5
RGB: 255, 237, 213
Light secondary elements
Secondary 200
#FED7AA
RGB: 254, 215, 170
Light emphasis
Secondary 300
#FDBA74
RGB: 253, 186, 116
Secondary accents
Secondary 400
#FB923C
RGB: 251, 146, 60
Secondary elements
Secondary 500
#F97316
RGB: 249, 115, 22
Main secondary color
Secondary 600
#EA580C
RGB: 234, 88, 12
Darker secondary, hover states
Secondary 700
#C2410C
RGB: 194, 65, 12
Dark emphasis
Secondary 800
#9A3412
RGB: 154, 52, 18
Very dark secondary
Secondary 900
#7C2D12
RGB: 124, 45, 18
Darkest secondary shade
Neutral Colors (Gray)
Neutral colors provide structure and readability, used for text, backgrounds, borders, and UI framework elements.
Neutral 50
#F9FAFB
RGB: 249, 250, 251
Page backgrounds
Neutral 100
#F3F4F6
RGB: 243, 244, 246
Card backgrounds, light mode UI
Neutral 200
#E5E7EB
RGB: 229, 231, 235
Borders, dividers
Neutral 300
#D1D5DB
RGB: 209, 213, 219
Disabled buttons, secondary borders
Neutral 400
#9CA3AF
RGB: 156, 163, 175
Placeholder text, disabled text
Neutral 500
#6B7280
RGB: 107, 114, 128
Secondary text, icons
Neutral 600
#4B5563
RGB: 75, 85, 99
Primary text
Neutral 700
#374151
RGB: 55, 65, 81
Headings, emphasized text
Neutral 800
#1F2937
RGB: 31, 41, 55
Dark mode backgrounds, deep text
Neutral 900
#111827
RGB: 17, 24, 39
Darkest text, footers
Accent Colors (Indigo)
Accent colors add visual interest and are used for special UI elements, links, and highlights that require differentiation from the primary palette.
Accent 50
#EEF2FF
RGB: 238, 242, 255
Very light accent backgrounds
Accent 100
#E0E7FF
RGB: 224, 231, 255
Light accent elements
Accent 200
#C7D2FE
RGB: 199, 210, 254
Light accent UI
Accent 300
#A5B4FC
RGB: 165, 180, 252
Light accent highlights
Accent 400
#818CF8
RGB: 129, 140, 248
Accent elements
Accent 500
#6366F1
RGB: 99, 102, 241
Main accent color
Accent 600
#4F46E5
RGB: 79, 70, 229
Darker accent, hover states
Accent 700
#4338CA
RGB: 67, 56, 202
Dark accents
Accent 800
#3730A3
RGB: 55, 48, 163
Very dark accent
Accent 900
#312E81
RGB: 49, 46, 129
Darkest accent shade
Usage Guidelines
Primary Color Usage
The primary teal color (primary-400) should be used for:
- Main action buttons
- Navigation elements
- Links
- Active states
- Progress indicators
For buttons and interactive elements, use primary-600 for hover states and primary-700 for active/pressed states.
Secondary Color Usage
The secondary orange color (secondary-500) should be used for:
- Secondary buttons and actions
- Highlights and callouts
- Supporting elements
- Notifications and alerts
- Accent details in predominantly teal interfaces
Neutral Color Usage
Neutral colors serve as the foundation of our interface:
- Use
neutral-50 and neutral-100 for page and component backgrounds
- Use
neutral-600 for body text and neutral-700 for headings
- Use
neutral-200 and neutral-300 for borders and dividers
Accent Color Usage
The accent indigo colors should be used sparingly:
- Use for tertiary actions or special UI elements
- Can be used for specific section highlighting
- Use to create visual distinction from primary and secondary elements
Accessibility Considerations
When using text on colored backgrounds, ensure proper contrast ratios:
- Text on
primary-400 and darker: Use white text
- Text on
primary-300 and lighter: Use dark text (neutral-700 or darker)
- Same principles apply to secondary and accent colors
Our color system meets WCAG AA contrast requirements when used appropriately.