Product goal
Mission and Role
DSM 7.0, the operating system for Synology NAS, was released in 2021. As user interface trends evolve and the company continues expanding toward enterprise-level products, DSM 8.0, the next-generation NAS operating system, is planned for release in 2026. In this project, I served as one of the UI redesign proposal contributors, collaborating with the team to define rebranding keywords and develop a refreshed visual direction. I also contributed to the color system updates, introducing Dark Mode and High Contrast Mode to make the interface more inclusive and adaptable to diverse user needs.
DSM 7.0 UI Style
Current DSM 7 Desktop and File Station Interface
Workshop
Design Process
Before starting the interface design for DSM 8.0, we conducted a brand keyword workshop for Synology. Together with 3–5 designers, we brainstormed ideas and used AI to consolidate around 50 brand keywords. From these, we proposed potential brand taglines and curated moodboard images to guide discussion. The process ultimately defined the key visual directions for DSM 8.0: Intuitive, Flexible & Innovative, and Balanced.
UI Concept
Design Process
Guided by the visual directions defined in the workshop, the DSM 8.0 redesign centered around three themes: Intuitive, Flexible, and Balanced. We refined the desktop toolbar, widgets, and application windows to align with these values. To enhance Intuitiveness, we improved the visual hierarchy and contrast of key information. To convey Flexibility, we introduced subtle transparency for a more open and dynamic feel. To achieve Balance, we adjusted the color palette, creating a visual tone that feels elegant yet stable.
Color Refinement
Design Process
As part of the DSM 8.0 redesign, I led the color palette refinement to create a calmer, more balanced tone that aligned with the workshop’s key themes of safety, stability, and balance. The new palette was also reviewed alongside other internal Synology services to ensure a cohesive yet distinctive color direction. In addition, the color hierarchy was optimized — chromatic steps were consolidated to 10 levels, supporting both Dark Theme and High Contrast Mode in compliance with WCAG standards. Each step’s lightness value was calibrated using the OKLCH color model to maintain consistent brightness relationships across different states.
Color Refinement
Design Process
Redesigning the gray palette was particularly challenging because many components relied on grayscale tokens. We first expanded the semantic tokens to trace their linked primitive colors, identifying overlapping or unnecessary levels. The palette was then refined and unified into 16 grayscale steps to meet Dark Theme requirements. Each step’s contrast ratio was carefully adjusted — darker tones received higher contrast to account for the human eye’s lower sensitivity to differences in dark shades.
Color Refinement
Design Process
Once the color and gray palette structures were refined, the updates were implemented in Figma’s Color Token Variables. With this setup, designers can easily toggle Dark Mode in one click to preview and verify the appearance of their designs.
Next project
