{"id":"0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","name":"Resend","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","colors":[{"name":"Void Black","hex":"#000000","role":"Page canvas, card backgrounds — the dominant surface across every section","group":"neutral","cssVariable":"--color-void-black"},{"name":"Graphite Rail","hex":"#292d30","role":"Component borders, dividers, image frames — hairline structural separation on black","group":"neutral","cssVariable":"--color-graphite-rail"},{"name":"Smoke","hex":"#464a4d","role":"Subtle secondary borders and muted text-adjacent strokes","group":"neutral","cssVariable":"--color-smoke"},{"name":"Ash","hex":"#6c6c6c","role":"Tertiary text, badge labels, de-emphasized body content","group":"neutral","cssVariable":"--color-ash"},{"name":"Steel","hex":"#6e727a","role":"Secondary body text, icon strokes at reduced opacity","group":"neutral","cssVariable":"--color-steel"},{"name":"Fog","hex":"#a1a4a5","role":"Primary muted body text, icon fills, badge borders","group":"neutral","cssVariable":"--color-fog"},{"name":"Mist","hex":"#abafb4","role":"Slightly brighter secondary UI text, active badge outlines","group":"neutral","cssVariable":"--color-mist"},{"name":"Frost","hex":"#f0f0f0","role":"Primary content text — headings, body copy, nav labels — the single high-contrast text color on black","group":"neutral","cssVariable":"--color-frost"},{"name":"Pure White","hex":"#ffffff","role":"Maximum-emphasis text, icon fills, active button labels","group":"neutral","cssVariable":"--color-pure-white"},{"name":"Electric Blue","hex":"#3b9eff","role":"Blue action color for filled buttons, selected navigation states, and focused conversion moments.","group":"brand","cssVariable":"--color-electric-blue"},{"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%)","cssVariable":"--color-resend-violet"},{"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))","cssVariable":"--color-surface-lift"},{"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","cssVariable":"--color-delivered-green"},{"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","cssVariable":"--color-bounced-red"},{"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","cssVariable":"--color-complained-yellow"},{"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","cssVariable":"--color-opened-blue"},{"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","cssVariable":"--color-clicked-lavender"}],"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"}],"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."]}}