# Vercel — DESIGN.md

A precise monochrome system, from marketing to the console.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-20

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **Geist Sans**. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light architectural

### Observed palette
- Canvas: `#fafafa`
- Surface: `#ffffff`
- Primary text: `#171717`
- Body text: `#4d4d4d`
- Border: `#ebebeb`
- Link blue: `#0070f3`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero | 64px / 64px | 400 | −3.84px |
| Section heading | 56px / 56px | 450 | −3.36px |
| Body | 16px / 24px | 400 | normal |

### Layout & hierarchy
- Use aligned section boundaries and subtle borders to establish the page grid.
- Contrast large headline typography with precise small navigation and labels.
- Pricing extends from simple plan choices to a detailed comparison table.

### Components & behavior
- Use dark filled primary actions, white secondary actions and low-contrast dividers.
- Keep proof points, technical diagrams and customer evidence close to their claims.
- Let deliberate spacing and type establish hierarchy before introducing colour.

## Product — Light console

### Observed palette
- Canvas: `#fafafa`
- Surface: `#ffffff`
- Primary text: `#171717`
- Secondary text: `#4d4d4d`
- Border: `#ebebeb`
- Interactive blue: `#0072f5`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Page heading | 30px / 32px | 600 | normal |
| Navigation & controls | 14px / 20px | 400–500 | normal |
| Base | 16px / 24px | 400 | normal |

### Layout & hierarchy
- A persistent left rail groups team-level tools; a top bar supplies project scope.
- Place page-level search and filters above the results or empty state.
- Provider catalogs use repeated rows or cards with predictable labels and actions.

### Components & behavior
- Observed navigation rows use 6px corners; primary action fills use #171717.
- Project selection precedes analytics when no project is selected.
- Show setup guidance and clear empty states instead of inventing sample metrics.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, collapse rails on small screens, stack grids and allow tables to scroll.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- Projects overview: First-project launchpad with import, agent and template entry points. Captured in an empty Hobby research team. Screenshot: `captures/vercel-product-projects.jpg`.
- Deployment history: Deployment filters and a no-production-deployment state in the research team. Screenshot: `captures/vercel-product-deployments.jpg`.
- Analytics project picker: Team-level Analytics asks for a project before showing metrics. No analytics dashboard is available in this empty team. Screenshot: `captures/vercel-product-analytics.jpg`.
- Storage marketplace: Built-in storage choices sit above a marketplace of database providers. No store or integration created. Screenshot: `captures/vercel-product-storage.jpg`.
- Integrations: Installed integrations empty state followed by discovery cards and a marketplace entry point. Screenshot: `captures/vercel-product-integrations.jpg`.
- Integration marketplace: Searchable provider catalog with category navigation and integration cards. Browse only; no installation authorized. Screenshot: `captures/vercel-product-marketplace.jpg`.
- Integration detail: Provider overview with social proof, resources, instructions and a connection action. Connection was not started. Screenshot: `captures/vercel-product-integration-detail.jpg`.

## Avoid
- Do not apply the marketing headline scale to dense product navigation.
- Do not replace meaningful empty states with fabricated charts.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured hover states, mobile layouts or paid-plan behavior.

## Reference pages
- Homepage: https://vercel.com/home
- Pricing: https://vercel.com/pricing
- Enterprise: https://vercel.com/enterprise

## Capture scope
Google signup completed on Hobby. Email failure and template setup were captured as branches. No repository connection or deployment was performed.
Product exploration includes read-only pages and unsubmitted composers. Vercel has no deployed project, so analytics is its project-selection state.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.