Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: ConvertKit 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:** ConvertKit
- **Category:** About Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca43517fa6337d4811808_1659674674667-62ec9c9708e2d817762973fd_screenshot-device-220088bd57aaca74bdd02171409c6b4b-1659615938415.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:** Human-centered company page with a full-width team-photo hero, white portrait directory and coral/navy closing bands.
- **Typography:** Editorial serif headings pair with practical sans-serif names, roles and body text.
- **Capture:** The image measures 1440 ร 6362 px and was inspected in four portions. Dimensions below are image estimates; CSS scale is unverified.
### Page composition
- **Hero:** White navigation overlays a wide team photograph darkened with navy tint. Centered company heading and two-line description sit over the image.
- **Team introduction:** A centered serif heading, short explanation and coral mission/values action overlay a faint dotted world map.
- **Directory:** A long four-column grid of circular portraits, bold names and smaller role labels occupies most of the page.
- **Closing conversion:** A coral band contains a centered white card with serif headline, short paragraph and green action.
- **Footer:** A navy region holds six link columns and lower legal/social row.
### Information hierarchy
- **Company identity:** Hero heading introduces the team before the directory.
- **Distributed team:** A numeric team/city headline and map communicate breadth; these counts are captured, not current verified facts.
- **People:** Uniform portrait/name/role units give team members equal visual weight.
- **Action:** Mission/values link precedes the directory; a separate creator-focused product action closes it.
- **Footer:** Dense navigation remains subordinate.
### Typography
- **Heading family:** Sturdy editorial serif; exact identity is unverified.
- **Body family:** Neutral sans-serif; exact identity is unverified.
- **Hero:** Approximately 44โ46 image px serif heading, with 23โ24 px supporting copy.
- **Section headings:** Around 36โ38 px serif.
- **Directory:** Names approximately 18โ19 px bold; roles about 14โ15 px.
- **Footer:** Small uppercase group labels and 15โ16 px links.
### Colors & surfaces
- **Measured base:** ICC-aware sRGB sampling yields #FFFFFF.
- **Measured brand:** Navy #20304F and coral #FA6167 define major text/footer/conversion regions.
- **Measured action:** Green #3EA47F appears in the closing action.
- **Measured muted:** #748095 appears in secondary text/details.
- **Photo overlay:** A cool dark tint ensures white hero text separates from the team image.
- **Depth:** Circular photos are flat; the white conversion card has a soft shadow.
### Components
- **Header signup:** Small white-outlined pill beside plain white navigation.
- **Hero photo:** Full-width group image with dark overlay, no enclosing card.
- **Mission action:** Coral rounded rectangle centered over a faint map.
- **Portrait units:** Circular images around 110โ120 image px diameter, centered bold name and regular role below.
- **Closing card:** Broad white panel with generous padding and slightly rounded lower corner treatment.
- **Footer:** Six columns of light links on navy, with small social icons lower right.
### Visual rhythm
- **Directory:** Four equal columns and large repeated row gaps create an orderly long scroll.
- **Alignment:** Portraits/names/roles are centered consistently.
- **Whitespace:** Broad margins and pauses around the team introduction prevent crowding.
- **Color milestones:** Photo hero, white directory, coral conversion and navy footer create distinct sections.
### Responsive
- **Evidence limit:** Only desktop is shown; recommendations follow.
- **Hero:** Collapse navigation and preserve text contrast over the cropped photo.
- **Directory:** Reduce four columns to two then one.
- **Closing/footer:** Use fluid card padding and fewer footer columns.
- **Names:** Allow role text to wrap without disrupting portrait alignment.
### Adaptation guidance
- **Reusable pattern:** Introduce company purpose, show distributed-team context and present a consistent people directory.
- **Content discipline:** Keep names/roles structured and validate current team data separately.
- **Accessibility:** Provide useful portrait alternatives and semantic headings.
- **Visual identity:** Pair serif warmth with restrained coral/navy accents and simple circular portraits.
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.