Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: PlanetScale 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:** PlanetScale
- **Category:** Customer Stories
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecbb573da29e462ef6c75d_1659680768963-screenshot-device-b71941922f22f09d491bc99a03e0ec4d-1659680295781.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
- **Style:** A dark editorial customer story combines near-black surfaces, white typography, documentary photography and narrow orange accents.
- **Character:** Restrained and technical, with strong typographic hierarchy and very little decoration outside the hero summary card.
### Page composition
- **Capture:** The source measures 1440 ร 3605 pixels. Measurements below approximate image pixels; CSS scale is unverified.
- **Container:** A centered region around 1150 pixels wide aligns navigation, hero and article.
- **Header:** A circular white brand mark precedes five navigation links; sign-in and an orange-outlined action sit right.
- **Hero:** Two roughly equal columns pair a small case-study label, large multiline headline and summary left with a white customer card right.
- **Customer card:** A wide photograph tops a white identity/facts region, followed by a separate sales-action footer.
- **Article:** A narrower left rail holds section headings and pull quotes, while a roughly 735-pixel right column carries paragraphs, a two-column requirement list and larger blockquotes.
- **Closing:** A slightly lighter dark band pairs a large conversion pitch left with one related-story card right. A multi-column footer follows, with a cookie panel over the lower-left corner.
### Information hierarchy
- **Hero headline:** Large white text leads the page, with muted summary copy below.
- **Customer facts:** Black customer logo and bold fact values stand out on the white card.
- **Article sections:** Left-rail headings introduce long-form narrative at right; orange vertical rules identify quoted passages.
- **Conversion:** Large closing type and two adjacent actions form the final primary route.
- **Footer:** Muted category labels sit above brighter compact links; social icons align at the lower right.
### Typography
- **Family:** Neutral sans serif throughout; exact identity is unverified.
- **Hero and closing:** Approximately 48 pixels, semibold, with tight 48โ50-pixel leading.
- **Section headings:** Around 28 pixels, semibold, wrapping across several lines in the narrow rail.
- **Body:** Approximately 16 pixels with 24-pixel line height.
- **Quotations:** Around 16 pixels, semibold, with slightly open tracking.
- **Navigation:** Approximately 16 pixels, medium weight; footer labels and links around 14 pixels.
### Colors & surfaces
- **Measured darks:** #111111 defines the article/footer, while #1A1A1A defines the hero and closing region.
- **Light contrast:** White #FFFFFF and near-white #FAFAFA supply headings and the customer-card surface.
- **Secondary text:** Medium gray reduces the prominence of summaries, labels and supporting copy.
- **Accents:** Orange outlines, chevrons and quote rules punctuate the dark page; a blue inline article link is also visible. Exact accent hex values are unverified.
- **Depth:** Subtle borders and shadows define the customer and related-story cards; the article itself is unboxed.
### Components
- **Customer card:** Roughly 525 pixels wide with small corner radii, a landscape photo, divided facts area and white action footer.
- **Buttons:** Compact outlined rectangles around 42 pixels high use small radii, semibold labels and orange chevrons.
- **Pull quotes:** Thin orange vertical rules sit about 24 pixels left of the quote text.
- **Requirements:** Two compact text columns combine bold labels, regular explanations and a short bullet list.
- **Related story:** A small dark bordered card combines grayscale photo, overlaid logo and centered Read more row.
- **Cookie panel:** A roughly 510-pixel-wide dark overlay contains small copy, two outlined consent buttons and a text settings action.
- **Footer:** Brand plus five link groups form a wide row; a small social-icon strip sits near the lower edge.
### Visual rhythm
- **Article asymmetry:** The short left rail contrasts with denser right-column prose, retaining large vertical empty areas.
- **Paragraph cadence:** Roughly 30โ40-pixel gaps separate paragraphs and quoted blocks.
- **Region changes:** Slight shifts between #111111 and #1A1A1A distinguish hero, article, conversion and footer without bright separators.
### Responsive
- **Evidence:** Only a desktop layout is observed; navigation and consent behavior are unverified.
- **Recommended reflow:** Stack hero columns, then place each article heading directly above its related text and quotations.
- **Recommended lists:** Collapse requirements and footer groups progressively while preserving reading order.
- **Overlay handling:** Constrain the cookie panel to the viewport with readable text and reachable controls.
### Adaptation guidance
- **Preserve:** Keep the dark editorial grid, white summary card, orange quote rules and restrained conversion treatment.
- **Build:** Separate hero facts, narrative sections, quotations, related story and footer into reusable regions.
- **Content fidelity:** Treat headline outcomes, savings and quoted claims as supplied page content, not independently verified facts.
- **Interaction:** Define navigation, sales, related-story and cookie controls explicitly; their results are not shown.
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.