# Auth0 · Design system migration spec

> Source: https://auth0.com  ·  Curated by OpenDesign  ·  en

> Auth0 demonstrates a mature developer-focused design system that balances professional security aesthetics with excellent user experience clarity.

## 1. Identity DNA

Auth0's design system is built like a vault door: the most critical part is what you don't see. The identity language operates as the secure, invisible foundation of digital experiences, where deep neutrals and a distinctive teal accent serve as the subtle markers of professional trust.

**One-liner:** Auth0 is a comprehensive identity platform for developers, combining enterprise-grade security with an exceptional user experience.
**Keywords:** Developer Tools · Security · AI Infrastructure
**Analogy:** The secure, invisible foundation of digital experiences.

## 2. Color

The color system is anchored by a dark-first professional palette, using deep charcoal backgrounds and high-contrast whites to create a focused, low-distraction environment for developer workflows.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0D0D0D` | main background |
| `--bg-soft` | `#171717` | card background |
| `--bg-quiet` | `#111111` | quiet area |
| `--ink` | `#FFFEEF` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#8C929C` | placeholder |
| `--accent` | `#0A84AE` | single accent |
| `--line` | `rgba(255, 254, 255, 0.12)` | divider |

**Color principle:** Dark-first professional palette balancing deep neutrals with high-contrast whites and a distinctive teal accent.

The palette's discipline lies in its restraint, reserving the professional teal accent for moments of importance against a sea of functional neutrality.

## 3. Typography

Typography pairs a humanist-sans for body text with a grotesque-sans for display, creating a clear hierarchy between functional reading and impactful statements. Monospace fonts are reserved strictly for code blocks, marking a clear boundary between prose and technical references.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Primary hero headlines |
| heading | 32px | 1.2 | 500 | 0px | Section headings |
| body | 16px | 1.4 | 400 | 0.2px | General body text and descriptions |

**Type rules:**
- Use uppercase for section labels and badges
- Maintain tight line-height for large display text
- Use mono fonts strictly for code blocks and technical references

## 4. Spacing

A 4px base unit establishes all spatial relationships, creating a consistent and predictable rhythm for both vertical and horizontal composition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit with consistent multipliers for predictable vertical and horizontal rhythm.

## 5. Surfaces

Depth is communicated through subtle glassmorphism, using low-opacity borders and layered shadows rather than heavy, opaque drop shadows. This creates a sense of hierarchy without sacrificing the dark mode's visual quiet.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px -4px 40px 0px rgba(0, 0, 0, 0.16)
  - 0px 16px 24px 0px rgba(0, 0, 0, 0.25)
  - inset 0px 1px 0px 0px rgba(255, 255, 255, 0.24)
- **Borders:** Subtle 1px solid borders using rgba(255, 254, 255, 0.12) for glassmorphism effects

## 6. Layout

The layout skeleton is a centered hero section that commands attention, flanked by wide content areas. Text widths are deliberately constrained to maintain readability within the expansive dark canvas.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered hero section with wide content areas and constrained text widths for readability.

## 7. Motion & Interaction

Motion is applied with clinical precision, primarily through smooth color transitions and subtle opacity shifts on interactive elements. The philosophy is to provide immediate, unambiguous feedback for user actions without decorative animation.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth color transitions on hover states
  - Subtle scale and opacity changes for interactive elements
  - Staggered fade-in for content sections

- **Hover:** Subtle background color shifts and slight elevation changes
- **Click:** Immediate visual feedback with state changes
- **Transition:** All properties with 0.2s ease-in-out for most interactions
- **Keyboard:** Standard focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct, speaking to developers with concise, action-oriented statements that emphasize speed and clarity over hype.

- **Tone:** Professional, confident, and developer-focused
- **Headline style:** Concise, action-oriented statements emphasizing speed and ease of integration
- **CTA style:** Direct and inviting, focusing on immediate value ('Start building for free')
- **Avoid:** Overly technical jargon without context / Passive or uncertain language / Excessive exclamation marks or hype / Dense paragraphs without clear visual hierarchy

### Don'ts
- ❌ Don't use bright, saturated colors — screenshot shows dark backgrounds with subtle gradients and teal accents
- ❌ Don't use decorative serif fonts — screenshot shows clean, functional sans-serif typography
- ❌ Don't use heavy drop shadows — screenshot shows subtle glows and glassmorphism effects
- ❌ Don't center all text — screenshot shows a mix of centered hero text and left-aligned body copy
- ❌ Don't use small, cramped buttons — screenshot shows generously padded interactive elements
- ❌ Don't use complex decorative borders — screenshot shows simple 1px solid borders with low opacity

The system deliberately avoids bright saturated colors, decorative serifs, and heavy shadows, committing to a functional aesthetic where security and clarity are the primary visual currencies.

## System Prompt (paste into AI tool)

```
Auth0 is a developer-focused identity platform using a dark-mode-first aesthetic with deep charcoal backgrounds (#0D0D0D, #111111) and high-contrast white text (#FFFEEF). Typography uses humanist-sans for body and grotesque-sans for display elements, with monospace fonts reserved for code blocks. Key accent color is a professional teal (#0A84AE). Critical design constraints: avoid bright saturated colors, never use decorative serifs, maintain subtle glassmorphism effects rather than heavy shadows, use uppercase for section labels, and ensure generous spacing between interactive elements. The layout centers on dramatic hero sections with strong typographic hierarchy.
```