Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Loom 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:** Loom
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbd625ec4801bb972215e0_6acbd346080342986148830f_cms-e97cece6ce83e708dcad4f40.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 polished pricing page with oversized rounded surfaces, purple/lavender branding and a long detailed comparison matrix.
- **Hierarchy:** Three prominent plan cards introduce the decision, followed by explanatory content, exhaustive feature tables and large FAQ blocks.
### Page composition
- **Capture scale:** The source measures 2880 ร 20938 pixels. A roughly 1440 ร 10469 CSS-pixel page at 2ร scale is plausible but unverified; all eight readable portions were inspected.
- **Header and plans:** A broad navigation row precedes a large centered heading and three equal plan columns. The white Business card is raised over pale lavender outer cards.
- **Explanation:** A compare-plans action and education banner lead into a large dark-purple two-column account-type explanation.
- **Comparison:** A four-column table uses a wider feature-name column plus Starter, Business and Enterprise columns across many grouped sections.
- **Ending:** A lavender FAQ area, customer-logo strip, raised sales CTA and six-column pale footer complete the page.
### Information hierarchy
- **Plan cards:** Name, short positioning, price/offer, action, allowance bullets and key features appear in sequence.
- **Featured tier:** Business uses a white elevated card and stronger central prominence, while Starter and Enterprise share pale purple surfaces.
- **Table groups:** Workspace members/videos, team workspace, recording, editing, branding, content management, analytics, interaction, security, admin, support and integrations each have a separate category band.
- **FAQ:** Nine large collapsed questions use a consistent arrow affordance.
- **Conversion:** A final large white sales card overlaps the footer background, repeating a contact action after the detailed comparison.
### Typography
- **Family:** A rounded geometric sans serif is visible; exact identity is unverified.
- **Major headings:** Hero and large section headings are approximately 60โ64 estimated CSS pixels, bold, with tight tracking.
- **Plan roles:** Plan names are around 42โ44 pixels, bold; price is roughly 32 pixels with a much smaller billing suffix.
- **Body:** Card copy and table rows are approximately 16 pixels with 24-pixel line height; explanatory large paragraphs are around 28 pixels.
- **FAQ/footer:** Questions are around 24 pixels, medium to semibold; footer links are around 14โ16 pixels with uppercase small group labels.
### Colors & surfaces
- **Measured palette:** ICC-aware sRGB sampling yields white #FFFFFF, pale lavender #EFF0FF, stronger lavender #D1D1FA, dark purple #2E1B53 and action purple #555AE4.
- **Neutral structure:** #F1F0F3 fills unavailable table cells, while #E4E2E7 outlines the comparison grid.
- **Action treatment:** Purple filled pills have a lighter lavender outer ring; secondary pills use pale lavender.
- **Elevation:** The center plan and final sales card use broad diffuse shadows. Large content/FAQ panels have generous rounded corners.
### Components
- **Plan cards:** Three tall columns use roughly 40โ48-pixel estimated CSS padding. Business overlaps slightly forward with a stronger shadow and rounded silhouette.
- **Captured pricing:** The displayed Business annual-rate figure and trial/allowance text belong to the screenshot, not a verified current offer.
- **Account-type panel:** A dark rounded block pairs a centered heading/paragraph with two columns, small free/paid badges and a vertical divider.
- **Comparison matrix:** Fine borders, purple circular checks, gray unavailable cells, small information icons and occasional underlined values support detailed comparison.
- **FAQ blocks:** Nine large lavender rounded rectangles use substantial padding and right-aligned downward arrows.
- **Trust and sales:** A centered adoption claim precedes a horizontally clipped customer-logo row; the final raised CTA pairs a large question at left with a purple contact pill at right.
- **Footer:** Six resource columns sit on pale lavender, followed by circular social icons and legal links on white.
### Visual rhythm
- **Opening:** Large plan cards establish a spacious rhythm before the denser table.
- **Table cadence:** Category bands and wide vertical gaps separate groups; consistent short rows make availability easy to scan.
- **FAQ contrast:** Large rounded question blocks replace fine table lines, creating a calmer closing section.
- **Spacing:** Broad 80โ120-pixel estimated CSS section gaps and repeated pill geometry unify the long page.
### Responsive
- **Recommendation:** Stack summary cards and use an accessible horizontally scrollable comparison table or selectable plan columns on narrow screens.
- **Recommendation:** Preserve feature labels and column headers during comparison; avoid shrinking all table text to fit.
- **Recommendation:** Reduce FAQ padding, wrap customer logos and collapse navigation/footer groups on phones. No mobile rendering is shown.
### Adaptation guidance
- **Preserve:** Retain summary-first pricing, detailed comparison groups and consistent purple action styling.
- **Build:** Use reusable plan, feature-table, FAQ and sales-card components with shared spacing/radius tokens.
- **Accessibility:** Provide semantic table headers and readable availability labels alongside checks; expose expanded FAQ state in an implementation.
- **Content integrity:** Treat prices, limits, customer counts and feature availability as historical captured content rather than current validated facts.
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.