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(1 0 0)
oklch(0.141 0.005 285.823)
bg-card

Background color for cards.

oklch(1 0 0)
oklch(0.21 0.006 285.885)
bg-popover

Background color for popovers or dropdowns.

oklch(1 0 0)
oklch(0.21 0.006 285.885)
bg-primary

Background color for primary elements.

oklch(0.21 0.006 285.885)
oklch(0.92 0.004 286.32)
bg-brand

Brand accent background (purple). Use for deliberate brand emphasis, not default primary.

oklch(0.562 0.190 287.499)
oklch(0.562 0.190 287.499)
bg-brand-muted

Subtle brand-tinted surface, e.g. cards or highlighted regions.

oklch(0.969 0.016 293.847)
oklch(0.272 0.069 288.230)
bg-brand-accent

Brand-tinted hover/active surface, one step stronger than brand-muted.

oklch(0.890 0.059 293.718)
oklch(0.351 0.090 288.729)
bg-secondary

Background color for secondary elements.

oklch(0.967 0.001 286.375)
oklch(0.274 0.006 286.033)
bg-muted

Background color for muted elements.

oklch(0.967 0.001 286.375)
oklch(0.274 0.006 286.033)
bg-accent

Background color for accent elements.

oklch(0.967 0.001 286.375)
oklch(0.274 0.006 286.033)
bg-destructive

Background color for destructive elements.

oklch(0.577 0.245 27.325)
oklch(0.704 0.191 22.216)
bg-sidebar

Background color for sidebar.

oklch(0.985 0 0)
oklch(0.21 0.006 285.885)
Token and descriptionLight valueDark value
text-foreground

Default text color for primary content.

oklch(0.141 0.005 285.823)
oklch(0.985 0 0)
text-card-foreground

Text color for content within cards.

oklch(0.141 0.005 285.823)
oklch(0.985 0 0)
text-popover-foreground

Text color for content within popovers or dropdowns.

oklch(0.141 0.005 285.823)
oklch(0.985 0 0)
text-primary-foreground

Text color for elements using the primary color background.

oklch(0.985 0 0)
oklch(0.21 0.006 285.885)
text-brand-foreground

Text color for elements using the brand accent 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(0.21 0.006 285.885)
oklch(0.985 0 0)
text-muted-foreground

Text color for muted background elements.

oklch(0.552 0.016 285.938)
oklch(0.705 0.015 286.067)
text-accent-foreground

Text color for elements using the accent background color.

oklch(0.21 0.006 285.885)
oklch(0.985 0 0)
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.21 0.006 285.885)
oklch(0.92 0.004 286.32)
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)