# Design System: vercel.com

> Generated by UIDrop on 2026-06-01 — uidrop.site

---

## 1. Design Language Overview

**Vibe:** light · monochrome · rounded · Light theme
**Built with:** Radix UI

**Design rhythm:** 4px grid · pill buttons · very rounded · soft elevation

## 2. Color System

| Role     | Hex      | Usage |
|----------|----------|-------|
| Accent   | `#171717` | Highlights, success states, decorative |
| Surface  | `#FAFAFA` | Main page background |
| Elevated | `#DFDFDF` | Cards, raised containers |
| Text     | `#171717` | Body and heading text |
| Muted    | `#4D4D4D` | Secondary text, captions |
| Border   | `#171717` | Dividers, borders |

## 3. Typography

- **H1** — Geist 48px / weight 600, line-height 1, tracking -2.4px
- **H2** — Geist 14px / weight 500, line-height 1.43, tracking -0.28px
- **H3** — Geist 32px / weight 600, line-height 1.25, tracking -1.28px
- **Body** — Geist 12px / weight 400, line-height 1.33
- **Code** — geistMonoFont 16px / weight 400, line-height 1.5
- **Caption** — Geist 14px / weight 500, line-height 1.43
- **Scale:** 48px / 20px / 14px

## 4. Spacing & Layout

- **Spacing scale:** 4,8,12,16,24,32,40,44,48
- **Border radius:** pill buttons
- **Radius vocabulary:** button → pill, chip → pill

## 5. Effects

### Shadows (low → high)
- **subtle** — `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px`

### Gradients
- `#EEC32D,#EC4B4B,#709AB9`

## 6. Component Specs

### Button
- #171717 bg
- #FFFFFF text
- 100px radius
- 500 weight

### Card
- #FFFFFF bg
- 1px solid #EBEBEB
- shadow rgba(0
- 0
- 0
- 0.04) 0px 2px 2px 0px

### Input
- white bg
- 1px subtle border
- 6px radius
- 8px 12px padding

### Link
- #171717

## 7. Implementation Rules

**DO:**
- Reserve `#171717` for accent moments — don't overuse
- Stick to the spacing scale (4,8,12,16,24,32,40,44,48) — don't introduce arbitrary values
- Match the radius vocabulary: pill buttons
- Pair Geist 700 headings with Geist 14px 400, 1.33 line-height
- Honour the visual hierarchy: bold colour on primary actions, muted tones on secondary

**DON'T:**
- Copy this design verbatim — use the tokens as a system to build something original
- Mix in colours outside this palette (especially competing primary colours)
- Break the radius scale by introducing one-off values
- Use the same shadow tier for everything — match elevation to importance

---

*Source: vercel.com · Snapped via UIDrop on 2026-06-01*
*Do not copy the design. Use these tokens to build similar UI with the same feel.*