Switch between the rendered Visual preview and the Raw DESIGN.md.
Auth0's design system embodies a sophisticated, tech-forward aesthetic rooted in trust and security. The visual language combines deep, premium darkness with crisp, clean typography and purposeful accent colors that guide attention toward critical actions. The design feels modern yet approachable, balancing technical complexity with elegant simplicity. Layered depth through subtle inset shadows and carefully orchestrated contrast creates a sense of refinement and professionalism. The color palette shifts between rich purples, cool teals, and neutral tones, establishing a premium security-focused brand identity that instills confidence in developers and enterprises alike.
Key Characteristics
#0A84AE): Primary call-to-action elements, links, interactive highlights, and brand emphasis. Most frequently used across the system for driving user attention.#99A7F1): Secondary interactive elements, gentle focus states, and supporting accent for UI depth.#4016A0): Premium, elevated contexts; used sparingly for high-priority brand moments or premium product tiers.#8C929C): Hover states, secondary buttons, disabled text, and muted labels. Bridges light and dark contexts.#FFFEFA): Primary light surface; used dominantly for page backgrounds, cards, and light UI layers.#FFFFFF): Secondary light surface; text on dark backgrounds, component highlights, and floating elements.#2A2A2A): Primary dark text on light backgrounds; high-contrast body copy.#111111): Navigation background, ultra-dark surfaces, high emphasis text on purple backgrounds.#000000): Semantic dark elements, borders, and critical text.#ABABAB): Tertiary text, disabled states, and subtle UI dividers.#E5E5E5): Borders, dividers, and subtle background separations.#BDC4CF): Input placeholders, muted labels, and secondary dividers.#ABABAB): Default input and form borders; light-touch definition of UI elements.#D3D3D3): Subtle surface elevation in light contexts; used with inset shadows for depth.#0A84AE): Positive actions, confirmations, and trust indicators.#8C929C): Neutral, informational, or secondary messaging.Primary: Aeonik
Aeonik, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifCode: Roboto Mono
'Roboto Mono', 'Menlo', monospaceSecondary Code: Menlo
'Menlo', 'Monaco', monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Aeonik | 64px | 400 | 72px | Normal | Hero headlines; premium positioning |
| Heading 1 | Aeonik | 64px | 400 | 72px | Normal | Primary page title; maximum emphasis |
| Heading 2 | Aeonik | 48px | 400 | 56px | Normal | Section dividers; secondary hierarchy |
| Heading 4 | Aeonik | 14px | 500 | 23px | Normal | Card titles; tertiary emphasis |
| Body | Aeonik | 16px | 400 | 24px | Normal | Default body text; form labels |
| Body Small | Aeonik | 14px | 400 | 20px | Normal | Secondary copy; link text |
| Button | Aeonik | 16px | 500 | 24px | Normal | Call-to-action text; interactive prominence |
| Button Small | Aeonik | 14px | 400 | 16px | Normal | Compact or tertiary button text |
| Label | Aeonik | 16px | 500 | 24px | Normal | Form field labels; input headings |
| Input | Aeonik | 16px | 400 | Normal | Normal | Placeholder and input text |
| Input Small | Aeonik | 12.8px | 400 | Normal | Normal | Compact input fields; search boxes |
| Link | Aeonik | 14px | 400 | 20px | Normal | Inline links; navigation destinations |
| Link Bold | Aeonik | 14px | 500 | 20px | Normal | Emphasized links; primary navigation |
| Code | Roboto Mono | 12px | 400 | 9.6px | Normal | Inline code; syntax highlighting |
| Code Block | Menlo | 14px | 400 | 28px | Normal | Code blocks; terminal output |
| Caption | Aeonik | 12px | 400 | 18px | Normal | Captions; fine print; disclaimers |
#0A84AE (or linear gradient with inset highlight)#FFFEFA12px 32px16px5006px0px solid transparentrgba(255, 255, 255, 0.48) 0px -16px 24px 0px inset, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px24px#086A89rgba(0, 0, 0, 0.15) 0px 2px 2px inset#FFFEFA or rgba(255, 254, 250, 0.1)#2A2A2A12px 32px16px5006px1px solid #BDC4CFrgba(255, 255, 255, 0.48) 0px -16px 24px 0px inset, rgba(0, 0, 0, 0.25) 0px 4px 4px 0px24pxrgba(0, 0, 0, 0.05), border becomes #8C929Crgba(0, 0, 0, 0.1)transparent#0A84AE or #FFFEFA (context-dependent)12px 32px16px5006px1px solid currentColornone24pxrgba(10, 132, 174, 0.08) or rgba(255, 254, 250, 0.12)#FFFEFA#FFFEFA or #0A84AE8px 24px16px5006px0px solid transparentnone40px24px#F5F5F5 or add subtle depth shadow#E5E5E5transparent#0A84AE0px 0px14px4000px0pxnone16px#086A89, underline appears or text decorates#062F42#D3D3D3 or #FFFEFA#0A84AE or #2A2A2A40px24px0pxrgba(255, 255, 255, 0.12) -1px 0px 0px 0px inset, rgb(255, 255, 255) -2px -2px 2px -3px inset, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.16) 1px 0px 0px 0px inset, rgb(255, 255, 255) 4px 4px 1px -5px inset, rgba(0, 0, 0, 0.01) 0px 0px 0px 2px inset28px#111111 or #1A1A1A#FFFEFA40px24px0pxrgba(0, 0, 0, 0.3) 0px 8px 16px 0px28pxrgba(0, 0, 0, 0.4) 0px 12px 24px 0px#FFFEFA#2A2A2A40px24px1px solid rgba(0, 0, 0, 0.05)rgba(0, 0, 0, 0.08) 0px 12px 32px 0px28px#FFFFFFrgba(0, 0, 0, 0.66)6px 15px (left/right), 6px (top/bottom) with extra padding for icon (6px 35px 6px 15px)12.8px or 14px40050px1px solid #707070nonenormal31px to 40px#8C929C#0A84AE, box-shadow 0px 0px 0px 3px rgba(10, 132, 174, 0.1)#F5F5F5, Text Color #ABABAB, Border #E5E5E550px (fully rounded; pill-shaped)12px 24px (generous horizontal padding)44px6px (matching button radius)12px 16px40px#FFFFFFrgba(0, 0, 0, 0.66)12px 16px8px1px solid #BDC4CF1.5100px#0A84AE, box-shadow 0px 0px 0px 3px rgba(10, 132, 174, 0.1)16px500#2A2A2A8px24px#BDC4CF400#111111#FFFEFA16px 64px (horizontal padding scales with viewport)64px0pxrgb(42, 42, 42) 0px -1px 0px 0px inset (subtle inset bottom border)14px40028px#FFFEFA5000px 16px (spacing around each link)0px#99A7F1, background rgba(255, 254, 250, 0.05)#99A7F1, underline or bottom-border appears#0A84AE4009px 0px (minimal vertical padding)0px#086A89, underline 0.5px solid #0A84AE#062F42, underline 2px solid #0A84AE#0A84AE14px400none (default), underline on hover9px 0px (touch target height)20px#086A89, underline appears#4016A0#FFFEFA14px500none0px 0px20px0.8 or Text Color #99A7F1#0A84AE14px400none0px 0px28pxrgba(10, 132, 174, 0.12)#0A84AE4px 12px50px12px5001px solid rgba(10, 132, 174, 0.3)rgba(140, 146, 156, 0.12)#8C929C4px 12px50px12px5001px solid rgba(140, 146, 156, 0.3)#0A84AE#FFFEFA4px 8px50px10px60020pxcenterBase Unit: 8px
Scale (all multiples of 8px base):
4px — Micro spacing; between inline elements or button icon-to-text gaps8px — Small gaps; button icon spacing, badge padding12px — Medium gaps; default grid gap, horizontal list spacing16px — Large gaps; navigation padding, card internal spacing20px — Extra-large gaps; section top margins, heading spacing24px — Double large; subsection spacing, form field gaps32px — Generous margins; block spacing below hero sections40px — Major section margins; card padding, main container spacing48px — Large section dividers; between major content blocks56px — Vertical rhythm; gap between full-width sections64px — Ultra-large padding; hero section padding, page margins72px — Maximum spacing; top-level container paddingUsage Context:
4px–8px): Icon-button spacing, inline element gaps, compact components12px): Default grid gaps, list spacing, horizontal padding in compact contexts16px): Form field labels, navigation link spacing, card internal padding20px–24px): Section top margins, heading-to-body gaps, button spacing32px–40px): Major section separators, card padding, container padding48px–72px): Hero sections, page margins, full-width container paddingMax Width: 1440px (standard desktop maximum; supports ultra-wide displays)
Column Strategy:
1440px+)768px–1023px)320px–767px)24px gutters (margins between columns)Container Patterns:
max-width: 1200px, vertical padding 72px–96pxmax-width: 1200px, horizontal padding 24px–64px, vertical padding 48px–72px24px64px, maintains consistent alignment with content sectionsAuth0's design prioritizes breathing room. Generous whitespace clarifies hierarchy, reduces cognitive load, and establishes premium positioning. Content is never crowded; sections are separated by at least 48px vertically. Within cards, internal padding of 40px ensures content feels expansive and readable. Whitespace acts as a visual organizational tool—more space around interactive elements signals their importance.
4px — Minimal rounding; input spinners, micro-components6px — Buttons, small inputs, form elements8px — Images, secondary cards, rounded corners24px — Primary cards, large containers, premium components50px — Pill-shaped buttons, fully rounded inputs, badges| Level | Treatment | Use |
|---|---|---|
| Flat (None) | No shadow; box-shadow: none | Text links, labels, disabled elements, flat buttons |
| Raised (sm) | rgba(255, 255, 255, 0.12) -1px 0px 0px 0px inset, rgb(255, 255, 255) -2px -2px 2px -3px inset, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.16) 1px 0px 0px 0px inset, rgb(255, 255, 255) 4px 4px 1px -5px inset, rgba(0, 0, 0, 0.01) 0px 0px 0px 2px inset | Cards, light containers, premium surfaces |
| Lifted (md) | rgb(42, 42, 42) 0px -1px 0px 0px inset | Navigation bar, bottom-border emphasis |
| Floating (lg) | rgba(0, 0, 0, 0.12) 0px 4px 12px 0px | Floating buttons, tooltips, popovers |
| Modal (xl) | rgba(0, 0, 0, 0.3) 0px 8px 24px 0px | Modal overlays, dropdowns, priority surfaces |
| Extreme (2xl) | rgba(0, 0, 0, 0.4) 0px 16px 48px 0px | Maximum elevation; used sparingly for critical alerts |
Shadow Philosophy: Auth0 employs inset highlights to create subtle surface depth and dimension on light backgrounds. On dark backgrounds, shadows follow a traditional offset model (downward, rightward) to simulate floating elements above the surface. Multiple shadow layers compound to create nuanced depth without heaviness. Shadows are dark and muted, never pure black, preserving the refined aesthetic. Inset highlights use white with low opacity for a glazed, sophisticated appearance.
8px base unit except for icon-text gaps (4px). Whitespace is a design feature, not wasted space.44px–48px minimum touch target heights on touch devices.#0A84AE teal for all primary CTAs — This drives visual hierarchy and brand recognition. Limit accent colors to supporting roles.6px or 24px — These two values maintain consistency. Avoid arbitrary radius values.0px 0px 0px 3px rgba(10, 132, 174, 0.1) box-shadow for keyboard accessibility.#111111) backgrounds — This creates maximum contrast and legibility for top-level navigation.24px vertical gaps — Don't compress form layouts; breathing room improves scannability.12px or larger than 64px — Stay within the defined typography hierarchy to prevent cognitive overload.12px 32px creates optimal touch targets. Custom padding breaks consistency.1.5 line height for body text — Tight line heights reduce readability. Maintain at least the defined line heights from the hierarchy.4.5:1 minimum for body, 3:1 for large text).0.6 to preserve image visibility. Darker overlays feel oppressive.800px — Extreme radius on massive containers looks broken. Cap radius at 24px for large surfaces.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | 4-column grid, 24px horizontal padding, single-column card layouts, navigation collapses to hamburger menu, font sizes reduce –2px, button padding 8px 16px |
| Tablet | 768px–1023px | 8-column grid, 32px–40px horizontal padding, 2-column card grids, collapsible navigation with expanded menu, font sizes decrease –1px on body text |
| Desktop | 1024px–1439px | 12-column grid, 64px horizontal padding, 3-column card grids, full navigation bar expanded, typography at full size |
| Large Desktop | 1440px+ | Max-width container at 1440px, centered with padding, 4-column+ card grids where applicable, generous spacing maximized |
44px (recommended by iOS and Android guidelines)44px8px 16px from desktop 12px 32px to maintain 44px height8px–12px padding for easier tap targets40px minimum on touch devices (desktop can be 31px–40px flexible)16px–24px horizontal padding on desktop, 12px on mobileNavigation:
64px height)Cards & Grid:
24px gaps20px gapsSpacing:
72px vertical section padding48px vertical section padding32px vertical section paddingTypography:
10% on tablet, 20% on mobile (e.g., 48px → 43px → 38px)14px–16px for readability16px weightHero Section:
max-width: 1200px, padding 72px 64px56px 40px40px 24px, headline reduces to 42pxImages & Media:
100% of container#0A84AE)#FFFEFA)#111111)#2A2A2A) or Pure White (#FFFFFF) on dark#2A2A2A) or Pure White (#FFFFFF) on dark#0A84AE)#ABABAB) or Soft Gray (#E5E5E5)#ABABAB)#99A7F1)#4016A0)Every interactive element (button, link, input) must use the #0A84AE teal for focus states — Apply box-shadow: 0px 0px 0px 3px rgba(10, 132, 174, 0.1) on :focus or keyboard interaction.
All typography must use Aeonik font family with fallback stack — font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif.
Button padding is always 12px 32px; border radius is always 6px — Deviations require explicit exception documentation.
Cards always receive inset shadow signature — box-shadow: rgba(255, 255, 255, 0.12) -1px 0px 0px 0px inset, rgb(255, 255, 255) -2px -2px 2px -3px inset, rgba(255, 255, 255, 0.24) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.16) 1px 0px 0px 0px inset, rgb(255, 255, 255) 4px 4px 1px -5px inset, rgba(0, 0, 0, 0.01) 0px 0px 0px 2px inset for light cards on light backgrounds.
Navigation background is always #111111 with #FFFEFA text — No exceptions for consistency with security-forward brand.
Spacing follows the 8px base unit scale — Use multiples of 8 (4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px) for all padding, margin, and gaps.
Line height never drops below 1.5x font size — For 16px body, minimum line height is 24px. For 14px text, minimum is 21px.
Dark backgrounds require light text; light backgrounds require dark text — Ensure WCAG AA contrast ratios. Test with contrast checkers.
Touch targets on mobile are minimum 44px in both dimensions — Adjust button padding and input heights responsively to maintain this standard.
Input border radius is always 50px (pill-shaped) — This creates the distinctive rounded input appearance across the system. Border color defaults to #707070.
Hover states for buttons, links, and cards must include a visual change — Add color shift, opacity change, or shadow lift. Never rely on underline alone.
Form labels are always 16px, weight 500 in Aeonik — They must appear above (not inside) input fields for clarity.
Code snippets use Roboto Mono at 12px or Menlo at 14px — Never use Aeonik for code; the monospace distinction is critical for developers.
Card padding is always 40px for standard cards — Adjust only for exceptional compact contexts (badge, tiny card) with documentation.
All colors must use uppercase hex notation (e.g., #0A84AE, not #0a84ae) for consistency and searchability in design tokens and codebase.