Switch between the rendered Visual preview and the Raw DESIGN.md.
This design system embodies a minimalist, security-focused aesthetic that prioritizes clarity and trust. The interface uses an expansive whitespace approach with a bright, accessible color palette centered around Vercel's signature blue. The typography is deliberately restrained with system fonts, creating a modern, tech-forward appearance that communicates reliability and precision. The overall mood is calm, professional, and focused—designed to guide users through verification workflows with confidence and minimal cognitive load.
Key Characteristics
#0070F3): Primary call-to-action, links, focus states, and brand accent. Used for interactive elements that drive user engagement.#666666): Secondary text, helper text, descriptions, disabled states, and subtle UI elements. Primary body text color for readability.#000000): High-contrast text, headings, and critical information requiring maximum prominence.#FFFFFF): Background surfaces, text on dark backgrounds, and primary surface color.#FFFFFF): Primary page background and card surfaces.#CCCCCC): (inferred) Light borders and dividers for subtle visual separation.Primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Secondary (Monospace): ui-monospace, SFMono-Regular, Menlo, Courier, monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Page Title | -apple-system | 48px | 600 | 56px | -0.02em | Large, prominent headings for page context |
| Heading 1 | -apple-system | 32px | 600 | 40px | -0.01em | Section headers and main content titles |
| Heading 2 | -apple-system | 24px | 600 | 32px | -0.01em | Subsection headers |
| Heading 3 | -apple-system | 20px | 600 | 28px | 0em | Tertiary headers and labels |
| Body (Large) | -apple-system | 19.2px | 500 | 32px | 0em | Primary body text, main content, descriptions |
| Body (Regular) | -apple-system | 16px | 400 | 24px | 0em | Standard body text and UI copy |
| Body (Small) | -apple-system | 14px | 400 | 20px | 0em | Secondary text, metadata, helper text |
| Caption / Overline | -apple-system | 12px | 500 | 16px | 0.05em | Labels, captions, small UI text |
| Code / Monospace | ui-monospace | 12px | 200 | 16px | 0em | Links with technical content, reference data, technical labels |
#0070F3#FFFFFF16px50012px 24px6px0px none transparent#0059CC, cursor pointer#0052B3#E0E0E0, text color #999999, cursor not-allowed#F0F0F0#00000016px50012px 24px6px1px solid #D0D0D0#E8E8E8#DCDCDCtransparent#0070F316px50012px 24px6px1px solid #0070F3rgba(0, 112, 243, 0.08)rgba(0, 112, 243, 0.12)rgba(0, 0, 0, 0)#0070F312px200ui-monospace0px0px0px none #0070F316px#0059CC, text-decoration underline#0052B32px solid #0070F3, outline-offset 2px#FFFFFF1px solid #E0E0E08px24px0px 1px 3px rgba(0, 0, 0, 0.08)#FFFFFF0px none8px24px0px 4px 12px rgba(0, 0, 0, 0.12)#FFFFFF1px solid #D0D0D06px12px 16px16px400#000000#9999991px solid #0070F3, box-shadow 0px 0px 0px 3px rgba(0, 112, 243, 0.1)1px solid #FF44440px 0px 0px 3px rgba(255, 68, 68, 0.1)#FFFFFF1px solid #E0E0E016px 24px0px 1px 3px rgba(0, 0, 0, 0.04)auto (min 56px)#66666614px5008px 16px4px#000000, background #F5F5F5#0070F3, background rgba(0, 112, 243, 0.08)Base Unit: 4px
Scale:
4px – micro spacing (gaps, tight spacing)8px – small spacing (compact spacing)12px – small-medium spacing16px – medium spacing (default component padding)24px – large spacing (standard container padding, section spacing)32px – extra-large spacing (vertical section separators)48px – xxl spacing (major layout blocks)64px – xxxl spacing (container padding on larger screens)96px – page-level spacing (full-page padding/margins)Usage Context:
4px and 8px for component internals and tight layouts16px and 24px for standard component padding and rhythm32px and 48px for section vertical spacing64px and 96px for full-width container padding on desktop1200px for standard content containers24px on mobile, 48px on tablet, 64px on desktopWhitespace is used strategically to create breathing room and guide focus. Large empty areas around focal content (such as verification messages or CTAs) reduce cognitive load and emphasize the primary user action. Vertical rhythm is maintained through consistent spacing multiples, creating a calm and organized visual hierarchy.
0px – no rounding (borders, certain edges)4px – minimal rounding (small UI elements, inputs)6px – small rounding (buttons, small cards)8px – medium rounding (cards, larger containers, modals)12px – large rounding (prominent cards, hero sections)50% – full rounding (avatars, circular badges)| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, box-shadow: none | Background containers, text, flat UI elements |
| Raised (1) | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) | Standard cards, input fields, subtle depth |
| Floating (2) | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12) | Elevated cards, popovers, menus |
| Modal (3) | box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) | Modals, dropdowns, prominent overlays |
| Overlay (4) | box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.2) | Top-level overlays, notifications, critical alerts |
Shadow Philosophy: Shadows are used sparingly and subtly to indicate layering and interactivity without creating visual heaviness. Minimal blur and spread values maintain the clean, modern aesthetic while providing clear depth cues. Shadows increase slightly in opacity and spread as elevation increases, following a consistent mathematical progression.
#0070F3 (Vercel Blue) for all primary calls-to-action and interactive focus states16px font sizes for body text to ensure readability24px padding to card containers and standard content sections-apple-system, ui-monospace) for optimal performance across platforms12px) for depth without visual clutter#0070F3 to #0052B3 color progression for interactive states6px to 8px border radius for UI components for a modern, rounded appearance#0070F3, #666666, #000000, and #FFFFFF12px for any body or interactive text12px to interactive components; maintain minimum touch target of 44px × 44px24px or opacity greater than 20%4px12px to cards or containers| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | 24px container padding, single-column layout, 16px body font, stacked navigation |
| Tablet | 768px–1023px | 48px container padding, 2-column grid where applicable, 18px body font |
| Desktop | 1024px–∞ | 64px container padding, 12-column grid, 19.2px body font, full horizontal nav |
44px for all interactive elements (buttons, links, inputs)44px for all interactive elements12px minimum around interactive hit areas8px minimum to prevent accidental taps12px 24px minimum for comfortable touch interaction< 768px: Stack all layout columns vertically, expand cards to full width minus padding< 768px: Collapse horizontal navigation to hamburger menu< 768px: Reduce padding from 64px to 24px, adjust heading sizes down by 4px–8px768px–1023px: Use 2-column layouts; reduce top-level heading size by 8px from desktop≥ 1024px: Apply full desktop spacing (64px), 12-column grid, full typography scale32px on mobile, 48px on tablet, 64px on desktop#0070F3) – all buttons, links, focus states#000000) – headings and critical content#666666) – body copy, helper text, disabled states#FFFFFF) – page and card surfaces#E0E0E0) – subtle dividers and container edges#0059CC (darkened primary for interactive states)#0052B3 (darkest primary for pressed states)#0070F3; use darkened variants only for hover/active states-apple-system for all body and heading text; use ui-monospace exclusively for authentication codes and technical references at 12px weight 2004px; standard section padding is 24px mobile, 64px desktop44px minimum height with 12px 24px padding; cards are 24px padding with 6px–8px border radius0px 1px 3px rgba(0, 0, 0, 0.08) for raised, 0px 4px 12px rgba(0, 0, 0, 0.12) for floating48px vertical spacing between major sections16px body font size; all interactive elements must have visible focus states with 2px outline24px padding; tablet uses 2-column with 48px; desktop uses full grid with 64px and 19.2px body font12px ui-monospace weight 200 in #0070F3; hover adds underline, focus adds 2px solid #0070F3 outline with 2px offset