Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Slite Pricing
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Slite
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f272d363e6b55f7d3bd523_1660054940124-180cfc0b-62da-463e-883e-54db85ad9009-name%3DSlitePricing.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 warm, approachable pricing page combines cream backgrounds, pastel plan cards, blue pill actions, a detailed comparison table, and playful hand-drawn illustration.
- **Evidence:** The 1440 ร 7887 px screenshot was inspected across six readable crops. Dimensions below are approximate source pixels; CSS scale and device pixel ratio are unverified.
- **Capture detail:** The top pricing headline is partly clipped beneath the header in the supplied image. That visible overlap should not be assumed to be intentional design or evidence of a particular scrolling behavior.
### Page composition
- **Header:** A small Slite wordmark sits left; product/navigation links, sign-in, an outlined demo pill, and a filled blue free-start action sit right.
- **Plan selection:** A centered billing switch precedes three equal cards for Free, Standard, and Premium. A small currency note follows. An Enterprise panel spans the wider content area below a custom-plan heading.
- **Proof and comparison:** A sales-contact row and divider lead to a six-logo customer strip. A long comparison table follows with a wide feature-label column and four plan columns.
- **Testimonials:** Three large quote cards use white, blue, and pink surfaces, with circular portraits overlapping outside their bounds.
- **FAQ and close:** A broad curved transition introduces a white FAQ section with six collapsed rows. A hand illustration, large closing statement, blue CTA, multi-column footer, newsletter field, legal links, and chat launcher complete the page.
### Information hierarchy
- **Plans:** Plan names sit above oversized prices and smaller per-member billing qualifiers. Pill CTAs precede compact feature lists with blue checks.
- **Enterprise:** A dark full-width panel contrasts with the pastel cards, grouping a line illustration, plan explanation, blue action, and a separate benefit list.
- **Comparison:** Repeated plan headings and actions sit above category groups covering usage, features, collaboration, administration, security, and support.
- **Social proof:** Customer logos provide a low-density pause before the table; quote text and author attribution build a separate editorial section afterward.
- **Questions:** Large bold FAQ prompts with right-side chevrons are the dominant content in the white lower section. No expanded answer is visible.
### Typography
- **Family:** A friendly sans serif with rounded details appears across headings, controls, and tables. Exact font identity is unverified.
- **Headings:** Major lower-section headings are approximately 46โ48 px bold with 52โ56 px line-height. Plan names are around 29โ30 px semibold.
- **Prices:** Main numerals are approximately 58โ62 px; currency marks and raised fractional digits use smaller sizes. Qualifiers use about 12 px uppercase text with slight tracking.
- **Body and table:** Plan lists and table values are around 16 px with 24โ30 px line-height. Table category headings are approximately 24 px semibold.
- **FAQ and quotes:** FAQ prompts are around 28โ30 px semibold. Quotes are approximately 18 px with 27 px line-height; attribution is small uppercase text around 11โ12 px.
- **Footer:** Group labels and links are around 13โ14 px, with a compact but readable vertical rhythm.
### Colors & surfaces
- **Measured palette:** Sampled source pixels include cream #F9EFE5, white #FFFFFF, charcoal #2F2F2F, pale pink #F7E4EA, pastel blue #A2C3F5, and saturated action blue #186AE7.
- **Semantic use:** Cream spans pricing, comparison, and testimonials. White, pink, and blue distinguish the three primary plan cards; charcoal emphasizes Enterprise.
- **Actions:** Blue marks global CTAs, table actions, checkmarks, and the billing switch. Paid-plan card buttons use charcoal, while the Free card uses an outlined white action.
- **Lower page:** The FAQ and footer use white surfaces. Thin warm-gray dividers separate table rows and FAQ prompts; soft shadows lift plan and quote cards.
### Components
- **Pricing cards:** Approximately 356 ร 580 px, with roughly 10 px corner radii and 30โ32 px padding. Prices and CTAs are centered; feature lists are left-aligned.
- **Billing switch:** A blue capsule approximately 62 ร 35 px contains a white circular thumb toward the yearly label. Only this displayed state is observed.
- **Pill actions:** Primary pricing actions are about 180 ร 54 px with fully rounded ends. Header buttons are more compact; table actions are smaller blue pills.
- **Enterprise panel:** Approximately 1280 px wide, charcoal, rounded about 10 px, with a white hand-drawn building asset and two content regions.
- **Comparison table:** Approximately 1230 px wide; the left label column takes about one third, with four equal remaining columns. Rows use fine horizontal lines, blue checks, dark dashes, or textual limits. Small circled information icons follow some labels.
- **Quote cards:** Approximately 370 ร 390 px with 10 px radii and soft shadows. Attribution sits near the bottom; portraits overlap at differing top/bottom positions.
- **FAQ rows:** Approximately 800 px wide, separated by thin rules, with generous vertical padding and small gray chevrons.
- **Newsletter:** A long outlined pill input ends in a circular blue arrow button. A separate blue circular chat launcher appears at the lower-right edge.
### Visual rhythm
- **Main widths:** Header and Enterprise regions use roughly 80 px outer gutters. The three-card group is narrower and centered; the FAQ narrows further to about 800 px.
- **Plan spacing:** Approximately 24 px separates cards. Large gaps distinguish pricing, proof, table, testimonials, and FAQ.
- **Table cadence:** Most rows are around 46โ50 px high, with larger breaks and bold labels before each category. Colored bars below the plan headers echo card colors.
- **Organic contrast:** The curved white transition, sketch artwork, portraits, and small orange cursor-like marks soften the long structured comparison area.
- **Footer:** Spacious column layout and a broad lower margin separate navigation from the final legal row.
### Responsive
- **Observed limit:** Only desktop pricing is shown; actual mobile behavior and billing interactions are unverified.
- **Recommended plans:** Stack plan cards on small screens while retaining plan-name, price, qualifier, action, and feature order. Stack Enterprise content without compressing benefit text.
- **Recommended comparison:** Use an accessible horizontally scrollable table or plan-focused view, retaining row labels and column headers. Avoid shrinking all four columns to unreadable widths.
- **Recommended lower page:** Stack testimonials and footer groups, let FAQ questions wrap, and reduce large heading sizes fluidly.
- **Recommended controls:** Preserve clear switch labels, comfortable touch targets, visible focus, and sufficient space around the chat launcher.
### Adaptation guidance
- **Preserve:** Keep warm cream foundations, pastel plan differentiation, blue conversion accents, and the transition from compact plan summaries to exhaustive comparison.
- **Build:** Model plans, comparison categories, testimonial cards, and FAQ items as reusable data-driven components. Keep repeated plan naming and pricing consistent.
- **State handling:** Implement billing selection and FAQ expansion with accessible controls. Define focus, loading, and error states independently because they are absent from the screenshot.
- **Assets:** Use authentic customer logos and hand-drawn artwork; keep portrait overlap deliberate and responsive rather than assigning arbitrary absolute offsets.
- **Validation:** Confirm fonts, actual CSS scale, price formatting, comparison alignment, and top-heading visibility. Prices and feature entitlements are observations of the image, not verified current commercial terms.
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.