Color scheme

Use Color scheme to choose colors for your brand, texts, background, and additional elements.

The color scheme settings impact all elements, but you can fine-tune individual elements using the Elements tab.

You can instantly see how your changes look in the preview on the left. It updates in real time as you adjust the color scheme.

Brand

Brand colors establish the visual identity of the platform, creating recognition and consistency across all components and interfaces.

Property	Description
Primary	The main brand color. Applied to interactive elements, buttons, links, progress indicators, slider filled portions, active tabs, selected items, checkboxes, radio buttons, and primary call-to-action elements.
Secondary	Supporting brand color used for secondary actions, alternative highlights, and complementary elements with less visual emphasis than primary brand elements.
Hover light	Applied to interactive elements during hover states in light contexts, providing subtle feedback without overwhelming the user interface.
Hover accent	Used for hover states that require stronger visual emphasis. Serves as the hover state for the primary color
Disabled	Applied to inactive buttons, form controls, and other interactive elements that are currently unavailable, visually communicating their disabled state.
Neutral	Used for progress track backgrounds, unfilled portions of sliders and charts, subtle backgrounds, and non-emphasized UI elements where visual weight should be minimal.
Border	Applied to dividers, containers, form inputs, cards, tables, accordions, and element boundaries throughout the interface for visual structure and separation.

Text

Text colors ensure readability and create a hierarchical structure in content, helping users scan and comprehend information effectively.

Property	Description
Primary	Used for main content text, headings, labels, table content, most UI text elements, navigation items, and critical information requiring clear readability.
Secondary	Applied to supporting text, descriptions, captions, timestamps, less emphasized content, chapter labels, and secondary information in charts and tables.
Light	Used for text that appears on dark backgrounds, ensuring sufficient contrast for readability. Also applied to button text on colored backgrounds and format labels.
Accent	Used for interactive text elements, links, emphasized content, and to draw attention to specific information within content areas.

Background

Background colors define content areas, establish hierarchy, and create appropriate contrast for content visibility across the interface.

Property	Description
Primary	Used for main content areas, cards, modals, containers, table cells, form elements, and most UI component backgrounds. Provides a neutral foundation for content display.
Dark	Used for sections that require strong visual emphasis, media-rich areas, and components that require high contrast with surrounding elements
Light	Used for secondary content areas, alternating table rows, sidebar elements, and subtle section highlighting without pronounced visual separation
Accent	Used for drawing attention to specific sections using brand colors. Ideal for highlighting important sections that require strong visual emphasis, media-rich areas, and components that require high contrast with surrounding elements

Additional

Additional colors provide clear visual feedback about system status, user actions, and important notifications.

Property	Description
Information	Used for informational feedback messages and notifications that provide neutral guidance to users.
Warning	Used for cautionary notifications, important reminders, and situations that require user attention but aren't critical errors.
Success	Applied to success messaging, positive confirmations, and feedback indicating completed or correctly performed actions.
Error	Used for error states, incorrect responses, warnings, and feedback about problems requiring user attention.