skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-resend

Apply Resend's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#ui design#resend#dark theme#css tokens#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-resend-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-resend
Source: https://github.com/deepparser/skills/tree/main/design-resend
Command: npx skills add https://github.com/deepparser/skills --skill design-resend-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Resend's distinctive dark, cinematic visual identity requires exact design tokens — colors, typography scales, frost borders, and component styles — that are tedious to reverse-engineer by hand. This Skill provides the complete token catalog so generated interfaces match Resend's brand accurately. ## Core Features & Use Cases - Complete Design Token Catalog: Exact color values (void black, frost borders, multi-color accent scales), typography hierarchy (Domaine Display, ABC Favorit, Inter, Commit Mono), spacing, radius, and elevation rules. - Component Specifications: Detailed styling for pill buttons, frost-bordered cards, forms, navigation, code blocks, and accent badges with do's and don'ts. - HTML Reference Previews: Bundled light and dark theme preview files to verify visual implementation details and CSS values. - Use Case: When asked to build a landing page or dashboard styled like Resend, the Skill supplies the exact hex values, font stacks, letter-spacing, and border treatments needed to produce a brand-accurate result. ## Quick Start Build a landing page hero section styled like Resend with a pure black background, serif display headline, and pill-shaped buttons.

Frequently Asked Questions about design-resend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a website like Resend?▼

Use a pure black (#000000) background with near-white (#f0f0f0) text, frost borders at rgba(214, 235, 253, 0.19), and pill-shaped buttons. Apply Domaine Display for hero headlines, ABC Favorit for section headings, and Inter for body text.

What fonts does the Resend design system use?▼

Resend uses four typefaces with strict roles: Domaine Display for 96px hero headlines, ABC Favorit for section headings and nav links, Inter for body and UI text, and Commit Mono for code. OpenType stylistic sets ss01, ss03, ss04, and ss11 are enabled on display fonts.

What is the frost border color used by Resend?▼

The signature frost border is rgba(214, 235, 253, 0.19), an icy blue-tinted line at 19% opacity used for all structural borders. A lighter variant rgba(217, 237, 254, 0.145) applies to list items, replacing neutral gray borders entirely.

Does the Resend design system use shadows for elevation?▼

Traditional shadows are avoided on the black background. Depth comes from frost borders and a blue-tinted ring shadow rgba(176, 199, 217, 0.145) 0px 0px 0px 1px, with a heavy black 8px ring reserved for focus states.

How do I preview the Resend design tokens before building?▼

Open the bundled preview.html or preview-dark.html files in a browser. They visualize every color swatch, typography sample, button variant, card, form state, spacing value, radius, and elevation level defined in the design system.

Related Skills

Explore More Design & Creative Skills→
lucaspedrozaemlucaspedrozaem
1

ui-design

Translate wireframes and requirements into token-level UI specifications for SaaS products.

Community
Intermediate
neuron-oneneuron-one
25

browser-testing

Automate browser UI verification and visual regression checks across viewports.

Community
Intermediate
Trio-Blockchain-LabsTrio-Blockchain-Labs

web-design-guidelines

Compare HTML, CSS, and JavaScript code against Web Interface Guidelines to identify UI compliance gaps.

Official
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced