№ resend-com--blog

Resend — Blog

Deep charcoal expanse, crisp geometric sans-serifs, cool digital stillness.

Marquee Herominimalism dark mode monochrome developer toolsdark

The page uses a full-screen image with a bold headline and supporting text, creating a strong visual impact. The dark background and stark typography contribute to a technical and modern feel. · developer email, saas landing page, ai tools, dark ui, minimalist design, technical website, email marketing, resend, developer tools

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#47b7a7
OKLCHoklch(71.1% 0.104 182)
RoleDominant
find sites →
Hex#091715
OKLCHoklch(19.1% 0.020 184)
RoleSurface
find sites →
Hex#9fd9d1
OKLCHoklch(84.3% 0.060 186)
RoleInk
find sites →
Hex#84847c
OKLCHoklch(61.1% 0.012 107)
RoleAccent
find sites →
Hex#cccccc
OKLCHoklch(84.5% 0.000 90)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	domaine	96px	400	1	-0.96px	Aa Bb Cc
h2	aBCFavorit	56px	400	1.2	-2.8px	Aa Bb Cc
body	inter	16px	400	1.5	0	Aa Bb Cc
caption	inter	14px	500	1.43	0	Aa Bb Cc
button	inter	16px	400	1.5	0	Aa Bb Cc

Spacing scale

12px

16px

20px

32px

80px

96px

144px

Radius scale

0px

4px

6px

8px

10px

12px

16px

24px

Container

Max content width 600px

Export

:root {
  --color-dominant: #47b7a7;
  --color-surface: #091715;
  --color-ink: #9fd9d1;
  --color-accent: #84847c;
  --color-detail: #cccccc;
}

/* CSS variables exposed by source */
:root {
  --color-orange-4: #ff590039;
  --color-orange-10: #ff801f;
  --color-green-4: #11ff992d;
  --color-zinc-200: lab(90.6853% .399232 -1.45452);
  --color-green-3: #22ff991e;
  --color-pink-500: lab(56.9303% 76.8162 -8.07021);
  --text-placeholder: #52595b;
  --font-abc-favorit: "aBCFavorit";
  --color-yellow-9: #ffc53d;
  --color-neutral-300: lab(84.92% 0 -.0000119209);
  --text-base--line-height: calc(1.5 / 1);
  --radius-4xl: 2rem;
  --color-gray-a3: #b0c7d925;
  --color-neutral-200: lab(90.952% 0 -.0000119209);
  --color-blue-5: #0081fd6b;
  --color-gray-12: #f0f0f0;
  --color-gray-300: lab(85.1236% -.612259 -3.7138);
  --color-light-slate-3: #0000330f;
  --font-mono: "commitMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-slate-300: lab(84.7652% -1.94535 -7.93337);
  --font-domaine-src: "domaine";
  --color-gray-500: lab(47.7841% -.393182 -10.0268);
  --color-gray-2: #191b1e;
  --color-blue-4: #0075ff57;
  --color-green-500: lab(70.5521% -66.5147 45.8073);
  --color-blue-10: #3b9eff;
  --text-9xl--line-height: 1;
  --color-orange-11: #ffa057;
  --color-white: #fff;
  --color-black-12: #000000f2;
  --radius-sm: .25rem;
  --color-light-gray-a3: #d9d9d9;
  --color-yellow-300: lab(89.7033% -.480294 84.4917);
  --font-weight-bold: 700;
  --color-zinc-950: lab(2.51107% .242703 -.886115);
  --color-gray-100: lab(96.1596% -.0823438 -1.13575);
  --text-2xs: .625rem;
  --text-xs--line-height: calc(1 / .75);
  --color-red-5: #ff204756;
  --color-black-6: #0006;
  --color-violet-500: lab(49.9355% 55.1776 -81.8963);
  --text-on-accent: #000;
  --color-gray-11: #a1a4a5;
  --font-domaine: "domaine", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --color-orange-7: #ff832c75;
  --color-light-gray-1: #f0f0f0;
  --radius-2xl: 1rem;
  --color-gray-a8: #d8eaf161;
  --radius-md: .375rem;
  --text-xl: 1.25rem;
  --radius-lg: .5rem;
  --color-green-6: #44ffaa4b;
  --color-light-gray-7: #656565;
  --color-gray-10: #878d8f;
  --color-gray-5: #333b3e;
  --text-9xl: 8rem;
  --color-violet-3: #8354fe36;
  --color-cyan-500: lab(67.805% -35.3952 -30.2018);
  --color-orange-500: lab(64.272% 57.1788 90.3583);
  --color-yellow-4: #fc820032;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Resend — Blog.
Reference design system (extracted from the live site):
- Palette: #47b7a7, #091715, #9fd9d1, #84847c, #cccccc
- Typefaces: domaine, aBCFavorit, inter
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/resend-com--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

domaine

96px

400

-0.96px

Aa Bb Cc

aBCFavorit

56px

400

1.2

-2.8px

Aa Bb Cc

body

inter

16px

400

1.5

Aa Bb Cc

caption

inter

14px

500

1.43

Aa Bb Cc

button

inter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #47b7a7; --color-surface: #091715; --color-ink: #9fd9d1; --color-accent: #84847c; --color-detail: #cccccc; } /* CSS variables exposed by source */ :root { --color-orange-4: #ff590039; --color-orange-10: #ff801f; --color-green-4: #11ff992d; --color-zinc-200: lab(90.6853% .399232 -1.45452); --color-green-3: #22ff991e; --color-pink-500: lab(56.9303% 76.8162 -8.07021); --text-placeholder: #52595b; --font-abc-favorit: "aBCFavorit"; --color-yellow-9: #ffc53d; --color-neutral-300: lab(84.92% 0 -.0000119209); --text-base--line-height: calc(1.5 / 1); --radius-4xl: 2rem; --color-gray-a3: #b0c7d925; --color-neutral-200: lab(90.952% 0 -.0000119209); --color-blue-5: #0081fd6b; --color-gray-12: #f0f0f0; --color-gray-300: lab(85.1236% -.612259 -3.7138); --color-light-slate-3: #0000330f; --font-mono: "commitMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-slate-300: lab(84.7652% -1.94535 -7.93337); --font-domaine-src: "domaine"; --color-gray-500: lab(47.7841% -.393182 -10.0268); --color-gray-2: #191b1e; --color-blue-4: #0075ff57; --color-green-500: lab(70.5521% -66.5147 45.8073); --color-blue-10: #3b9eff; --text-9xl--line-height: 1; --color-orange-11: #ffa057; --color-white: #fff; --color-black-12: #000000f2; --radius-sm: .25rem; --color-light-gray-a3: #d9d9d9; --color-yellow-300: lab(89.7033% -.480294 84.4917); --font-weight-bold: 700; --color-zinc-950: lab(2.51107% .242703 -.886115); --color-gray-100: lab(96.1596% -.0823438 -1.13575); --text-2xs: .625rem; --text-xs--line-height: calc(1 / .75); --color-red-5: #ff204756; --color-black-6: #0006; --color-violet-500: lab(49.9355% 55.1776 -81.8963); --text-on-accent: #000; --color-gray-11: #a1a4a5; --font-domaine: "domaine", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --color-orange-7: #ff832c75; --color-light-gray-1: #f0f0f0; --radius-2xl: 1rem; --color-gray-a8: #d8eaf161; --radius-md: .375rem; --text-xl: 1.25rem; --radius-lg: .5rem; --color-green-6: #44ffaa4b; --color-light-gray-7: #656565; --color-gray-10: #878d8f; --color-gray-5: #333b3e; --text-9xl: 8rem; --color-violet-3: #8354fe36; --color-cyan-500: lab(67.805% -35.3952 -30.2018); --color-orange-500: lab(64.272% 57.1788 90.3583); --color-yellow-4: #fc820032; }

Build a landing page in the visual style of Resend — Blog. Reference design system (extracted from the live site): - Palette: #47b7a7, #091715, #9fd9d1, #84847c, #cccccc - Typefaces: domaine, aBCFavorit, inter - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/resend-com--blog