Colors | Adapt Design System

Colors

This section outlines the color palette for the Adapt Design System. Colors are categorized by usage and intent, ensuring consistency and accessibility throughout the Niyo product.

Note: The color examples displayed below will dynamically update based on the selected website theme (light or dark mode). To view the colors intended for dark mode, please toggle the theme switch located in the top right corner of this page.

Primary Colors

The primary colors are foundational to the Niyo brand and UI. They are used strategically to create a consistent visual language.

Brand Colors

Brand colors are used prominently to reinforce Niyo’s identity and guide user interaction. They are employed for interactive elements, call-to-actions, and key visual indicators.

Brand Container

Brand Soft

Brand

Brand Bold

On Brand Container

Color Name	Usage
Brand Container	Background color for elements requiring subtle branding.
Brand Soft	Hover state for Brand Container, providing visual feedback on interaction.
Brand	Primary brand color for interactive elements, CTAs, links, and icons.
Brand Bold	Hover state for Brand elements, and for instances requiring higher contrast against lighter backgrounds.
On Brand Container	Text and icon color used on top of Brand Container for optimal contrast.

UI Colors

UI colors define the visual structure of the interface, ensuring clear separation between elements and a consistent user experience.

Surface

Interface Light

Interface Dark

Divider Light

Divider Dark

Overlay

Color Name	Usage
Surface	Base background color for most UI elements.
Interface Light	Background for lighter UI elements, creating subtle visual hierarchy.
Interface Dark	Background for darker UI elements, providing further visual separation.
Divider Light	Color for light dividers, separating UI sections subtly.
Divider Dark	Color for darker dividers, providing stronger visual separation.
Overlay	Overlay color used for modals and other elements that need to stand out from the background.

Text Colors

Text colors are carefully selected to ensure readability and accessibility across various backgrounds.

Text Primary

Text Secondary

Text Tertiary

Link

Color Name	Usage
Text Primary	Primary text color for body copy and headings.
Text Secondary	Secondary text color for less prominent text, like labels or hints.
Text Tertiary	Tertiary text color for disabled or placeholder text.
Link	Color for interactive links within the text.

Semantic Colors

Semantic colors communicate specific states and outcomes to the user. They are associated with particular meanings and should only be used to represent those meanings, ensuring clear and consistent communication. Do not use these colors for purely aesthetic purposes. If you need a red, green, or yellow for visual styling that isn’t related to a state or action, refer to the Extra Colors section.

Important: Misusing semantic colors can lead to user confusion and misinterpretations. Reserve these colors for their intended purposes:

Success: Indicates successful completion of an action or a positive outcome.
Warning: Signals potential issues or cautions the user about an action.
Error: Represents an error state or a failed action.

Success

Success Container

Success Soft

Success

Success Bold

On Success Container

Color Name	Usage
Success Container	Background color for containers indicating a successful state.
Success Soft	Subtler background or highlight color associated with success.
Success	Primary color used to represent successful actions or outcomes.
Success Bold	Used for bolder success messaging or interactive elements related to success.
On Success Container	Text and icon color used on top of Success Container for optimal contrast.

Warning

Warning Container

Warning Soft

Warning

Warning Bold

On Warning Container

Color Name	Usage
Warning Container	Background color for containers indicating a warning state.
Warning Soft	Subtler background or highlight color associated with a warning.
Warning	Primary color used to represent warnings or cautionary messages.
Warning Bold	Used for bolder warning messaging or interactive elements related to warnings.
On Warning Container	Text and icon color used on top of Warning Container for optimal contrast.

Error

Error Container

Error Soft

Error

Error Bold

On Error Container

Color Name	Usage
Error Container	Background color for containers indicating an error state.
Error Soft	Subtler background or highlight color associated with an error.
Error	Primary color used to represent errors or failed actions.
Error Bold	Used for bolder error messaging or interactive elements related to errors.
On Error Container	Text and icon color used on top of Error Container for optimal contrast.

Extra Colors

Extra colors provide an extended palette for situations where semantic colors aren’t appropriate. These are often used for:

Categorization: Differentiating items in lists, charts, graphs, or other data visualizations.
Product differentiation: Visually separating different products or features.
General UI elements: Styling components that don’t require a specific semantic meaning.

These colors should be used sparingly and consistently to avoid overwhelming the user with too many visual elements. Consider accessibility when choosing and combining extra colors.

Color Variation	Usage	Example Colors (Illustrative)
Base Container	Background color for containers requiring a distinct visual separation.	Pink Container, Blue Container
Base Soft	Subtler background or highlight color for a less prominent visual distinction.	Pink Soft, Blue Soft
Base	Primary color for the specific hue. Use for text, icons, or other foreground elements.	Pink, Blue
Base Bold	A darker or more saturated version of the Base color, used for emphasis.	Pink Bold, Blue Bold
On Base Container	Text and icon color used on top of the Base Container for optimal contrast.	On Pink Container, On Blue Container

Pink

Pink Container

Pink Soft

Pink

Pink Bold

On Pink Container

Violet

Violet Container

Violet Soft

Violet

Violet Bold

On Violet Container

Blue

Blue Container

Blue Soft

Blue

Blue Bold

On Blue Container

Teal

Teal Container

Teal Soft

Teal

Teal Bold

On Teal Container

Green

Green Container

Green Soft

Green

Green Bold

On Green Container

Orange

Orange Container

Orange Soft

Orange

Orange Bold

On Orange Container

Yellow

Yellow Container

Yellow Soft

Yellow

Yellow Bold

On Yellow Container

Red

Red Container

Red Soft

Red

Red Bold

On Red Container

Color copied!

Typography →