Vercel

Vercel

Preview image. Unlock full-res

Advanced schematic on white canvas — every element precisely placed, every line deliberate.

Industrydevtools
Palette
#fafafa
#f0fbff
#171717
#4d4d4d
#000000
#ebebeb
#666666
#7d7d7d
#52aeff
#e5484d
#45dec5
#0070f3

Vercel's design embodies a technical precision, like an advanced schematic unfolded on a clean, bright canvas. The interplay of crisp, near-achromatic grays for backgrounds and text creates a serious, developer-focused atmosphere, punctuated by strategic accents of rich, vivid hues. Nearly-monochromatic elements and a tight typographic scale prioritize information density, while subtly rounded corners and soft drop shadows prevent the interface from feeling clinical. The overall impression is one of high performance and controlled complexity. Use Geist font for all text elements with 'liga' and 'ss05' font feature settings enabled. Apply #171717 for primary text content and #fafafa for page backgrounds to maintain strong contrast. Round corners of all interactive elements like buttons and tags with borderRadius: 9999px for a continuous pill shape when content allows, or borderRadius: 100px for less extreme pill shapes. Maintain a clear visual hierarchy using #171717 for headings and primary actions, and #4d4d4d for supporting text. Introduce elements elevation using box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px for cards and interactive components. Use Electric Blue (#0070f3) exclusively for critical interactive states, active navigation, or significant accents. Keep element spacing tight, using 12px for gaps between related elements. Avoid using multiple chromatic colors for primary UI elements; reserve them for decorative highlights or specific branding. Do not use generic system fonts; always utilize Geist and Geist Mono for maintaining brand consistency. Refrain from heavy, diffused shadows; prefer crisp, subtle box shadows with minimal offset. Do not use letter spacing on body or paragraph text; apply negative letter spacing only to display and larger headings as specified. Avoid arbitrary border radii; stick to the defined 6px, 64px, 100px, or 9999px tokens. Do not rely on opaque solid backgrounds for content cards when a transparent or border-defined card variant is more appropriate. Do not use a large number of distinct background colors; focus on the primary Cloud Canvas and Storm Gray Wash neutrals.

More like this