Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: FLG 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:** FLG
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f272d355b33f0be2b6a37b_1660054955829-5b02990e-0211-42f0-ae61-5f508252f826-name%3DFLGPricingPage.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 CRM pricing page uses rounded sans-serif headings, purple brand surfaces and large, open explanatory sections.
- **Identity:** Asymmetric rounded lower-right corners recur in buttons and pricing panels; green checkmarks and pale backgrounds soften the commercial presentation.
### Page composition
- **Capture:** The original is 1440 ร 8160 image pixels, inspected throughout. Measurements approximate image pixels; CSS scale is unverified.
- **Opening:** A contact strip and navigation sit over a very large pale oval background. Centered pricing introduction leads to a customer-logo row and demo action.
- **Overview:** A pale section introduces a large purple benefits panel with seven checked items, starting price and supporting note.
- **Plans:** Three columns present Plus, XL and Concierge, each with a colored price header and pale feature body. XL carries a popular-plan badge.
- **Supporting content:** A broad integration panel pairs text with a collage of app marks; a pale-green review band follows.
- **Closing:** A deep-purple trial section precedes a bordered support card with three portraits, a message link and dark-gray multi-column footer.
### Information hierarchy
- **Value before comparison:** Introductory copy, customer marks and a consolidated benefits panel precede individual plan detail.
- **Pricing roles:** Large white prices dominate colored headers, followed by included-user information and long feature lists.
- **Recommended plan:** XL receives the brightest purple header and a small white badge.
- **Repeated conversion:** Purple Get a demo buttons and accompanying contact text recur between major sections.
### Typography
- **Family:** Rounded geometric sans-serif headings pair with readable sans-serif body text; exact families are unverified.
- **Headings:** Main and major section headings are approximately 48 pixels, bold with about 60-pixel leading.
- **Prices:** Around 44โ48 pixels, bold, with smaller monthly suffixes.
- **Body:** Large explanatory copy is around 20โ24 pixels with 30โ34-pixel leading; feature lists are approximately 16โ18 pixels.
- **Utilities:** Navigation is around 18 pixels and semibold; footer links are roughly 16 pixels, with smaller legal text.
### Colors & surfaces
- **Measured base:** White #FFFFFF alternates with pale cool gray #F4F6FA.
- **Measured brand:** Purple #6E5FE8 provides large benefit panels, XL header and demo actions; deep purple #2A165B anchors the trial section and Concierge header.
- **Measured neutral:** Dark gray #414652 supports typography, Plus header and footer.
- **Measured trust surface:** Pale green #F0F7F2 supports the review band.
- **Accent relationship:** Bright green circular checkmarks and colorful app marks add focused variation.
### Components
- **Hero shape:** An oversized pale oval extends beyond the top edge, creating a curved lower boundary behind the introduction.
- **Demo buttons:** Purple rectangles have white bold labels, right arrows and enlarged lower-right corner rounding.
- **Benefits panel:** A wide purple rectangle centers a white brand mark, checkmarked list and price, with a dramatically rounded lower-right corner.
- **Plan cards:** Three roughly equal columns use contrasting colored headers, pale bodies and generous list spacing; bodies differ in height with content.
- **Integration panel:** A pale rectangle holds left-aligned arrow bullets beside a large plus-sign pattern and app-logo collage.
- **Reviews:** A horizontal review widget includes stars, short excerpts, dates and circular navigation arrows.
- **Support card:** A thin red outline encloses a headset illustration, heading/copy and circular staff portraits with colored rings.
- **Footer:** Brand, three link groups and an email/demo form sit above centered legal lines; a droplet-shaped Top control overlaps the boundary.
### Visual rhythm
- **Container:** Most content spans around 1150โ1300 pixels with broad side margins.
- **Pacing:** Large white gaps of roughly 120โ180 pixels separate major commercial sections.
- **List cadence:** Benefit lines and plan features use consistent vertical intervals, while headings receive much larger surrounding space.
- **Color sequencing:** White, pale gray, purple, pale green and deep purple form distinct chapters over the long page.
### Responsive
- **Observed state:** Only the wide desktop page is supplied; compact behavior is unverified.
- **Recommended plans:** Stack plan cards without losing their price/header associations and popular-plan cue.
- **Recommended content:** Stack integration text/art, wrap logo rows and collapse footer columns; reduce oversized hero curvature if it crowds copy.
- **Recommended type:** Scale headings fluidly while retaining comfortable list spacing and full-width touch-friendly actions.
### Adaptation guidance
- **Preserve identity:** Reuse purple, rounded typography and asymmetric corner treatments consistently.
- **Keep comparison readable:** Align plan-header content and retain clear grouping for inherited features and nested Concierge services.
- **Content fidelity:** Treat displayed prices, reviews and trial terms as captured content rather than independently verified current offers.
- **Accessibility:** Use meaningful heading order, keyboard-operable review controls and visible focus for repeated demo actions.
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.