registry://designs/voltagent-awesome-design-md-vercel
### Vercel - Frontend deployment platform. - Black and white precision, Geist font - Vercel's website is the visual thesis of developer infrastructure made invisible — a design system so restrained it borders on philosophical
Vercel's website is the visual thesis of developer infrastructure made invisible — a design system so restrained it borders on philosophical. The page is overwhelmingly white (#ffffff) with near-black (#171717) text, creating a gallery-like emptiness where every element earns its pixel. This isn't minimalism as decoration; it's minimalism as engineering principle. The Geist design system treats the interface like a compiler treats code — every unnecessary token is stripped away until only structure remains.
The custom Geist font family is the crown jewel. Geist Sans uses aggressive negative letter-spacing (-2.4px to -2.88px at display sizes), creating headlines that feel compressed, urgent, and engineered — like code that's been minified for production. At body sizes, the tracking relaxes but the geometric precision persists. Geist Mono completes the system as the monospace companion for code, terminal output, and technical labels. Both fonts enable OpenType "liga" (ligatures) globally, adding a layer of typographic sophistication that rewards close reading.
What distinguishes Vercel from other monochrome design systems is its shadow-as-border philosophy. Instead of traditional CSS borders, Vercel uses box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08) — a zero-offset, zero-blur, 1px-spread shadow that creates a border-like line without the box model implications. This technique allows borders to exist in the shadow layer, enabling smoother transitions, rounded corners without clipping, and a subtler visual weight than traditional borders. The entire depth system is built on layered, multi-value shadow stacks where each layer serves a specific purpose: one for the border, one for soft elevation, one for ambient depth.
Key Characteristics:
"liga" globallybox-shadow 0px 0px 0px 1px replaces traditional borders throughout#171717 text — not quite black, creating micro-contrast softness#ff5b4f), Preview Pink (#de1d8d), Develop Blue (#0a72ef)hsla(212, 100%, 48%, 1) — a saturated blue for accessibility#171717): Primary text, headings, dark surface backgrounds. Not pure black — the slight warmth prevents harshness.#ffffff): Page background, card surfaces, button text on dark.#000000): Secondary use, --geist-console-text-color-default, used in specific console/code contexts.#ff5b4f): --ship-text, the "ship to production" workflow step — warm, urgent coral-red.#de1d8d): --preview-text, the preview deployment workflow — vivid magenta-pink.#0a72ef): --develop-text, the development workflow — bright, focused blue.#0070f3): --geist-console-text-color-blue, syntax highlighting blue.#7928ca): --geist-console-text-color-purple, syntax highlighting purple.#eb367f): --geist-console-text-color-pink, syntax highlighting pink.#0072f5): Primary link color with underline decoration.hsla(212, 100%, 48%, 1)): --ds-focus-color, focus ring on interactive elements.rgba(147, 197, 253, 0.5)): --tw-ring-color, Tailwind ring utility.#171717): Primary text, headings, nav text.#4d4d4d): Secondary text, description copy.#666666): Tertiary text, muted links.#808080): Placeholder text, disabled states.#ebebeb): Borders, card outlines, dividers.#fafafa): Subtle surface tint, inner shadow highlight.hsla(0, 0%, 98%, 1)): --ds-overlay-backdrop-color, modal/dialog backdrop.hsla(0, 0%, 95%, 1)): --geist-selection-text-color, text selection highlight.#ebf5ff): Pill badge background, tinted blue surface.#0068d6): Pill badge text, darker blue for readability.rgba(0, 0, 0, 0.08) 0px 0px 0px 1px): The signature — replaces traditional borders.rgba(0, 0, 0, 0.04) 0px 2px 2px): Minimal lift for cards.rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px): Full multi-layer card shadow.rgb(235, 235, 235) 0px 0px 0px 1px): Light gray ring-border for tabs and images.Geist, with fallbacks: Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI SymbolGeist Mono, with fallbacks: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New"liga" enabled globally on all Geist text; "tnum" for tabular numbers on specific captions.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Hero | Geist | 48px (3.00rem) | 600 | 1.00–1.17 (tight) | -2.4px to -2.88px | Maximum compression, billboard impact |
| Section Heading | Geist | 40px (2.50rem) | 600 | 1.20 (tight) | -2.4px | Feature section titles |
| Sub-heading Large | Geist | 32px (2.00rem) | 600 | 1.25 (tight) | -1.28px | Card headings, sub-sections |
| Sub-heading | Geist | 32px (2.00rem) | 400 | 1.50 | -1.28px | Lighter sub-headings |
| Card Title | Geist | 24px (1.50rem) | 600 | 1.33 | -0.96px | Feature cards |
| Card Title Light | Geist | 24px (1.50rem) | 500 | 1.33 | -0.96px | Secondary card headings |
| Body Large | Geist | 20px (1.25rem) | 400 | 1.80 (relaxed) | normal | Introductions, feature descriptions |
| Body | Geist | 18px (1.13rem) | 400 | 1.56 | normal | Standard reading text |
| Body Small | Geist | 16px (1.00rem) | 400 | 1.50 | normal | Standard UI text |
| Body Medium | Geist | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized text |
| Body Semibold | Geist | 16px (1.00rem) | 600 | 1.50 | -0.32px | Strong labels, active states |
| Button / Link | Geist | 14px (0.88rem) | 500 | 1.43 | normal | Buttons, links, captions |
| Button Small | Geist | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Compact buttons |
| Caption | Geist | 12px (0.75rem) | 400–500 | 1.33 | normal | Metadata, tags |
| Mono Body | Geist Mono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
| Mono Caption | Geist Mono | 13px (0.81rem) | 500 | 1.54 | normal | Code labels |
| Mono Small | Geist Mono | 12px (0.75rem) | 500 | 1.00 (tight) | normal | text-transform: uppercase, technical labels |
| Micro Badge | Geist | 7px (0.44rem) | 700 | 1.00 (tight) | normal | text-transform: uppercase, tiny badges |
"liga". Ligatures aren't decorative — they're structural, creating tighter, more efficient glyph combinations."tnum" or "liga" serves as the "developer console" voice — compact technical labels that connect the marketing site to the product.Primary White (Shadow-bordered)
#ffffff#171717rgb(235, 235, 235) 0px 0px 0px 1px (ring-border)var(--ds-gray-1000) (dark)2px solid var(--ds-focus-color) outline + var(--ds-focus-ring) shadowPrimary Dark (Inferred from Geist system)
#171717#ffffffPill Button / Badge
#ebf5ff (tinted blue)#0068d6Large Pill (Navigation)
#171717#ffffffrgba(0, 0, 0, 0.08) 0px 0px 0px 1pxrgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px1px solid #ebebeb with 12px top radiusvar(--ds-gray-200) background1px 0 0 0 var(--ds-gray-alpha-600)2px solid var(--ds-focus-color) — consistent blue focus ring#171717 text1px solid #ebebeb border12px 12px 0px 0px radiusWorkflow Pipeline
Trust Bar / Logo Grid
#ebebeb border separationMetric Cards
border-bottom: 1px solid #171717| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Ring (Level 1) | rgba(0,0,0,0.08) 0px 0px 0px 1px | Shadow-as-border for most elements |
| Light Ring (Level 1b) | rgb(235,235,235) 0px 0px 0px 1px | Lighter ring for tabs, images |
| Subtle Card (Level 2) | Ring + rgba(0,0,0,0.04) 0px 2px 2px | Standard cards with minimal lift |
| Full Card (Level 3) | Ring + Subtle + rgba(0,0,0,0.04) 0px 8px 8px -8px + inner #fafafa ring | Featured cards, highlighted panels |
| Focus (Accessibility) | 2px solid hsla(212, 100%, 48%, 1) outline | Keyboard focus on all interactive elements |
Shadow Philosophy: Vercel has arguably the most sophisticated shadow system in modern web design. Rather than using shadows for elevation in the traditional Material Design sense, Vercel uses multi-value shadow stacks where each layer has a distinct architectural purpose: one creates the "border" (0px spread, 1px), another adds ambient softness (2px blur), another handles depth at distance (8px blur with negative spread), and an inner ring (#fafafa) creates the subtle highlight that makes the card "glow" from within. This layered approach means cards feel built, not floating.
1px solid #171717 (full dark line) between major sections0px 0px 0px 1px rgba(0,0,0,0.08)) instead of traditional CSS borders"liga" on all Geist text — ligatures are structural, not optional#171717 to #ffffff are the system#171717 instead of #000000 for primary text — the micro-warmth mattersborder on cards — use the shadow-border technique#fafafa ring in card shadows — it's the glow that makes the system work| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Tight single column, minimal padding |
| Mobile | 400–600px | Standard mobile, stacked layout |
| Tablet Small | 600–768px | 2-column grids begin |
| Tablet | 768–1024px | Full card grids, expanded padding |
| Desktop Small | 1024–1200px | Standard desktop layout |
| Desktop | 1200–1400px | Full layout, maximum content width |
| Large Desktop | >1400px | Centered, generous margins |
#171717)#ffffff)#171717)#4d4d4d)rgba(0, 0, 0, 0.08) 0px 0px 0px 1px#0072f5)hsla(212, 100%, 48%, 1))0px 0px 0px 1px rgba(0,0,0,0.08) is the foundation#fafafa ring in card shadows is what gives Vercel cards their subtle inner glowStill exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
Share your design system with AI agents worldwide