Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Bento 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:** Bento
- **Category:** Careers Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb7264b10d21a746c47a79_6acb6efbddc9482c9279ff12_cms-ec08f91ffcd6dac8bdca8415.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:** Personal, airy careers page with team portraits, casual photo collage and floating product-style widgets.
### Page composition
- **Capture:** 1440 × 3594 screenshot pixels; estimated CSS scale approximately 1×.
- **Structure:** Tiny logo, centered avatar strip/headline, wide tilted photo collage, narrow mission panel with floating widgets, founding-story link, large Join us action and minimal footer.
### Information hierarchy
- **Priority:** Four avatars and a sketched fifth position introduce recruitment. Mission prose provides depth before the closing hiring CTA.
### Typography
- **Family:** Rounded sans serif with handwritten annotation; exact families unverified.
- **Estimated CSS sizes:** Main headings 40px, mission prose 24px with 36px line height, action 28px and footer 14px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, mission panel #FAFAFA, blue #7395F9 and subtle white-gray #FEFEFE/#FDFDFD/#F9F9F9.
- **Accents:** Small multicolor brand mark and pastel social/product widgets.
### Components
- **Elements:** Circular portraits, handwritten you? outline, rotated white-bordered photographs with shadows, floating follow/subscribe/GitHub tiles and broad blue CTA.
- **Estimated geometry:** Mission/action width approximately 800px, panel radius 28px, photo radii 10px, 64px avatar circles and 72px CTA.
### Visual rhythm
- **Spacing:** Very large vertical intervals separate personal introduction, photo narrative, mission and hiring action.
### Responsive
- **Suggested adaptation:** Reduce photo collage scale/rotation, keep mission text readable and move floating tiles away from prose. Mobile behavior is not shown.
### Adaptation guidance
- **Transfer:** Preserve the intimate team story and generous space. Use genuine team photography and a real recruitment destination.
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.