Colors

This section provides an overview of our 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.

oklch(0.985 0.000 0.000)
oklch(14.1% 0.005 285.823)
bg-card

Background color for cards.

oklch(1.000 0.000 0.000)
oklch(21% 0.006 285.885)
bg-popover

Background color for popovers or dropdowns.

oklch(1.000 0.000 0.000)
oklch(21% 0.006 285.885)
bg-primary

Background color for primary elements.

oklch(0.562 0.190 287.499)
oklch(0.562 0.190 287.499)
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)
oklch(1.000 0.000 0.000)
text-card-foreground

Text color for content within cards.

oklch(21% 0.006 285.885)
oklch(1.000 0.000 0.000)
text-popover-foreground

Text color for content within popovers or dropdowns.

oklch(21% 0.006 285.885)
oklch(1.000 0.000 0.000)
text-primary-foreground

Text color for elements using the primary color background.

oklch(1.000 0.000 0.000)
oklch(1.000 0.000 0.000)
text-secondary-foreground

Text color for elements using the secondary color background.

oklch(27.4% 0.006 286.033)
oklch(1.000 0.000 0.000)
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)
oklch(1.000 0.000 0.000)
text-destructive-foreground

Text color for elements using the destructive background color.

oklch(1.000 0.000 0.000)
oklch(1.000 0.000 0.000)
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.

oklch(0.523 0.172 287.733)
oklch(0.809 0.105 293.082)
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)