CURATED · OPEN · FREE

Auth0

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

01

Identity DNA

The secure, invisible foundation of digital experiences.

02

Color

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

03

Typography

grotesque-sans · humanist-sans · monospace

• display56px · 500
• heading32px · 500
• body16px · 400

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

04

Spacing

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

05

Surfaces

Subtle 1px solid borders using rgba(255, 254, 255, 0.12) for glassmorphism effects

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)

06

Layout

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

07

Motion & Interaction

Smooth color transitions on hover states · Subtle scale and opacity changes for interactive elements · Staggered fade-in for content sections

Subtle background color shifts and slight elevation changes · Immediate visual feedback with state changes

08

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.

09

Voice & Don'ts

• Tone Professional, confident, and developer-focused
• Headlines Concise, action-oriented statements emphasizing speed and ease of integration
• CTAs Direct and inviting, focusing on immediate value ('Start building for free')

• 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
• Avoid: Overly technical jargon without context
• Avoid: Passive or uncertain language
• Avoid: Excessive exclamation marks or hype
• Avoid: Dense paragraphs without clear visual hierarchy

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko