Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Zendesk About 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:** Zendesk
- **Category:** About Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbd2786bfbf3cb03d71067_6acbd020a58d0f99faaf6c19_cms-aa421d2b4750fea7d2b448e0.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 large-scale editorial company page with oversized geometric headings, documentary photography, playful brand language, and generous white space.
- **Character:** Human and confident, using teal ink, muted warm surfaces, and a few mustard/orange accents rather than card-heavy product marketing.
### Page composition
- **Capture and scale:** The screenshot measures 1440 ร 11700 pixels. Approximate dimensions below refer to screenshot pixels; CSS scale is unverified.
- **Opening:** A centered navigation header precedes a split introduction: an enormous two-line company statement left and a short company description right. A full-width portrait follows with large white overlaid text.
- **Community story:** A centered inclusion statement leads into alternating half-width photography/text sections about community and events, with offset rectangular color blocks between them.
- **Company evidence:** Large customer/employee statistics, a countries figure with abstract world map, and a volunteer-hours/photo pairing create a broad evidence sequence.
- **Culture and careers:** A warm-gray wordplay banner precedes two vertically separated leadership statistics and a large recruitment heading. Six office locations form a three-column/two-row grid with city labels and tall photographs, followed by View more.
- **Closing:** A logo-assets split, press-center banner, desk-origin story/photo, and oversized playful closing statement lead into a pale five-column footer with newsletter, social, consent, legal, and contact-sales controls.
### Information hierarchy
- **Narrative:** The page moves from identity and people to community, scale, culture, recruiting, brand resources, and company history.
- **Display emphasis:** Very large statements and numbers serve as visual anchors; short body paragraphs supply explanation.
- **Image hierarchy:** Full-bleed portrait establishes personality; alternating community photographs and office images provide authentic supporting evidence.
### Typography
- **Family:** A rounded geometric sans serif with heavy display weights is visible; exact family identity is unverified.
- **Display:** The opening and portrait-overlay text are approximately 140โ150 screenshot px, bold, with very tight line-height. Major split-section headings are around 80โ90 px.
- **Statistics and banners:** Large figures and the culture wordplay reach roughly 100โ150 px. Secondary centered statements are around 44โ48 px.
- **Body:** Introductory copy is approximately 22 px with 30 px line-height; smaller explanatory paragraphs around 18โ20 px. Footer copy is much smaller, approximately 12โ14 px.
- **Hierarchy:** Use tight tracking for large headings and comfortable leading for body paragraphs; keep statistics bold and captions medium-weight.
### Colors & surfaces
- **Foundation:** Sampled sRGB #FFFFFF dominates, with warm pale gray #F3F1EF and near-white #FAFAFA used for banners/footer.
- **Brand ink:** Sampled dark teal #13363C anchors headings, symbols, and key figures. Muted blue-gray #788C8C colors the opening statement.
- **Warm accents:** Sampled mustard #DBAE49 appears in geometric/culture accents. Orange highlights some figures and part of the wordplay; its exact hex value is unverified.
- **Links:** A lighter blue-teal accents inline calls to action and selected headline phrases. Photography supplies most additional color.
### Components
- **Editorial splits:** Half-width images alternate sides against large text blocks, often with square corners and no shadows.
- **Portrait hero:** A large full-width human portrait carries centered two-line white display text, avoiding an enclosing panel.
- **Metrics:** Figures are unboxed and oversized, sometimes paired with a warm-gray rectangular background or adjacent photograph/map.
- **Office grid:** Six tall photographs align beneath wide city-label blocks. Some labels use warm-gray fills, others white, producing a restrained checkerboard effect.
- **Brand/culture elements:** A teal circular badge overlaps the top of the culture banner; an oversized teal geometric logo accompanies the asset-download section.
- **Footer:** Five compact link columns sit above a newsletter row with checkbox consent, circular social icons, thin dividers, and a small rounded contact-sales action.
### Visual rhythm
- **Major spacing:** Use very large 140โ220 px breathing intervals between narrative chapters and leadership figures.
- **Grid logic:** Maintain broad centered content widths around 1080 px while allowing major photographs and banners to reach the viewport edges.
- **Pacing:** Alternate image-heavy sections, short prose, and isolated display statements; avoid turning the long narrative into a uniform repeated card list.
### Responsive
- **Observed state:** Only desktop is provided.
- **Recommended reflow:** Stack split sections, scale extreme display type down substantially, and collapse office grids to two then one column.
- **Photography and text:** Preserve useful portrait crops and readable overlay contrast. Keep statistics/captions associated, and stack footer utilities without tiny text.
### Adaptation guidance
- **Preserve:** Retain the human photographic direction, oversized teal typography, alternating editorial grid, sparse warm accents, and playful brand-story pacing.
- **Adapt:** Use authentic people, locations, history, metrics, and company values. Scale the number of sections to available material.
- **Avoid:** Do not copy corporate statistics, leadership counts, claims, or brand wordplay. Replace them with verified content and original expressions.
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.