Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Payfit 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:** Payfit
- **Category:** Customer Stories
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c8051782c602a3efe9e_1659624699044-screenshot-device-2c3cae3fca7371129c14870221c3bd34-1659604523413.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 clean customer case-study page uses white space, navy/slate typography and restrained blue accents.
- **Tone:** A large portrait, factual profile list and long-form article create a professional editorial presentation.
### Page composition
- **Capture:** The source measures 1440 × 3701 image pixels. Observed dimensions below approximate CSS only under an unverified 1× capture assumption.
- **Header:** A slim announcement strip precedes a broad navigation row with language/login controls and demo actions.
- **Case-study opening:** A roughly square portrait sits left of a large customer title and six icon-led profile rows.
- **Article:** A narrower centered reading column contains section headings, paragraphs, numbered points and bold inline emphasis.
- **Closing proof:** A centered blue italic quote and small portrait attribution precede a broad blue conversion panel.
- **Footer:** Multi-column links, legal details, certification marks and a language selector close the page. A large French cookie-preference panel overlays the lower-left area.
### Information hierarchy
- **Customer identity:** The title and portrait establish the case study before the detailed narrative.
- **Profile:** Small blue line icons and bold field labels organize the customer summary.
- **Article structure:** Short bold headings distinguish background, pain points, decision and outcome sections.
- **Quote:** Blue italic text and a large pale quotation mark provide a visual summary near the end.
- **Conversion:** A saturated blue banner contains a white heading and small white demo action.
### Typography
- **Family:** A humanist-looking sans serif is visible; exact identity is unverified.
- **Customer title:** Approximately 48 px in the source, bold.
- **Article:** Approximately 18 px with 27 px leading, using slate text and bold emphasis within paragraphs.
- **Section headings:** Approximately 20 px, semibold, in navy.
- **Navigation/footer:** Approximately 14–16 px; footer legal/certification details are smaller and muted.
### Colors & surfaces
- **Measured foundation:** ICC-aware sRGB sampling yields white #FFFFFF.
- **Measured accent:** Blue #106FDF appears in the conversion region and interface accents.
- **Text palette:** Dark navy headings contrast with slate body copy and pale blue-gray footer details.
- **Quote treatment:** Blue italic text and a very light blue quotation glyph separate testimonial content.
- **Overlay:** The cookie panel is white with a soft shadow and a small colorful cookie illustration.
### Components
- **Profile rows:** Six compact icon/label/value lines align beneath the customer title.
- **Portrait:** A large square-ish image has small rounded corners and no heavy frame.
- **Article lists:** A short numbered list uses hanging indentation, while bold phrases highlight key points.
- **Testimonial:** Centered quote text sits above a small circular portrait and two-line attribution.
- **Conversion banner:** A wide blue rounded rectangle has generous padding, subtle shadow and right-aligned white button.
- **Cookie panel:** A tall white panel contains heading, multiple paragraphs and three bottom consent controls.
- **Footer utilities:** Certification marks form a horizontal strip beside legal links and a small outlined language dropdown.
### Visual rhythm
- **Reading width:** The article is narrower than the opening portrait/profile region and conversion banner.
- **Paragraph cadence:** Regular blank intervals and short headings keep the long narrative scannable.
- **Section pauses:** Large gaps distinguish opening, article, testimonial and conversion.
- **Alignment:** Article text shares a stable left edge, while quote and attribution are centered.
### Responsive
- **Evidence boundary:** Only a desktop state is shown; responsive behaviors are recommendations.
- **Opening stack:** Place portrait above customer profile on narrow screens.
- **Article measure:** Keep readable body size and fluid side gutters.
- **Conversion/footer:** Stack banner copy/action and footer groups; ensure cookie controls remain accessible without covering essential content.
### Adaptation guidance
- **Case-study pattern:** Reuse customer profile, structured narrative, outcome quote and conversion route.
- **Content separation:** Treat customer details, historical claims and payroll statements as captured content rather than current facts.
- **Accessible reading:** Use semantic headings/lists and useful portrait alternatives.
- **State boundaries:** Cookie preferences and demo destinations are not verified beyond their visible controls.
- **Scale calibration:** Validate observed pixels against the target CSS viewport before implementation.
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.