Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Rally 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:** Rally
- **Category:** Blog Feed
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f3cce5449f5e4790d08a52_1660143404649-blog-1660143295325.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 editorial blog with heavy dark typography, clear black outlines and a pale mint background.
- **Character:** Rounded cards and pill controls combine with technical green-on-charcoal illustrations and playful newsletter line art.
- **Contrast:** White article cards lead into a dark conversion band, then a mint footer.
### Page composition
- **Canvas:** Source 1440 × 4262 pixels, inspected throughout in three crops at 1400px width. Measurements below use inspection pixels; CSS capture scale is unverified.
- **Header:** White navigation row around 103px high, logo left, central links and outlined pill action right.
- **Introduction:** Centered large heading and bold one-line subtitle precede a two-column featured region.
- **Feature row:** Approximately 816px-wide article card at left and 388px newsletter card at right, separated by about 40px.
- **Post grid:** Five cards form three columns then two, inside a roughly 1244px wrapper.
- **Closing:** Full-width dark CTA pairs text/checklist/action with a large outlined phone-checkout illustration.
- **Footer:** Mint background, brand/legal block, link groups, social icons and a separate newsletter form. A dotted rule closes the page.
### Information hierarchy
- **Headline:** Read all about it is the largest introductory text.
- **Featured article:** Wide illustration, category tab, read-time label, large title and short excerpt form one bordered unit.
- **Newsletter:** Mailbox illustration leads to a bold invitation, supporting copy, email field and dark signup button.
- **Posts:** Repeated thumbnail/category/title/excerpt groups use the same strong outline treatment.
- **Conversion:** Large white heading with green phrase, three check-led benefits and green pill create the lower primary action.
### Typography
- **Hero:** Approximately 62px heavy sans serif, around 72px line height.
- **Section heading:** Blog posts around 54px heavy; featured title and newsletter heading around 40px bold with roughly 52px line height.
- **Card titles:** Approximately 25px bold with 31px line height.
- **Body:** Around 20px bold/medium, 31px line height, unusually strong relative to standard editorial body copy.
- **Navigation/metadata:** Around 16px bold; category labels around 20px. Exact font family is unverified.
### Colors & surfaces
- **Measured neutrals:** #FFFFFF cards and #222021 dark text/CTA band.
- **Measured mint:** #E1FFF0 footer/base mint, with #F5FFFC, #EEFFF7, #EBFFF6 and #F1FFF8 in the pale background range.
- **Other pale tone:** #FDFFFF occurs in near-white rendering areas.
- **Accent:** Strong green action and illustration highlights contrast with dark charcoal; dark artwork uses green gradients and fine light lines.
- **Surface treatment:** Approximately 2px dark outlines establish cards; little conventional shadow is visible.
### Components
- **Featured card:** Approximately 816 × 845px, 16px radius, dark outline and about 37px image inset.
- **Category strip:** Full-width divider below media, with bordered category tab at left and small clock/read-time at right.
- **Post cards:** Approximately 388px wide, equal-height shells around 627px, 16px radius and 37px media inset.
- **Newsletter field/button:** Roughly 311 × 78px pill controls, outlined mint field and solid charcoal action.
- **Header action:** Approximately 235 × 55px outlined pill.
- **Closing action:** Green pill around 316 × 78px; large phone graphic contains illustrative payment choices.
- **Footer signup:** Smaller white outlined email pill above dark signup pill; green floating chat control sits lower right.
- **States:** No article hover, newsletter validation or checkout interaction is demonstrated.
### Visual rhythm
- **Top spacing:** Around 70px separates navigation and headline; around 50px separates intro from feature cards.
- **Card rhythm:** Large media areas and clearly ruled category bands repeat consistently.
- **Grid:** Approximately 40px gaps separate cards horizontally and vertically.
- **Section break:** Blog-post heading is paired with a long horizontal rule.
- **Closing/footer:** Broad padding and aligned columns maintain the strong graphic structure.
### Responsive
- **Observed scope:** Desktop long page only; mobile behavior is unverified.
- **Recommended layout:** Stack featured article and newsletter, then reduce post grid to one column.
- **Recommended type:** Reduce heavy title sizes while retaining the visual hierarchy.
- **Recommended media:** Keep thumbnails at a consistent ratio and simplify phone cropping on small screens.
- **Recommended footer:** Wrap link groups and prevent floating chat from covering newsletter actions.
### Adaptation guidance
- **Preserve:** Heavy typography, dark outlines, mint surfaces and consistent category-band cards.
- **Content:** Use supplied articles, categories and read times; do not infer metadata from thumbnails.
- **Implementation:** Use flexible card bodies to align rows without fixed blank spacers.
- **Interaction:** Define signup and link states explicitly; the payment UI belongs to an illustration, not a live checkout.
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.