Colors
ERIA's design system features two key brand colors: Purple and Teal. Purple serves as an accent for patient-facing applications and clinical tools, while Teal is commonly used for developer resources and internal documentation.
Consistent and thoughtful color usage is essential to maintain a clear, intuitive, and cohesive visual experience. In healthcare, where clarity is paramount, colors are used strategically on actionable interface elements such as buttons, alerts, and important information sections. Neutral colors (shades of white and grey) help divide content and emphasize specific areas without overwhelming the user.
Design Tokens
The base color palette consists of predefined system colors, but designers should avoid directly copying HEX values. Instead, use color tokens to ensure consistent application across the interface. Colors are referred to as color-value, For example primary-500, ensuring that all color choices adhere to accessibility standards, including contrast ratios essential for healthcare environments.
Primary Colors
Secondary Colors
Gray Colors
Usage Guidelines
The colors should always comply with the WCAG 2.2 AA standard. The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text. Though AAA compatability is preferred if possible.
Themes
Themes are colour collections that define the colours for light and dark modes.