Overview
Overview
Our colors are used to express style and communicate meaning.
Function over Form
Although it is important that the design of your interface is visually pleasing first and foremost it should communicate the function through color in a clear and consistent way to the user.
Focus attention
The use of color should help bring attention to what matters most. Color should support the hierarchy of the page.
Color Token Types
Color tokens allow designers or developers an understanding of how or when to apply our palette and what options are available. They are used to bridge the gap between naming and use.
We differentiate between two different color token types:
Core Token
These colors are the base palette colors and all semantic tokens are linked in one way or another to these colors. They should not be used directly as they don’t express meaning or design decisions in their usage and will lead to inconsistent usage easily.
Example
| Style | Value |
|---|---|
| blue-600 | #3e5fff |
Semantic Token
This is a color that has a specific meaning or definition and should only be used in its context. Semantic tokens help to establish an organized and systematic application of color across the system. They represent the small, repeated design decisions that make up a design system’s visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.
| Style | Value |
|---|---|
| text-accent | blue-600 |
Semantic Token Mapping
To generate our semantic tokens we first decide and map one color for its semantic use.
Accent
Accent colors indicate mainly interactivity for the user and is related to security in our NordVPN brand messaging.
Success
Success colors indicate something positive has happened or something was completed successfully.
Warning
Warning colors are used for notifying the user to continue cautiosly and notify him of something that may could go wrong.
Critical
Critical colors are for actions that require the immediate attention of the user. This includes strong call-to-actions, destructive interactions, error and critical events.
Semantic
Semantic Tokens
Core
Core Tokens
Core tokens are the building blocks of our color system. Each color has multiple steps that follow a logical generation. Our core tokens use literal color names (like red, green, etc.) and a numeric scale (where 100 is light and 1000 is dark) by default.
Base color in each core token group
[colorname]-600 is in nearly all cases the primary base color, with the exception of yellow where yellow-300 is the primary one.
Usage
Usage Guidelines
Our colors are designed for clarity and with a specific meaning to guide the users and bring attention to the most relevant elements in the interface. This is also why it’s important to use and respect the correct semantics and tokens in the design.
Accessibility
Text Color contrast
All text colors have a contrast of at least 4.5:1.
Color isn’t the only way information is communicated
Using only color to convey important information, makes it hard to impossible for visually impaired to access this information.
Disabled elements
Text, icons or images of an disabled component, decoration only do not have any contrast requirements.