CURATED · OPEN · FREE
Vercel
A high-performance developer platform with a stark, monochrome aesthetic punctuated by vibrant gradients.
Developer Tools Geometric Monochrome Bold
01
Identity DNA
developer cloud performance infrastructure AI
A precision instrument for modern web infrastructure
02
Color
#171717Ink
#4d4d4dInk soft
#ffffffBG
#fafafaBG soft
#666666Muted
rgba(235,235,235,1)Line
A stark, monochrome foundation where typography and high-contrast UI elements carry the visual weight.
03
Typography
geometric-sans · humanist-sans · monospace
display 48px · 500headline 32px · 500body 16px · 400caption 14px · 400mono 14px · 400Tight negative tracking for display sizes · Generous vertical rhythm in body copy · Monospaced font for all code representations
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
4px base grid with consistent multiples for spacing and sizing
05
Surfaces
sm · 4px
md · 6px
lg · 12px
pill · 9999px
1px solid #ebebeb
rgba(0,0,0,0.08) 0px 0px 0px 1px · rgba(0,0,0,0.04) 0px 2px 2px 0px
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered single-column layout with wide margins, utilizing a visible 12-column grid in the hero
07
Motion & Interaction
100ms micro
150ms small
400ms medium
cubic-bezier(0.33, 0.12, 0.15, 1) easing
Subtle opacity transitions · Color shifts on hover · Transform on click
Subtle color change or border transition · Immediate visual response with slight transform or opacity shift
08
Components
button High-contrast pill-shaped buttons; primary is solid black with white text, secondary is outlined with black text card Subtle bordered cards with light shadows and generous padding chip Small rounded tags with minimal padding and thin borders input Clean text inputs with subtle borders and internal padding hero Large central headline with prominent background graphic, clear CTAs, and supporting subtext 09
Voice & Don'ts
Tone Professional, direct, and technically precise Headlines Bold, concise, and action-oriented statements CTAs Clear, imperative verbs like 'Start Deploying' and 'Get a Demo' Don't use vibrant or neon colors as primary UI elements — screenshot shows a strictly monochrome interface Don't use rounded corners on all elements — screenshot shows sharp, geometric shapes like the logo and cards Don't use wide, decorative fonts — screenshot shows a clean, functional sans-serif for all headings Don't create overly complex layouts with many columns — screenshot shows a spacious, single-column flow Don't use drop shadows for depth — screenshot relies on thin borders and high contrast for separation Don't use all-caps for body text — screenshot reserves uppercase for small labels or tags Avoid: Overly playful language Avoid: Ambiguous terminology Avoid: Excessive exclamation points 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
Design system for a high-performance developer platform. Use a stark monochrome palette centered on black (#171717) and white (#ffffff) with functional grays. Typography should be a clean geometric sans-serif for display and a humanist sans for body text. Layout is spacious and centered, utilizing a visible grid. Components are high-contrast, often pill-shaped, with subtle borders. Critical constraints: maintain a strict monochrome foundation, avoid soft or rounded aesthetics, and keep typography precise and legible. Ensure all interactive elements provide clear, fast feedback.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is a definitive example of modern, developer-focused design, combining stark minimalism with high-contrast UI and precise typography.
