Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Flowrite 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:** Flowrite
- **Category:** Careers Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecbb5e8ef10877b110c9fe_1659680836777-screenshot-device-8cff96ac1c25e63e24a0376e0190a5f5-1659680499609.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:** Airy careers page with rounded typography, soft pastel gradients and a photo-led team narrative.
### Page composition
- **Capture:** 1440 × 7270 screenshot pixels; estimated CSS scale approximately 1×.
- **Structure:** Navigation/email request, mission hero/collage, narrow introduction, four opportunity cards, team grid, life-photo strip, six benefits, open positions and dark CTA/footer.
### Information hierarchy
- **Priority:** Large recruitment headline and team collage lead; opportunity and people content precede benefits and job links.
### Typography
- **Family:** Rounded geometric sans serif; exact family unverified.
- **Estimated CSS sizes:** Hero 56px, section headings 44px, job titles 22px, prose 20px and card body 16px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, pale #F9FBFC, dark footer #292E37/#1C2129/#1D232A and blue-gray #EDF3F8.
- **Accents:** Subtle lavender/blue/pink gradients and pale request-access controls.
### Components
- **Elements:** Asymmetric collage, highlighted prose phrases, square portrait grid, social-style life cards, line-art benefit panels and job rows with pastel thumbnails.
- **Estimated geometry:** Content 1224px wide, reading column 560px, 8px image radii, 120px portraits and 64px section padding.
### Visual rhythm
- **Spacing:** Generous chapter gaps alternate wide imagery with narrow prose; repeated team/benefit grids provide orderly detail.
### Responsive
- **Suggested adaptation:** Reduce grid columns, stack collage and job rows, and keep request-access form fluid. Mobile behavior is unverified.
### Adaptation guidance
- **Transfer:** Preserve genuine team imagery and clear opportunity/benefit/job progression; use current vacancies and benefits.
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.