Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Officevibe 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:** Officevibe
- **Category:** Customer Stories
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ff1da53e23d9e388aa2653_1660886324742-aligning-global-teams-training-new-managers-with-officevibe-Laptop%2520Medium-1660886251484.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 spacious customer story combining strong dark typography, warm photographic accents, blue quotation marks and a navy footer.
- **Evidence scale:** Original 1440 ร 6670 pixels, inspected through five readable crops. Dimensions are image-pixel estimates; CSS scale and fonts are unverified.
### Page composition
- **Header/hero:** White navigation above a split introduction: success-story eyebrow, large four-line heading and summary left; broad meeting photograph with an offset peach block right.
- **Article:** Narrow company-metadata column left and approximately 780 px story column right.
- **Story sequence:** Introductory summary, multiple titled prose sections, large indented pull quotes, an alignment-score graphic and a three-metric illustration.
- **Conversion:** Wide raised white card contains a short statistic, blue signup action and peach scalloped decoration.
- **Related stories:** Three white cards overlap a blue wave band, with company/time labels, bold titles, category pills and photos.
- **Footer:** Navy region combines social/newsletter controls at left with four link columns, then brand/legal/language controls and a floating chat utility.
### Information hierarchy
- **Headline:** Large bold story title dominates the opening.
- **Context:** Customer logo, short profile, industry/headquarters/user count, engagement score and two tags form the left metadata stack.
- **Article landmarks:** Bold section titles and larger pull quotes interrupt regular paragraphs.
- **Metrics:** Handwritten-style large numerals and small icons make the three-score graphic distinct from prose.
- **Next steps:** Signup card and related-story grid provide separate conversion and browsing paths.
### Typography
- **Hero:** Unverified sans-serif, approximately 52 px bold, 64 px line height and slight tightness.
- **Section headings:** Around 32 px bold with 42 px line height.
- **Body:** Approximately 18 px regular, 26 px line height.
- **Pull quotes/intro:** Around 24 px medium with 32 px line height and slightly open tracking.
- **Metadata:** Small uppercase labels around 14 px bold with expanded tracking; values around 14โ16 px.
- **Metrics:** Large informal handwritten numerals inside an embedded graphic; exact font identity is unverified.
### Colors & surfaces
- **Base:** White #FFFFFF.
- **Ink:** Dark gray #333333 body/headings and deep navy #012045 brand/footer.
- **Action/quotes:** Measured bright blue #1054FE.
- **Warm accents:** Pale #FFF9F2 and peach #FFD298 support score/hero/conversion decoration.
- **Secondary:** Pale lavender tags, green score rings and light-blue footer text soften the contrast.
### Components
- **Hero photo:** Approximately 550 ร 394 px rectangular image with peach offset backing on right/bottom.
- **Metadata:** Unboxed groups with tracked labels, green circular score indicator and rounded category pills.
- **Pull quotes:** Indented text block with a small blue quotation mark in a separate leading column.
- **Score graphic:** Pale card with circular green progress ring, large score and improvement label, backed by a blue wave-pattern rectangle.
- **Conversion card:** Approximately 980 px wide, 16 px radius, soft shadow and generous padding; blue rectangular button beside small reassurance text.
- **Story cards:** Three roughly 376 px rounded white cards, subtle elevation, tags and full-width bottom photos.
- **Newsletter:** White email field above an outlined rounded Subscribe button on navy.
- **Footer:** Circular social buttons, organized text columns and small lower legal links.
### Visual rhythm
- **Reading measure:** The article column is right-inset, leaving broad whitespace below the shorter metadata column.
- **Section gaps:** Roughly 48โ64 px around headings; graphic breaks use larger spacing.
- **Quotes:** Large indented statements slow the reading pace between paragraphs.
- **Closing:** Signup, latest stories and footer are separated by generous vertical intervals and strong background changes.
### Responsive
- **Observed limit:** Desktop story only; mobile behavior is unverified.
- **Recommendation:** Move company metadata above the article and reduce the hero to one column.
- **Cards/graphics:** Stack related stories and keep metrics/quotes readable without shrinking the entire page.
- **Footer:** Stack newsletter and link groups, retaining clear subscription labels.
### Adaptation guidance
- **Retain:** Combine readable story sections with customer context, selective pull quotes and simple metric illustrations.
- **Implement:** Use restrained blue emphasis, warm photographic framing and a strong navy closing region.
- **Verify:** Confirm fonts, scale and current customer statistics separately; no signup or newsletter action was performed.
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.