Design System
Color Theme Guidelines
Ocean Colors
ocean-50
Ocean 50
#E6F7F7
ocean-100
Ocean 100
#CCF0F0
ocean-200
Ocean 200
#99E1E2
ocean-300
Ocean 300
#66D2D3
ocean-400
Ocean 400
#33C3C5
ocean-500
Ocean 500
#00A9AC
ocean-600
Ocean 600
#008789
ocean-700
Ocean 700
#006567
ocean-800
Ocean 800
#004344
ocean-900
Ocean 900
#002222
Sage Colors
sage-50
Sage 50
#F4F9EA
sage-100
Sage 100
#E8F3D5
sage-200
Sage 200
#D2E7AC
sage-300
Sage 300
#BBDB82
sage-400
Sage 400
#A4CF59
sage-500
Sage 500
#8CC63F
sage-600
Sage 600
#709E32
sage-700
Sage 700
#547726
sage-800
Sage 800
#384F19
sage-900
Sage 900
#1C280D
Signal Colors
positive
signal-positive
positive
#2ECC71
caution
signal-caution
caution
#F1C40F
negative
signal-negative
negative
#E74C3C
info
signal-info
info
#3498DB
Typography Colors (Stone)
stone-50
Stone 50
#F7F9FC
stone-100
Stone 100
#EDF2F7
stone-200
Stone 200
#E2E8F0
stone-300
Stone 300
#CBD5E0
stone-400
Stone 400
#A0AEC0
stone-500
Stone 500
#718096
stone-600
Stone 600
#4A5568
stone-700
Stone 700
#2D3748
stone-800
Stone 800
#1A202C
stone-900
Stone 900
#171923
Typography Color Usage
Light Backgrounds
- • Stone 900: Headings, high emphasis
- • Stone 800: Sub-headings, medium emphasis
- • Stone 600: Body text, regular emphasis
- • Stone 500: Secondary text, low emphasis
- • Stone 400: Disabled text, placeholders
Dark Backgrounds
- • Stone 50: Headings, high emphasis
- • Stone 100: Sub-headings, medium emphasis
- • Stone 200: Body text, regular emphasis
- • Stone 300: Secondary text, low emphasis
- • Stone 400: Disabled text, placeholders
Color Contrast Checker
Ocean 500 - AAA Compliant
The quick brown fox (text-sm)
The quick brown fox (text-base)
The quick brown fox (text-lg)
The quick brown fox (text-2xl)
Ocean 600 - AAA Compliant
The quick brown fox (text-sm)
The quick brown fox (text-base)
The quick brown fox (text-lg)
The quick brown fox (text-2xl)
Ocean 50 - AAA Compliant
The quick brown fox (text-sm)
The quick brown fox (text-base)
The quick brown fox (text-lg)
The quick brown fox (text-2xl)
Sage 500 - AAA Compliant
The quick brown fox (text-sm)
The quick brown fox (text-base)
The quick brown fox (text-lg)
The quick brown fox (text-2xl)
Sage 600 - AAA Compliant
The quick brown fox (text-sm)
The quick brown fox (text-base)
The quick brown fox (text-lg)
The quick brown fox (text-2xl)
Sage 50 - AA Compliant
The quick brown fox (text-sm)
The quick brown fox (text-base)
The quick brown fox (text-lg)
The quick brown fox (text-2xl)
Buttons
Size Variants
Style Variants
Button Groups
WCAG Compliance Guide
Level AA Requirements
- • Normal Text (14px): 4.5:1 contrast ratio
- • Large Text (18px+): 3:1 contrast ratio
- • UI Components: 3:1 contrast ratio
Level AAA Requirements
- • Normal Text (14px): 7:1 contrast ratio
- • Large Text (18px+): 4.5:1 contrast ratio
Color Usage Guidelines
Primary Colors (Ocean)
- • Ocean 500: Main brand color, primary buttons
- • Ocean 600: Hover states, active states
- • Ocean 50-100: Subtle backgrounds, hover states
- • Ocean 700-900: Text emphasis, dark modes
Secondary Colors (Sage)
- • Sage 500: Secondary actions, success states
- • Sage 600: Hover states for secondary actions
- • Sage 50-100: Light backgrounds, cards
- • Sage 700-900: Secondary text emphasis
Typography Colors (Stone)
- • Stone 800-900: Primary headings, high emphasis
- • Stone 600-700: Body text, medium emphasis
- • Stone 400-500: Secondary text, low emphasis
- • Stone 50-300: Text on dark backgrounds
- • Stone 400: Disabled states, placeholders