Okta Odyssey Design System

# Odyssey — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: medium
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/okta-odyssey
sources:
  - https://odyssey-storybook.okta.design/
  - https://github.com/okta/odyssey
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Okta. "Odyssey" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Odyssey
**Owner:** Okta
**Official documentation:** https://odyssey-storybook.okta.design/
**Visual character:** Identity-security sobriety: MUI bones under Okta indigo, deliberately dark semantic tones, and flows hardened for login-page trust.

---

## Summary

Okta's accessible design system of MUI-based React components and design tokens for building Okta product UIs.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Field-level evidence: 0/75 claims source-linked, 0/75 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=okta-odyssey)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Okta Blue / Primary | `#546be7` | `--odyssey-color-primary-500` | Primary actions and focus |
| Text | `#1d1d21` | `--odyssey-color-gray-900` | Primary text |
| Secondary Text | `#6e6e78` | `--odyssey-color-gray-600` | Secondary text |
| White | `#ffffff` | `--odyssey-color-white` | Surfaces |
| Gray 50 | `#f4f4f4` | `--odyssey-color-gray-50` | Subtle background |
| Border | `#d7d7dc` | `--odyssey-color-gray-200` | Borders |
| Danger Red | `#951800` | `--odyssey-color-danger-500` | Errors |
| Success Green | `#00701c` | `--odyssey-color-success-500` | Success |
| Warning | `#a16c03` | `--odyssey-color-warning-500` | Warnings |

## Typography

- **Body:** Aeonik / Inter — weights 400, 500, 600 — `Aeonik, Inter, -apple-system, 'Segoe UI', sans-serif`
- **Mono:** Inconsolata — weights 400 — `Inconsolata, SFMono-Regular, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-1 | `32px` | `40px` |
| heading-3 | `22px` | `28px` |
| heading-5 | `16px` | `24px` |
| body | `14px` | `20px` |
| caption | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `6px` |
| large | `12px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| overlay | `0 4px 12px rgba(29,29,33,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `100ms linear` |

## Quick start (CSS)

```css
/* Odyssey — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://odyssey-storybook.okta.design/
   Field evidence: https://www.designsystems.one/api/style-spec?system=okta-odyssey */

:root {
  /* Color */
  --odyssey-color-primary-500: #546be7; /* Primary actions and focus */
  --odyssey-color-gray-900: #1d1d21; /* Primary text */
  --odyssey-color-gray-600: #6e6e78; /* Secondary text */
  --odyssey-color-white: #ffffff; /* Surfaces */
  --odyssey-color-gray-50: #f4f4f4; /* Subtle background */
  --odyssey-color-gray-200: #d7d7dc; /* Borders */
  --odyssey-color-danger-500: #951800; /* Errors */
  --odyssey-color-success-500: #00701c; /* Success */
  --odyssey-color-warning-500: #a16c03; /* Warnings */

  /* Typography */
  --font-body: Aeonik, Inter, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: Inconsolata, SFMono-Regular, Consolas, monospace;

  /* Type scale */
  --text-heading-1: 32px; /* line-height 40px */
  --text-heading-3: 22px; /* line-height 28px */
  --text-heading-5: 16px; /* line-height 24px */
  --text-body: 14px; /* line-height 20px */
  --text-caption: 12px; /* line-height 16px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-default: 6px;
  --radius-large: 12px;

  /* Elevation */
  --shadow-overlay: 0 4px 12px rgba(29,29,33,0.15);

  /* Motion */
  --motion-default: 100ms linear;
}
```

## Engineering profile

- **Ships for:** React
- **Source model:** Open source
- **Figma:** Official Figma kit

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Odyssey by Okta — Okta's accessible design system of MUI-based React components and design tokens for building Okta product UIs. Character: Identity-security sobriety: MUI bones under Okta indigo, deliberately dark semantic tones, and flows hardened for login-page trust. Use a primary colour near #546be7, the typeface "Aeonik / Inter" (or a close equivalent), corner radius around 6px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Odyssey documentation](https://odyssey-storybook.okta.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/okta-odyssey) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._