Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Miro 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:** Miro
- **Category:** Careers Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f272dcb7b092498aaa016f_1660054891036-c315e508-c2ae-4706-b065-351aa05953b9-name%3DMiroCareersPage.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:** Bold people-focused careers page with oversized typography, navy fields, vivid geometric accents, and candid team photography.
- **Visual character:** Strong white/navy contrast, playful yellow/pink shapes, blue actions, and large color-blocked values cards.
- **Surface treatment:** Open white sections alternate with dark bands; offices and news use softly shadowed cards.
### Page composition
- **Screenshot size:** 1440 ร 8409 image px. Capture-to-CSS scale unverified; dimensions below use screenshot pixels.
- **Header:** White horizontal navigation with logo, product links, language/sales/login, and blue signup pill.
- **Hero:** Navy background, oversized two-line recruitment statement, keyword/team/location search row, then large team photograph.
- **Hero decoration:** Yellow angled strips, pink circles, and a pink polygon overlap the photo edges.
- **Jobs:** White section with job/location total, repeated search controls, and eleven collapsed team rows with counts.
- **Culture:** Two alternating text/photo rows explain career growth and collaboration.
- **Values:** Four large cards in a 2 ร 2 grid, each with bold title, central illustration, and short description.
- **Proof:** Navy global-collaboration band with user total and five customer logos.
- **Offices/news:** Thirteen location cards in three columns, followed by three news cards.
- **Footer:** Navy five-column navigation, social/app badges, and a bottom cookie consent overlay.
### Information hierarchy
- **Hero dominance:** Large recruitment proposition and search controls establish the immediate task.
- **Job hierarchy:** Total count and filters precede team accordions; each team label includes a count and chevron.
- **Culture hierarchy:** Large headings and real team images provide context after the vacancy directory.
- **Values hierarchy:** Distinct card colors and illustrations make four principles independently scannable.
- **Conversion:** Search appears in hero and job section; footer signup remains secondary to job discovery.
- **Proof hierarchy:** Customer marks, office counts, and news cards reinforce employer credibility after culture.
### Typography
- **Family:** Rounded geometric sans serif with distinctive heavy display forms; exact family unverified.
- **Hero:** Approximately 84 screenshot px, weight 700โ800, line-height 88 px.
- **Major headings:** Approximately 48 px, weight 700, line-height 56 px.
- **Culture headings:** Approximately 48 px, deliberately wrapping into several short lines.
- **Value titles:** Approximately 32 px bold, line-height 38 px.
- **Body:** Approximately 18 px, regular, line-height 24 px.
- **Job rows/office titles:** Approximately 24 px bold.
- **Controls/navigation:** Approximately 16 px; footer links around 16 px with 28 px row pitch.
- **Precision:** Visual reconstruction estimates; no font files or CSS metadata verified.
### Colors & surfaces
- **Main canvas:** Sampled sRGB #FFFFFF.
- **Navy hero/footer/headings:** Sampled #080938 with nearby #080936.
- **Yellow values/decor:** Sampled #FAD033.
- **Pale pink:** Sampled #F4BDC0.
- **Coral-red value card:** Sampled #EA6074.
- **Blue value card:** Sampled #3F52D9.
- **Action treatment:** Bright periwinkle-blue filled pills and dark navy labels on white fields.
- **Contrast rules:** Pink/yellow cards use dark text; blue/coral cards use white titles and copy.
### Components
- **Search fields:** White pill keyword field with magnifier, two pill dropdowns, and compact blue Go action.
- **Team rows:** Thin gray horizontal separators, bold team/count label, and small downward chevron; collapsed state only.
- **Photography:** Large rectangular team images, sometimes square, with geometric color shapes layered behind or in front.
- **Values cards:** Approximately 550 screenshot px wide, 16 px corners, 40 px padding, large central flat illustration, and bottom description.
- **Office cards:** Three equal columns, white fill, thin pale border, approximately 16 px corners, and soft shadow; location above job/team totals.
- **News cards:** Graphic/logo header image above bold title in rounded white shell.
- **Cookie banner:** White rounded floating bar with small explanatory copy, outlined settings pill, and navy acceptance pill.
- **Footer:** Dense link groups with strong column labels, divider, social icons, and store badges.
### Visual rhythm
- **Shared width:** Most sections align to approximately 1120 screenshot px centered content.
- **Section spacing:** Large 120โ160 px gaps separate careers, culture, values, and offices.
- **Hero overlap:** Photo/decor extend the visual hero while retaining a single navy field.
- **Culture alternation:** Text-left/photo-right then photo-left/text-right avoids repetitive composition.
- **Grid rhythm:** Tight 20โ24 px value/office gutters balance broad page-level whitespace.
- **Closing contrast:** White offices/news sections transition sharply into navy footer.
### Responsive
- **Observed version:** Desktop only; dropdown/accordion states are unverified.
- **Search recommendation:** Stack keyword/team/location controls on mobile while keeping a clear submit action.
- **Hero recommendation:** Reduce headline toward 40โ48 px and simplify overlapping geometric decoration.
- **Culture recommendation:** Stack image/text rows in meaningful reading order.
- **Grid recommendation:** Reduce values/offices/news from multiple columns to one or two.
- **Footer recommendation:** Wrap link groups and constrain cookie banner to viewport without covering essential controls.
### Adaptation guidance
- **Preserve:** Oversized geometric typography, navy/white contrast, colorful employer values, and authentic team photography.
- **Content sequence:** Search jobs early, then explain culture/values, establish global proof, and offer office/news discovery.
- **Data fidelity:** Replace job totals, locations, growth/user claims, customer logos, and news accolades with verified current material.
- **Component starting points:** Approximately 48 px section headings, 18 px body, 16 px card radius, and 40 px card padding at screenshot scale.
- **Artwork adaptation:** Reuse the geometric visual language with original photos and illustrations.
- **Interaction fidelity:** Define filters and team expansion from actual job data; screenshot establishes only collapsed rows.
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.