Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Shortcut lubhouse Landing 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:** Shortcut
- **Category:** Landing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbcc2ddd83b3a9f608858c_6acbcaf21790037d3e063cc0_cms-69ac3b5e2e76c1cf9b2b2e3d.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:** Spacious software-team landing page with white ground, violet branding, rounded pill actions, product-interface imagery and alternating testimonial bands.
- **Evidence and scale:** Screenshot is 1440 ร 7771 image pixels. Sizes estimate 1ร CSS capture; DPR and exact font family are unverified. Visible branding reads Clubhouse, regardless of the record title.
### Page composition
- **Header/hero:** Brand left, centered navigation and sign-in/signup right precede a centered two-line headline, supporting copy and paired signup actions.
- **Product introduction:** Four icon-led feature descriptions form a narrow left column beside a large product screenshot. A video link sits below the descriptions.
- **Customer proof:** Two rows of customer logos and an outlined customer action lead into detailed feature sections.
- **Alternating narrative:** Speed, developer workflow, integrations and cross-functional work appear as image/text pairs, interleaved with four portrait-led testimonials. Two testimonials use full-width violet ground and two use white.
- **Closing/footer:** A violet conversion band contains a centered headline and two actions. The white footer contains grouped product/company/developer/resource links, blog links, social icons, store badges and legal information.
### Information hierarchy
- **Primary promise:** Large regular-weight headline dominates the hero; signup choices sit directly beneath the supporting description.
- **Feature levels:** Medium headings, short paragraphs and outlined violet actions distinguish each deeper capability.
- **Proof hierarchy:** Large circular portraits and oversized faint quotation marks frame testimonials; attribution is bolder than company name.
- **Action repetition:** Signup recurs in header, hero and final band, while exploration actions remain outlined and secondary.
### Typography
- **Hero:** Approximately 64px CSS regular sans-serif with 72px leading and rounded letterforms.
- **Feature headings:** Approximately 28โ30px medium weight; body paragraphs around 21โ22px with 32px leading.
- **Testimonials:** Around 18px with 27px leading; attribution medium/bold at similar scale.
- **Utilities:** Navigation/buttons around 16px; footer links around 15โ16px and legal text around 14px. Exact family and computed weights are unverified.
### Colors & surfaces
- **Measured foundation:** White #FFFFFF dominates; pale #F2F2F4 supports embedded product surfaces.
- **Measured brand:** Violet #6A46DD is prominent in buttons and full-width bands, with related #7446DE and lighter #9579FD accents.
- **Secondary accents:** Mint-green controls, small colorful application badges and logo artwork add localized color.
- **Text:** Dark gray headings contrast with softer gray body text. White text reverses onto violet testimonial and closing bands.
### Components
- **Signup pills:** Hero actions approximately 320 ร 50px CSS; violet filled primary and white Google-branded alternative with pale border/shadow. Header signup is a smaller pill.
- **Feature chooser:** Four stacked icon/title/description rows divided by fine rules, with one darker active item and thin mint progress line. Animation or switching is unverified.
- **Product imagery:** Large rounded screenshot with shadow shows a purple rail, iteration columns and story cards; later illustrations crop/overlap UI cards and dialogs.
- **Outlined links:** Thin violet pill borders, white fill and medium violet labels, approximately 50px high.
- **Testimonial units:** Broad quote text at left and circular portrait around 280px at right, with a smaller company-logo disc overlapping the portrait.
- **Integration art:** Floating white circular logo discs with soft shadows form an organic cluster beside explanatory copy.
- **Footer:** Multi-column links, grayscale social icons, black store badges and fine legal text remain border-light.
### Visual rhythm
- **Container:** Broad centered content width around 1150px CSS; many narrative rows use roughly equal text/image columns.
- **Section spacing:** Large 100โ150px vertical intervals and thin centered dividers separate white narrative blocks.
- **Alternation:** White feature rows and violet testimonial bands create a strong long-page cadence.
- **Local spacing:** Text/action stacks use roughly 24โ32px gaps, while testimonial attribution sits closer to its quote.
### Responsive
- **Observed limit:** Only desktop is shown; menu behavior, signup, video, feature switching and mobile layouts are unobserved.
- **Recommended stacking:** Stack product imagery and feature copy, simplify floating UI compositions and place testimonial portraits above or below quotes.
- **Recommended type/actions:** Scale hero text fluidly, allow paired actions to wrap and retain comfortable touch targets.
- **Recommended footer:** Collapse groups into smaller columns or disclosures, preserving developer/support routes and readable legal text.
### Adaptation guidance
- **Preserve the language:** Use white space, one violet brand accent, pill actions and real product imagery rather than heavy card grids.
- **Build proof progressively:** Interleave capability explanations with customer evidence, keeping each testimonial distinct from feature content.
- **Implementation:** Provide accessible navigation, image alternatives, video controls and visible focus. Historical brand, customer claims, integrations and plan wording in the capture require separate verification before reuse.
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.