Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Upflow Customer Stories
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Upflow
- **Category:** Customer Stories
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c8072e5af19031f7f8b_1659624703149-screenshot-device-766558b5f7ec01be1fabfde807b39573-1659604529793.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:** A customer-story article uses deep navy headings, blue accents, a grayscale portrait, spacious white editorial layout, and a compact company-summary card.
- **Tone:** The presentation is evidence-led and restrained, emphasizing a headline, two prominent metrics, and a structured narrative.
- **Observed scale:** The source measures 1440 ร 3751 pixels. Sizes below refer to approximate image pixels; CSS estimates assume an unverified 1ร capture.
- **Capture scope:** The actual image shows one detailed customer story, rather than a gallery of multiple stories.
### Page composition
- **Announcement/header:** A blue webinar banner spans the top. Below, Upflow branding, product/resource navigation, Login, and Request a demo form a white header.
- **Hero:** A two-column region pairs a large multiline outcome headline and author/role block at left with a large grayscale portrait at right.
- **Metrics:** Two centered statistic blocks sit below the hero, each with a small blue line icon, large negative percentage, and muted caption.
- **Article layout:** A narrow left company-summary card accompanies a wider right narrative column.
- **Narrative:** Company, Challenges, Solution, and Key takeaways headings organize paragraphs. A large centered pull quote is enclosed by thin horizontal rules.
- **Closing CTA:** A broad bright-blue banner contains a short heading/copy at left and a white trial action at right.
- **Footer:** A pale cool band contains branding and four link groups, then legal links, social icons, language selector, a cookie strip, and a circular chat launcher.
### Information hierarchy
- **Hero outcome:** The large headline is the strongest textual element, followed by the portrait and author attribution.
- **Metric emphasis:** Oversized percentages provide a quick summary before the detailed narrative.
- **Company context:** The side card groups business type, invoice volume, headcount, tools, and takeaways into short labeled rows.
- **Article progression:** Headings establish a problem-to-solution-to-results structure. Paragraphs remain the primary long-form reading content.
- **Pull quote:** A blue quotation symbol and bold centered sentence create a visual pause within the solution narrative.
- **Result scope:** Percentages, savings, customer details, and testimonial statements are historical captured claims. They are not independently verified outcomes or financial guidance.
### Typography
- **Typeface appearance:** A rounded humanist sans-serif is used, with heavy headings and softer body copy. Exact font identity is unverified.
- **Hero heading:** Approximately 46โ50 pixels, bold, with compact line-height around 48โ52 pixels and deliberate four-line wrapping.
- **Metrics:** Around 60โ64 pixels, bold, with captions around 20 pixels.
- **Article headings:** Approximately 30โ32 pixels, bold. Body copy is around 20 pixels with 30-pixel line-height.
- **Summary card:** Small labels are around 14 pixels; values and takeaways are around 16 pixels, medium/semibold.
- **Pull quote:** Approximately 30โ32 pixels, bold, centered, with the quote symbol larger and blue.
- **Utility roles:** Navigation, buttons, footer links, and consent copy use roughly 14โ16-pixel text.
### Colors & surfaces
- **Measured base:** #FFFFFF dominates the article. #F9FBFC and #F8FAFB supply pale portrait/footer background tones.
- **Measured blue:** #277FFE appears in the CTA/accent family, with nearby #2780FC also sampled.
- **Text:** Headings are dark navy; body and metadata use muted slate-blue.
- **Portrait:** The hero image is grayscale, reducing competition with the blue interface accents.
- **Summary surface:** A white outlined card with a soft lower shadow contrasts subtly with the white page.
- **CTA texture:** The blue closing banner includes faint concentric curved lines.
- **Footer and overlays:** Pale cool surfaces separate footer and consent elements; the chat launcher is saturated blue with a white symbol.
### Components
- **Webinar banner:** A slim blue textured strip contains a small Webinar badge, short event copy, and replay link with arrow.
- **Header action:** Request a demo is a compact filled blue rectangle with slight corner rounding.
- **Portrait:** A large rectangular grayscale photograph sits on a pale background, approximately 600 ร 500 image pixels.
- **Author block:** A short thin rule separates the headline from a bold name and muted role/company line.
- **Metric blocks:** Two equal-width columns use small outline icons above large percentages and captions.
- **Company-summary card:** A roughly 420-pixel-wide white panel contains a customer logo and labeled sections divided by thin rules. Two blue-check takeaways finish the card.
- **Article column:** A roughly 700-pixel narrative region uses headings, paragraphs, and a pull quote without enclosing boxes.
- **Pull quote module:** Thin top/bottom rules, centered blue quote mark, and bold text form a standalone emphasis block.
- **Takeaway list:** Two blue checkmarks precede semibold result statements, followed by a final paragraph.
- **Trial banner:** A wide blue rectangle roughly 1200 pixels across contains white text and a white button with blue label.
- **Footer:** Product, Resources, Company, and accounts-receivable topics form columns; small hiring/join badges annotate selected links.
- **Consent strip:** A narrow white notice at the bottom contains policy text plus blue Accept and pale Decline actions.
- **Chat launcher:** A blue circular button with white message symbol sits at lower right.
- **Unshown states:** Demo/trial destinations, expanded navigation, consent preferences, and chat content are not visible.
### Visual rhythm
- **Broad hero:** Large text and portrait establish a balanced opening with generous side gutters.
- **Metric pause:** The two statistic blocks create a clear transition from hero to narrative.
- **Asymmetric article:** The shorter side card leaves white space beside the continuing right-hand article.
- **Readable cadence:** Headings and paragraphs use moderate spacing; the pull quote adds a much larger vertical pause.
- **Distinct ending:** A strong blue CTA resets attention before the pale footer.
- **Minimal framing:** Thin rules and one summary card organize content without fragmenting the article into many boxes.
### Responsive
- **Evidence limit:** Only a desktop story is captured. Mobile, sticky sidebar, and fixed overlay behavior are unverified.
- **Recommended hero:** Stack headline/attribution before the portrait and reduce display size to around 34โ40 CSS pixels.
- **Recommended metrics:** Keep the two metrics together when possible, stacking if captions become cramped.
- **Recommended article:** Move the company summary above or below the narrative on narrow screens, preserving heading order.
- **Recommended CTA/footer:** Stack banner text/action and footer columns; allow consent text/actions to wrap without covering content.
- **Recommended accessibility:** Use semantic headings, descriptive portrait/logo alternatives, clear link focus, and accessible consent/chat controls.
### Adaptation guidance
- **Preserve the story structure:** Lead with outcome and person, summarize metrics/context, then explain company, challenge, solution, and takeaways.
- **Use approved evidence:** Validate customer permissions, quotes, dates, and performance claims before publication.
- **Keep the summary scannable:** Use short labeled facts and a compact takeaway list rather than duplicating the full article.
- **Retain editorial readability:** Maintain a moderate line length, clear heading hierarchy, and one deliberate pull-quote interruption.
- **Build from measured accents:** White and pale cool surfaces, navy/slate text, and blue actions provide the core visual system.
- **Do not infer extra screens:** The screenshot does not establish a customer-story index or any interaction beyond the visible article controls.
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.