Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Framer 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:** Framer
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecbb595cf598bfc6c38052_1659680778408-screenshot-device-7c717d72639526cb08f897d3cc73d4d6-1659680335363.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 long pricing page combining a dark purple-gradient introduction with bright white pricing and comparison sections. Heavy rounded sans-serif headings, vivid blue/purple accents and softly raised cards create an approachable product feel.
- **Image basis:** Source dimensions are 1440 ร 8582; all six readable crops were inspected at approximately 1400 px wide. Geometry below is approximate inspection pixels; CSS scale and pixel ratio remain unverified.
### Page composition
- **Header and introduction:** A black top strip ends with a small menu icon at the far right. The gradient hero places a roughly 390 px wide centered text/action block left of center, leaving a broad empty area to the right. A centered customer-logo row sits below.
- **Site pricing:** A centered heading and two-line explanation introduce three approximately 318 px wide cards across a roughly 992 px content area: a gradient free card and two white paid cards.
- **Team pricing:** A heading precedes two approximately 486 px wide cards: a white editor plan and a dark cost calculator.
- **Business pricing:** Two similarly aligned cards present a white startup program and a vivid pink-to-purple business plan.
- **Comparison and FAQ:** A long four-column comparison follows, grouped into Hosting, Publishing, Editor, Features and Business. A centered FAQ heading leads to seven collapsed question rows. A thin cookie notice spans the bottom.
### Information hierarchy
- **Promotional entry:** A large white two-line headline and substantial pale supporting paragraph lead to a broad blue signup button.
- **Plan decisions:** Each site card presents plan name, large price, small billing badges, checkmarked benefits and a full-width action. Accent color associates Basic with blue and Pro with purple.
- **Additional costs:** Team editors and the calculator form a separate decision layer. Quantity steppers and line totals visually explain the calculator's role without proving its behavior.
- **Detailed verification:** The comparison supplies a quieter, row-by-row reference after the cards. Group labels, feature labels and colored checkmarks establish hierarchy.
- **Help:** Collapsed FAQs provide a final support layer; the cookie notice is separated by a faint top border.
### Typography
- **Display:** Hero and major section headings are approximately 56 px, heavy, with compact line-height and tight tracking. The rounded sans-serif identity is unverified.
- **Hero body:** Supporting copy is approximately 28 px with about 38 px line-height. Section descriptions use a similar size in medium gray.
- **Cards:** Plan labels are around 20 px bold, prices around 30 px bold, and benefits around 18 px with generous row spacing. Billing pills use approximately 14 px medium text.
- **Comparison and FAQ:** Feature labels are approximately 16โ18 px bold; values are around 14โ16 px. FAQ questions are approximately 18 px bold. Cookie text is smaller and regular.
### Colors & surfaces
- **Measured neutrals:** White #FFFFFF, black #000000, dark #222222, light #F8F8F8 and separator gray #EFEFEF occur in sampled pixels.
- **Hero:** A near-black-to-deep-purple gradient supports white headings and logos, with muted lavender-gray supporting copy.
- **Plan accents:** Bright blue and electric purple identify paid tiers in prices, checkmarks, badges and buttons. The free card blends blue into purple; the business card blends hot pink into purple.
- **Depth:** White cards have broad, faint shadows against the white page. The dark calculator uses a subtle black/charcoal gradient and white text.
### Components
- **Site cards:** Approximately 318 px wide panels use roughly 20 px corners and around 29 px internal padding. Benefit rows use small filled circular checks and consistent left alignment.
- **Card buttons:** Approximately 46โ48 px high actions span the inner card width, with roughly 10 px corners and subtle shadows. Button colors follow the tier; the gradient free card uses a white action.
- **Billing badges:** Small softly rounded pills sit below prices, combining a short label with a tiny billing icon where shown.
- **Calculator:** Three compact minus/value/plus steppers align with plan/editor labels and right-aligned line totals. A large white Manage team button anchors the dark card.
- **Business cards:** Divider rules separate headings and supporting copy from six benefit rows. Bottom-aligned actions maintain symmetry across the pair.
- **Comparison:** Four evenly spaced plan columns use colored headings and circular checkmarks. Each feature title starts at the content's left edge above its values; thin rules separate tall rows. Blank cells indicate no visible checkmark, rather than a verified interactive state.
- **FAQ and notice:** FAQ questions align within a narrower central column, each with a gray plus at the right. All are collapsed. The bottom cookie bar includes a blue policy link and a circular close control.
### Visual rhythm
- **Macro spacing:** Large gaps isolate Site, Team and Business pricing, followed by the comparison and FAQ. The approximately 992 px shared content width ties the sections together.
- **Card rhythm:** Repeated benefit spacing, aligned buttons and consistent rounded corners unify cards with very different surfaces.
- **Comparison rhythm:** Tall rows, fine horizontal rules and four repeated value positions favor scanning over density. The table occupies much of the page length.
- **Contrast progression:** A saturated hero gives way to white sections; dark and gradient cards provide selective visual emphasis without coloring the entire comparison.
### Responsive
- **Evidence limit:** A wide screenshot with a compact menu is visible; breakpoint logic and mobile views are unobserved.
- **Recommended cards:** Stack pricing cards in a consistent order on narrow screens and preserve the association between price, billing basis and action.
- **Recommended comparison:** Use a clearly labeled horizontal-scroll table or a plan-by-plan comparison. Keep feature labels and plan identities available during long navigation.
- **Recommended controls:** Increase stepper and FAQ hit areas, wrap the cookie notice without hiding its close action, and scale hero typography fluidly.
- **Recommended hero:** Remove excessive empty right-side space on small screens while preserving the centered alignment within the introductory text block.
### Adaptation guidance
- **Preserve:** Keep separate site, editor and business pricing layers, consistent benefit rows, strong tier color associations and a detailed comparison below the cards.
- **Build:** Model plans and comparison data together so card claims, billing labels and table values remain consistent. Reuse pricing-card, badge, check-row and FAQ components.
- **Calculator clarity:** Make quantity labels, billing period and totals explicit in a functional implementation; the screenshot demonstrates only one static configuration.
- **Validate:** Confirm actual font metrics, accent contrast, responsive comparison usability and expanded FAQ states. Prices visible in this historical screenshot should be treated as image content, not current commercial information.
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.