Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Hotjar 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:** Hotjar
- **Category:** Careers Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb6da7b206c0d3f8f3a848_6acb6b94ba79854b969f2f51_cms-9158e3ea66fc160bfeb70794.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:** Friendly careers page with white editorial sections, colorful perks, coral hand-drawn accents, and dark navy footer.
### Page composition
- **Canvas:** 1440 ร 6625 screenshot px.
- **Sequence:** Split careers hero, work-culture media, twelve-perk grid, five-step recruitment timeline, life-at-company media, filtered jobs list, footer.
### Information hierarchy
- **Primary:** Dream-job headline and open-jobs action.
- **Benefits:** Color-coded perk cards.
- **Process:** Five numbered recruitment stages.
- **Conversion:** Department/location filters and per-role Apply links.
### Typography
- **Family:** Neutral sans serif; exact identity unverified.
- **Hero:** Approximately 40โ44 screenshot px.
- **Section headings:** Approximately 28โ32px.
- **Body:** Approximately 14โ16px.
- **Job labels:** Approximately 12โ14px.
- **Precision:** Image estimates.
### Colors & surfaces
- **Canvas:** #FFFFFF.
- **Footer:** #202840.
- **Perks:** #EECFDD, #FADC69, #CCEFF5, #AFAADD.
- **Accents:** Coral sketch lines and blue buttons.
- **Precision:** Flat sampled colors.
### Components
- **Perks:** Three-column colored rectangles with small outline icon, bold title, body.
- **Culture:** Video preview and quote overlap.
- **Timeline:** Five pastel number circles with hand-drawn connecting line.
- **Jobs:** Filters left, grouped role list right.
- **Media band:** Pale-yellow surface and photo/video tile.
### Visual rhythm
- **Spacing:** Large section gaps and consistent grid gutters.
- **Color rhythm:** White narrative alternates with compact colored benefit blocks.
- **Alignment:** Job groups use fine horizontal separators.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Stack perk/timeline grids, place filters above jobs, and collapse footer.
### Adaptation guidance
- **Preserve:** Culture โ benefits โ process โ openings narrative.
- **Content:** Use actual roles, locations, benefits, and authorized imagery.
- **Behavior:** Filters, carousel, and applications unverified.
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.