Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Fellow 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:** Fellow
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca44252527cdac108031e_1659674979242-62ec9ca38ef108aa210f3d8d_screenshot-device-fcb7c4c1caba12bb746146e64404a86a-1659617932204.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:** Spacious pricing and comparison page with dark blue typography, four understated plan cards, and a very long fine-lined feature matrix.
- **Character:** White canvas, color-coded plan accents, light testimonial surface, open FAQ answers, and a bright blue closing conversion band.
- **Capture limitation:** Many matrix cells are visibly blank, especially below the core-feature section; missing checkmarks or values are not reconstructed.
### Page composition
- **Capture and scale:** 1472 ร 9488 image px. Estimated CSS geometry assumes roughly 1ร capture; browser scale is unverified. Readable crops were inspected across the full image.
- **Header:** Black brand left, product/solutions/integrations/resources/pricing navigation, login, and a compact dark-blue trial action right.
- **Pricing intro:** Centered Simple pricing title, billing switch row, and four equal plan cards.
- **Cards:** Free, Pro, Business, and Enterprise occupy about 300px each across the broad page, with plan names interrupting their upper outlines and actions overlapping their lower borders.
- **Trust block:** Centered heading and supporting line above six muted customer logos in two rows.
- **Comparison matrix:** Approximately 960px wide, with a wider feature-label column and four tier columns. Full-width category rows divide core features, integrations, administration, feedback, services, HRIS sync, and apps/extensions.
- **Testimonial:** Broad pale-gray band with centered attribution above a large italic quotation and pale-blue highlighted phrases.
- **FAQ:** Two-column layout with heading left and a long right column of visible questions and answers separated by thin rules.
- **Closing CTA:** Bright blue full-width band with centered heading, supporting line, outlined trial button, login link, and colorful curved decorative strokes.
- **Footer:** Brand/copyright/socials left, four tall link groups right, with a floating chat message and launcher near the lower-right corner.
### Information hierarchy
- **Plan choice:** Tier name, price/contact message, audience description, and action form each cardโs hierarchy.
- **Billing context:** Monthly and annual labels flank a switch; annual savings copy is accented. The static switch does not verify billing behavior.
- **Plan identity:** Pro uses a crown and yellow action; Business an orange building/action; Enterprise a purple building/action.
- **Detailed proof:** Customer logos precede the comparison matrix, where category headings and color-matched checks organize the information.
- **Assistance:** Testimonial and fully visible FAQ answers follow comparison, then the final trial offer.
- **Uncertain data:** Blank comparison cells cannot be interpreted as unavailable features without a separate source.
### Typography
- **Family:** Rounded geometric proportional sans serif; exact family is unverified.
- **Pricing title:** Approximately 40px medium with 48px line-height.
- **Plan names:** Approximately 32px medium; price numerals around 50px bold, while contact messages are around 28px.
- **Descriptions:** Approximately 16px medium with 24px line-height, centered within cards.
- **Trust headings:** Approximately 30โ32px with supporting copy around 24px.
- **Matrix:** Approximately 14โ16px, gray feature labels, darker section headers, centered values.
- **Testimonial:** Approximately 24px italic with generous 38px leading; selected phrases are bold and highlighted.
- **FAQ:** Approximately 32px left heading, 20px question titles, and 16px answers with 28px line-height.
- **Footer:** Approximately 14px group headings and 12โ14px links.
- **Precision:** All CSS sizes, weights, and line-heights are estimates inferred from pixels.
### Colors & surfaces
- **Canvas:** Sampled #FFFFFF.
- **Primary dark text:** Sampled #0C263B.
- **Testimonial surface:** Sampled #F4F6FA.
- **Closing blue band:** Sampled #37A4FA.
- **Pro accent:** Sampled #FCBF12.
- **Business accent:** Sampled #FFAA6E.
- **Enterprise accent:** Sampled #8173FE.
- **Header action:** Sampled #283FCB.
- **Fine boundaries:** Sampled #E7EAE9 among light matrix/card rules.
- **Decorative strokes:** Sampled #FF8DAA and #8DEBD9 in the closing band.
- **Surface treatment:** Mostly flat white components, subtle card outlines, pale badge fills, and restrained chat shadows.
### Components
- **Billing control:** Small gray outlined switch between monthly and annual labels; right-position circular thumb shown.
- **Plan cards:** Approximately 300 ร 350px, thin light-gray outline, around 8px radius, and centered content.
- **Plan headings:** White-backed names overlap the top border; small colored icons sit above the paid-tier names.
- **Card actions:** Approximately 46โ48px high, modest 6โ8px radii, centered over the bottom border. Free is outlined; paid actions use yellow, orange, and purple fills.
- **Logo grid:** Six muted blue-gray brand marks arranged in two centered rows without enclosing cards.
- **Comparison table:** Thin outer outline with rounded corners, narrow vertical dividers, broad category separator rows, and roughly 52px feature-row pitch.
- **Checks and badges:** Tier-colored checkmarks; small pale orange/purple uppercase addon labels and a contact label in selected cells.
- **FAQ groups:** Open text answers with blue inline links and thin horizontal separators; no collapsed accordion controls are visible.
- **Trial band:** White outlined button around 54px high; small existing-user login text beneath.
- **Chat widget:** White message bubble with overlapping circular avatars, close icon, soft shadow, and dark-blue round launcher.
- **State limits:** No hover, switch transition, chat interaction, or alternate billing view is demonstrated.
### Visual rhythm
- **Pricing rhythm:** Four equal cards align prices, descriptions, and bottom actions despite differing text lengths.
- **Whitespace:** Large gaps separate pricing, trust logos, comparison, testimonial, FAQ, and CTA.
- **Matrix rhythm:** Repeated vertical tier lanes and category rules structure the unusually long comparison.
- **FAQ rhythm:** Narrower answer measure and generous rule-to-heading padding make the lower text section more readable.
- **Closing contrast:** Bright blue band interrupts the otherwise white/pale page before the dense footer.
- **Sparse cells:** Large blank matrix areas are an observed property of the capture, not a recommendation to omit meaningful comparison data.
### Responsive
- **Observed state:** Desktop only; mobile behavior and interaction states are unverified.
- **Plan recommendation:** Stack cards or reduce to two columns while retaining tier colors and overlapping-label treatment.
- **Matrix recommendation:** Use horizontal scrolling with clear persistent feature labels or an explicit tier selector.
- **FAQ recommendation:** Stack the section heading above the question/answer column.
- **CTA/footer recommendation:** Reduce decorative stroke size and wrap footer links into fewer columns.
- **Chat recommendation:** Keep the launcher and message clear of important links on smaller displays.
### Adaptation guidance
- **Preserve:** Clear four-tier choice, restrained card outlines, consistent plan colors, categorized comparison, visible FAQ answers, and strong blue closing band.
- **Starting geometry:** Approximately 300px plan width, 960px matrix width, 52px row pitch, 16px body text, and 46โ54px actions under the unverified 1ร assumption.
- **Data fidelity:** Populate limits and checks from supplied verified plan data; do not infer missing matrix values.
- **Historical content:** Captured prices, savings, team limits, testimonials, and commercial terms are visual reference content, not verified current offers.
- **Typography adaptation:** Maintain dark heading contrast and generous answer line-height instead of reproducing faint text where readability suffers.
- **Interaction recommendation:** Implement billing, table navigation, trial actions, and chat with accessible labels and keyboard focus; their behavior is not proven by the screenshot.
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.