Design System

Build faster. Stay consistent. Collaborate worldwide.
A visual language that unites speed, structure, and synergy.

Designed by Hiram Broemme

01

Colors

Theme

Brand

Accent 1 (Base)
#F1FC7F
--color_brand_accent-1_base
Accent 1 (Muted)
#D9E157
--color_brand_accent-1_muted
Accent 2 (Base)
#DB6CA5
--color_brand_accent-2_base
Accent 2 (Muted)
#C85B92
--color_brand_accent-2_muted
Accent 3 (Base)
#91DDFA
--color_brand_accent-3_base
Accent 3 (Muted)
#7EC7E3
--color_brand_accent-3_muted
Accent 4 (Base)
#89FB78
--color_brand_accent-4_base
Accent 4 (Muted)
#75E764
--color_brand_accent-4_muted

Background

Primary
Main background of the page
#
--background-primary
--color_background_primary
Secondary
Sections that need subtle separation
#
--background-secondary
--color_background_secondary
Tertiary
…
#
--color_background_tertiary
Alternate Primary
…
--gray-11
--color_background_alternate_primary
Alternate Secondary
…
--gray-9
--color_background_alternate_secondary
Alternate Tertiary
…
--gray-7
--color_background_alternate_tertiary
Accent 1 (Solid)
…
#
--background-accent
--color_background_accent-1_solid

Text

Aa
Primary
Main text of page
#
--foreground-primary
--color_text_primary
Aa
Secondary
Slightly more mild contrast
#
--foreground-secondary
--color_text_secondary
Aa
Tertiary
Caption 1 gray
#
--color_text_tertiary
Aa
Quaternary
Caption 2 gray
#
--color_text_quaternary
Aa
Alternate Primary
…
#
--color_text_alternate_primary
Aa
Accent Marker 1
…
#
foreground-marker
--color_text_accent-marker-1
Aa
Muted Primary
…
#
foreground-muted
--color_text_muted_primary

System

Success
(Background)
For backgrounds
--green-1
--color_system_success_background
Aa
Success
(Foreground)
For texts
--green-11
--color_system_success_foreground
Warning
(Background)
For backgrounds
--yellow-1
--color_system_warning_background
Aa
Warning
(Foreground)
For texts
--yellow-10
--color_system_warning_foreground
Error
(Background)
For backgrounds
--red-1
--color_system_error_background
Aa
Error
(Foreground)
For texts
--red-10
--color_system_error_foreground
Focus (Foreground)
Highlight keyboard focus on all interactive elements for navigation and accessibility
#5298E9
--foreground-focus
--color_system_focus

Border

Primary
Main borders
--gray-6
--foreground-border
--color_border_primary
Secondary
Smoother borders
--gray-3
--color_border_secondary
Tertiary
Even smoother borders
--gray-2
--color_border_tertiary
Alternate
…
--gray-2
--color_border_alternate_primary

Schemes

Color Matrix

Based on Open Colors

Scheme
Backgrounds
Interactive Components
Strong Borders
Solid Colors
Accessible Text
0
1
2
3
4
5
6
7
8
9
10
11
12
Gray
Stone
Red
Pink
Purple
Violet
Indigo
Blue
Cyan
Teal
Green
Lime
Yellow
Orange
Choco
Brown
Sand
Camo
Jungle