Generate a new design based on this screen, using your own content.
Preview the prompt
# Design from Reference: Blobr 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:** Blobr
- **Category:** Careers Page
- **Screenshot:** https://media.saasframe.io/v/bc09ad58d28fd50629d0-1600.webp
Analyze the screenshot first. If you can’t access it, ask me for it rather than guessing.
## Content
Write realistic placeholder content for a fictional SaaS product in the same category (no lorem ipsum).
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual design
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.
### Overall aesthetic
- **Style:** Spacious startup careers page with heavy rounded headings, a white canvas and restrained emerald accents.
- **Character:** Dark green-black text, cool pale-gray cards and a single deep-dark investor band. Thin green decorative paths add a technical identity.
- **Surface treatment:** Broad whitespace, softly rounded value/benefit tiles and simple ruled job listings; imagery is limited primarily to logos and small icons.
### Page composition
- **Capture scale:** 2880 × 13840 image px. CSS estimates assume an unverified 2× capture, approximately 1440 × 6920 CSS px.
- **Header:** Logo left, five central links and login/black pill action right, above a fine full-width divider.
- **Hero:** Large centered two-line title and two-line recruitment subtitle. A very tall sparse area follows, with two thin vertical green strokes visible; no additional hero media should be inferred.
- **Company narrative:** Narrow centered reading column, approximately 640 CSS px wide, contains four paragraphs and two equal stat tiles.
- **Values:** Centered large heading precedes three stacked pale cards, each with a green icon tile, bold value name and description.
- **Reasons to apply:** Another centered heading leads into four separated paragraphs, each beginning with an emerald emphasized phrase. Thin green rounded paths enter from the page sides.
- **Benefits:** Six pale tiles form two columns and three rows beneath a large centered heading.
- **Investors:** Full-width near-black band contains a centered light heading and four dark rounded logo tiles.
- **Open positions:** White region includes centered title/subtitle, then a narrow department-grouped job list. Engineering has three visible roles; Growth has one.
- **Footer:** Pale cool-gray full-width area with brand/status left and four navigation groups. Copyright/legal line and a small portrait chat launcher sit near the bottom.
### Information hierarchy
- **Hero dominance:** Heavy oversized title establishes the mission before the smaller recruitment invitation.
- **Company proof:** Founding and funding figures sit in paired tiles below the narrative.
- **Culture hierarchy:** Values use compact named cards; reasons use larger spaced prose; benefits use concise icon-led tiles.
- **Investor proof:** Dark band creates a strong pause and emphasizes four backing logos.
- **Job hierarchy:** Department headings precede role titles, location/remote metadata and right-aligned green Apply links.
- **Evidence limit:** No job detail, application form, expanded menu or chat conversation is visible.
### Typography
- **Heading family:** Heavy rounded geometric sans serif; exact identity is unverified.
- **Hero title:** Approximately 76–80 CSS px, very bold, with 88–92 px leading and tight tracking.
- **Section headings:** Approximately 52–56 px, heavy, with 62–66 px leading.
- **Subtitle:** Approximately 23–24 px, medium/semibold, with 32 px leading.
- **Body:** Approximately 18 px with 28 px leading; narrative text is darker than supporting benefit/reason text.
- **Card titles:** Approximately 18 px bold; descriptions around 18 px with 24–26 px leading.
- **Jobs/footer:** Role titles around 16–18 px; metadata and footer links around 14–16 px.
- **Measurement limit:** Values are visual CSS estimates under the assumed 2× capture.
### Colors & surfaces
- **Canvas:** Sampled sRGB #FFFFFF dominates the page.
- **Primary dark:** Sampled #000A07 supplies the green-black text/investor-band reference.
- **Cards/footer:** Sampled #F2F6F6 and #F5F9F9 supply pale cool-gray surfaces.
- **Dark tiles:** Sampled #151B19 supplies a slightly lighter investor-card reference.
- **Secondary text:** Sampled #62686F provides muted gray body/metadata reference.
- **Accent:** Sampled #00DC90 supplies a vivid emerald reference among decorative paths, icons and action details.
- **Rules:** Sampled #E3E7EB supplies subtle separator tones.
- **Benefit icons:** Yellow, coral, cyan and pink appear in small icon squares, localized to benefit identity.
### Components
- **Header action:** Compact black pill with white Start for free label.
- **Stat tiles:** Two equal pale rectangles, roughly 310 × 130 CSS px, with large radii, muted label above bold value.
- **Value cards:** Approximately 640 px wide, 115–140 px high, 22–24 px radii, small left icon surface and stacked text.
- **Icon tiles:** Small rounded squares with green symbols and subtle lower shadows.
- **Benefit tiles:** Two-column pale rounded rectangles, icon left and bold multiline text right.
- **Investor tiles:** Four equal dark rounded boxes with centered white logos and fine tonal borders.
- **Job rows:** Fine top/bottom rules, title above icon-led location/remote metadata, green Apply link at right.
- **Decorative paths:** Thin emerald lines with rounded rectangular turns and fading edges; no interactive role is established.
- **Footer status:** Small green dot and operational-status text beside the brand.
- **Chat launcher:** Circular portrait with a small green availability dot, floating at lower right.
### Visual rhythm
- **Whitespace:** Exceptionally large vertical gaps separate hero, narrative, values, benefits and jobs.
- **Content width:** Narrow prose/cards contrast with full-width investor and footer bands.
- **Repetition:** Three value rows, six benefit tiles and ruled job entries create distinct repeatable patterns.
- **Contrast:** The investor band is the main dark interruption in an otherwise white/light page.
- **Alignment:** Centered headings and narrow content columns maintain a stable vertical axis.
### Responsive
- **Evidence limit:** Only desktop is visible; recommendations below are not observed behavior.
- **Hero recommendation:** Reduce title to approximately 40–48 px and avoid preserving excessive blank height on phones.
- **Cards recommendation:** Stack stat/benefit tiles and reduce side padding to 20–24 px.
- **Investors recommendation:** Wrap logo tiles into two columns while preserving recognition.
- **Jobs recommendation:** Allow long role names to wrap and move Apply beneath metadata when necessary.
- **Footer recommendation:** Stack navigation groups and keep chat clear of legal links.
### Adaptation guidance
- **Preserve recruitment clarity:** Present mission, genuine company context, culture, benefits, backing and open roles in a clear sequence.
- **Use verified facts:** Replace founding/funding figures, investor logos, benefits and vacancies with accurate target-company information.
- **Match content volume:** Remove empty role groups or unsupported benefit claims rather than filling the layout.
- **Retain restraint:** Use strong rounded headings, pale tiles, thin rules and one emerald accent.
- **Accessibility recommendation:** Provide descriptive application links, readable contrast and accessible navigation; interaction behavior is not verified by the screenshot.
## Direction
Keep the reference’s visual language (type, color, spacing, radii) but adapt the layout freely to the content.
## Output
Produce a high-fidelity static visual mockup of the full screen.
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.
SaaSFrame
