Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Payhawk 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:** Payhawk
- **Category:** Blog Feed
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/668835bbc817ad297ed6a8e6_iUQCh-LaGRz2YLUqqPfWQoJ4h3_sciMc2BcA4aWmGhY.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:** Clean business blog with candid workplace photography, product screenshots and dark green brand framing.
### Page composition
- **Canvas:** 2880 ร 6286 screenshot pixels; CSS estimates assume approximately 2ร capture scale.
- **Sequence:** Dark navigation; split featured article; centered latest-post heading; category tabs; six-card three-column feed; See all; green conversion band; extensive dark footer.
### Information hierarchy
- **Priority:** Large featured image/headline leads into scannable article cards with category, date, duration and title.
- **Support:** Author avatar belongs to the feature; paired demo/tour actions anchor the closing CTA.
### Typography
- **Family:** Clean sans-serif; exact font is unverified.
- **Scale:** Estimated CSS feature heading 36โ38px, section title 36px, card titles 18px bold, body 20px and metadata 12px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF; deep green #153230; warm neutral #E7E5E4; near-black #0D0A09; gradient greens #043832 and #015341.
- **Accent:** Bright green pill actions and pale mint active category distinguish navigation/action states.
### Components
- **Cards:** Large rounded thumbnails, compact horizontal metadata row and bold title beneath, without enclosing card borders.
- **Geometry:** Estimated 12px image radii, 16px grid gutters and 46โ48px pill actions.
- **Footer:** Link groups, contacts/awards, office grid, app badges and legal/social rows.
### Visual rhythm
- **Spacing:** Broad 80โ100px CSS section intervals; repeated two-row card grid creates a steady editorial rhythm.
### Responsive
- **Guidance:** Mobile is not shown. Stack feature, reduce cards to one column and allow categories to scroll/wrap.
### Adaptation guidance
- **Transfer:** Preserve feature-to-feed hierarchy and photographic/product-image mix. Use original articles and current metadata.
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.