Painting the Wheels of a Moving (opens in new tab)

Toss Design System (TDS) underwent its first major color system overhaul in seven years to address deep-seated issues with perceptual inconsistency and fragmented cross-platform management. By transitioning to a perceptually uniform color space and an automated token pipeline, the team established a scalable infrastructure capable of supporting the brand's rapid expansion into global markets and diverse digital environments.

Legacy Issues in Color Consistency

• Uneven luminosity across hues: Colors sharing the same numerical value (e.g., Grey 100 and Blue 100) exhibited different perceptual brightness levels, leading to "patchy" layouts when used together.
• Discrepancies between Light and Dark modes: Specific colors, such as Teal 50, appeared significantly more vibrant in dark mode than in light mode, forcing designers to manually customize colors for different themes.
• Accessibility hurdles: Low-contrast colors often became invisible on low-resolution devices or virtual environments, failing to meet consistent accessibility standards.

Technical Debt and Scaling Barriers

• Interconnected palettes: Because the color scales were interdependent, modifying a single color required re-evaluating the entire palette across all hues and both light/dark modes.
• Fragmentation of truth: Web, native apps, and design editors managed tokens independently, leading to "token drift" where certain colors existed on some platforms but not others.
• Business expansion pressure: As Toss moved toward becoming a "super-app" and entering global markets, the manual process of maintaining design consistency became a bottleneck for development speed.

Implementing Perceptually Uniform Color Spaces

• Adopting OKLCH: Toss shifted from traditional HSL models to OKLCH to ensure that colors with the same lightness values are perceived as equally bright by the human eye.
• Automated color logic: The team developed an automation logic that extracts accessible color combinations (backgrounds, text, and assets) for any input color, allowing third-party mini-apps to maintain brand identity without sacrificing accessibility.
• Chroma Clamping: To ensure compatibility with standard RGB displays, the system utilizes chroma clamping to maintain intended hue and lightness even when hardware limitations arise.

Refined Visual Correction and Contrast

• Solving the "Dark Yellow Problem": Since mathematically consistent yellow often appears muddy or loses its "yellowness" at higher contrast levels, the team applied manual visual corrections to preserve the color's psychological impact.
• APCA-based Dark Mode optimization: Utilizing the Advanced Perceptual Contrast Algorithm (APCA), the team increased contrast ratios in dark mode to compensate for human optical illusions and improve legibility at low screen brightness.

Designer-Led Automation Pipeline

• Single Source of Truth: By integrating Token Studio (Figma plugin) with GitHub, the team created a unified repository where design changes are synchronized across all platforms simultaneously.
• Automated deployment: Designers can now commit changes and generate pull requests directly; pre-processing scripts then transform these tokens into platform-specific code for web, iOS, and Android without requiring manual developer intervention.

The transition to a token-based, automated color system demonstrates that investing in foundational design infrastructure is essential for long-term scalability. For organizations managing complex, multi-platform products, adopting perceptually uniform color spaces like OKLCH can significantly reduce design debt and improve the efficiency of cross-functional teams.