Colors

The design system uses semantic color variables to ensure consistency and meaningful use of colors across the application.

Semantic color variables are named values that connect colors to their functional meaning in the interface, using descriptive names like primary or warning instead of using primitive color names like blue or yellow.

All color variables are designed to work seamlessly across all three Webflow interface appearance settings - Brighter, Default, and Darker, ensuring optimal visibility and contrast in any environment.

Color Roles

Color system is organized into semantic roles that guide consistent and meaningful usage across the interface:

• Primary: Used for primary actions, key interactive elements, and brand representation. These colors guide users to important actions and maintain brand consistency.

• Critical: Used to communicate error states, destructive actions, or critical warnings that require immediate attention. Examples include error messages and delete confirmations.

• Warning: Used to indicate caution states, draw attention to important notices, or highlight potential issues that need user awareness but aren't critical.

• Success: Used to communicate successful operations, completed states, or positive outcomes. Examples include confirmation messages and completion indicators.

• Orange, Pink, Purple: Accent colors used for visual variety and hierarchy without implying semantic meaning.

Background Colors

Background color variables define surface colors for UI elements, containers, and interactive states throughout the interface.

Foreground Colors

Foreground colors are used for text and icons. They ensure readability and proper contrast against the background colors.

Border Colors

Border colors are used for element borders and dividers to visually separate and organize content.

Persistent Colors

Persistent colors maintain consistent values across all themes, unlike other color variables that adapt to each theme setting.