Why Brand = Values + Product. Introducing Okta's New Design System
What exactly is a brand? While its origins began with a physical mark of ownership, the 20th century morphed the word into something much more desirable: a name brand, recognised as a mark of quality. In only the last few years, this term has changed again. From persons declaring themselves a brand for commerce or job creation, to the traditional connection with a company, it’s become a reflection of much more than a logo, slogan, or colour palette. Today, the best brands inspire an emotional connection. They convey a personality, and appeal to a person’s gut feeling about the product, service, or organisation.
For Okta, our brand is a reflection of and informed by our values. It also represents our company vision and strategy in making our products open, extensible, and simple to use. We are the world’s leading independent and neutral identity platform, and we build for real people. We put people at the centre of everything we do. By these standards, our brand can never be static—it will always necessitate change.
It’s with these ideals that we’re proud to unveil our new brand design system, and as part of that introduce Odyssey, an accessibility-driven and open-sourced design system, 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, and is architected to be flexible. These changes delve deep into our values: an insistence that our product be easy and accessible for all.
The inspiration behind our new design
Okta’s new look is inspired by the layers of information and intricacy found in global currency. This aesthetic borrows on timeless signifiers of identity and security: from the rich colors and concreteness of paper bills to the elegant inclusivity of ABC Whyte, a typeface that supports over 40 languages. The new design consists of a visual layering of typography, pattern, imagery, and color that hold cultural associations with trust and confidence.
Made up of many components, all working together to create a distinctive aspect, it is deliberately flexible, capable of being both loud and quiet, simple and complex, familiar and surprising.
With our new design in mind, we’ve started to enhance our product. The most recent example being the updated Okta Dashboard, now more intuitive to use and easier to navigate on a mobile device. Plus, it can be accessed from any web browser, allowing the Dashboard to be device, location, and network agnostic.
New fonts and colours increase the aesthetic experience, but the choices we’ve made do more than that. Along with visual appeal, they are WCAG AA compliant, a standard we take more than seriously and hold ourselves accountable to, helping to advance our goal of inclusive and accessible experiences. And it’s Odyssey that served as the building blocks to bring it all together.
Why Odyssey equals inclusion
Accessibility-driven and open-sourced, the Odyssey design system aims to bring a consistent design model to building with the Okta platform. Often overlooked in “tech inclusion” conversations, accessibility is an issue for more than a billion people who suffer from disabilities, globally, according to the Web Accessibility Initiative. Accessibility considerations allow for improved digital experiences for all users of technology, not just an able-bodied majority. Conscious design can help to solve a host of accessibility challenges, from optimal colour contrasts, to device responsiveness, to assistive technologies.
Here’s a detailed look:
- Every element delivered in Odyssey is compliant with WCAG 2.1 AA.
- Accessibility details include better colours, contrast, shapes, and an overall improved UI experience, as well as assistive technologies like screen readers for the vision impaired.
- With key A11Y features built-in throughout, all of the design system components are out of the box responsive.
Open sourced and platform-native building blocks for all
Building iconic brands and products today begins with an intentional and unified design system that designers, developers and many more disciplines can all benefit from.
The new Odyssey Design System Documentation site is designed to be a single source of truth for all Odyssey UI design and code documentation, from source code via Github for developers, to a Figma kit for UI/UX designers. 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.
This evolution starts now
At Okta, our intent is to be transparent, independent and neutral, made actionable through the ruthless support of neutrality and freedom of choice. Starting with the new Okta Dashboard, the Odyssey design system is in its initial steps toward enabling anyone to safely use any technology. We’re excited for the Okta community to follow along as it evolves. This is just the beginning.
