Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Burb Blog Feed
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Burb
- **Category:** Blog Feed
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ecbb611cef2868580447ba_1659680887221-screenshot-device-6e49fc771b7587bfa6a7079169a7651c-1659680742712.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:** High-contrast editorial blog feed with a black hero/footer, oversized heavy rounded type and pastel pink/mint emphasis.
- **Visual language:** Circular masks, human photography and illustrated product thumbnails create a playful community-focused identity.
- **Capture:** The image measures 1440 × 7443 px and was inspected in five portions. Dimensions below are image estimates; CSS scale is unverified.
### Page composition
- **Header:** A long outlined capsule contains wordmark, four navigation links, login and mint signup pill.
- **Hero:** A huge multiline statement spans nearly the full width, alternating white, pink and mint phrases.
- **Featured story:** A large rounded photograph left and category/title/author block right sit on black. Circular cutout patterns overlay the photo edge and trail into the next section.
- **Feed:** A white section starts with Latest stories and five filter pills. A three-column article grid includes a black newsletter-signup card in the first row's right column.
- **Closing:** After the long feed, a black bordered conversion panel pairs oversized text with supporting copy/action and a circular-masked portrait strip.
- **Footer:** Company links, large social circles and contact information sit on black, followed by a fine-rule legal row.
### Information hierarchy
- **Editorial scope:** The oversized hero establishes community management/course content.
- **Featured item:** A large image and bold story title prioritize one article, with category, avatar, author and date beneath.
- **Feed cards:** Thumbnail, uppercase category, bold title, excerpt and muted date repeat consistently.
- **Filtering:** All is mint-selected; other category pills are gray.
- **Signup:** The black newsletter card separates its email/action from article content; the bottom conversion repeats a broader product action.
### Typography
- **Family:** Heavy rounded display sans-serif and more conventional body sans-serif; exact identities are unverified.
- **Hero:** Approximately 94–104 image px, very heavy, with tight line-height and tracking.
- **Section/title roles:** Latest stories is around 38–40 px; featured title about 40 px.
- **Cards:** Titles are approximately 24–26 px bold with 32 px leading; excerpts around 16 px with 24 px leading.
- **Metadata:** Uppercase categories and dates are about 12–14 px.
- **Closing:** Large display text echoes the hero, with pink emphasis.
### Colors & surfaces
- **Measured base:** ICC-aware sRGB sampling yields #000000 and #FFFFFF.
- **Measured mint:** #CFEFD0 and #AFD7B3 occur in green illustration/action areas.
- **Measured pink:** #FFE1E2 and #FBC5C5 occur in hero/thumbnail accents.
- **Measured secondary:** #1A6EBF appears in a blue thumbnail; #6F6F6F in muted details and #F5F5F5 in pale surfaces.
- **Depth:** Cards are mostly unboxed on white; rounded thumbnails and black signup/CTA regions provide structure without heavy shadows.
### Components
- **Navigation:** Thin gray outlined pill with internal logo divider and a mint rounded primary action.
- **Featured image:** Large landscape photo has rounded corners and a circular masking pattern along the right edge.
- **Filter pills:** Five fully rounded controls use bold dark labels, one mint active state and neutral inactive fills.
- **Article cards:** Three equal-width columns use consistent landscape thumbnails, category labels and text stacks; excerpt length varies.
- **Newsletter panel:** Black rounded card contains white heading, white email pill, mint signup pill and tiny consent copy.
- **Thumbnails:** Mix of photos, interface screenshots, automation diagrams and typographic promotional art with pastel grounds.
- **Closing panel:** Thin rounded border frames huge headline, mint action and a wide portrait strip revealed through repeated circular apertures.
- **Social controls:** Large white circles with black platform symbols form a two-by-two group in the footer.
### Visual rhythm
- **Width:** Hero and grid use small outer margins, producing a broad editorial spread.
- **Grid cadence:** Approximately 36 px gutters and large row gaps separate many articles.
- **Text hierarchy:** Short uppercase categories sit close to titles, with larger pauses before dates.
- **Transition:** Pink circular decoration overlaps the black-to-white boundary.
- **Contrast rhythm:** Black opening and closing sections frame a long white browsing area.
### Responsive
- **Evidence limit:** Only desktop is shown; recommendations follow.
- **Hero:** Reduce oversized type fluidly and preserve meaningful colored phrases.
- **Grid:** Reduce three columns to two then one; move newsletter signup into natural reading order.
- **Featured item:** Stack image and author/title block.
- **Footer:** Reflow links/contact/social controls and simplify circular image masks on small screens.
### Adaptation guidance
- **Reusable pattern:** Combine a strong editorial statement, featured story, filterable feed and distinct newsletter/product conversions.
- **Identity:** Reuse black/white contrast, pastel emphasis and circular masks selectively.
- **Content modeling:** Keep article category/title/excerpt/date consistent and image ratios stable.
- **Accessibility:** Use semantic filter states, labeled signup input and meaningful article links; retain sufficient contrast and keyboard focus.
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.