Oxygen UI : A WSO2 Design System
WSO2 has got some exciting news for you!
Your favorite technology company has just introduced a new design system that will take your experience with their products to the next level.
What is a Design System?
As companies are constantly looking for ways to streamline their product design process, one way that has gained popularity in recent years is using design systems.
A Design System is more than just design.
“A Design System is a story of how an organization designs and builds digital products.”
- Brad Frost | The Technical Side of Design Systems | UI Special, CSS Day 2019
A design system is essentially a set of reusable components, styles,
and guidelines that help designers and developers create consistent and
cohesive user interfaces across different products and platforms.Introducing Oxygen UI 🎉
WSO2, after being successfully established as an Open Source API management company for more than 15 years, has developed a unique brand and identity. Oxygen UI, as a universal design system, aims to reflect this identity through the User Interfaces of their digital offerings.
So, why should you be excited about this design system?
Well, it will help improve your experience with WSO2’s products even better. By using a consistent design system across all products, you can navigate and use them more easily. No more trying to figure out where a button is or how to use a feature — it’ll all be intuitive and straightforward as it unifies the look and feel of all the products.
What does it offer?
Three modules are introduced in version 1.0.0.
First up, primitives. Think of these as the building blocks of your design system. We’re talking colors, typography, spacing, and other basic styles you can use across all your products. By having a consistent set of primitives, design time will be reduced, and products can have that cohesive look and feel.
Next, we’ve got react components. These are pre-built UI elements like buttons, forms, and navigation menus that can be easily reused across different products.
The React Icons module has a library of pre-designed icons that you can drop into your products. Because, who has time to design new icons from scratch?
And there’s more! This design system also uses design tokens from Figma.
These are variables that define your design properties, like colors and spacing. Using design tokens, you can easily make changes to the design system without having to go in and update every single element by hand. These tokens are a means of keeping the design and the implementation in sync.
Oxygen UI provides a personalized and engaging user experience through the support of theming. This means you can customize your design system to match your product branding and style.
This design system is built on top of the Material UI framework. So you know it’s going to be reliable and scalable. It’s like the swiss army knife of React-based design systems!
In addition, using Oxygen UI leads to faster product development, where customers get access to new and improved features more quickly with improved accessibility.
As WSO2 commits to demonstrating quality and innovation in their products, a design system like this helps them achieve the primary goal of offering a consistent user experience across products such as Asgardeo and Choreo.
In conclusion, Oxygen UI is a game-changer for anyone using WSO2’s products. It provides a consistent and cohesive user experience and streamlines the design process, making it faster and more efficient. With its customizable theming options and reliance on design tokens and Material UI, Oxygen UI is a powerful design system that will take your experience with WSO2’s products to the next level.
So why not give it a try and see for yourself how it can enhance your digital offerings?