Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Peec AI 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:** Peec AI
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad409c910b3adf9e48c37_6acad1a134c900e8fc1b9c43_cms-1a93dca4061e04eedec91f46.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
- **Style:** Restrained monochrome SaaS pricing page with a precise grid, generous whitespace, white cards and a strong black closing section.
- **Visual character:** Large neutral sans-serif titles contrast with small muted supporting copy. Logos, product imagery and tiny status badges provide the few colored accents.
- **Surface treatment:** Pale gray page background, faint structural grid lines, thin card borders, softly rounded corners and selective shadows. The promoted middle pricing card has more elevation than its neighbors.
### Page composition
- **Capture scale:** 2880 ร 11178 image px. CSS estimates below assume an unverified 2ร capture, corresponding to approximately 1440 ร 5589 CSS px.
- **Container:** Main content is approximately 1190 CSS px wide, centered with roughly 125 px side margins. Faint vertical guides follow the container edges through much of the page.
- **Header and hero:** Logo at left; three quiet navigation links, outlined login and dark signup at right. A centered pricing title sits below, followed by a two-line description and compact trust statement.
- **Logo strip:** A horizontal row of nine customer logos spans the container between faint full-width horizontal rules.
- **Pricing region:** A centered billing toggle and discount note sit above three equal cards. Starter, Pro and Enterprise align along the top; their titles, prices, descriptions, buttons and feature lists follow a common vertical structure.
- **Pricing base:** The three cards sit within one larger rounded enclosure. A full-width add-on row beneath them has a plus icon, explanatory sentence and a compact cluster of model logos.
- **Agency section:** After a large vertical gap, a broad rounded panel splits into a wider editorial left area and a narrower white product card on the right. The left includes a small category badge, two-line headline, paragraph, agency-logo group and black action button. The right combines title, paragraph and layered workspace imagery.
- **FAQ:** A centered heading and two-line introduction lead to eight collapsed question rows in a narrower centered column.
- **Company region:** A two-column band pairs a funding/growth statement, supporting copy and hiring action with a team photograph and adjacent recruitment copy.
- **Testimonials:** A centered label and two-line heading precede three masonry-style columns of white quote cards. Visible cards include text, small circular portraits, names and muted roles; pale outlined empty blocks bookend parts of the grid.
- **Closing and footer:** A wide black CTA panel pairs a large left-aligned message and two buttons with a tilted dark product screenshot on the right. A full-width black footer follows with brand message, product/company links, social links and a separate legal row.
### Information hierarchy
- **Pricing emphasis:** Large euro amounts dominate each card, while the per-month suffix is smaller and gray. Pro receives a green Most Popular badge and a dark filled action.
- **Plan comparison:** Consistent vertical alignment lets readers compare tiers across price, description, CTA and checkmarked features without a separate table.
- **Secondary audiences:** The agency block is positioned after standard plans and uses its own introduction and CTA, keeping that audience-specific path distinct.
- **Trust sequence:** Customer logos support the initial pricing offer; company/team content and testimonials provide additional reassurance farther down the page.
- **Closing emphasis:** The final headline shifts from white text to a muted gray second line, directing attention to the primary trial action before the darker sales alternative.
### Typography
- **Family:** Neutral modern sans serif throughout. Exact font identity is unverified; the appearance is conventional and clean rather than decorative.
- **Hero title:** Approximately 64 CSS px, weight around 600, with 70โ76 px leading and slightly negative tracking.
- **Section headings:** Agency and testimonial headings are approximately 40 px with 42โ46 px leading. The FAQ heading is around 40 px; its supporting introduction is larger than ordinary body text.
- **Plan typography:** Plan names are approximately 18 px semibold. Prices are approximately 40โ44 px with tight leading, while billing suffixes and descriptions are approximately 16 px.
- **Body and feature text:** Approximately 16 px with 22โ24 px leading. Feature lists use dark text; explanatory copy and testimonials use medium gray.
- **Microcopy:** Billing options, badges, trust captions, author roles and footer legal text are approximately 12โ14 px.
- **Measurement limit:** Sizes and weights are reconstruction estimates under the assumed 2ร scale, not verified CSS declarations.
### Colors & surfaces
- **Page canvas:** Sampled sRGB #F7F7F7 forms the dominant light-gray background; #F5F5F5 appears in subtle related surfaces.
- **Cards:** Sampled #FFFFFF supplies pricing cards, testimonial cards and white action surfaces.
- **Dark surfaces:** Sampled #171717 is a principal near-black tone, while #000000 fills the footer and other deepest dark regions.
- **Supporting text:** Sampled #737373 is a recurring medium-gray reference for descriptions and secondary information.
- **Accents:** The popularity badge is pale green with stronger green text. Customer logos, portraits and tiny model symbols introduce localized color; exact accent hex values are not established by the dominant-color sample.
- **Borders and shadows:** Extremely light gray rules define the underlying grid and accordion rows. Soft neutral shadows lift the middle plan, layered workspace preview and testimonial cards without a colored glow.
### Components
- **Pricing cards:** Approximately 390 CSS px wide and 630 px tall, with roughly 32 px padding, 12โ14 px radii and thin neutral borders. The middle card's shadow extends below its base.
- **Billing switch:** Compact rounded segmented control, roughly 180 px wide and 32 px high. Pay monthly is shown on a white raised segment; Pay yearly is quieter. The adjacent savings note is small and dark.
- **Plan actions:** Full-width buttons approximately 44 CSS px high, with modest 5โ6 px radii and right-facing arrows. Outer plans use white outlined actions; Pro uses near-black fill and white text.
- **Feature rows:** Small gray checkmarks align in a narrow leading column. Text occupies the remaining width and wraps naturally into multiple lines; spacing is about 16โ20 px between entries.
- **Agency preview:** Rounded white card with generous top padding and a layered application screenshot below. Overlapping workspace windows create a soft depth effect.
- **FAQ accordion:** Approximately 890 CSS px-wide question column with rows around 76 px tall, fine bottom rules and right-aligned downward chevrons. All visible rows are collapsed.
- **Testimonial cards:** Approximately 390 px-wide white panels with roughly 28โ32 px padding, 10โ12 px radii and varied heights based on quote length.
- **Final CTA:** Approximately 1190 ร 450 CSS px, rounded around 12 px. A tilted dashboard illustration occupies the right half and fades into the near-black background.
- **Footer links:** Three main content groups sit well inside the black band. A fine dark divider separates them from the copyright/legal row.
### Visual rhythm
- **Page pacing:** Compact header, centered introduction, dense pricing comparison, broad whitespace, agency offer, FAQ, company proof, testimonials and final conversion create a deliberate long-page progression.
- **Grid continuity:** Faint vertical and horizontal rules carry alignment across otherwise separate sections, giving the page an architectural appearance.
- **Contrast progression:** Most sections remain light and quiet; the large dark CTA and black footer form a strong visual ending.
- **Card rhythm:** Pricing uses equal-height repetition, while testimonials use staggered heights. This changes the reading texture without introducing a new styling system.
- **Spacing:** Major regions are separated by approximately 100โ160 CSS px of breathing room; internal card spacing is substantially tighter.
### Responsive
- **Evidence limit:** Only desktop composition is shown. The following are adaptation recommendations.
- **Pricing recommendation:** Stack cards on narrow screens, retain clear billing context and repeat necessary plan labels rather than relying on horizontal comparison.
- **Logo recommendation:** Wrap or scroll the customer-logo strip with accessible controls; avoid shrinking logos into illegibility.
- **Section recommendation:** Stack agency and company layouts, keeping each heading, explanation and action together before related imagery.
- **FAQ recommendation:** Use full available width with 20โ24 px side padding, allow long questions to wrap and retain a consistent chevron column.
- **Closing recommendation:** Stack testimonials and simplify the tilted CTA image on mobile; preserve readable text and reachable actions above decorative media.
### Adaptation guidance
- **Preserve decision clarity:** Keep plan names, billing basis, prices, limits and CTA hierarchy aligned. Populate every figure and claim from the target content rather than copying the reference's commercial terms.
- **Highlight selectively:** Use one promoted tier with a small badge and stronger action, while retaining comparable spacing and structure across all plans.
- **Keep audience paths meaningful:** Include a separate agency or enterprise block only when the new offer actually needs it.
- **Use authentic proof:** Replace customer logos, funding statements, hiring claims and testimonials with verified target-brand material or omit those regions.
- **Retain the visual system:** Reuse pale gray canvas, white bordered cards, restrained shadows, dark actions and a high-contrast final band. Keep color concentrated in purposeful badges and real imagery.
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.