Basic Components
Theme Colors
View and browse the application's color palette
The core of our design language
Colors play a vital role in our design system. They convey meaning, establish hierarchy, and enhance user experience. Our color palette is carefully selected to maintain consistency, accessibility, and visual harmony across all interfaces.
Theme Colors
Our primary color palette serves as the foundation of our brand identity. It is used consistently throughout the UI for important elements, buttons, and accents.
Primary 50
Undefined
Primary 100
Undefined
Primary 200
Undefined
Primary 300
Undefined
Primary 400
Undefined
Primary 500
Undefined
Primary 600
Undefined
Primary 700
Undefined
Primary 800
Undefined
Primary 900
Undefined
Primary 950
Undefined
Secondary Colors
Our secondary color palette features warm brown tones that harmoniously complement our primary orange palette. It is used for secondary buttons, notifications, and supporting elements to create visual hierarchy.
Secondary 50
Undefined
Secondary 100
Undefined
Secondary 200
Undefined
Secondary 300
Undefined
Secondary 400
Undefined
Secondary 500
Undefined
Secondary 600
Undefined
Secondary 700
Undefined
Secondary 800
Undefined
Secondary 900
Undefined
Secondary 950
Undefined
Gray Scale
Gray tones are essential for creating balanced interfaces. They provide contrast while remaining neutral and allowing the primary palette to shine.
Note: The gray palette is essential for creating balanced interfaces, providing contrast while remaining neutral, allowing the primary colors to stand out.
Gray 50
Undefined
Gray 100
Undefined
Gray 200
Undefined
Gray 300
Undefined
Gray 400
Undefined
Gray 500
Undefined
Gray 600
Undefined
Gray 700
Undefined
Gray 800
Undefined
Gray 900
Undefined
Gray 950
Undefined
Background Colors
Background colors serve as the canvas for our content, providing the right contrast and readability.
# White Variants
White
Undefined
White Soft
Undefined
White Mute
Undefined
# Background Variants
Light Mode Content
Bg Light
Undefined
Dark Mode Content
Bg Dark
Undefined
Text Colors
Text colors ensure readability and proper hierarchy across light and dark modes.
Heading Text
This is a sample text paragraph that shows how the text appears in different themes.
Secondary text is used for less important information and annotations.
--color-text-light
Heading Text
This is a sample text paragraph that shows how the text appears in different themes.
Secondary text is used for less important information and annotations.
--color-text-dark
Border Radius
Border radius values help maintain consistent component styling throughout the application.
--radius-default
rounded-sm
0.125rem
rounded-full
9999px
Usage Guidelines
When using colors in your components, follow these guidelines to ensure consistency and accessibility.
Do
Use primary colors for key interactive elements and CTAs
Maintain consistent color contrast for accessibility
Use CSS variables for theming instead of hardcoded values
Test your UI in both light and dark modes
Don't
Avoid using too many colors in a single component
Don't use colors that clash with our main palette
Avoid using hardcoded color values
Don't forget to test color contrast for accessibility