Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Arcade 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:** Arcade
- **Category:** Blog Feed
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/63dd9e71fcae2767f8359d8b_screenshot.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:** A clean product-blog directory uses white space, dark navy typography and soft pastel editorial imagery.
- **Capture evidence:** The image measures 1680 × 2643 pixels and was inspected in two portions through the footer. Measurements below are image-pixel estimates; CSS scale is unverified.
- **Tone:** A large centered headline and orderly rounded cards create a polished, approachable content hub.
### Page composition
- **Navigation:** Brand sits left, primary links center and sign-in/signup controls right.
- **Headline:** A large two-line centered message introduces the blog, with the product name in an orange-to-pink gradient.
- **Featured row:** Two large cards occupy the first row.
- **Standard grid:** Three columns of smaller cards follow across three rows, for eleven visible previews overall.
- **Footer:** A thin top rule introduces brand/tagline/social content left and Explore, Company and Legal link groups right.
### Information hierarchy
- **Display message:** The page headline is the strongest text.
- **Featured stories:** The first two previews have wider images and more prominent placement.
- **Card roles:** A large editorial thumbnail sits above category/read-time metadata and a bold multiline title.
- **Category distinction:** Announcement and Case study labels are small uppercase text rather than large colored badges.
- **Navigation emphasis:** Signup is blue; a small numeric Careers badge appears in both header and footer.
### Typography
- **Family:** A clean sans-serif is visible; exact identity is unverified.
- **Headline:** Approximately 64px image size, bold, with 68px line-height and tight tracking.
- **Card titles:** Approximately 24px semibold with 30–32px line-height.
- **Metadata:** Approximately 12px uppercase with slight letter spacing.
- **Navigation:** Approximately 16px medium.
- **Footer tagline:** Approximately 24px bold; link groups use smaller 14px text.
- **Embedded image text:** Large headlines inside thumbnails are part of the editorial artwork.
### Colors & surfaces
- **Canvas:** Sampled #FFFFFF supplies the main page and card bodies.
- **Pastel imagery:** Sampled #FEFDFF, #FDFCFF and #FCFBFE contribute to near-white lavender image areas.
- **Pink tones:** Sampled #FDF0F7 and #FCF2F8 contribute to soft thumbnail gradients.
- **Ink:** Dark navy-black supplies headline, metadata and footer text.
- **Action blue:** Saturated blue supplies signup and small count badges.
- **Display accent:** Orange, coral and pink blend across the product-name word in the headline.
### Components
- **Article cards:** Thin light-gray outlines, around 16px radii and white surfaces frame each preview.
- **Featured cards:** Roughly 590px wide in the source scale, with large shallow editorial images and generous lower text padding.
- **Standard cards:** Roughly 390px wide, using the same metadata/title pattern at a smaller width.
- **Metadata row:** Category aligns left and reading time right within each card.
- **Thumbnail system:** Pastel gradient backgrounds combine large short titles, product mockups and customer-logo tiles.
- **Signup action:** A compact blue rounded rectangle uses white text.
- **Footer social:** Small pale circular buttons contain dark social icons.
### Visual rhythm
- **Content width:** Approximately 1200px in the source image, centered with broad margins.
- **Opening space:** Large vertical gaps separate navigation, headline and first card row.
- **Grid gutters:** Around 16px separates cards, with matching row gaps.
- **Card padding:** Approximately 32px inset organizes metadata and titles.
- **Footer spacing:** Generous padding separates the final card row from compact footer navigation.
### Responsive
- **Evidence limit:** Only a desktop directory is observed; card hover and mobile behavior are unverified.
- **Grid recommendation:** Reduce featured and standard rows to a consistent single-column flow at narrow widths.
- **Typography recommendation:** Scale the display headline while preserving its gradient emphasis.
- **Card recommendation:** Let long titles expand naturally without clipping.
- **Footer recommendation:** Stack link groups and retain clear social-link labels.
### Adaptation guidance
- **Editorial system:** Reuse one card pattern with featured and standard width variants.
- **Thumbnail consistency:** Maintain a coherent pastel/product-mockup style across article imagery.
- **Content handling:** Pair category, reading time and title consistently without inventing unseen previews.
- **Accessibility:** Provide descriptive card links, image alternatives and visible focus.
- **Brand discipline:** Keep blue for actions and reserve the warmer gradient for key display emphasis.
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.