Okta launches its new open-source design system with a focus on accessibility
Identity and access management service Okta today 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 Odyssey Design System, as the company calls it, is similar to the likes of Google’s Material Design or Microsoft’s Fluent Design. It may not have quite the same number of features, but what makes it stand out is a focus on accessibility, with every element of the design system being compliant with the W3’s Web Content Accessibility Guidelines.
Brian Hansen, Okta’s SVP of Design, told me that until now, the company didn’t really have a unified design system. Instead, it had what he called a “glorified pattern library.” And while the engineers loved it, because it allowed them to build new UIs quickly, it was hard for the team to add new patterns. “And so it was limited in what it could do,” Hansen said. “And what you ended up having to do sometimes is compromise — particularly as a designer — and kind of shove the square peg into the round hole.”
Now that Okta has moved beyond its early startup roots, though, the team decided that it was time to go back to the drawing board and build a more fully-featured design system for the company — and you may soon see it yourself in Okta’s sign-in widget, which is where most users are likely to encounter it. But it’s worth remembering that Okta, the platform, also offers a plethora of backend tools for admins that most users never see. Those admins typically want a very information-dense user experience and a design that makes it easy for them to get things done and move on. Okta’s third group of users, Hansen stressed, is developers and what matters a lot to them — in addition to all the technical details — is documentation, which has to be easily readable (from a design perspective).
As Hansen noted, though, internally, it wasn’t a realistic project to simply switch every surface area to Odyssee at once. “As a designer, you want everything to be perfect all at once. But you also have to be pragmatic and live with some things that aren’t perfect,” he acknowledged. So while the Okta brand is now getting this refresh and some of the user-facing services, it’ll take a while before every Okta service can make this move.
For the admin console, for example, Hansen’s team decided that it would take years to switch out the UI. So instead, the team opted for a bridge strategy where it created the style sheets to essentially mimic the Odyssee design. “Then we can cut over to Odyssee-native components and they’ll blend in. We can’t have a Franken app — we can’t have two different generations of UI coexisting. That to me just ruins trust. No one would be happy with that,” Hansen said.
Developers who want to give Odyssee a try for their own projects can do so and explore the different components it has to offer. And designers can try it out in Figma, too.
Identity and access management service Okta today 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 Odyssey Design System, as the company calls it, is similar to the likes of Google’s Material Design or…
Recent Posts
- macOS isn’t perfect – but every day with Windows 11 makes me want to use my MacBook full-time
- The 9 Best Drones (2024): Budget, Toys, Professional Video
- Microsoft is making Chrome’s text rendering better on Windows
- The Morning After: The Rabbit R1 starts shipping next week
- Windows 11’s next big update is almost ready to roll – but most people won’t get it for a long time yet
Archives
- March 2024
- February 2024
- January 2024
- December 2023
- November 2023
- October 2023
- September 2023
- August 2023
- July 2023
- June 2023
- May 2023
- April 2023
- March 2023
- February 2023
- January 2023
- December 2022
- November 2022
- October 2022
- September 2022
- August 2022
- July 2022
- June 2022
- May 2022
- April 2022
- March 2022
- February 2022
- January 2022
- December 2021
- November 2021
- October 2021
- September 2021
- August 2021
- July 2021
- June 2021
- May 2021
- April 2021
- March 2021
- February 2021
- January 2021
- December 2020
- November 2020
- October 2020
- September 2020
- August 2020
- July 2020
- June 2020
- May 2020
- April 2020
- March 2020
- February 2020
- January 2020
- December 2019
- November 2019
- December 2011