#d6ebfd
June 25, 2026
resend.com
A reading of the visual language at https://resend.com. Every token, every rule, every component — captured from the live site.
Essence
resend.com is a Magician brand — cool, kinetic, modern, bold and visionary — anchored on #d6ebfd and inter, mixed motion.
Adjectives
- cool
- kinetic
- modern
- bold
- visionary
Personality axes
Evidence
- #d6ebfd at 208° reads cool → cool (warmth -0.98)
- 12px median radius, 300ms median motion → kinetic (energy +0.38)
- sans display face, flat material → modern (era +0.3)
- Axis fingerprint nearest the Magician archetype (65% fit, vs Explorer).
About
Logo
Colour
1 primary · 1 secondary · 1 accent · 11 neutrals · 28 total
Neutrals
#F0F0F0#A1A4A5#FFFFFF#F1F7FE#464A4D#6C6C6C#000000#E5EDFD#70757E#262A2D#CCCCCCFull palette
#F0F0F0#A1A4A5#FFFFFF#F1F7FE#464A4D#6C6C6C#D6EBFD#44FFA4#000000#E5EDFD#FFC446#70757E#FF9592#3B9EFF#BAA7FF#70B8FF#FFCA16#22FF99#262A2D#0B0E14#8354FE#0077FF#FA8200#FF173F#CCCCCC#FF6465#FFD60A#00A3FFWCAG 100% · 1 passing pairs · 0 failing. Full breakdown in §11.
Typography
6 families · 9 sizes · 4 weights
Specimen
Scale
| Step | Size | Sample |
|---|---|---|
t00 |
96px |
Email for developers |
t01 |
76.8px |
Email for developers |
t02 |
56px |
Email for developers |
t03 |
24px |
Email for developers |
t04 |
20px |
Email for developers |
t05 |
18px |
Email for developers |
t06 |
16px |
Email for developers |
t07 |
14px |
Email for developers |
t08 |
12px |
Email for developers |
Spacing
Base 2px · 14 steps captured
Rhythm
1px
20px
24px
28px
40px
48px
62px
80px
96px
104px
Shape
5 radii · 4 elevation tiers
Border radii
4px
8px
12px
16px
24px
Elevation
xs
sm
md
lg
Iconography
unknown · 24 captured
iconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconiconMotion
Feel: mixed · 5 durations · 6 easings
Duration scale
150ms
200ms
300ms
500ms
1000ms
Easings
customease-inease-in-outease-out
Components
shadcn/ui · 1 component patterns captured
Mocks
Built from these tokens
Radius, primary, surface, text — all sampled from the live site.
Read more →Detected patterns
button
Voice
neutral · — · —
Headlines from the site
- Email for developers
- Integrate this afternoon
- First-class developer experience
- Test mode
CTA verbs
×4×2×2×1×1×1×1×1
Accessibility
1 passing · 0 failing
No failing contrast pairs detected.
Tokens
Drop-in code for the most common stacks. All values from the live extraction.
:root {
--color-primary: #d6ebfd;
--font-display: "inter";
--space-base: 2px;
--radius-md: 8px;
}
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: { brand: '#d6ebfd' },
fontFamily: { display: ['inter', 'serif'] },
spacing: { base: '2px' },
borderRadius: { md: '8px' },
},
},
};
Run npx designlang pack resend.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).
Usage
-
Lead with the primary.
It belongs on calls-to-action and one accent moment per screen. Not on body copy.
-
Two type families, three weights.
Display for headlines, body for paragraphs. Resist a third unless there is a real reason.
-
Snap to the spacing scale.
Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.
-
Treat accessibility as a hard constraint.
When a colour pair fails WCAG, fix the colour — not the contrast check.