Generate a new design based on this screen, using your own content.
Preview the prompt
# Design from Reference: Hugo 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:** Hugo
- **Category:** Landing Page
- **Screenshot:** https://media.saasframe.io/o/2e2eeab3c9b6445b161f.webp
Analyze the screenshot first. If you can’t access it, ask me for it rather than guessing.
## Content
Write realistic placeholder content for a fictional SaaS product in the same category (no lorem ipsum).
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual design
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.
### Overall aesthetic
- **Character:** A bold meeting-product landing page uses warm cream, burgundy/plum blocks, turquoise actions, heavy display type and expressive illustrated people.
- **Evidence:** The source measures 1440 × 12054 pixels. All nine readable portions were inspected; CSS dimensions assume an unverified 1× capture density.
### Page composition
- **Header/hero:** A cream navigation row precedes a burgundy split hero with large uppercase copy, trial action/review marks and a cropped meeting-interface video illustration.
- **Proof/pain points:** A large adoption count sits beside a bordered customer-logo grid; a checklist of meeting frustrations pairs with a large character illustration.
- **Feature sequence:** Four long cream/taupe feature regions describe preparation, finding notes, action tracking and collaboration. Only the first shows a template-library graphic in this capture; later right-hand regions are largely blank.
- **Integrations/templates:** A split integrations message/testimonial leads into seven app logos in bordered cells. A dark plum template section combines six categorized checklists and one large template preview.
- **Trust/closing:** A turquoise testimonial band precedes a time-saving/calendar section, a centered setup checklist, a burgundy trial panel and a cream footer.
### Information hierarchy
- **Display priority:** Heavy uppercase hero text is followed by an even larger 30,000+ proof figure.
- **Feature headings:** Thick rounded headings lead short explanatory paragraphs; uppercase orange labels identify template categories.
- **Trust:** Customer marks, review stars and portrait testimonials support the product narrative.
- **Actions:** Turquoise pill buttons recur at header, hero and final trial; smaller all-caps text links use circular arrow symbols.
### Typography
- **Hero:** Approximately 50–52 pixels, extra-heavy uppercase with tight line-height.
- **Proof figure:** Around 100 pixels heavy; supporting proof text is roughly 26 pixels bold.
- **Section headings:** Approximately 34–38 pixels, heavy rounded sans-serif, with 1.3 line-height.
- **Body:** About 15–20 pixels with 25–28-pixel leading depending on section. Template labels use bold monospaced-looking uppercase forms.
- **Identity:** Display/body families are unverified; the marked contrast between heavy headings and lighter copy is observable.
### Colors & surfaces
- **Measured palette:** ICC-to-sRGB sampling identifies #FBF9EA as cream, #F2EFE3 as taupe, #411033 as dark plum and #6A1C3D as burgundy.
- **Measured support:** #C8EFED supplies the testimonial band and #FFFFFF light interface cards.
- **Accents:** Turquoise fills main actions; coral and ochre highlight artwork, category labels and selected words.
- **Surface treatment:** Thin muted rules divide logo grids; testimonial/template panels use modest rounding and restrained borders.
### Components
- **Hero video:** A large white meeting UI panel shows avatars, checklist/editor details, app marks and a coral play control.
- **Logo grids:** Customer marks occupy tall cream cells with thin rules; integration logos form four cells in the first row and three in the second.
- **Checklists:** Large outlined check circles mark pain points/setup benefits; template categories use smaller white ticks.
- **Feature graphic:** A white rounded template-library panel overlaps a dark plum block; subsequent feature areas remain mostly empty on the right in the supplied raster.
- **Testimonials:** One outlined quote card has a small avatar/byline; the larger turquoise-band card pairs a portrait, cream quote area and three vertical pagination dots.
- **Trial panel/footer:** A broad rounded burgundy banner pairs promotional copy with turquoise action; footer uses two link columns, award marks, social symbols and a small legal line.
### Visual rhythm
- **Large-scale pacing:** Very tall feature bands and substantial blank areas make the page unusually long; preserve this as observed rather than inventing missing artwork.
- **Color chapters:** Cream introduction, taupe features, plum templates and turquoise testimonial distinguish the major narrative stages.
- **Alignment:** Approximately 72-pixel outside margins recur, with split regions using roughly half-width compositions.
- **Micro rhythm:** Paragraph blocks have short line lengths; checklists and template lists use regular row spacing.
### Responsive
- **Observed scope:** One desktop capture is supplied; blank feature regions do not establish animation or loading behavior.
- **Recommended layout:** Stack split sections, reduce large display type and collapse logo/template grids to fewer columns.
- **Recommended spacing:** Shorten oversized blank vertical bands on small screens while retaining clear section boundaries.
- **Recommended controls:** Make video, testimonial pagination and navigation keyboard accessible with visible focus.
### Adaptation guidance
- **Landing narrative:** Combine product promise, adoption proof, problem checklist, features, integrations, templates and customer evidence.
- **Brand system:** Retain warm/plum contrast, turquoise actions and heavy rounded headings; use expressive illustration consistently.
- **Content fidelity:** Recreate only visible graphics and verify commercial/adoption claims before live reuse.
- **Implementation:** Confirm fonts/density and define responsive layouts and media states explicitly; do not infer unseen feature imagery.
## Direction
Keep the reference’s visual language (type, color, spacing, radii) but adapt the layout freely to the content.
## Output
Produce a high-fidelity static visual mockup of the full screen.
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.
SaaSFrame
