{"id":"0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","originalSiteUrl":"https://resend.com","capturedAt":"2026-04-29T23:21:20.784Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Resend","summary":"Obsidian developer terminal — every surface reads like polished black glass under a focused beam of white type.","description":"Resend is a pure black command surface — the canvas is #000000 with near-zero colorfulness (1%), giving the entire interface the weight of polished obsidian. Headlines use a custom serif (Domaine) at display sizes with tight -0.01em tracking, while UI copy runs in Inter and monospaced code elements appear in CommitMono, creating a three-voice typographic hierarchy that signals dev tooling without decoration. Color appears almost exclusively as functional data punctuation: violet for code identity, blue for interactive borders, and a handful of vivid status colors (green, red, yellow, light blue) that function as email event indicators — never as decoration. The system uses subtle border-based elevation (1px hairlines at #292d30) rather than shadows, keeping all surfaces flush and matte on black.","industry":"devtools","colorScheme":"dark","colors":[{"name":"Void Black","hex":"#000000","role":"Page canvas, card backgrounds — the dominant surface across every section","group":"neutral"},{"name":"Graphite Rail","hex":"#292d30","role":"Component borders, dividers, image frames — hairline structural separation on black","group":"neutral"},{"name":"Smoke","hex":"#464a4d","role":"Subtle secondary borders and muted text-adjacent strokes","group":"neutral"},{"name":"Ash","hex":"#6c6c6c","role":"Tertiary text, badge labels, de-emphasized body content","group":"neutral"},{"name":"Steel","hex":"#6e727a","role":"Secondary body text, icon strokes at reduced opacity","group":"neutral"},{"name":"Fog","hex":"#a1a4a5","role":"Primary muted body text, icon fills, badge borders","group":"neutral"},{"name":"Mist","hex":"#abafb4","role":"Slightly brighter secondary UI text, active badge outlines","group":"neutral"},{"name":"Frost","hex":"#f0f0f0","role":"Primary content text — headings, body copy, nav labels — the single high-contrast text color on black","group":"neutral"},{"name":"Pure White","hex":"#ffffff","role":"Maximum-emphasis text, icon fills, active button labels","group":"neutral"},{"name":"Electric Blue","hex":"#3b9eff","role":"Blue action color for filled buttons, selected navigation states, and focused conversion moments.","group":"brand"},{"name":"Resend Violet","hex":"#9281f7","role":"Code syntax highlights, email address text in product UI, decorative icon borders — the brand's signature hue, always used inside product surfaces rather than nav or shell; Email app icon gradient from violet to purple — product identity mark","group":"brand","gradient":"linear-gradient(to right bottom in oklab, rgb(146, 129, 247) 0%, rgb(154, 84, 220) 100%)"},{"name":"Surface Lift","hex":"#1b1b1b","role":"Subtle card-to-canvas gradient top — barely perceptible surface elevation on dark UI","group":"neutral","gradient":"linear-gradient(rgb(27, 27, 27), rgb(3, 3, 3))"},{"name":"Delivered Green","hex":"#3ad389","role":"Green decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color","group":"accent"},{"name":"Bounced Red","hex":"#ff9592","role":"Red decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color","group":"accent"},{"name":"Complained Yellow","hex":"#ffca16","role":"Yellow decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color","group":"accent"},{"name":"Opened Blue","hex":"#70b8ff","role":"Blue decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color","group":"accent"},{"name":"Clicked Lavender","hex":"#baa7ff","role":"Violet decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color","group":"accent"}],"typography":[{"role":"All UI chrome — nav, buttons, body copy, captions, links. The workhorse that disappears into the interface. 600 weight used for interactive emphasis, 400 for running text.","sizes":"12px, 14px, 16px, 18px, 24px","family":"Inter","weight":"400, 500, 600","lineHeight":"1.33–1.60","substitute":"Inter (free via Google Fonts)","letterSpacing":"normal"},{"role":"Display-only serif for the largest hero statements and section closers. Weight 400 at near-100px is anti-convention — most dev tools use grotesque sans at this scale, the serif creates authority through editorial restraint. Tightest tracking in the system.","sizes":"77px, 96px","family":"Domaine","weight":"400","lineHeight":"1.00","substitute":"DM Serif Display, Playfair Display","letterSpacing":"-0.01em","fontFeatureSettings":"\"ss01\", \"ss04\", \"ss11\""},{"role":"Section headings and subheadings. At 56px weight 400 with -0.05em tracking, punches well above its point size. At 14-20px used for feature labels and callouts. The custom geometric grotesque gives sharper corners than Inter, distinguishing marketing headings from UI copy.","sizes":"14px, 16px, 20px, 56px","family":"ABCFavorit","weight":"400, 500","lineHeight":"1.00–1.50","substitute":"ABC Favorit (commercial), Söhne, GT America","letterSpacing":"-0.05em at 56px; +0.025em at smaller display sizes","fontFeatureSettings":"\"ss01\", \"ss04\", \"ss11\"; also \"ss01\", \"ss03\", \"ss04\""},{"role":"Code samples, badge labels, filename strings, and terminal-style inline snippets. Distinguishes developer content from prose at a glance — the monospace voice signals 'this is actual code', not metaphor.","sizes":"12px, 14px, 16px","family":"CommitMono","weight":"400","lineHeight":"1.33–1.50","substitute":"JetBrains Mono, Fira Code","letterSpacing":"normal"},{"role":"Helvetica — detected in extracted data but not described by AI","sizes":"14px","family":"Helvetica","weight":"400, 600, 700","lineHeight":"1, 1.71"},{"role":"-apple-system — detected in extracted data but not described by AI","sizes":"14px","family":"-apple-system","weight":"400","lineHeight":"1.5, 1.55","fontFeatureSettings":"\"liga\" 0"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.33},{"role":"body-sm","size":14,"lineHeight":1.43},{"role":"body","size":16,"lineHeight":1.5},{"role":"subheading","size":18,"lineHeight":1.6},{"role":"heading-sm","size":20,"lineHeight":1.3},{"role":"heading","size":24,"lineHeight":1.33},{"role":"heading-lg","size":56,"lineHeight":1,"letterSpacing":-2.8},{"role":"display","size":96,"lineHeight":1,"letterSpacing":-0.96}],"spacing":{"radius":{"tags":"10px","cards":"16px","large":"24px","badges":"6px","modals":"16px","buttons":"6px"},"elementGap":"16px","sectionGap":"80-120px","cardPadding":"32px","pageMaxWidth":"1200px"},"radius":{"tags":"10px","cards":"16px","large":"24px","badges":"6px","modals":"16px","buttons":"6px"},"shadows":{"philosophy":"Resend avoids box-shadow elevation almost entirely. Depth is created through border contrast: components sit on black with a 1px #292d30 border, making them readable without ever lifting off the surface. The one true shadow is the icon ring — a barely-there cold-tinted glow at rgba(176,199,217,0.145) — which is so subtle it reads as a polish detail rather than an elevation cue.","surfaces":[{"hex":"#000000","name":"Canvas","level":0,"purpose":"Page background — pure black, the dominant surface"},{"hex":"#0b0e14","name":"Card Surface","level":1,"purpose":"Feature cards and elevated containers — barely distinguishable from canvas, separation via 1px #292d30 border"},{"hex":"#292d30","name":"UI Rail","level":2,"purpose":"Border color for all component edges, image frames, dividers"},{"hex":"#1b1b1b","name":"Overlay","level":3,"purpose":"Gradient top of dark cards and hero overlays; backdrop-filter: blur(25px) for frosted glass dropdowns"}]},"guidelines":{"do":["Use #000000 as the default background for every section, card, and container — deviations must be justified by a visible elevation hierarchy via 1px #292d30 border.","Apply Domaine weight 400 exclusively to hero display text (77-96px) and use ABCFavorit for section headings (56px) — never swap these roles.","Reserve the six vivid status colors (#3ad389, #ff9592, #ffca16, #70b8ff, #baa7ff, #9281f7) strictly for product-UI data contexts such as email event rows or code syntax — never for decorative section backgrounds or nav elements.","Use CommitMono for any code, filename, CLI snippet, or developer token — never Inter or ABCFavorit in code contexts.","Keep button borders at 6px radius for action buttons and pill badges at 16px radius — maintain this distinction to separate call-to-action shape from tagging shape.","Use #3b9eff only as the outlined border on the primary CTA button — this is the only chromatic color in the nav/shell and must remain singular.","Set all card padding to 32px and maintain 1px solid #292d30 as the only border treatment — no shadow stacks, no color fills, no gradients on cards."],"dont":["Never use a filled colored background for action buttons — the design uses outlined (#3b9eff border) or ghost (transparent) buttons exclusively. A filled blue or violet button breaks the matte black surface language.","Never apply Domaine or ABCFavorit to UI chrome such as nav labels, badge text, or button copy — those belong exclusively to Inter.","Never use more than one vivid status color in a non-product-UI context — the moment a page-level section uses green or yellow as decoration, the email event system loses its meaning.","Never add drop shadows to cards or sections — elevation is achieved through 1px border contrast on black, not shadow lifting.","Never use a white or light background for any full-width section — even 'light' content blocks must remain on near-black (#000000 or #0b0e14).","Never increase letter-spacing on display text — Domaine and ABCFavorit run at negative tracking (-0.01em and -0.05em respectively); positive tracking at display sizes conflicts with the editorial compression of this system.","Never mix more than two typefaces in a single component — one font for UI copy (Inter) and one for code (CommitMono) is the maximum; headings use ABCFavorit or Domaine depending on size, never both simultaneously."]},"components":[{"name":"Primary Outlined Action Button","role":"Main CTA — 'Get started' in nav and hero"},{"name":"Ghost Navigation Button","role":"Nav dropdowns — Features, Company, Resources, Help, Docs, AI"},{"name":"Ghost Text Link Button","role":"Secondary actions — Documentation, Log in, View on GitHub"},{"name":"Muted Secondary Button","role":"Tertiary navigation links — Pricing"},{"name":"Announcement Badge / Pill","role":"Inline announcement tag — 'Announcing Resend Forward'"},{"name":"Feature Card","role":"Product feature highlight panels in section grids"},{"name":"Testimonial Card","role":"Social proof quote cards in horizontal scroll section"},{"name":"Code Snippet Block","role":"Inline product demo code panels in feature sections"},{"name":"Status Event Badge","role":"Email event row indicators in analytics product UI"},{"name":"Email App Icon","role":"Brand product mark shown in logo/hero sections"},{"name":"Navigation Bar","role":"Site-wide sticky top bar"},{"name":"Logo / Partner Wordmark Strip","role":"Trust signal section — company logo grid"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- text (primary): #f0f0f0\n- text (secondary): #a1a4a5\n- background: #000000\n- border: #292d30\n- accent / brand: #9281f7 (violet, code/product contexts only)\n- primary action: #3b9eff (filled action)\n\n**Example Component Prompts**\n\n1. **Nav Bar**: Black background (#000000), height 59px, 1px solid #292d30 bottom border, backdrop-filter blur(25px). Left: 'Resend' wordmark in #ffffff Inter 500 16px. Center: ghost links (#f0f0f0 71% opacity, Inter 400 14px, chevron appended, 0 radius). Right: 'Log in' ghost text (#f0f0f0, Inter 400 14px) + 'Get started' button (transparent bg, 1px solid #3b9eff border, 8px radius, #ffffff Inter 500 14px, 8px vertical / 16px horizontal padding).\n\n2. **Hero Section**: Full-bleed black (#000000). Left column: announcement pill (transparent bg, 1px solid #292d30 border, 16px radius, #f0f0f0 Inter 400 14px, '→' glyph). Below: headline in ABCFavorit weight 400 56px #ffffff letter-spacing -0.05em, line-height 1.0. Subtext: Inter 400 18px #a1a4a5 line-height 1.6. Two buttons below: 'Get started' (transparent, 1px #3b9eff border, 6px radius, #ffffff Inter 500 14px) + 'Documentation' ghost text (#f0f0f0 Inter 400 14px). Right column: 3D rendered black cube object, no background or shadow.\n\n3. **Feature Card**: Background #000000, 1px solid #292d30 border, 16px radius, 32px padding. Monochrome icon in #ffffff at 24px. Heading Inter 600 16px #ffffff, margin-top 16px. Body text Inter 400 14px #a1a4a5, line-height 1.5, margin-top 8px. No box-shadow.\n\n4. **Code Block Panel**: Background #000000, 1px solid #292d30 border, 16px radius. Tab bar: Inter 12px #a1a4a5 filename, active file in #3b9eff. Code body: CommitMono 400 14px, line-height 1.5. Identifiers/keywords: #9281f7. String values and normal text: #f0f0f0. Email addresses: #9281f7. Status values (delivered/bounced): use respective semantic colors (#3ad389 / #ff9592).\n\n5. **Testimonial Card**: Background #000000, 1px solid #292d30 border, 16px radius, 32px padding. Quote text Inter 400 14px #f0f0f0 line-height 1.6. Attribution row: 32px circular avatar + name Inter 500 14px #ffffff + role Inter 400 12px #a1a4a5. No shadow, no gradient."},{"title":"Motion Philosophy","content":"Animation is functional and fast, not decorative. Primary durations: 0.15s for hover state transitions (color, border-color, background-color via ease), 0.2s for component entrance animations (opacity + transform). Named animations include hero-text-slide-up-fade (text entering viewport from below), header-slide-down-fade (nav appearing on scroll), and open-scale-up-fade (dropdowns expanding). The scroll-x animation drives the horizontal logo marquee. All interactive state transitions use ease (not ease-in-out) — this gives hover responses a slightly snappier feel on the way in, preventing the 'sticky' sensation of symmetric easing on fast micro-interactions."},{"title":"Status Color System","content":"Six vivid colors exist exclusively as email event status indicators within the product analytics UI. They follow a consistent pattern: icon + label, no background fill, icon outlined at ~1px with the status color as borderColor and fill. Green (#3ad389) = delivered, Red (#ff9592) = bounced, Yellow (#ffca16) = complained, Light blue (#70b8ff) = opened, Lavender (#baa7ff) = clicked, Violet (#9281f7) = general code/identity marker. These six colors must never appear as section backgrounds, illustration fills, or button colors — their scarcity on the black canvas is what gives them signal strength."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777504739936-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777504739936-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d-1777557430073-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d-1777557430073-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d-1777557430073-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d-1777557430073-preview-detail-poster.jpg"},"similarStyleIds":["3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","c45b115b-dcb5-446d-8952-85aef740f8e4","90ce5883-bb24-4466-93f7-801cd617b0d1","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","c81d2be0-05b7-4755-8046-f2d19fbc448c","408a149c-702f-4442-99df-bea49d9c0d9b","cb6e4ab0-b8fe-45b0-bd22-6339b073e26d","720c9806-2d70-4dd1-9a19-12efd71fc742","6323a42b-3b47-4774-92e4-15651a9ba2ac","c3ceca5c-d329-4559-b947-016172941ba2","bc4fb98b-37ec-480a-b7a9-acd197cbebb9","50833119-cb36-4b75-b0cc-be48afea050a","8401cb26-91a3-4b46-941e-1c75790821eb","7b083729-e694-4b66-82a3-befb08451722","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","cc38369a-41e3-4bcd-b619-230ccffe7e8e","18a75348-513a-49d8-94f5-e2df8c118b6b","86541d12-7870-4d51-8c47-0880fdb1ea01","9f9a4a4f-1a27-47ca-a65b-68b9850a84e4","4e1ac04c-02ae-41cf-b588-3f6226a882f8"],"exports":{"designMdUrl":"/references/refero/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d/design.md","tokensJsonUrl":"/references/refero/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d/tokens.json","tailwindV4Url":"/references/refero/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d/tailwind-v4.css","cssVariablesUrl":"/references/refero/0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d/tailwind-v4.css"}}