top of page
COLOR TOKEN CONCEPT OF IU

ROLE

In close collaboration with another UX designer, I contributed to the development of a thoughtful and scalable color token framework.
My key responsibilities included:

  • Auditing and organizing existing color usage across products

  • Defining a clear and extensible naming convention for tokens

  • Introducing a gradation system (e.g., lowest to highest) for visual flexibility

  • Establishing brand-specific mode tokens to support multiple color themes

​

OVERVIEW

As part of a broader design system initiative, this project focused on building a scalable and flexible color token architecture
to support multi-brand theming, accessibility, and consistent UI patterns. The system was designed to handle dynamic color changes
across different components, brands, and modes (light/dark), using a structured naming convention and functional gradation levels.

Group 68 (1)_edited.jpg

PROCESS

🎨 Audit Existing Colors

  • Review all current product colors (UI, brand, accessibility).

  • Identify inconsistencies and overlaps.

  • Group similar colors into functional categories (e.g., primary, neutral, accent, success, error).
     

🧠 Define Functional Color Roles:
    Assign each color a clear role:

  • Backgrounds

  • Content (text)

  • Borders

  • Interactive (buttons, states)

  • Decorative (accents, illustrations)

  • Define variants like primary, neutral, error, etc.
     

🏗️ Create the Token Naming Structure

  • Establish a scalable naming convention, usually in layers:
    category.property.variant.state.gradation
    Example: color.background.accent.default.low
     

🌈 Build the Core Palette

  • Define a base palette (e.g., grayscale, brand colors).

  • Apply different gradation levels: lowest, low, default, high, highest.

  • Ensure enough contrast for accessibility (especially for text and backgrounds).
     

🔁 Map Tokens to Values

  • Connect functional token names to specific color values.

  • Example:
    background-deco-accent-default-low → #FDE8E8
     

⚙️ Implement in Code

  • Add tokens to your design system (e.g., Figma styles, design tokens JSON, CSS variables).

  • Ensure tokens work across themes, brands, and dark/light modes.
     

📐 Test & Iterate

  • Apply tokens in components and screens.

  • Test in different themes and UI states.

  • Get feedback from designers and developers, then refine.

Vibrant Neon Color System

To reflect a youthful and academic spirit, the UI uses a spectrum of six neon primary colors, inspired by highlighter pens. These colors are treated equally—no color coding or prioritization—and are applied consistently across all media.

​The neon colors are used with a clear visual hierarchy. At the top level, they are applied to high-impact elements such as highlight headlines, campaign banners, intro cards, USPs, and testimonial borders. At the secondary level, lighter color variations are used for highlight headlines, cards, banners, and chips. At the third level, even lighter tones are used for larger surfaces like background sections, banners, or split heroes, where minimal emphasis is needed.​
 

Color - purpose of use and accessibility
Color - purpose of use and accessibility-1
Color - purpose of use and accessibility-2
IU International University of Applied Sciences: About

Background Color Tokens with Graduation

Our color token system uses gradation levels to provide flexible background options with different intensities.
Each token name is made up of three parts:

  background-[type]-[variant]-[gradation]

  1. Type: How the color is used (e.g. static, deco)

  2. Variant: The color family or purpose (e.g. neutral, accent-1)

  3. Gradation: The intensity of the color (lowest, low, default, high, etc.)
     

​Example

  • background-deco-accent-1-lowest → very light red

  • background-deco-accent-1-default → standard red

  • background-deco-accent-1-high → darker red

This naming helps us apply consistent background colors and easily adjust the strength of color across UI components.

gradation.png

To support the IU Brand's six core page colors, we introduced a "Modes" layer within the token system. These colors are used with consistent intent across designs, and the Modes layer allows us to dynamically switch between them. By abstracting brand colors into mode tokens, we enable flexible, centralized control over color application.

Mode tokens are referenced in key design variables such as:

  • background-deco-accent-lowest

  • background-deco-accent-low

  • background-deco-accent-default

  • background-deco-accent-high

  • background-deco-accent-highest

  • content-deco-accent-default

  • border-deco

  • accent-default

  • background-action-accent-hover

With this structure, any element using these tokens can seamlessly adapt to all six IU Brand colors—supporting scalable theming and improving maintainability across the system.

IU Brand Modes

place your components here.png

Color Token Naming Convention

To support scalability and cross-brand consistency, we established a structured naming convention for color tokens within our design system. The convention is divided into three main parts: Namespace, Base, and Modifier—each representing a specific layer of meaning and functionality.
 

1. Namespace

This section identifies the system and brand context:

  • System Name: Defines the overarching design system (e.g., shared tokens across platforms).

  • Brand: Specifies the brand identity (e.g., IU, Ufred, LIBF, Copilot),
    allowing color tokens to be reused or overridden
    for brand-specific theming.
     

2. Base

The base layer categorizes the core attributes of a token:

  • Category: The type of design property—such as color, font, radius, or spacing.

  • Property: The application area of the color—background, content, or border.

  • Invariability: The functional usage—static, action, or deco (decoration/accent),
    enabling logical grouping by purpose.
     

3. Modifier

Modifiers add nuance and state-specific meaning:

  • Variant: Functional context (e.g., primary, secondary, neutral, error, accent, info).

  • Scale: Allows for scalable values when needed (e.g., 1, 2, etc.).

  • State: Interaction or status-specific styling (e.g., hover, pressed, disabled, focus).

  • Gradation: Controls depth or emphasis through value gradation
    (e.g., lowest, low, high, highest, default, inverted).
     

Example

A token like IU.color.background.deco.accent-default.lowest would represent:

  • Brand: IU

  • Category/Property: Color used in background

  • Invariability: Decorative usage

  • Variant: Accent default

  • Gradation: Lowest emphasis
     

This structured approach ensures that every token is predictable, scalable, and brand-agnostic, while remaining flexible enough to support multiple themes, interaction states, and component roles. It also allows designers and developers to collaborate using a shared, intuitive vocabulary.

table token naming.png

Key Takeaways & Conclusion

✅ 1. Clear Naming = Easy Use

The structured token names make it simple for designers and developers to understand and apply colors consistently.

🎨 2. Gradation Enables Flexibility

Using levels like lowest, low, default, and high allows you to adjust color intensity for different UI needs—like subtle backgrounds or strong accents.

🔄 Scalable and Theme-Ready

Tokens are abstracted, so you can easily switch themes or brand colors without changing the design code—just update the values behind the tokens.

bottom of page