Colours

Color tokens standardize the appearance of colors across the interface, ensuring consistency and accessibility. These tokens create a cohesive visual language, defining shades for backgrounds, text, borders, and interactive elements.”

Primary Color Token

epresents the brand’s core identity, applied to key actions and highlights throughout the interface. This color draws attention and fosters brand recognition, helping users intuitively identify important actions.

Secondary Color Token

Complements the primary color, providing additional versatility for accents, backgrounds, and secondary actions. It adds depth and variety, enriching the interface without overpowering the primary color.

Background Color Token

efines the primary backdrop for the interface, ensuring readability and providing a comfortable visual base. This color is designed to be subtle and supportive, keeping focus on the main content.

Surface Color Token

sed for cards, containers, and other components that sit on top of the background. This color adds dimension and structure, creating a distinct yet harmonious contrast from the main background.

Border Color Token

rovides subtle definition for edges, separating elements without distracting from content. It ensures that boundaries are clear and organized, especially on forms and input fields.

Text Color Token

Defines the default color for primary body text, balancing readability and aesthetic harmony. Carefully chosen for contrast, this color ensures that text is legible across backgrounds and surfaces.

Heading Color Token

Used for titles and headings, offering slightly more emphasis than body text. It reinforces hierarchy, making it easy for users to scan and understand content structure.

Link Color Token

Defines the color of interactive text links, signaling clickability and promoting intuitive navigation. It’s typically brighter or more vibrant, helping users identify actionable text.

Success Color Token

Reserved for positive states, such as success messages or completed actions. This color is calming and affirming, providing users with clear visual feedback for successful interactions.

Warning Color Token

Signals caution, drawing attention to actions or states that require user awareness. Its warm tone catches the eye without creating alarm, encouraging careful review before proceeding.

Error Color Token

Used for error messages, invalid states, and urgent feedback, signaling that corrective action is needed. It is bold and noticeable, ensuring users can quickly recognize and address issues.

Info Color Token

Provides a neutral tone for informational messages and guidance, adding clarity without urgency. This color offers a balanced visual, helping users find useful information seamlessly.

Disabled Color Token

Communicates inactive states, showing that an element is currently non-interactive. This subdued color ensures that disabled elements remain visible yet clearly distinguished from active options.