Ørsted Design System - Oxygen
Design tokens • Atomic design • Developer collaboration • Workshop
Oxygen is Ørsted’s design system, created to bring consistency across internal applications while improving efficiency and reducing redundancy in both design and development. As the product manager and lead designer, I spearheaded this initiative, working with a small team to create a scalable system that enables faster design and development. Oxygen has attracted considerable attention from Ørsted’s design and frontend teams, enhancing processes and boosting product quality.
01
The challenges in Ørsted
Prior to Oxygen, Ørsted’s internal applications were developed and designed in silos, meaning there was no shared design language or reusable components across teams. This lack of cohesion meant that every new project required a full build from the ground up, leading to slow product development, inconsistencies between applications, and increased costs. Design processes were largely left to individual designers, with only a few colors, fonts, and icons available. However, there was no shared component library, creating unnecessary pressure on both designers and developers.
Recognizing the inefficiencies caused by this fragmented process, I pushed for the development of a unified design system—Oxygen.
02
Goals of Oxygen Design System
The primary goal of Oxygen was to reduce the workload on designers and developers by providing reusable components, enabling faster and more efficient design and development. A single source of truth was crucial, allowing Ørsted’s teams to design and build applications with greater consistency while ensuring flexibility to adapt to future needs, such as changes to the company’s visual identity.
By integrating design tokens, we ensured scalability, easy adaptation to design changes, and a streamlined process for both design and code teams. This approach not only improved consistency but also increased speed, allowing product teams to focus on more critical aspects of their projects.
Given Ørsted’s focus on becoming more efficient due to challenging market conditions, Oxygen became a crucial part of this effort, aligning perfectly with the company’s broader efficiency goals.
03
Scope and Implementation
The Oxygen design system was built to encompass most internal applications at Ørsted, with the goal of creating a consistent user experience across various applications and devices.
Working in a small, tight-knit team consisting of myself and two developers, we collaborated closely to design and develop components using an iterative and synchronous process. We employed the principles of atomic design, essential for handling design tokens, which allowed for the modularity needed to adapt components as Ørsted’s needs evolve over time.
In addition to building the core system, we implemented a flexible theming structure across multiple levels, enabling designers to adjust accents and appearances, including light, dark, and high-contrast modes. This allowed for better accessibility and adaptability across different contexts and products.
Beyond development, we focused on enabling the broader design and development teams to easily integrate Oxygen into their workflows. To this end, we conducted workshops and training sessions, demonstrating how to use the system effectively and fostering adoption throughout the organization.
This prompt interface illustrates how we designed Oxygen to be both flexible and consistent — capable of supporting new interaction patterns like natural-language commands while maintaining a unified look and feel across products.
Ensuring this level of adaptability was one of our key challenges. We needed a system that could evolve as user needs and technologies changed, without sacrificing coherence. To achieve this, we structured Oxygen using atomic design principles, making components reusable and scalable. Design tokens ensured visual consistency across both design and code, allowing us to easily adjust styling as new UI patterns — such as this command prompt — were introduced.
To drive adoption, we held regular workshops and feedback sessions with designers and developers, helping teams understand how to extend the system for new use cases like this one.
04
The Impact of Oxygen
The introduction of Oxygen had a profound impact on Ørsted’s design and development processes. Designers were able to significantly reduce the time spent on repetitive tasks, thanks to ready-made components that could be easily customized. Developers benefited from the same consistency, as they could access these components directly from Ørsted’s JFrog Artifactory, ensuring seamless integration between design and development. Today, Oxygen is deployed and actively used by more than 50 teams across the organization.
Starting a new project became much faster, with typography, colors, and other assets readily accessible from the system. This speed and consistency resulted in cost savings and a more cohesive user experience.
Feedback from the design and frontend community was overwhelmingly positive, with many commenting on how much easier their work had become. Communication channels facilitated ongoing enhancements to Oxygen, allowing us to incorporate feedback from our users, recognizing that there was always room for improvement.
