Auth0 DESIGN.md

Identity and authentication platform with a clean enterprise aesthetic — dark navy brand, orange accents, and security-infrastructure UI patterns.

1. Visual Theme & Atmosphere

Auth0 (by Okta) is enterprise identity infrastructure. The design communicates trust, scale, and technical depth. A dark navy brand anchors the visual identity, punctuated by an orange accent that brings energy and highlights key developer actions. Documentation and dashboards are clean and information-dense without feeling bureaucratic. The Universal Login page — the most-seen Auth0 UI — is pristine white and conversion-optimized.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', 'Aeonik', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 15px;
--font-size-md: 17px;
--font-size-lg: 22px;
--font-size-xl: 30px;
--font-size-2xl: 40px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-base: 1.5;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #EB5424;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #C94519; }

/* Universal Login Form */
.login-form {
  background: #FFFFFF;
  border: 1px solid #DDE1EB;
  border-radius: 8px;
  padding: 40px 36px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.login-form__logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-form__title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1F36;
  text-align: center;
  margin-bottom: 24px;
}

/* Input */
.input {
  border: 1.5px solid #DDE1EB;
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 15px;
  color: #1A1F36;
  background: #FFFFFF;
  width: 100%;
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: #EB5424;
  box-shadow: 0 0 0 3px rgba(235,84,36,0.12);
}

/* Social Login Button */
.button-social {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #FFFFFF;
  border: 1.5px solid #DDE1EB;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #1A1F36;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.button-social:hover {
  border-color: #9AA5B1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Tenant Card */
.tenant-card {
  background: #FFFFFF;
  border: 1px solid #DDE1EB;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tenant-card:hover {
  border-color: #EB5424;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* Status Badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}
.status-badge--active { background: rgba(34,197,94,0.1); color: #16A34A; }
.status-badge--error { background: rgba(239,68,68,0.1); color: #DC2626; }

5. Layout Principles

6. Depth & Elevation

css.shadow-login { box-shadow: 0 4px 24px rgba(0,0,0,0.07); }
.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.shadow-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.12); }

7. Do's and Don'ts

Do:

• Keep the Universal Login form centered at max 400px width
• Show social login buttons with provider logos at a consistent 20px size
• Use the orange accent for primary CTAs and focus rings
• Navy dark surfaces (#16214D) for hero sections and the sidebar

Don't:

• Don't mix orange (primary) with red (error) in close proximity
• Don't add marketing copy inside the login form — keep it conversion-focused
• Don't use the navy brand color for text on white backgrounds

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Auth0 — enterprise identity and authentication platform.
Primary brand orange (#EB5424) for CTAs, input focus rings, and hover borders.
Dark navy (#16214D) for hero sections, sidebars, and marketing backgrounds.
The Universal Login form is white, centered, max 400px, with subtle border and shadow.
Social login buttons are white with 1.5px borders and provider logos.
Status badges use semantic pill styles: green=active, red=error.
Typography is Inter at 15px base; monospace for all tokens and config values.
Tone is enterprise-trustworthy, security-forward, and developer-approachable.