Color is one of the most expressive elements in the Alius Design System. It communicates brand identity, organizes information hierarchy, and provides clear feedback for user actions.

Brand Color

The brand color is the primary visual identifier of Alius across all touchpoints. It is used for logo, core call-to-action buttons, key navigation links, status indicators, and brand recognition elements.

Use the brand color sparingly for emphasis — not as a dominant background or fill. It must remain stable in both light and dark modes, and avoid fluorescent or highly saturated gradients.

Neutral Color

Neutral colors form the structural backbone of the interface. They handle backgrounds, text, borders, and spatial separation. Clear hierarchy through lightness differences ensures comfortable extended reading.

Semantic Color

Semantic colors communicate system state and user feedback. Always pair semantic colors with icons, text labels, or patterns — never rely on color alone to convey meaning.

Usage Principles

• Brand color should account for less than 10% of page color
• Neutral colors form the visual base — highest proportion
• Semantic colors appear only when expressing state
• No gradient backgrounds at large scale
• No glow effects or neon colors
• Every color decision should be explainable