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 description | Light value | Dark value |
---|---|---|
bg-background Root background color. | #FAFAFA | #0C0A15 |
bg-card Background color for cards. | #fff | #110F1D |
bg-popover Background color for popovers or dropdowns. | #fff | #110F1D |
bg-primary Background color for primary elements. | #735adc | #735adc |
bg-secondary Background color for secondary elements. | oklch(92% 0.004 286.32) | #161422 |
bg-muted Background color for muted elements. | oklch(96.7% 0.001 286.375) | #161422 |
bg-accent Background color for accent elements. | oklch(92% 0.004 286.32) | #161422 |
bg-destructive Background color for destructive elements. | oklch(63.7% 0.237 25.331) | oklch(57.7% 0.245 27.325) |
bg-sidebar Background color for sidebar. | oklch(98.5% 0 0) | #0C0A15 |
Token and description | Light value | Dark value |
---|---|---|
text-foreground Default text color for primary content. | #110F1D | #fff |
text-card-foreground Text color for content within cards. | #110F1D | #fff |
text-popover-foreground Text color for content within popovers or dropdowns. | #110F1D | #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. | #161422 | #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(72.3% 0.219 149.579) | oklch(79.2% 0.209 151.711) |
text-danger Text color for danger or error messages. | oklch(63.7% 0.237 25.331) | oklch(70.4% 0.191 22.216) |
text-warning Text color for warning or caution messages. | oklch(79.5% 0.184 86.047) | oklch(85.2% 0.199 91.936) |