# DESIGN REFERENCE: vercel.com --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://vercel.com analysis_timestamp: 2026-07-10T18:30:00Z design_epoch: 2025/2026 accessibility_level: WCAG 2.1 AA (inferred) mobile_first: true framework_detected: Next.js + React design_system_used: Vercel Design System (custom, Geist) core_philosophy: black‑and‑white precision, developer‑first minimalism, trust through restraint ``` --- ## BRAND IDENTITY ### Brand Essence ``` A black‑and‑white precision interface for the frontend deployment platform. The brand voice is developer‑first: minimal, fast, and trustworthy — no decoration, only purposeful UI. Vercel's design system (Geist) is the foundation for many modern developer tools . ``` ### Visual Hierarchy Principles ``` - Primary weight: Typography (Geist font) — clean, geometric, hierarchical - Secondary weight: Black and white contrast — maximum legibility - Tertiary weight: Geometric shapes and precise spacing — architectural clarity - The UI disappears — content and code are the focus - Trust through restraint, not decoration ``` ### Emotional Tone ``` Primary emotion: Trust Secondary emotion: Precision Overall mood: Minimal, architectural, developer‑grade — communicates speed and reliability ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family ```yaml name: Geist (Vercel's custom font) fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 400, 500, 600, 700 styles_used: normal usage: All text — display, body, navigation, UI ``` ### Secondary Font Family (Mono) ```yaml name: Geist Mono fallback: "JetBrains Mono", ui-monospace, monospace weights_used: 400, 500 styles_used: normal usage: Code blocks, terminal output, technical labels ``` ### Typographic Scale ```yaml display_lg: { size: 4.5rem, weight: 700, line-height: 1.05, tracking: -0.03em } # 72px display_md: { size: 3rem, weight: 700, line-height: 1.1, tracking: -0.02em } # 48px display_sm: { size: 2.25rem, weight: 700, line-height: 1.15, tracking: -0.01em } # 36px heading: { size: 1.5rem, weight: 600, line-height: 1.3, tracking: 0 } # 24px title: { size: 1.125rem, weight: 600, line-height: 1.4, tracking: 0 } # 18px body_large: { size: 1.125rem, weight: 400, line-height: 1.5, tracking: 0 } # 18px body: { size: 1rem, weight: 400, line-height: 1.5, tracking: 0 } # 16px body_small: { size: 0.875rem, weight: 400, line-height: 1.5, tracking: 0 } # 14px caption: { size: 0.75rem, weight: 500, line-height: 1.4, tracking: 0.02em } # 12px mono: { size: 0.875rem, weight: 400, line-height: 1.5, tracking: 0 } # 14px ``` ### Letter Spacing Classes ```yaml tight: -0.03em to -0.01em normal: 0 wide: 0.02em ``` --- ## COLOR ARCHITECTURE ### Primary Palette ```yaml primary: { hex: #000000, rgb: (0,0,0), usage: Primary CTAs, dark text, brand anchor } primary_active: { hex: #1A1A1A, rgb: (26,26,26), usage: Hover states } primary_disabled: { hex: #E5E5E5, rgb: (229,229,229), usage: Disabled states } ``` ### Canvas & Surfaces ```yaml canvas: { hex: #FFFFFF, rgb: (255,255,255), usage: Default page background } canvas_dark: { hex: #0D0D0D, rgb: (13,13,13), usage: Dark sections, footer } surface: { hex: #FAFAFA, rgb: (250,250,250), usage: Subtle surfaces, cards } surface_soft: { hex: #F5F5F5, rgb: (245,245,245), usage: Soft card backgrounds } surface_elevated: { hex: #FFFFFF, rgb: (255,255,255), usage: Elevated cards with shadow } hairline: { hex: #E5E5E5, rgb: (229,229,229), usage: Borders, dividers } ``` ### Text Colors ```yaml ink: { hex: #000000, rgb: (0,0,0), usage: Primary text, headings } body: { hex: #333333, rgb: (51,51,51), usage: Body text } muted: { hex: #666666, rgb: (102,102,102), usage: Secondary text, metadata } muted_soft: { hex: #999999, rgb: (153,153,153), usage: Disabled text, fine print } on_primary: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on primary buttons } on_dark: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on dark surfaces } ``` ### Accent Color ```yaml accent_blue: { hex: #0070F3, rgb: (0,112,243), usage: Links, highlights, subtle accents } accent_blue_hover: { hex: #0761D1, rgb: (7,97,209), usage: Hover states for links } ``` ### Semantic Colors ```yaml success: { hex: #0070F3, rgb: (0,112,243), usage: Success states } warning: { hex: #F5A623, rgb: (245,166,35), usage: Warning states } error: { hex: #FF3B30, rgb: (255,59,48), usage: Error states } info: { hex: #0070F3, rgb: (0,112,243), usage: Informational states } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 15.4:1 (white on #000000) text_on_canvas: 15.4:1 (#000000 on #FFFFFF) text_on_light: 12.1:1 (#000000 on #FAFAFA) text_on_dark: 15.4:1 (white on #0D0D0D) color_harmony: monochromatic (black + white with single blue accent) accessibility_compliance: fully_compliant ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 4px scaling_factor: 1.25 ``` ### Spacing Scale ```yaml spacing_xxs: { value: 2px, usage: Tiny gaps } spacing_xs: { value: 4px, usage: Small gaps } spacing_sm: { value: 8px, usage: Element gaps } spacing_md: { value: 12px, usage: Standard spacing } spacing_lg: { value: 16px, usage: Medium spacing } spacing_xl: { value: 20px, usage: Large spacing } spacing_xxl: { value: 24px, usage: XL spacing } spacing_xxxl: { value: 32px, usage: Section spacing } spacing_section: { value: 64px, usage: Major section spacing } ``` ### Breakpoints ```yaml mobile: { min: 0px, max: 768px, columns: 4, gutter: 16px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 20px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 24px } wide: { min: 1441px, max: 1920px, columns: 12, gutter: 32px } ``` ### Container Widths ```yaml default: { max_width: 1280px, padding: 24px } narrow: { max_width: 800px, padding: 24px } full: { max_width: 100%, padding: 0 } ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Top Navigation ```yaml type: horizontal (desktop) / hamburger (mobile) position: static or sticky (top) height: 64px background: #FFFFFF (canvas) or transparent alignment: left (logo) / center (menu) / right (actions) components: - logo: { size: 32px, link to home } - menu: [Products, Solutions, Resources, Pricing, Enterprise] - actions: [Search, Sign In, Get Started (button-primary)] ``` ### Button System #### Primary Button ```yaml default: { bg: #000000, text: #FFFFFF, padding: 10px 20px, radius: 6px, height: 40px } hover: { bg: #1A1A1A, text: #FFFFFF } active: { bg: #2A2A2A, text: #FFFFFF } focus: { outline: 2px solid #0070F3, offset: 2px } disabled: { bg: #E5E5E5, text: #999999 } ``` #### Secondary Button ```yaml default: { bg: transparent, text: #000000, border: 1px solid #E5E5E5, padding: 10px 20px, radius: 6px, height: 40px } hover: { bg: #F5F5F5, text: #000000 } active: { bg: #E5E5E5, text: #000000 } focus: { outline: 2px solid #0070F3, offset: 2px } disabled: { opacity: 0.5 } ``` #### Ghost Button ```yaml default: { bg: transparent, text: #000000, padding: 8px 16px, radius: 6px, height: 36px } hover: { bg: #F5F5F5, text: #000000 } active: { bg: #E5E5E5, text: #000000 } focus: { outline: 2px solid #0070F3, offset: 2px } ``` ### Cards & Containers #### Product Card ```yaml background: #FFFFFF (surface_elevated) border: 1px solid #E5E5E5 (hairline) rounded: 12px padding: 24px shadow: 0 2px 8px rgba(0,0,0,0.06) components: - icon: { size: 40px } - title: { typography: heading } - description: { typography: body } - link: { text link } ``` #### Code Window Card ```yaml background: #0D0D0D (canvas_dark) text: #FFFFFF (on_dark) rounded: 12px padding: 20px components: - terminal_header: { dots: red/yellow/green, title: "bash" } - code_block: { monospace, syntax highlighted } ``` #### Feature Card ```yaml background: #FAFAFA (surface) rounded: 12px padding: 20px border: none components: - icon: { size: 32px } - title: { typography: title } - description: { typography: body_small } ``` ### Form Elements #### Text Input ```yaml default: { bg: #FAFAFA, text: #000000, border: 1px solid #E5E5E5, radius: 6px, padding: 10px 14px, height: 40px } focus: { border: 2px solid #000000, bg: #FFFFFF } disabled: { bg: #F5F5F5, opacity: 0.5 } ``` ### Modals & Overlays #### Modal ```yaml background: #FFFFFF (canvas) rounded: 12px padding: 32px shadow: 0 16px 48px rgba(0,0,0,0.15) components: - header: { typography: heading, close icon } - content: { variable } - actions: { primary + secondary buttons } overlay: { bg: rgba(0,0,0,0.4), backdrop_blur: 4px } ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml homepage: - hero: { centered, display_lg, subhead, CTA, terminal mockup } - features: { 3-column grid, feature cards } - trust_strip: { customer logos, monochrome } - product_showcase: { code windows, product UI } - cta_band: { centered, dark background } - footer: { 4-column, dark } product_pages: - hero: { display_md, subhead, CTA } - feature_grid: { 2-3 columns } - pricing: { tier cards, 3-up } - footer: { dark } blog: - hero: { display_sm, centered } - grid: { 3-column cards } - footer: { dark } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: center } card_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 24px } ``` ### Section Patterns ```yaml hero: { height: auto (min 50vh), alignment: center, bg: #FFFFFF } features: { columns: 3, alignment: center, card_variant: feature } trust_strip: { centered copy + logo row, monochrome } cta: { layout: centered, bg: #0D0D0D } ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 100ms fast: 150ms default: 200ms slow: 300ms macro: 500ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) ``` ### Hover States ```yaml scale: { value: 1.02, duration: 150ms } lift: { value: -2px, duration: 150ms } color_shift: { speed: 150ms } underline: { style: solid, duration: 150ms } ``` ### Terminal Animations ```yaml typewriter: { speed: 30ms per char } cursor_blink: { duration: 1s } ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: Custom SVG icon set (Geist Icons) style: outline (primary), filled (active) size: small: 16px, medium: 20px, large: 24px color: inherit (uses currentColor) stroke_width: 1.5px ``` ### Terminal Code Blocks ```yaml background: #0D0D0D text: #FFFFFF font: Geist Mono language: Bash, JavaScript, TypeScript syntax_colors: - commands: #FFFFFF - flags: #0070F3 - strings: #E5E5E5 - comments: #666666 ``` ### Image Treatment ```yaml default_ratio: 16:9 (product screenshots), 4:3 (mockups) rounded_corners: 12px object_fit: cover shadow: 0 4px 24px rgba(0,0,0,0.08) ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [hero headline, CTA, features, trust strip, footer] tablet_priority: [hero, features 2-up, trust strip, footer] desktop_priority: [hero, features 3-up, trust strip, product showcase, footer] ``` ### Collapse Points ```yaml navigation: 768px (hamburger appears) card_grid: 768px (3 cols → 2 cols), 480px (2 cols → 1 col) ``` ### Touch Targets ```yaml minimum_size: 44x44px (all interactive elements) spacing_between: 12px tap_feedback: scale (buttons), highlight (cards) ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,