---
name: Auth0
description: "Auth0 demonstrates a mature developer-focused design system that balances professional security aesthetics with excellent user experience clarity."
version: alpha

colors:
  background: "#0D0D0D"
  primary: "#FFFEEF"
  secondary: "#FFFFFF"
  tertiary: "#0A84AE"
  neutral: "#8C929C"
  bg-soft: "#171717"
  bg-quiet: "#111111"
  line: "rgba(255, 254, 255, 0.12)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.2px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Auth0 is a comprehensive identity platform for developers, combining enterprise-grade security with an exceptional user experience.

*The secure, invisible foundation of digital experiences.*

## Colors

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

- **Background (`#0D0D0D`)** — uses `bg` token
- **Primary text (`#FFFEEF`)** — uses `ink` token
- **Secondary text (`#FFFFFF`)** — uses `ink-soft` token
- **Accent (`#0A84AE`)** — uses `accent` token
- **Muted (`#8C929C`)** — uses `muted` token
- **Borders (`rgba(255, 254, 255, 0.12)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* 4px base unit with consistent multipliers for predictable vertical and horizontal rhythm.

## Elevation & Depth

- 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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** High-contrast primary buttons with white backgrounds and dark text; secondary buttons with transparent backgrounds and subtle borders.
- **card:** Dark glassmorphism cards with subtle inner glows and rounded corners.
- **chip:** Small uppercase badges with thin borders and semi-transparent backgrounds.
- **input:** Clean dark input fields with subtle borders and rounded corners.
- **hero:** Large dramatic hero with gradient background, centered typography, and prominent call-to-action buttons.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```