Generate a new design based on this screen, using your own content.
Preview the prompt
# Design from Reference: Confetti 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:** Confetti
- **Category:** Landing Page
- **Screenshot:** https://media.saasframe.io/o/518e9f7d3ac4026eb50b.webp
Analyze the screenshot first. If you can’t access it, ask me for it rather than guessing.
## Content
**Instructions:**
Generate realistic example content that fits the selected design reference.
Create appropriate headlines, descriptions, labels, buttons, and supporting copy based on the type of interface being designed.
If a product or business description is provided, use it to guide the content.
Otherwise, invent a plausible fictional SaaS product appropriate for the reference.
Keep the content concise, coherent, and visually balanced.
Do not present fictional statistics, customer names, or testimonials as verified facts.
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 cheerful habit-tracking landing page combines rounded, heavy sans-serif headings, playful flat illustrations, colorful confetti marks, and generous white space. Product screenshots make the benefit tangible.
- **Visual balance:** Most sections are white or very pale blue-gray; a saturated blue feature band creates the strongest interruption. Black marketplace badges add compact visual anchors.
- **Observed scale:** The original image measures 1440 × 7023 pixels. Dimensions below refer approximately to those image pixels; any suggested CSS dimensions assume a 1× capture and are not verified browser measurements.
### Page composition
- **Header:** A centered container about 1200 pixels wide places the blue circular logo and wordmark at left, with Pricing, Sign In, and a filled pill CTA at right. The header has no prominent enclosing border.
- **Hero:** An illustration sits above a centered two-line headline and two-line supporting statement. Small colored confetti shapes occupy the outer margins without competing with the text. Two marketplace badges form the conversion row below.
- **Platform showcase:** A centered availability heading and inline platform links precede a large desktop habit-tracking interface. A black-framed phone overlaps its lower-right side. A soft blue-gray background and diffuse shadow separate the white interface from the page.
- **Feature region:** The heading “Set goals, simply” introduces a two-column, two-row card grid. The upper cards show positive and avoided habits; the lower cards show streaks and monthly progress. A large curved blue background rises behind the grid, and a white CTA sits beneath it.
- **Lower sequence:** A pricing row places explanatory text at left and two compact plan panels at right. A centered habit-example region follows, then a meditating-person illustration and free-plan CTA, an analytics section with a horizontal progress example, and the footer.
- **Footer:** A pale blue-gray full-width band contains branding and attribution at left; two right-aligned link groups and two circular social icons occupy the opposite side.
### Information hierarchy
- **Primary message:** The large, bold hero headline dominates the initial viewport. Its centered width of roughly 800 pixels produces two deliberate lines.
- **Secondary explanation:** Muted gray supporting copy is substantially smaller and uses comfortable line spacing. Download badges appear directly after it as the initial action.
- **Section progression:** Large centered headings introduce availability, goals, habit flexibility, the free tier, and analytics. Pricing switches to a left-aligned heading within a horizontal comparison layout.
- **Feature scan:** Each feature card follows icon, short title, explanation, and miniature visualization. Four distinct visualization types keep repeated cards informative.
- **Conversion repetition:** Filled blue buttons recur after the product demonstration, beside pricing, and below the free-plan message. The blue feature region reverses its CTA to white.
- **Captured commercial content:** Prices and plan allowances are visible in the image and should be treated as historical screenshot content, not verified current offers.
### Typography
- **Typeface appearance:** Headings use a rounded geometric sans-serif with broad lowercase forms and a bold weight. The exact font family is unverified.
- **Hero heading:** Approximately 68–72 pixels, weight around 700, line-height roughly 80 pixels, with tight to neutral tracking. The line break separates the product category from its celebratory benefit.
- **Section headings:** Approximately 48–52 pixels and bold; feature-card headings are around 38–40 pixels. The pricing-panel labels use a smaller bold hierarchy.
- **Body roles:** Hero supporting copy is approximately 32 pixels. Section descriptions and feature-card copy are around 22–24 pixels with 30–32-pixel line-height. Navigation and button labels are roughly 18 pixels.
- **Product and footer detail:** Embedded interface labels are much smaller than marketing copy. Footer utility links are approximately 18–20 pixels; copyright text is around 14–16 pixels.
- **Alignment:** Marketing headings and short descriptions are predominantly centered. Card content, pricing text, and footer branding are left aligned.
### Colors & surfaces
- **Measured base palette:** The original image contains extensive #FFFFFF, pale blue-gray #EDF3FA, and saturated blue #017BFF, with a closely related blue #007AFD also sampled. These values were sampled from the image after ICC-to-sRGB handling where available.
- **Secondary pale surfaces:** Sampled #F2F3F7 and #F3F5F9 occur in light background treatments. Plan cards and habit pills use cool pale fills rather than heavy borders.
- **Text treatment:** Headings appear near charcoal, while explanatory text uses a muted blue-gray. Exact text-edge values vary with antialiasing; avoid treating a single blended edge pixel as a typography token.
- **Semantic accents:** Green circles distinguish positive habits; red crosses distinguish avoided habits. Yellow, purple, cyan, pink, and blue recur in habit bars, streak markers, progress rings, and confetti.
- **Depth:** White feature cards and the desktop demonstration use soft cool shadows. The page avoids dark dividers or strong outlines around its main content.
- **Background transitions:** The blue feature area has a broad curved upper boundary. The lower free-plan invitation uses pale organic blue shapes around the illustration and centered text.
### Components
- **Primary buttons:** Approximately 225 × 65 image pixels in larger content rows, with fully rounded ends, bold white labels, and generous horizontal padding. The header version is smaller. Hover and focus states are not shown.
- **Marketplace badges:** Two black rectangular badges, each about 205 × 64 pixels, sit side by side with approximately 20 pixels between them. Their official visual identity contrasts with the soft surrounding palette.
- **Product mockup:** A desktop panel roughly 1050 pixels wide has rounded corners, shadow, segmented time filters, calendar controls, progress bars, and a multicolored weekly habit grid. The phone overlaps rather than taking a separate equal column.
- **Feature cards:** Each card is approximately 480 pixels wide, with roughly 32 pixels of internal padding and corners around 10–12 pixels. The four cards use a green circle, red cross, flame, and circular progress symbol respectively.
- **Miniature visualizations:** Positive and avoided-habit cards use horizontal colored bars on pale tracks. Streaks use linked square markers. Progress uses twelve labeled circular indicators arranged in two rows.
- **Pricing panels:** Two pale cards show a small plant or rocket illustration, plan title, price hierarchy, and blue checkmarked benefits. The premium panel contains monthly and yearly prices side by side.
- **Habit example pills:** Small rounded gray-blue chips combine a colored dot or cross, an emoji, and a short habit label. They form loose staggered rows, fading toward the page edges.
- **Analytics example:** A thin blue progress fill extends across a pale track, with improvement text below at left and completion percentage at right. Download badges repeat below.
- **Footer links:** Utility and platform links form two compact columns. Twitter and LinkedIn symbols sit in pale circular backgrounds beneath the platform links.
### Visual rhythm
- **Section breathing room:** Major content groups have large vertical intervals, often approximately 120–180 pixels. The hero has especially generous separation between its conversion badges and the platform heading.
- **Grid consistency:** Feature cards use a stable two-column structure with approximately 48–50-pixel gaps. Their titles, paragraph blocks, and visualizations align to consistent internal left edges.
- **Density changes:** Sparse hero and CTA areas alternate with a detailed product mockup, a compact feature grid, and the scattered habit-pill field.
- **Repeated shapes:** Pills, circular icons, rounded cards, and soft arcs create a consistent friendly vocabulary. The phone frame is the strongest dark outline on the page.
- **Illustration placement:** Characters overlap or float above nearby content, including the figure seated on a feature card and the meditating figure above the free-tier message.
### Responsive
- **Evidence limit:** Only a desktop-width page is captured. The phone inside the demonstration is an embedded product image and does not establish the landing page’s mobile layout.
- **Recommended stacking:** Collapse the feature cards to one column and stack pricing copy above the plan panels. Preserve icon-title-description-visualization order within each card.
- **Recommended hero scaling:** Reduce the large headline to roughly 36–44 CSS pixels on narrow screens, retain comfortable line-height, and reduce decorative confetti before compromising text width.
- **Recommended mockup handling:** Scale the product demonstration as a coherent unit or use separately art-directed desktop and phone assets. Avoid allowing the overlapping phone to obscure essential copy.
- **Recommended navigation:** Replace the wide right-hand navigation with a compact accessible menu or a single prominent CTA when space becomes constrained.
- **Recommended footer and pills:** Stack footer groups with clear spacing; allow habit chips to wrap within the viewport rather than relying on clipped text to convey meaning.
### Adaptation guidance
- **Preserve the narrative:** Start with the emotional benefit, demonstrate the product across devices, explain four concrete capabilities, clarify pricing, and close with lightweight progress evidence and repeated conversion opportunities.
- **Build a restrained token system:** Use the measured blue and pale blue-gray as principal tokens, white cards, rounded controls, and a limited multicolor semantic palette for habits.
- **Keep demonstrations legible:** Recreate miniature charts with real layout primitives where practical. Maintain visible labels and distinct shapes so color is not the only distinction between completed and avoided habits.
- **Use decoration selectively:** Reserve confetti and character illustrations for introductory or transitional moments. Keep the product grid and plan information visually stable.
- **Treat scale as a starting point:** Translate the observed image dimensions into CSS only after confirming the capture scale. Verify font identity, contrast, keyboard focus, and button hit areas in implementation.
- **Validate content independently:** Replace captured prices, allowances, and attribution with approved current copy. The screenshot establishes presentation and hierarchy rather than current commercial facts.
## Direction
**Instructions:**
Use the reference screenshot as the main source of visual inspiration rather than a strict layout template.
Preserve its most distinctive design characteristics, such as typography, visual rhythm, color relationships, component treatments, and overall aesthetic.
Feel free to modify section arrangements, proportions, spacing, and individual components to better suit my content.
Introduce original design decisions where they improve usability, composition, or brand consistency.
The result should clearly reflect the reference's visual language without looking like a direct reproduction.
## Output
**Instructions:**
Generate a high-fidelity visual mockup of the requested interface.
Present the design as a polished, realistic website or product UI screenshot.
Prioritize visual composition, typography, spacing, colors, alignment, and component details.
Use the available image-generation or visual-design capabilities.
Do not replace the mockup with source code, a written design specification, or a textual description.
If direct visual generation is unavailable, clearly explain the limitation.
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
