Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Asana 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:** Asana
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad96fbd9ce0e960551f1b_6acad8ea3ce5f4104ebf4132_cms-118dc7ec3d691c9ce86e5348.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:** Restrained pricing page with light typography, tall outlined plans and selective violet/teal accents.
### Page composition
- **Capture:** 2880 × 9864 screenshot pixels; estimated 2× CSS scale.
- **Structure:** Navigation/hero, audience-size toggle, three plan cards, comparison disclosure, customer logos, nonprofit promotion, FAQ and dark multi-column footer.
### Information hierarchy
- **Priority:** Hero introduces free entry; prices/actions lead each plan, followed by long checklists. Nonprofit offer and FAQ address later decisions.
### Typography
- **Family:** Light geometric sans-serif display with medium labels; exact family unverified.
- **Estimated CSS sizes:** Hero 48px, price 34px, section headings 36px, plan titles 22px and body 16px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, footer #0D0E10, pale panel #F4F8F9, footer bar #2A2B2C, toggle #E2DEDE and illustration blue #00ACFC.
- **Accents:** Violet Premium border/label and teal Business border/label.
### Components
- **Elements:** Large segmented audience toggle, outlined plan columns, black/outlined Get started, purchase links, checklists, fine-rule FAQ and illustrated nonprofit band.
- **Estimated geometry:** Content 1200px wide, 16px plan gaps, 10px radii, 24px padding and 50px actions.
### Visual rhythm
- **Spacing:** Very tall plan cards contrast with broad proof-section gaps and a narrow FAQ reading column.
### Responsive
- **Suggested adaptation:** Stack plans, wrap logos and keep FAQ readable at full mobile width. Mobile behavior is unverified.
### Adaptation guidance
- **Transfer:** Preserve plan-summary/checklist clarity and restrained color differentiation; replace reference prices and offers with actual 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.