The introduction of themes allows users to fully customize the visual interface of their desktop and mobile applications beyond standard settings. While all users can choose from a set of basic palettes, Nitro subscribers are granted a much larger library of options and the ability to design their own color schemes. This update aims to make high-level UI personalization accessible and straightforward for the entire user base.
**Theme Availability and Subscription Tiers**
* All users have access to four default color themes regardless of their subscription status.
* Nitro members receive an expanded library of 28 additional color themes to further personalize their experience.
* Subscribers also gain the exclusive ability to build and implement their own custom themes from scratch.
**Cross-Platform UI Implementation**
* The feature is fully supported across both desktop and mobile platforms, ensuring a consistent aesthetic vibe.
* Applying a new theme is integrated directly into the existing appearance settings, functioning identically to the standard toggle between Light and Dark modes.
* The interface is designed for simplicity, allowing users to transition from classic modes to colorful presets with minimal navigation.
To refresh your app's look, head to the appearance settings menu where you can experiment with the new color presets or, if you are a Nitro member, begin crafting a custom aesthetic that matches your personal style.
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.
discord 
