.webp)
Resend
The email API for developers
No items found.
Visual identity
Resend — design reference
Source: https://resend.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Typography
font-family: var(--font-display)— selector.font-displayfont-family: var(--font-display)!important— selector.font-display!font-family: var(--font-mono)— selector.[&_button_p]:font-mono button pfont-family: var(--font-display,var(--font-abc-favorit), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")— selector.font-displayfont-family: var(--font-display,var(--font-abc-favorit), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")!important— selector.font-display!font-size: var(--text-xs)!important— selector.!text-xsfont-size: var(--text-2xl)— selector.text-2xlfont-size: var(--text-3xl)— selector.text-3xlfont-size: var(--text-4xl)— selector.text-4xlfont-size: var(--text-5xl)— selector.text-5xlfont-size: var(--text-6xl)— selector.text-6xlfont-weight: var(--font-weight-semibold)— selector.group-has-[[data-thread-cards]]/section:font-semibold:is(:where(.group/section):has([data-thread-cards]) _)font-weight: var(--font-weight-medium)!important— selector.has-[[data-thread-list]]:has-[[data-thread-cards]]:[&\_[data-section-title]]:!font-medium:has([data-thread-list]):has([data-thread-cards]) [data-section-title]font-weight: var(--font-weight-semibold,600)— selector.group-has-[[data-thread-cards]]/section:font-semibold:is(:where(.group/section):has([data-thread-cards]) _)font-weight: var(--font-weight-medium,500)!important— selector.has-[[data-thread-list]]:has-[[data-thread-cards]]:[&\_[data-section-title]]:!font-medium:has([data-thread-list]):has([data-thread-cards]) [data-section-title]line-height: var(--tw-leading,var(--text-xs--line-height))!important— selector.!text-xsline-height: var(--tw-leading,var(--text-2xl--line-height))— selector.text-2xlline-height: var(--tw-leading,var(--text-3xl--line-height))— selector.text-3xlline-height: var(--tw-leading,var(--text-4xl--line-height))— selector.text-4xlline-height: var(--tw-leading,var(--text-5xl--line-height))— selector.text-5xlline-height: var(--tw-leading,var(--text-6xl--line-height))— selector.text-6xlline-height: var(--tw-leading,var(--text-base--line-height))— selector.text-baseline-height: var(--tw-leading,var(--text-lg--line-height))— selector.text-lg
Colors and surfaces
color: var(--color-black)!important— selector.!text-blackcolor: var(--gray-11)!important— selector.!text-defaultcolor: var(--color-gray-11)!important— selector.!text-gray-11color: #3fdb8f— selector.text-[#3FDB8F]color: #4a4a4a— selector.text-[#4A4A4A]color: #8c8c8c— selector.text-[#8C8C8C]color: #9c6b2e— selector.text-[#9C6B2E]background-color: #0000— selectorbutton,input,select,optgroup,textareabackground-color: var(--gray-a3)— selector.group-hover/button:bg-interactive-hover:is(:where(.group/button):hover _)background-color: #373737— selector.group-hover/nav-card:bg-[#373737]:is(:where(.group/nav-card):hover _)background-color: var(--color-slate-2)— selector.file:bg-slate-2::file-selector-buttonbackground-color: var(--color-slate-7)— selector.hover:file:bg-slate-7:hover::file-selector-buttonbackground-color: #0000!important— selector.[&>button]:!bg-transparent>buttonbackground-color: var(--bg-accent)— selector.[&>button]:bg-accent>buttonbackground-color: #ffffff0d— selector.[&>button]:bg-white/5>button
Components and layout
border-radius: 0— selectorbutton,input,select,optgroup,textareaborder-radius: var(--radius-md)— selector.file:rounded-md::file-selector-buttonborder-radius: var(--radius-xl)— selector.@max-3xl:group-has-[[data-thread-cards]]/mixed-split:before:rounded-xl:is(:where(.group/mixed-split):has([data-thread-cards]) _):beforeborder-radius: var(--radius-md,.375rem)— selector.file:rounded-md::file-selector-buttonborder-radius: var(--radius-xl,.75rem)— selector.@max-3xl:group-has-[[data-thread-cards]]/mixed-split:before:rounded-xl:is(:where(.group/mixed-split):has([data-thread-cards]) _):beforeborder-radius: 100%— selector.fullHoverCard:beforeborder-radius: 4px— selector.tiptap-extended .open-node-buttonbox-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)— selector.shadow-buttonbox-shadow: 0 0 0 .125rem var(--color-light-gray-4)— selector.footer-light footer a.text-slate-11:focus-visiblebox-shadow: 0 0 0 .125rem var(--color-light-gray-5)— selector.footer-light footer a[href=/status]:focus-visible,.footer-light footer .flex.gap-4 a:focus-visiblemax-width: 1920px— selector.containermax-width: 40rem— selector.containermax-width: 48rem— selector.containermax-width: 64rem— selector.containermax-width: 80rem— selector.containermax-width: 96rem— selector.containerpadding: 0— selector::file-selector-buttongap: calc(var(--spacing) _ 4)— selector.has-[[data-thread-cards]]:gap-4:has([data-thread-cards])gap: calc(var(--spacing) _ 8)— selector.has-[[data-thread-cards]]:gap-8:has([data-thread-cards])gap: calc(var(--spacing) _ 3)— selector.has-\[[data-thread-cards]\[data-thread-shelf]]:gap-3:has(\[data-thread-cards]\[data-thread-shelf])gap: calc(var(--spacing) _ 2)— selector.@max-3xl:group-has-[[data-thread-cards]]/mixed-split:gap-2:is(:where(.group/mixed-split):has([data-thread-cards]) _)gap: calc(var(--spacing) _ 16)— selector.@3xl:has-[[data-thread-cards]]:gap-16:has([data-thread-cards])gap: calc(var(--spacing) _ 10)— selector.@3xl:has-[>:nth-child(2)]:not-[:has(>:nth-child(3))]:has-[[data-thread-list]]:has-[[data-thread-cards]]:gap-10:has(>:nth-child(2)):not(:has(>:nth-child(3))):has([data-thread-list]):has([data-thread-cards])gap: calc(var(--spacing,.25rem) _ 4)— selector.has-[[data-thread-cards]]:gap-4:has([data-thread-cards])gap: calc(var(--spacing,.25rem) \* 8)— selector.has-[[data-thread-cards]]:gap-8:has([data-thread-cards])transition: max-height .3s— selector[data-sonner-toast]:not([data-index="0"])[data-expanded=true] [data-sonner-toast-title]transition: max-height .3s 20ms— selector[data-sonner-toast]:not([data-index="0"])[data-expanded=false] [data-sonner-toast-title]transition: outline .16s cubic-bezier(.45,.05,.55,.95)— selector.tiptap.ProseMirror [data-type=section]transition: background-color .2s— selector.tiptap-extended .open-node-button:hover
Responsive rules
(min-width:1920px)
(min-width:40rem)
(min-width:48rem)
(min-width:64rem)
(min-width:80rem)
(min-width:96rem)
(forced-colors:active)
(hover:hover)
(prefers-reduced-motion:reduce)
not all and (min-width:1340px)
not all and (min-width:1160px)
not all and (min-width:1000px)
not all and (min-width:375px)
not all and (min-width:359px)
not all and (min-width:80rem)
not all and (min-width:64rem)
not all and (min-width:48rem)
not all and (min-width:40rem)
(pointer:coarse)
(hover:none)
(hover:none)]:opacity-100
(min-height:900px)
(min-height:900px)]:mt-18
(min-height:900px)]:mb-6
(color-gamut:p3)Source: https://resend.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.
https://resend.com/\_next/static/immutable/chunks/11btgpkssc7ie.css — :root,:host
--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono: var(--font-commit-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-red-400: #ff6568;
--color-red-500: #fb2c36;
--color-red-600: #e40014;
--color-orange-400: #ff8b1a;
--color-orange-500: #fe6e00;
--color-amber-500: #f99c00;
--color-yellow-300: #ffe02a;
--color-yellow-500: #edb200;
--color-lime-500: #80cd00;
--color-green-300: #7bf1a8;
--color-green-500: #00c758;
--color-emerald-400: #00d294;
--color-emerald-500: #00bb7f;
--color-cyan-500: #00b7d7;
--color-blue-500: #3080ff;
--color-blue-600: #155dfc;
--color-violet-500: #8d54ff;
--color-fuchsia-500: #e12afb;
--color-pink-500: #f6339a;
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-300: #cad5e2;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5dc;
--color-gray-500: #6a7282;
--color-gray-600: #4a5565;
--color-zinc-200: #e4e4e7;
--color-zinc-300: #d4d4d8;
--color-zinc-400: #9f9fa9;
--color-zinc-500: #71717b;
--color-zinc-950: #09090b;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-black: #000;
--color-white: #fff;
--spacing: .25rem;
--breakpoint-lg: 64rem;
--breakpoint-2xl: 96rem;
--container-3xs: 16rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
--text-xs: .75rem;
--text-xs--line-height: calc(1 / .75);
--text-sm: .875rem;
--text-sm--line-height: calc(1.25 / .875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl: 3rem;
--text-5xl--line-height: 1;
--text-6xl: 3.75rem;
--text-6xl--line-height: 1;
--text-7xl: 4.5rem;
--text-7xl--line-height: 1;
--text-9xl: 8rem;
--text-9xl--line-height: 1;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--tracking-tighter: -.05em;
--tracking-tight: -.025em;
--tracking-normal: 0em;
--tracking-wide: .025em;
--tracking-wider: .05em;
--tracking-widest: .1em;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--ease-in: cubic-bezier(.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--animate-spin: spin 1s linear infinite;
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--blur-xs: 4px;
--blur-sm: 8px;
--blur-md: 12px;
--blur-lg: 16px;
--blur-xl: 24px;
--blur-2xl: 40px;
--blur-3xl: 64px;
--aspect-video: 16 / 9;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--container-inbox: 105rem;
--text-2xs: .625rem;
--color-background: var(--background);
--color-canvas: var(--canvas);
--color-slate-1: var(--slate-a1);
--color-slate-2: var(--slate-a2);
--color-slate-3: var(--slate-a3);
--color-slate-4: var(--slate-a4);
--color-slate-5: var(--slate-a5);
--color-slate-6: var(--slate-a6);
--color-slate-7: var(--slate-a7);
--color-slate-8: var(--slate-a8);
--color-slate-9: var(--slate-a9);
--color-slate-10: var(--slate-a10);
--color-slate-11: var(--slate-a11);
--color-slate-12: var(--slate-a12);
--color-gray-1: var(--gray-1);
--color-gray-2: var(--gray-2);
--color-gray-3: var(--gray-3);
--color-gray-4: var(--gray-4);
--color-gray-5: var(--gray-5);
--color-gray-6: var(--gray-6);
--color-gray-7: var(--gray-7);
--color-gray-8: var(--gray-8);
--color-gray-9: var(--gray-9);
--color-gray-10: var(--gray-10);
--color-gray-11: var(--gray-11);
--color-gray-12: var(--gray-12);
--color-light-gray-a2: #ebebeb;
--color-light-gray-a3: #d9d9d9;
--color-light-gray-1: #f0f0f0;
--color-light-gray-2: #eee;
--color-light-gray-3: #d7d7d7;
--color-light-gray-4: #bebebe;
--color-light-gray-5: #989898;
--color-light-gray-7: #656565;
--color-light-gray-11: #0d0d0d;
--color-light-gray-12: #191919;
--color-gray-a1: var(--gray-a1);
--color-gray-a2: var(--gray-a2);
--color-gray-a3: var(--gray-a3);
--color-gray-a4: var(--gray-a4);
--color-gray-a5: var(--gray-a5);
--color-gray-a8: var(--gray-a8);
--color-gray-a9: var(--gray-a9);
--color-gray-a10: var(--gray-a10);
--color-gray-a11: var(--gray-a11);
--color-gray-a12: var(--gray-a12);
--color-black-2: var(--black-a2);
--color-black-3: var(--black-a3);
--color-black-5: var(--black-a5);
--color-black-6: var(--black-a6);
--color-black-8: var(--black-a8);
--color-black-9: var(--black-a9);
--color-black-12: var(--black-a12);
--color-light-slate-3: #0000330f;
--color-light-slate-7: #00062e32;
--color-violet-3: var(--violet-a3);
--color-violet-4: var(--violet-a4);
--color-violet-6: var(--violet-a6);
--color-violet-7: var(--violet-a7);
--color-violet-8: var(--violet-a8);
--color-violet-9: var(--violet-a9);
--color-violet-10: var(--violet-a10);
--color-violet-11: var(--violet-a11);
--color-sand-3: var(--sand-a3);
--color-sand-4: var(--sand-a4);
--color-sand-9: var(--sand-a9);
--color-sand-10: var(--sand-a10);
--color-sand-11: var(--sand-a11);
--color-green-1: var(--green-a1);
--color-green-3: var(--green-a3);
--color-green-4: var(--green-a4);
--color-green-5: var(--green-a5);
--color-green-6: var(--green-a6);
--color-green-7: var(--green-a7);
--color-green-8: var(--green-a8);
--color-green-9: var(--green-a9);
--color-green-10: var(--green-a10);
--color-green-11: var(--green-a11);
--color-green-12: var(--green-a12);
--color-red-1: var(--red-a1);
--color-red-3: var(--red-a3);
--color-red-4: var(--red-a4);
--color-red-5: var(--red-a5);
--color-red-6: var(--red-a6);
--color-red-7: var(--red-a7);
--color-red-8: var(--red-a8);
--color-red-9: var(--red-a9);
--color-red-10: var(--red-a10);
--color-red-11: var(--red-a11);
--color-red-12: var(--red-a12);
--color-yellow-1: var(--amber-a1);
--color-yellow-3: var(--amber-a3);
--color-yellow-4: var(--amber-a4);
--color-yellow-5: var(--amber-a5);
--color-yellow-6: var(--amber-a6);
--color-yellow-7: var(--amber-a7);
--color-yellow-9: var(--amber-a9);
--color-yellow-10: var(--amber-a10);
--color-yellow-11: var(--amber-a11);
--color-yellow-12: var(--amber-a12);
--color-blue-3: var(--blue-a3);
--color-blue-4: var(--blue-a4);
--color-blue-5: var(--blue-a5);
--color-blue-7: var(--blue-a7);
--color-blue-8: var(--blue-a8);
--color-blue-9: var(--blue-a9);
--color-blue-10: var(--blue-a10);
--color-blue-11: var(--blue-a11);
--color-blue-12: var(--blue-a12);
--color-orange-3: var(--orange-a3);
--color-orange-4: var(--orange-a4);
--color-orange-6: var(--orange-a6);
--color-orange-7: var(--orange-a7);
--color-orange-8: var(--orange-a8);
--color-orange-9: var(--orange-a9);
--color-orange-10: var(--orange-a10);
--color-orange-11: var(--orange-a11);
--color-label-cyan-3: var(--cyan-a3);
--color-label-cyan-9: var(--cyan-a9);
--color-label-cyan-11: var(--cyan-a11);
--color-label-teal-3: var(--teal-a3);
--color-label-teal-9: var(--teal-a9);
--color-label-teal-11: var(--teal-a11);
--color-label-grass-3: var(--grass-a3);
--color-label-grass-9: var(--grass-a9);
--color-label-grass-11: var(--grass-a11);
--color-label-lime-3: var(--lime-a3);
--color-label-lime-9: var(--lime-a9);Source: https://resend.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.
| Property | Declared value | Selector |
|---|---|---|
| font-family | var(--font-display) | .font-display |
| font-family | var(--font-display)!important | .font-display! |
| font-family | var(--font-mono) | .[&_button_p]:font-mono button p |
| font-family | var(--font-display,var(--font-abc-favorit), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") | .font-display |
| font-family | var(--font-display,var(--font-abc-favorit), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")!important | .font-display! |
| font-size | var(--text-xs)!important | .!text-xs |
| font-size | var(--text-2xl) | .text-2xl |
| font-size | var(--text-3xl) | .text-3xl |
| font-size | var(--text-4xl) | .text-4xl |
| font-size | var(--text-5xl) | .text-5xl |
| font-size | var(--text-6xl) | .text-6xl |
| font-weight | var(--font-weight-semibold) | .group-has-[[data-thread-cards]]/section:font-semibold:is(:where(.group/section):has([data-thread-cards]) _) |
| font-weight | var(--font-weight-medium)!important | .has-[[data-thread-list]]:has-[[data-thread-cards]]:[&\_[data-section-title]]:!font-medium:has([data-thread-list]):has([data-thread-cards]) [data-section-title] |
| font-weight | var(--font-weight-semibold,600) | .group-has-[[data-thread-cards]]/section:font-semibold:is(:where(.group/section):has([data-thread-cards]) _) |
| font-weight | var(--font-weight-medium,500)!important | .has-[[data-thread-list]]:has-[[data-thread-cards]]:[&\_[data-section-title]]:!font-medium:has([data-thread-list]):has([data-thread-cards]) [data-section-title] |
| line-height | var(--tw-leading,var(--text-xs--line-height))!important | .!text-xs |
| line-height | var(--tw-leading,var(--text-2xl--line-height)) | .text-2xl |
| line-height | var(--tw-leading,var(--text-3xl--line-height)) | .text-3xl |
| line-height | var(--tw-leading,var(--text-4xl--line-height)) | .text-4xl |
| line-height | var(--tw-leading,var(--text-5xl--line-height)) | .text-5xl |
| line-height | var(--tw-leading,var(--text-6xl--line-height)) | .text-6xl |
| line-height | var(--tw-leading,var(--text-base--line-height)) | .text-base |
| line-height | var(--tw-leading,var(--text-lg--line-height)) | .text-lg |
| color | var(--color-black)!important | .!text-black |
| color | var(--gray-11)!important | .!text-default |
| color | var(--color-gray-11)!important | .!text-gray-11 |
| color | #3fdb8f | .text-[#3FDB8F] |
| color | #4a4a4a | .text-[#4A4A4A] |
| color | #8c8c8c | .text-[#8C8C8C] |
| color | #9c6b2e | .text-[#9C6B2E] |
| background-color | #0000 | button,input,select,optgroup,textarea |
| background-color | var(--gray-a3) | .group-hover/button:bg-interactive-hover:is(:where(.group/button):hover _) |
| background-color | #373737 | .group-hover/nav-card:bg-[#373737]:is(:where(.group/nav-card):hover _) |
| background-color | var(--color-slate-2) | .file:bg-slate-2::file-selector-button |
| background-color | var(--color-slate-7) | .hover:file:bg-slate-7:hover::file-selector-button |
| background-color | #0000!important | .[&>button]:!bg-transparent>button |
| background-color | var(--bg-accent) | .[&>button]:bg-accent>button |
| background-color | #ffffff0d | .[&>button]:bg-white/5>button |
| border-radius | 0 | button,input,select,optgroup,textarea |
| border-radius | var(--radius-md) | .file:rounded-md::file-selector-button |
| border-radius | var(--radius-xl) | .@max-3xl:group-has-[[data-thread-cards]]/mixed-split:before:rounded-xl:is(:where(.group/mixed-split):has([data-thread-cards]) _):before |
| border-radius | var(--radius-md,.375rem) | .file:rounded-md::file-selector-button |
| border-radius | var(--radius-xl,.75rem) | .@max-3xl:group-has-[[data-thread-cards]]/mixed-split:before:rounded-xl:is(:where(.group/mixed-split):has([data-thread-cards]) _):before |
| border-radius | 100% | .fullHoverCard:before |
| border-radius | 4px | .tiptap-extended .open-node-button |
| box-shadow | var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) | .shadow-button |
| box-shadow | 0 0 0 .125rem var(--color-light-gray-4) | .footer-light footer a.text-slate-11:focus-visible |
| box-shadow | 0 0 0 .125rem var(--color-light-gray-5) | .footer-light footer a[href=/status]:focus-visible,.footer-light footer .flex.gap-4 a:focus-visible |
| max-width | 1920px | .container |
| max-width | 40rem | .container |
| max-width | 48rem | .container |
| max-width | 64rem | .container |
| max-width | 80rem | .container |
| max-width | 96rem | .container |
| padding | 0 | ::file-selector-button |
| gap | calc(var(--spacing) _ 4) | .has-[[data-thread-cards]]:gap-4:has([data-thread-cards]) |
| gap | calc(var(--spacing) _ 8) | .has-[[data-thread-cards]]:gap-8:has([data-thread-cards]) |
| gap | calc(var(--spacing) _ 3) | .has-\[[data-thread-cards]\[data-thread-shelf]]:gap-3:has(\[data-thread-cards]\[data-thread-shelf]) |
| gap | calc(var(--spacing) _ 2) | .@max-3xl:group-has-[[data-thread-cards]]/mixed-split:gap-2:is(:where(.group/mixed-split):has([data-thread-cards]) _) |
| gap | calc(var(--spacing) _ 16) | .@3xl:has-[[data-thread-cards]]:gap-16:has([data-thread-cards]) |
| gap | calc(var(--spacing) _ 10) | .@3xl:has-[>:nth-child(2)]:not-[:has(>:nth-child(3))]:has-[[data-thread-list]]:has-[[data-thread-cards]]:gap-10:has(>:nth-child(2)):not(:has(>:nth-child(3))):has([data-thread-list]):has([data-thread-cards]) |
| gap | calc(var(--spacing,.25rem) _ 4) | .has-[[data-thread-cards]]:gap-4:has([data-thread-cards]) |
| gap | calc(var(--spacing,.25rem) \* 8) | .has-[[data-thread-cards]]:gap-8:has([data-thread-cards]) |
| transition | max-height .3s | [data-sonner-toast]:not([data-index="0"])[data-expanded=true] [data-sonner-toast-title] |
| transition | max-height .3s 20ms | [data-sonner-toast]:not([data-index="0"])[data-expanded=false] [data-sonner-toast-title] |
| transition | outline .16s cubic-bezier(.45,.05,.55,.95) | .tiptap.ProseMirror [data-type=section] |
| transition | background-color .2s | .tiptap-extended .open-node-button:hover |
Source: https://resend.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Evidence and limitations
- Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
- CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
- No inferred dark theme, semantic color roles or framework defaults have been added.
- 1365 custom-property declarations found; 3577 relevant property declarations parsed.
Stylesheet sources
- https://resend.com/_next/static/immutable/chunks/11btgpkssc7ie.css
- https://resend.com/_next/static/immutable/chunks/1-lx7yzmjor0k.css
- https://resend.com/_next/static/immutable/chunks/1s3mtu5cvv1e1.css
- https://resend.com/_next/static/immutable/chunks/0q9w1p-wq49jc.css
- https://resend.com/_next/static/immutable/chunks/0sz3w4ruui2m3.css