2 min Devops

Okta launches new open-source design system

Okta launches new open-source design system

The architecture of the new system stresses Okta’s core values of accessibility and inclusion, according to the company.

This week Okta launched its new design system, both for its own corporate and brand use, but also as an open-source project under the Apache 2.0 license. The new platform, Odyssey Design System, is currently in Beta. The solution is similar to the likes of Google’s Material Design or Microsoft’s Fluent Design. Accessibility for the new platform is important to Okta, and so every element of the design system being compliant with the W3’s Web Content Accessibility Guidelines.

A design system that’s “easy and accessible to all”

Brian Hansen, Okta’s SVP of Design, introduced the new system in a blog post this week. “For Okta, our brand is a reflection of and informed by our values,” he writes. “It also represents our company vision and strategy in making our products open, extensible, and simple to use.”

“It’s with these ideals that we’re proud to unveil our new brand design system,” Hansen writes. He says that Odyssey is “an accessibility-driven and open-sourced design system.” He adds that it is also “built to reflect advances we’ve made in UI, UX, and accessibility features.”

Odyssey contains a baseline set of components that engineers and designers can use to build on the Okta platform. The system is also flexible, according to Hansen. “These changes delve deep into our values.” he adds, “an insistence that our product be easy and accessible for all.”

An example of this accessibility is the inclusion of ABC Whyte, a typeface that supports over 40 languages.

Anther example is the updated Okta Dashboard. Hansen claims this is now more intuitive to use and easier to navigate on a mobile device. Users can access the Dashboard from any web browser, allowing it to be device, location, and network agnostic.

Open sourced with platform-native building blocks

Hansen also introduces the new Odyssey Design System Documentation site. This, he says, is a single source of truth for all Odyssey UI design and code documentation. That includes source code via Github for developers, as well as a Figma kit for UI/UX designers.

Hansen concludes: “This open sourced approach, predicated on the platform-first principles of Okta and combined with our high standards for inclusion, makes it easier for everyone, especially developers, to build accessibility-forward experiences—straight out of the box,”