# Resend homepage design spec (free) - Site: resend.com - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Resend. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Resend's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero craft spec Evidence: supplied desktop and 390px screenshots, below-fold screenshot, and computed-style extraction. The desktop hero section measures 1280×900px at x=80px, y=58px; the phone hero section measures 390×697px at y=60px. CRAFT ARCHETYPE: photo-led ## The big idea Pair a large editorial headline and concise supporting copy with a low-contrast, dimensional visual. At desktop size the visual sits to the right of the text; at 390px it appears above the announcement and text. Use original imagery and copy. ## Layers Use a near-black, full-bleed background. At 1440px viewport width, the hero section begins at x=80px and its text column at x=168px. The headline box is 480×204px; the displayed visual is to its right. An image is measured at 1440×900px with opacity 0.8, but its precise visible crop is not established. The announcement pill is 218×32px, positioned at x=168px, y=263px. The supporting paragraph is 480×54px at y=539px. Place two 48px-high actions below it: a 130px-wide primary action and a 160px-wide secondary action, beginning at y=625px. ## Type Use a display serif for the headline, measured at 96px with 96px line height and -0.96px letter spacing on desktop. Supporting text is 18px/27px in muted gray. At 390px, the headline is 64px/64px in a 342px-wide box; the supporting text is 16px/28px in a 342×84px box. ## Colour Use a near-black field, off-white headline text, and muted gray supporting text (RGB 161, 164, 165). The announcement has a restrained multicolor border treatment and a dark inner surface (RGB 11, 14, 20). Keep actions dark and subdued. ## States and motion The extracted styles show a 0.5s opacity transition on a hero image and a 30s linear rotation on the announcement border. Do not infer other animation or interaction behavior. ## Phone at 390px The header area is 60px tall; a 44×44px menu button is positioned at x=330px, y=16px. The hero section measures 390×697px from y=60px. The screenshot shows the visual above the announcement, but its phone dimensions are not provided by the extraction. The announcement begins at y=285px and measures 218×32px. The headline begins at y=349px; the paragraph begins at y=497px and measures 342×84px. Stack the two 342×48px actions at y=613px and y=677px. Do not assume an exact phone image size or crop. ## Do NOT copy or add Do not reuse the source identity, logo, wording, image, or unsupported claims. Do not invent additional badges or motion. ## Checks you can run At 1440px, check the 1280×900px section, 96px headline, and right-side visual. At 390px, check the 390×697px hero, 64px headline, 342px text column, and vertically stacked 342×48px actions. Verify there is no horizontal overflow. --- # Navigation craft spec Evidence: supplied desktop and 390px screenshots, below-fold screenshot, and computed-style extraction. The desktop header measures 1440×58px and is sticky with z-index 40. The phone screenshot shows a compact identity and menu control. CRAFT ARCHETYPE: type-led ## The big idea Create a restrained navigation rail with a left-side identity, desktop destinations across the center, and two account actions at the right. Use original identity and labels; match the measured spacing and hierarchy rather than the source wording. ## Layers At desktop size, use a 1440px-wide, 58px-high header. The identity link begins at x=104px. The measured destination controls begin at x=420px and occupy 58px height; their horizontal padding is 12px, with a 6px gap where an indicator is present. The final measured destination link begins at x=942px and is 79px wide. Position the quieter account action at x=1133px in a 75×40px box, and the emphasized action at x=1224px in a 112×40px box. Both actions have a 16px radius. The header background is transparent in computed styles; its appearance depends on the dark page behind it. ## Type Use sans serif navigation at 14px/20px and 500 weight. Muted navigation text is RGB(161, 164, 165); the emphasized action is 14px/20px and 600 weight. The identity is visible, but its exact type treatment is not established by the style extraction. ## Colour Keep the header integrated with the dark page. The emphasized action has a subtle light gradient, a faint 2px border, and 25px backdrop blur. The quieter action has a 1px transparent border. Both measured action boxes have 16px corner radii. ## States and motion The header is sticky, with a 0.2s transition covering color, background, border, and outline. Navigation links have a 0.15s transition. Do not infer a particular scrolled appearance or menu-opening behavior from these measurements. ## Do NOT copy or add Do not reuse the source identity, logo, destination labels, order, or button wording. Do not invent dropdown results or additional mobile navigation links. ## Checks you can run At 1440px, verify the 58px header, identity position at x=104px, and the 75×40px and 112×40px right-side actions. Check 14px/20px navigation text, 12px horizontal padding, and 6px indicator gap. At 390px, check the 44×44px menu control at x=330px, y=16px and that desktop destinations are not shown. --- # Below-fold trust-panel craft spec Evidence: supplied below-fold screenshot at scrollY=900 and its computed-style extraction. The visible section is a bordered, rounded trust panel with introductory text, a two-row set of marks, and a centered follow-up link. CRAFT ARCHETYPE: photo-led ## The big idea Use a restrained trust panel to group a short introduction, a grid of marks, and one follow-up action. Use approved original or licensed marks and copy; do not fabricate endorsements or claims. ## Layers In the below-fold viewport, the panel begins at x=80px, y=138px and measures 1280×567px, with a 24px radius. The introductory text block begins at x=464px, y=235px and measures 512×54px. The screenshot visibly shows two rows of six marks; the extraction does not provide individual mark boxes or exact row coordinates. Arrange the marks in two evenly spaced rows without treating their precise size or spacing as measured. Center a 197×48px follow-up action at x=621px, y=561px; its measured icon gap is 8px. Preserve open space around the content. ## Type Use a neutral sans serif for the introduction at 18px/27px, regular weight, in muted gray (RGB 161, 164, 165). The follow-up action is 16px/24px and 600 weight. Keep the mark row visually balanced; exact individual logo sizing is not established by the measurements. ## Colour Use a near-black panel and subtle border treatment. The marks appear predominantly light against the dark field. Keep the introductory text and follow-up action muted; avoid adding colored tiles or unsupported decorative effects. ## States and motion No specific interaction styling or motion for this panel is established by the supplied below-fold extraction. Do not invent animated marks or hover behavior. ## Do NOT copy or add Do not reuse source company marks, names, wording, or implied customer metrics. Do not invent testimonials, counts, endorsements, or performance claims. Do not assume a phone layout for this panel; a below-fold phone capture was not supplied. ## Checks you can run At the measured desktop position, verify the 1280×567px panel and 24px radius. Check the centered 512×54px introduction and 197×48px follow-up action, including its 8px gap. Confirm the screenshot’s two-row, six-mark-per-row arrangement without asserting unsupported individual mark dimensions.