Nim, the Okta Design System

Type

Okta’s typography system is designed for clarity in readability and hierarchy.

Hierarchy

Typographical hierarchy indicates importance of content. Through size and weight, a strong hierarchy can provide clarity to a user to easily understand which level of the content they’re on. Sections need subsections, and those subsections may also need their own subsections. Visually, a user should be able to clearly tell a parent section from a child section simply by the relationship in size and weight between headings.

Type Styles

To ensure consistency in typography sizes throughout Okta touchpoints, we’ve created a custom type scale paired with appropriate weights and line-heights.

Titles

Titles are used to describe the main idea of a page, a section, or content that follows it. By default, header tags (h1 through h6) use the corresponding title size.

Variable rem px Example
$size-title-1 Waltz, bad nymph, for quick jigs vex!
$size-title-2 Waltz, bad nymph, for quick jigs vex!
$size-title-3 Waltz, bad nymph, for quick jigs vex!
$size-title-4 Waltz, bad nymph, for quick jigs vex!
$size-title-5 Waltz, bad nymph, for quick jigs vex!
$size-title-6 Waltz, bad nymph, for quick jigs vex!

Body

Odyssey ships with a base font of 14px. However there are times when different sizes are required.

Variable rem px Example
$size-body-sentence Waltz, bad nymph, for quick jigs vex!
$size-body-base Waltz, bad nymph, for quick jigs vex!
$size-body-caption Waltz, bad nymph, for quick jigs vex!

Weight

In order to maintain consistency across browsers and typefaces, we specify weights by their numbered value, not name. Currently, the following weights are available:

Weight Example
font-weight: 400 Normal (Book) 400
font-weight: 600 Bold (Medium) 600

Line length

For inline and block level content, the line length should be 50 to 75 characters long. In order to facilitate consistency across designs, max-width: $max-line-length can be helpful.

Heading implementation

When constructing a component or page, always start with h1 for the topmost level of hierarchy.

Do not rely on heading elements for styling purposes; instead use classes like .page--title to style component headings.

Following these guidelines will ensure a clean document outline, which will increase both SEO performance and accessibility.

Further reading

Components referenced