Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Resend Blog Post
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Resend
- **Category:** Blog Post
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb676e994832179b560765_6acb66c3b1814594b6facb39_cms-5c5283481edd285fea19c850.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 nearly monochrome launch-recap article uses a black canvas, white headings, slate body text and glossy dark technical artwork.
- **Evidence:** The source is 2880 ร 13330 pixels. All five readable portions were inspected; CSS dimensions assume an unverified 2ร capture density.
### Page composition
- **Header/title:** Compact navigation precedes centered date, large headline, subtitle and author.
- **Hero:** A wide bordered collage uses dim UI panels, a central glow and a launch-week title.
- **Article:** A narrower centered reading column contains an introduction, seven-item recap list and seven numbered daily feature sections.
- **Section structure:** Each daily heading is followed by a themed technical image, short paragraphs and supporting links.
- **Closing:** A Looking forward paragraph precedes a broad footer with address/status/social area and four link groups.
### Information hierarchy
- **Title:** The launch recap heading is the main display element, with quieter date and author metadata.
- **Index:** An underlined bullet list provides an overview before the detailed sequence.
- **Daily sections:** Consistent numbered headings and artwork make each announcement recognizable.
- **Resources:** Bold/underlined announcement, dashboard, example and documentation links conclude sections.
### Typography
- **Headline:** Approximately 54โ56 CSS pixels, regular weight with tight tracking.
- **Daily headings:** Around 24โ26 pixels semibold.
- **Body:** Approximately 16 pixels with 28-pixel leading; resource lists use similar size with stronger weight.
- **Metadata/footer:** Roughly 14 pixels; exact sans-serif identity is unverified.
### Colors & surfaces
- **Measured base:** ICC-to-sRGB sampling identifies #030303 as the dominant canvas.
- **Measured dark layers:** #161718, #2E2E2F, #474849 and #616365 appear in glossy artwork and UI surfaces.
- **Measured supporting text:** #8391A1 supplies a muted slate-blue tone.
- **Contrast:** Bright white headings/actions punctuate the otherwise low-key grayscale page; artwork uses localized silver glows rather than saturated accent colors.
### Components
- **Header action:** A white rounded Get Started pill contrasts with muted navigation links.
- **Hero collage:** Approximately 1230-pixel-wide artwork has a thin dark border, small radius and central illuminated lettering.
- **Daily artwork:** Repeated wide images show a map, dedicated-IP symbol, webhook event labels, domain UI, integration marks, tracking UI and code/color swatches.
- **Recap/resource lists:** Simple bullets and underlined text links provide navigation without card containers.
- **Author:** A small grayscale avatar aligns with the author name.
- **Footer:** A compact status badge and circular social icons sit beside address copy; link groups remain unboxed.
### Visual rhythm
- **Width hierarchy:** Hero/header use broad bounds while article copy is roughly 670 pixels wide.
- **Repeated cadence:** Heading, image, paragraphs and links repeat seven times with consistent spacing.
- **Dark whitespace:** Large black margins and gaps separate content without rules or colored sections.
- **Artwork continuity:** Glossy rounded UI motifs and grid-line glows unify the seven images.
### Responsive
- **Observed scope:** One desktop article is shown; links, menus and mobile rendering are not visible.
- **Recommended layout:** Make images fluid, reduce headline size and preserve a readable narrow text column.
- **Recommended contrast:** Keep body/footer text legible against black and provide alternatives for low-contrast decorative artwork.
- **Recommended navigation:** Collapse header/footer groups while retaining the recap index.
### Adaptation guidance
- **Recap pattern:** Start with an overview index, then repeat a clear visual/text/resource structure for each announcement.
- **Visual system:** Use a restrained grayscale palette and consistent technical artwork rather than adding unrelated accent colors.
- **Content accuracy:** Treat launch capabilities and dates as historical screenshot content requiring verification before live reuse.
- **Implementation:** Confirm fonts/density, provide meaningful image alternatives and clear focus/hover treatment for subtle links.
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.