Skip to main content

Colors

Waypoint uses OKLCH color space for perceptually uniform colors with consistent lightness across the palette.

Gray Scale

ds-gray-100

ds-gray-95

ds-gray-90

ds-gray-85

ds-gray-80

ds-gray-75

ds-gray-70

ds-gray-65

ds-gray-60

ds-gray-55

ds-gray-50

ds-gray-45

ds-gray-40

ds-gray-35

ds-gray-30

ds-gray-25

ds-gray-20

ds-gray-15

ds-gray-10

ds-gray-5

Semantic Colors

ds-danger

Error states and destructive actions

ds-success

Success states and positive feedback

ds-caution

Warning states and cautionary feedback

ds-link

Links and informational elements

Theme Tokens

Light Theme

accent

var(--ds-gray-90)

#F2F2F3

accent-foreground

var(--ds-gray-5)

#090910

background

var(--ds-gray-95)

#FAFAFA

border

var(--ds-gray-85)

#E4E4E7

card

var(--ds-gray-100)

#FFFFFF

card-foreground

var(--ds-gray-5)

#090910

destructive

var(--ds-alerts-danger)

#EF4444

destructive-foreground

var(--ds-gray-90)

#F2F2F3

foreground

var(--ds-gray-5)

#090910

input

var(--ds-gray-85)

#E4E4E7

muted

var(--ds-gray-85)

#E4E4E7

muted-foreground

var(--ds-gray-50)

#838395

popover

var(--ds-gray-100)

#FFFFFF

popover-foreground

var(--ds-gray-5)

#090910

primary

var(--ds-gray-5)

#090910

primary-foreground

var(--ds-gray-95)

#FAFAFA

ring

var(--ds-gray-60)

#A0A0AB

ring-offset

var(--ds-gray-100)

#FFFFFF

secondary

var(--ds-gray-90)

#F2F2F3

secondary-foreground

var(--ds-gray-10)

#17171C

sidebar-primary-foreground

var(--ds-gray-95)

#FAFAFA

sidebar-primary

var(--ds-gray-5)

#090910

sidebar-background

var(--ds-gray-95)

#FAFAFA

sidebar-accent

var(--ds-gray-90)

#F2F2F3

sidebar-accent-foreground

var(--ds-gray-5)

#090910

sidebar-ring

var(--ds-gray-60)

#A0A0AB

Dark Theme

accent

var(--ds-gray-25)

#3B3B45

accent-foreground

var(--ds-gray-95)

#FAFAFA

background

var(--ds-gray-15)

#22222A

border

var(--ds-gray-20)

#2F2F37

card

var(--ds-gray-10)

#17171C

card-foreground

var(--ds-gray-95)

#FAFAFA

destructive

var(--ds-alerts-danger)

#EF4444

destructive-foreground

var(--ds-gray-95)

#FAFAFA

foreground

var(--ds-gray-90)

#F2F2F3

input

var(--ds-gray-30)

#464653

muted

var(--ds-gray-20)

#2F2F37

muted-foreground

var(--ds-gray-55)

#93939F

popover

var(--ds-gray-15)

#22222A

popover-foreground

var(--ds-gray-95)

#FAFAFA

primary

var(--ds-gray-95)

#FAFAFA

primary-foreground

var(--ds-gray-5)

#090910

ring

var(--ds-gray-45)

#747483

ring-offset

var(--ds-gray-15)

#22222A

secondary

var(--ds-gray-25)

#3B3B45

secondary-foreground

var(--ds-gray-95)

#FAFAFA

sidebar-primary-foreground

var(--ds-gray-95)

#FAFAFA

sidebar-background

var(--ds-gray-5)

#090910

sidebar-accent

var(--ds-gray-15)

#22222A

sidebar-accent-foreground

var(--ds-gray-95)

#FAFAFA

sidebar-border

colors.sidebar-border-dark

sidebar-ring

var(--ds-gray-35)

#545563

Usage Guidelines

  • OKLCH Color Space: All colors use OKLCH for perceptually uniform lightness and better color consistency across the palette.
  • CSS Variables: Use CSS custom properties (e.g., var(--ds-gray-50)) for consistency and theme switching.
  • Semantic Colors: Use semantic colors (--ds-danger, --ds-success) for feedback and status communication.
  • Theme Tokens: Use theme tokens (--background, --foreground) that automatically adapt to light/dark mode.
  • Accessibility: Maintain WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text) for optimal readability.