Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Vercel Pricing Page
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Vercel
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad849b3daa04f54276328_6acad7cf53d9f68d7c38382a_cms-1d7f0d211e400d205af459b6.webp
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
### Overall aesthetic
- **Character:** A mostly monochrome pricing page combines bold centered headings, softly elevated plan cards and an extensive fine-lined comparison table.
- **Accent strategy:** Blue and purple inclusion markers, a blue analytics chart and a multicolor closing slogan punctuate a white/gray foundation. Large soft radial glows add depth behind key sections.
### Page composition
- **Capture scale:** The source measures 2880 × 14384 image pixels. CSS estimates below assume a 2× capture; device-pixel ratio is unverified.
- **Header and hero:** A slim navigation bar precedes a centered two-line headline. Three equal-width plan cards sit across a roughly 1170 px CSS region.
- **Social proof:** Four metric/logo cards form a row beneath the plans, followed by a full-width enterprise contact strip.
- **Add-on feature:** A centered section heading introduces a broad bordered panel, with product copy and two buttons at the left and an analytics interface illustration at the right.
- **Comparison matrix:** A four-column layout pairs feature labels with three plan columns. Scale, Storage, Security and Support groups contain numerous ruled rows, with application/team/business subdivisions in Scale.
- **Closing regions:** A pale FAQ band contains nine collapsed questions. A colorful slogan/action section leads into a broad multi-column footer with status, social links and theme controls.
### Information hierarchy
- **Plan choice:** Plan names and large price/custom labels lead each card, followed by a short description, checkmarked benefits and bottom-aligned actions.
- **Featured tier:** The middle card has a darker border, floating Most Popular badge and stronger button shadow.
- **Detailed comparison:** Large group headings with outlined circular icons organize the long matrix. Numeric limits use gray text; colored check circles communicate inclusion.
- **FAQ and conversion:** The FAQ heading is centered above a narrow accordion column. The final slogan uses saturated gradients to regain attention after the dense table.
### Typography
- **Family:** A clean sans serif is used throughout; exact font identity is unverified.
- **Display:** The hero heading appears approximately 72 px CSS, bold, with tight tracking and roughly 80 px line height. Major section headings are around 48 px.
- **Plan roles:** Plan names are approximately 18 px and semibold; prominent price/custom labels are around 34 px. Billing qualifiers use smaller gray text.
- **Body and table:** Card benefits, navigation and matrix values are approximately 14 px with 20–24 px leading. Feature labels are darker than the associated numeric values.
- **Small emphasis:** The social-proof eyebrow uses uppercase letters and expanded tracking; the popularity badge uses compact bold white text.
### Colors & surfaces
- **Measured foundation:** ICC-aware sRGB sampling yields #FFFFFF, #FAFAFA and #F5F5F5 for the canvas, FAQ band and pale surface details.
- **Measured text and rules:** Near-black #171717 anchors headings/buttons; fine dividers include #EAEAEA. Muted text uses medium gray.
- **Plan markers:** Inclusion circles use black for the first plan, vivid blue for the middle and purple for the enterprise column, each with a white check.
- **Illustrative accents:** The analytics illustration uses a blue line with pale-blue area fill and small green change badges. The closing slogan transitions through cyan, violet, pink, orange and yellow.
### Components
- **Plan cards:** Three roughly 380 px wide CSS cards have approximately 40 px padding, 12 px corners, light borders and soft shadows. Actions align near a shared bottom baseline.
- **Benefit rows:** Small filled check circles precede most benefits; outlined plus circles distinguish selected additions in the middle plan.
- **Action styles:** Black filled buttons and white outlined alternatives use small radii and compact heights. Several primary actions include right arrows.
- **Proof cards:** Four equal bordered boxes contain a customer mark, large numeric metric and muted explanatory label, centered vertically.
- **Add-on panel:** A wide rounded border encloses a two-column composition. The analytics mockup shows metric tabs, a line/area chart, grid and a tooltip.
- **Comparison table:** Thin horizontal and vertical rules separate a wide label column and three equal value columns. Small circular information and monetary symbols accompany selected entries.
- **FAQ accordion:** Nine full-width question rows use thin separators and right-aligned downward chevrons; all are collapsed in the capture.
- **Footer:** Multiple link columns sit beside a brand/status block. Social icons and three theme-mode symbols complete the utility layer.
### Visual rhythm
- **Opening spacing:** Generous gaps separate the hero, plan cards, proof row and add-on section, while card interiors keep a steady benefit-row cadence.
- **Matrix rhythm:** Repeated approximately 56 px CSS rows support scanning; larger blank intervals distinguish category groups and subdivisions.
- **Width changes:** Broad cards and comparison content contrast with the narrower centered FAQ column, preventing the entire page from feeling uniformly dense.
- **Closing contrast:** A pale FAQ surface, colorful conversion message and neutral footer form distinct final stages.
### Responsive
- **Evidence boundary:** Only a desktop capture is available; the following are recommendations.
- **Plan layout:** Stack plan cards or use an accessible comparison selector on narrow displays, preserving tier names and clear actions.
- **Table readability:** Retain feature labels and plan associations through a scrollable matrix or per-plan view; do not squeeze values into unreadable columns.
- **Secondary regions:** Stack proof cards, add-on copy/chart and footer groups. Let long FAQ questions wrap with chevrons aligned independently.
- **Accessible controls:** Preserve comfortable touch targets for information icons, accordions and theme controls.
### Adaptation guidance
- **Layered decision support:** Reuse the sequence of concise plan cards, proof, optional add-on, detailed matrix and FAQs for complex product pricing.
- **Consistent tier identity:** Keep column alignment and inclusion-marker colors consistent across the comparison, with text/icon alternatives to color.
- **Data separation:** Treat all displayed prices, limits and claims as captured content rather than current commercial facts; populate an implementation from maintained product data.
- **Reusable tokens:** Establish card padding/radii, subtle border colors, action styles and table row heights after validating the assumed 2× scale.
- **State completeness:** Define expanded FAQ content, tooltip behavior, focus states and mobile comparisons; these interactions are not verified by the static image.
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.