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 colors establish the visual identity of the platform, creating recognition and consistency across all components and interfaces.
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 colors ensure readability and create a hierarchical structure in content, helping users scan and comprehend information effectively.
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 colors define content areas, establish hierarchy, and create appropriate contrast for content visibility across the interface.
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 colors provide clear visual feedback about system status, user actions, and important notifications.
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.
Last updated