DesignSystems.One LogoDesignSystems.One

Color System

Our color system is designed to create visual hierarchy, communicate meaning, and maintain accessibility across all products.

Color Tokens

Semantic color tokens that adapt to light and dark modes

primary

hsl(var(--primary))

primary-foreground

hsl(var(--primary-foreground))

secondary

hsl(var(--secondary))

secondary-foreground

hsl(var(--secondary-foreground))

accent

hsl(var(--accent))

accent-foreground

hsl(var(--accent-foreground))

muted

hsl(var(--muted))

muted-foreground

hsl(var(--muted-foreground))

card

hsl(var(--card))

card-foreground

hsl(var(--card-foreground))

border

hsl(var(--border))

input

hsl(var(--input))

destructive

hsl(var(--destructive))

destructive-foreground

hsl(var(--destructive-foreground))

View in Figma View in GitHub

Color Usage Guidelines

How to apply colors effectively and accessibly

Primary

Use for main actions, key UI elements, and to establish brand presence. Avoid overuse which can diminish its impact.

Secondary

Use for supporting actions, secondary buttons, and to create visual hierarchy without competing with primary elements.

Accent

Use sparingly to highlight important information or to add visual interest to specific UI elements.

Destructive

Reserve for actions that are destructive or potentially dangerous, such as delete or remove functions.

Accessibility

  • All text must meet WCAG 2.1 AA contrast requirements (4.5:1 for normal text, 3:1 for large text)
  • Don't rely solely on color to convey information
  • Test color combinations in both light and dark modes
Color Contrast Checker

Interactive Color Tool

Experiment with our color system and see how different combinations work together

Primary Color

#3b82f6
(0-360)
(0-100)
(0-100)

Secondary Color

#f97316
(0-360)
(0-100)
(0-100)

Accent Color

#10b981
(0-360)
(0-100)
(0-100)

Background Color

#ffffff
(0-360)
(0-100)
(0-100)

Text Color

#1e293b
(0-360)
(0-100)
(0-100)

Accessibility Checks

Text on BackgroundAAA
Sample Text
Ratio: 14.63:1
Primary on BackgroundAA Large
Button
Ratio: 3.68:1
Secondary on BackgroundFail
Button
Ratio: 2.80:1

Accessibility Guidelines

  • WCAG AA requires a contrast ratio of at least 4.5:1 for normal text
  • WCAG AA requires a contrast ratio of at least 3:1 for large text (18pt or 14pt bold)
  • WCAG AAA requires a contrast ratio of at least 7:1 for normal text
  • WCAG AAA requires a contrast ratio of at least 4.5:1 for large text