Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: ConvertKit Careers 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:** Careers Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca4291cef28069c0344fc_1659674505627-62ec9c8f52527c84500781a2_screenshot-device-fdb66b96cd1081cdd14978f4ae8a7fef-1659606474942.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:** Warm mission-driven careers page mixing coral, pale cyan, muted blue and navy with serif headings and approachable team photography.
- **Visual language:** Large color bands, overlapping photos, playful geometric accents and generous white job cards balance personality with recruitment clarity.
- **Capture:** The image measures 1440 ร 7578 px and was inspected in five portions. All dimensions below are image estimates; CSS scale is unverified.
### Page composition
- **Hero:** A full-width coral header/hero places white navigation above a left mission headline and invitation. A large team photo overlaps the transition into a pale-cyan section on the right.
- **Introduction:** Left-aligned company paragraphs and three icon-led reasons sit beneath the hero; colored geometric shapes decorate the overlapping photo.
- **Open roles:** A centered heading and short introduction precede seven white job cards in a two-column grid, with the final general-interest card occupying the left column.
- **Inclusion:** A small coral heart and centered multiline text provide an equal-opportunity/application encouragement section below the cards.
- **Values:** A full-width muted-blue carousel shows a centered serif heading, large typographic value artwork, description, arrows, four dots and a darker link button.
- **Team and benefits:** A pale blue-gray section combines team copy/photo, three retreat-video cards and an eleven-item benefits grid in three columns.
- **Footer:** A coral open-roles button precedes a full-width navy footer with six link columns and a lower legal/social row.
### Information hierarchy
- **Mission:** The large white serif proposition leads the page; supporting paragraphs and bold phrases explain the company proposition.
- **Job cards:** Serif role titles lead, uppercase team labels follow, then body descriptions and muted-blue application buttons.
- **Culture evidence:** Inclusion copy, values artwork, team photos and retreat posters broaden the page beyond vacancies.
- **Benefits:** Coral outline icons and bold labels identify each benefit; thin grid rules organize descriptions without individual card backgrounds.
- **Conversion:** Application buttons repeat within job cards, while the final coral action returns visitors to all open roles.
- **Evidence caution:** Job availability and benefit details are screenshot content, not verified current employment terms.
### Typography
- **Heading family:** A sturdy editorial serif is used for mission, role titles and major section headings; exact identity is unverified.
- **Body family:** A conventional sans-serif supports paragraphs, navigation, labels and actions; exact identity is unverified.
- **Hero:** Approximately 46โ48 image px with about 60 px leading, regular-to-medium weight.
- **Section and card headings:** Major headings are around 36โ38 px; role titles roughly 29โ32 px, often wrapping naturally.
- **Body:** Approximately 18โ19 px with 29โ30 px leading. Card team labels are muted uppercase around 16โ17 px.
- **Values artwork:** Large condensed uppercase and script lettering form an image-like central composition, distinct from the site's normal typography.
- **Footer:** Small uppercase group labels and compact light links reduce visual priority.
### Colors & surfaces
- **Measured brand tones:** ICC-aware sRGB sampling yields coral #FA6167, muted blue #48639C and navy #20304F.
- **Measured backgrounds:** #FFFFFF fills job cards; #EBFFFF is the pale cyan introduction area and #F2F7FA the lower team/benefit surface.
- **Text hierarchy:** Navy headings contrast with gray body text; pale blue-gray labels recede within cards.
- **Accent details:** Coral circular/outline icons, blue/green geometric shapes and warm photographic colors support the palette.
- **Depth:** Job cards and photos use soft shadows and modest corners; large section bands remain flat.
### Components
- **Header signup:** A small white-outlined pill sits beside white navigation links on coral.
- **Hero photo:** A broad rounded team photograph overlaps two background bands, with a green rectangle, blue dot and coral curved shape behind it.
- **Job cards:** Two approximately 550 px-wide white cards per row use around 50 px padding, subtle borders/shadows and 6โ8 px corners.
- **Application buttons:** Muted-blue rectangles with white text, small corners and roughly 50 px height sit beneath each description.
- **Values carousel:** Large side chevrons, four small pagination dots and a dark-blue rectangular link surround the centered value composition. Only one slide is visible; no carousel movement is demonstrated.
- **Retreat cards:** Three white bordered cards contain landscape video posters with large coral circular play buttons, serif location titles and muted uppercase dates.
- **Benefits grid:** Three columns and four rows, with the last cell empty, use fine divider lines, coral icons, dark labels and short paragraphs.
- **Footer:** Six dense link groups sit on navy; a lower divider separates location/copyright/legal information from social icons.
### Visual rhythm
- **Section contrast:** Coral hero, cyan introduction, white jobs, blue values and pale lower content create distinct stages in the long scroll.
- **Grid spacing:** Job cards use about 36 px gutters and consistent row gaps, while benefits use shared rules and equal column widths.
- **Text measure:** Main content is centered in roughly 1140โ1170 px; centered inclusion copy uses a narrower measure.
- **Whitespace:** Large pauses around section headings and between role grid/culture content prevent the page from feeling like a continuous list.
- **Photography cadence:** Team photos and retreat posters recur around text-heavy recruitment and benefits sections.
### Responsive
- **Evidence limit:** Only desktop is shown; these are recommendations.
- **Hero:** Collapse navigation and stack photo below mission copy, preserving the overlapping treatment only where it remains clear.
- **Jobs:** Reduce cards to one column with smaller padding and readable title wrapping.
- **Culture:** Scale values artwork, retain accessible carousel controls and stack team copy/photo.
- **Benefits/footer:** Reduce three benefit columns and six footer groups progressively; keep application actions comfortably touchable.
### Adaptation guidance
- **Reusable structure:** Lead with mission, present clear role cards, then substantiate culture through inclusion, values, team evidence and benefits.
- **Visual identity:** Pair serif editorial headings with practical sans-serif body text and a limited coral/blue/navy palette.
- **Content modeling:** Give each job consistent title/team/description/action fields and reserve a general-interest route for unmatched candidates.
- **Interaction truth:** Treat video and carousel states as captured previews; provide accessible real controls in implementation.
- **Accessibility:** Ensure muted labels remain readable, supply photo/video alternatives and keep heading order and application link names meaningful.
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.