Tokens

Tokens

Content

Used for body content, including text, icons, and borders. Ensures readability and contrast in UI elements.

Token structure

Examples:

Variables in Figma:

Level

Defines the background and surface colors of layouts. It helps in establishing depth and hierarchy.

Token structure:

Examples:

Variables in Figma:

3. Interaction

Provides color definitions for interactive components such as buttons, links, and hover states.

Interaction Types

There are two types of interactive elements:

• Containers: Boxed shape components such as buttons.
• Links: Text-based interactive elements such as inline or standalone links.

a - Container Tokens

For containers, Nova Tycho provides two sets of tokens:

• High contrasted: Used for primary and critical actions.
• Low contrasted: Used for secondary and tertiary actions.

Although not the primary intention, these token sets allow you to recreate buttons with four levels of emphasis: high, medium, low, and lower.

Additionally, within the container group, there are two main variations:

• Branded Set: Uses interactive colors specific to the theme, such as orange in the Spark theme and petrol in the Ocean theme.
• Neutral Set: A gray-based interactive button is ideal for secondary actions requiring a more subtle appearance.

b - Link Tokens

The link token groups define the appearance of inline links and standalone links, ensuring clear distinction and accessibility.

---

Token structure:

• Branded button-like component:

• Neutral button-like component:

• Link component:

Examples:

Example of use in HTML:

Variables in Figma:

Feedback

The feedback tokens are grouped based on their communication purpose, ensuring clarity and consistency when conveying different types of messages. These groups include:

• Information: Used for general notices and informative content.
• Warning: Indicates cautionary messages.
• Error: Highlights critical issues and errors.
• Neutral: Used for non-critical system messages.
• Success: Communicates positive outcomes and confirmations.

Each of these categories is available in two contrast levels:

• High Contrast: Ensures maximum visibility and emphasis.
• Low Contrast: Provides a more subtle, less intrusive presentation.

Token structure:

Examples:

Chart

Designed for visual data representation such as graphs, charts, and analytics.

Token structure:

Rainbow

Used for randomly assigned colors, such as avatars or category markers.

Token structure:

Inverted tokens

Additionally, a set of inverted tokens for the content, level, and link clusters allows designers to create content with inverted colors. This is particularly useful for specific sections such as footers or highlighted content blocks.

Token structure:

• Inverted content :

• Inverted level :

• Inverted link :

Examples: