Okta DESIGN.md

Identity-platform design with clear blue actions, neutral enterprise surfaces, and accessibility-first structure. Okta’s Odyssey system aims for consistency, efficiency, and trust across authentication, admin, and security workflows.

1. Visual Theme & Atmosphere

Overall Aesthetic

Okta expresses security through clarity. The system feels modern but restrained, emphasizing readability, reliable interaction, and low-friction task completion. The UI should never distract from the seriousness of identity and access work.

Mood & Feeling

• Trusted: stable, credible, and predictable
• Accessible: built with explicit usability goals
• Enterprise-clear: practical hierarchy and strong layout logic
• Modern: current, but not trend-driven
• Calm under complexity: dense settings and flows still feel manageable

Design Density

Medium density. Okta apps often contain forms, security settings, policies, and org configuration, but Odyssey keeps them readable with spacing discipline and repeatable panels.

Visual Character

• Blue-led interactive color model
• White and cool-neutral structural surfaces
• Rounded but not playful component geometry
• Clear validation and state treatment
• Strong emphasis on consistency across flows

2. Color Palette & Roles

Core Interaction Colors

Neutral Foundation

Semantic Colors

Color Usage Rules

• Use blue consistently for primary interaction.
• Use neutrals to hold most of the interface structure.
• Semantic colors should only appear when state meaning is explicit.

3. Typography Rules

Font Stack

css/* Odyssey-style UI typography */
--font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

Okta typography should feel safe, practical, and easy to scan. It supports sign-in, policy, and account-management flows where users need confidence and orientation more than style.

Practical Rules

• Keep labels short and explicit.
• Use typographic hierarchy to make multi-step flows obvious.
• Preserve generous line height in explanatory security content.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #1662DD;
  color: #FFFFFF;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #1662DD;
  border-radius: 8px;
  font: 600 14px/1 Inter, sans-serif;
}

.button-primary:hover {
  background: #0F4FBF;
  border-color: #0F4FBF;
}

.button-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 98, 221, 0.14);
}

Secondary Button

css.button-secondary {
  background: #FFFFFF;
  color: #0F172A;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #DCE3EA;
  border-radius: 8px;
}

.button-secondary:hover {
  background: #F8FAFC;
}

Danger Button

css.button-danger {
  background: #DC2626;
  color: #FFFFFF;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  background: #FFFFFF;
  color: #0F172A;
  border: 1px solid #DCE3EA;
  border-radius: 8px;
  font: 400 14px/1.2 Inter, sans-serif;
}

.input:focus {
  outline: none;
  border-color: #1662DD;
  box-shadow: 0 0 0 3px rgba(22, 98, 221, 0.14);
}

.input::placeholder {
  color: #64748B;
}

Auth Input Group

css.input-label {
  display: block;
  margin-bottom: 8px;
  color: #0F172A;
  font: 600 14px/1.3 Inter, sans-serif;
}

.input-help {
  margin-top: 8px;
  color: #64748B;
  font: 400 12px/1.4 Inter, sans-serif;
}

Cards and Identity Panels

Standard Card

css.card {
  background: #FFFFFF;
  border: 1px solid #DCE3EA;
  border-radius: 16px;
  padding: 20px;
}

Auth Panel

css.auth-panel {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

5. Layout Principles

Spacing Scale

Layout Rules

• Group identity tasks into clear panels and progressive steps.
• Keep the primary action visually obvious at every stage.
• Use repeated settings and policy layouts to reduce learning cost.
• Preserve stable left-aligned flow in admin-heavy screens.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-card {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}

.shadow-overlay {
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.14);
}

Depth Rules

• Use subtle depth to guide focus, not to decorate.
• Keep cards quiet and dialogs clearly elevated.
• Never let shadows compete with important validation or action states.

7. Do's and Don'ts

Do

• Use blue consistently for primary interaction.
• Keep security and identity flows explicit and reassuring.
• Reuse Odyssey patterns across similar screens.
• Make validation and state changes easy to understand.

Don't

• Overdecorate auth or admin flows.
• Split similar settings screens into unrelated visual patterns.
• Use semantic colors casually.
• Hide the primary action inside dense control clusters.

8. Responsive Behavior

Responsive Rules

• Collapse multi-panel settings layouts into simple vertical stacks.
• Keep auth flows single-column and touch-friendly.
• Preserve helper and validation text near the input it explains.
• Maintain clear CTA hierarchy even when buttons wrap.

Mobile Character

Okta mobile should still feel secure, calm, and efficient. The UI may simplify, but trust and action clarity should remain the dominant experience.

9. Agent Prompt Guide

Quick Reference

• Mood: trusted, accessible, enterprise-clear
• Primary accent: Okta blue #1662DD
• Layout: card-driven identity and security workflows
• Components: rounded enterprise controls, auth panels, high-clarity validation

Prompt Snippet

textDesign this interface in the style of Okta’s Odyssey design system. Use Okta blue (#1662DD) for primary interaction, neutral enterprise surfaces, accessible form and validation patterns, and clear card-based identity workflows. The result should feel secure, modern, and highly consistent rather than decorative.