Colors

This section provides an overview of our colors.

Brand colors

Brand Colors

Brand colors are used to identify and communicate the brand identity of the project.

Token and descriptionLight valueDark value
bg-background

Root background color.

#FAFAFA
oklch(14.1% 0.005 285.823)
bg-card

Background color for cards.

#fff
oklch(21% 0.006 285.885)
bg-popover

Background color for popovers or dropdowns.

#fff
oklch(21% 0.006 285.885)
bg-primary

Background color for primary elements.

#735adc
#735adc
bg-secondary

Background color for secondary elements.

oklch(92% 0.004 286.32)
oklch(27.4% 0.006 286.033)
bg-muted

Background color for muted elements.

oklch(96.7% 0.001 286.375)
oklch(27.4% 0.006 286.033)
bg-accent

Background color for accent elements.

oklch(92% 0.004 286.32)
oklch(27.4% 0.006 286.033)
bg-destructive

Background color for destructive elements.

oklch(57.7% 0.245 27.325)
oklch(57.7% 0.245 27.325)
bg-sidebar

Background color for sidebar.

oklch(98.5% 0 0)
oklch(14.1% 0.005 285.823)
Token and descriptionLight valueDark value
text-foreground

Default text color for primary content.

oklch(21% 0.006 285.885)
#fff
text-card-foreground

Text color for content within cards.

oklch(21% 0.006 285.885)
#fff
text-popover-foreground

Text color for content within popovers or dropdowns.

oklch(21% 0.006 285.885)
#fff
text-primary-foreground

Text color for elements using the primary color background.

#fff
#fff
text-secondary-foreground

Text color for elements using the secondary color background.

oklch(27.4% 0.006 286.033)
#fff
text-muted-foreground

Text color for muted background elements.

oklch(44.2% 0.017 285.786)
oklch(70.5% 0.015 286.067)
text-accent-foreground

Text color for elements using the accent background color.

oklch(27.4% 0.006 286.033)
#fff
text-destructive-foreground

Text color for elements using the destructive background color.

#fff
#fff
text-subtle

Text color for subtle elements.

oklch(55.2% 0.016 285.938)
oklch(70.5% 0.015 286.067)
text-link

Text color for links.

#6852c5
#c3b4ff
text-success

Text color for success messages or positive indicators.

oklch(62.7% 0.194 149.214)
oklch(79.2% 0.209 151.711)
text-danger

Text color for danger or error messages.

oklch(57.7% 0.245 27.325)
oklch(70.4% 0.191 22.216)
text-warning

Text color for warning or caution messages.

oklch(68.1% 0.162 75.834)
oklch(85.2% 0.199 91.936)