How to build a UI in the Resend style

:root {
  /* Resend style — extracted from resend.com by taste-skill */
  --canvas: #000000;
  --surface: #141517;
  --text: #F0F0F0;
  --text-muted: #A1A4A5;
  --accent: #00A3FF;
  --border: rgba(212, 234, 255, 0.19);
  --font-heading: 'Domaine / ABC Favorit', Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'CommitMono', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 96px;
  --h1-tracking: -0.01em;
  --h1-weight: 600;
  --radius-button: 16px;
  --radius-common: 8px;
  --shadow-common: rgb(0, 0, 0) 0px 0px 0px 8px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.2s;
}

// tailwind.config.js — Resend style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#000000",
        surface: "#141517",
        ink: "#F0F0F0",
        muted: "#A1A4A5",
        accent: "#00A3FF",
        line: "rgba(212, 234, 255, 0.19)",
      },
      fontFamily: {
        heading: ["Domaine / ABC Favorit", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["CommitMono", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["96px", { letterSpacing: "-0.01em", fontWeight: "600" }] },
      borderRadius: { button: "16px", card: "8px" },
      boxShadow: { brand: "rgb(0, 0, 0) 0px 0px 0px 8px" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: resend-style
description: Build UI in the Resend visual style (Obsidian Developer Luxury & Editorial Serif-Meets-Mono). Use when the user asks for a Resend-like look.
---

# Resend Style — Quick Rules (source: resend.com, extracted by taste-skill)

## Tokens
- canvasBg: #000000 — True pitch-black primary canvas (unlike Linear’s #08090A)
- surfaceCanvas: rgba(20, 22, 23, 0.6) — Translucent dark card & code editor surface
- surfaceElevated: #191B1E — Elevated interactive tabs, terminal headers & secondary panels
- borderIceSlate: rgba(212, 234, 255, 0.19) — Signature cool-tinted translucent border across sections, cards & pills (234 DOM instances)
- borderSubtleSlate: rgba(211, 237, 246, 0.11) — Secondary inner code-block & divider hairline
- borderGlassBtn: rgba(255, 255, 255, 0.05) — 2px translucent rim on frosted glass CTA buttons
- textPrimary: #F0F0F0 — Hero H1 & Section H2 primary display text
- textHeadingHigh: rgba(252, 253, 255, 0.94) — Feature card H3 headings & active labels
- textMuted: #A1A4A5 — Primary 18px body copy & lead paragraphs (51 DOM instances)
- textCode: rgba(241, 247, 254, 0.71) — Terminal output, JSON payloads & code block foreground
- accentCyan: #00A3FF — High-visibility developer action button & active focus highlight
- accentViolet: #9281F7 — Syntax highlighting, badge accents & linear-gradient(to right bottom in oklab, #9281F7, #9A54DC)
- accentEmerald: rgba(70, 254, 165, 0.83) — HTTP 200 status indicators & deliverability telemetry

## Typography
- Heading font: Domaine / ABC Favorit; body: Inter; mono: CommitMono
- Hero H1: 96px | line-height 96px (leading-[1]) | letter-spacing -0.96px (tracking-[-0.01em]) | weight 400 (font-[400]) | color #F0F0F0 (text-[#F0F0F0]) | font domaine
- Section H2 (Primary): 56px | line-height 67.2px (leading-[1.2]) | letter-spacing -2.8px (tracking-[-0.05em]) | weight 400 (font-[400]) | color #F0F0F0 (text-[#F0F0F0]) | font aBCFavorit
- Card / Feature H3: 20px | line-height 20px (leading-[1]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color rgba(252, 253, 255, 0.94) (text-[rgba(252,253,255,0.94)]) | font aBCFavorit
- Body Copy (Paragraph): 18px | line-height 27px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 400 (font-[400]) | color #A1A4A5 (text-[#A1A4A5]) | font inter

## Components
- Primary button: height 40px, padding 0px 16px, radius 16px, bg transparent, text #FFFFFF, 14px / 600
- Card: bg transparent, border 1px solid rgba(212, 234, 255, 0.19), radius 24px, padding 0px 0px

## Never
- NEVER use a single generic sans-serif font across the entire page—Resend’s signature tension comes from combining an editorial serif (Domaine for Hero H1), a tight neo-grotesque display sans (ABC Favorit with -0.05em tracking for H2), Inter for body copy, and CommitMono for code.
- NEVER use warm or neutral gray borders on #000000—always use cool ice-tinted translucent borders (rgba(212, 234, 255, 0.19) / --slate-a6 or rgba(211, 237, 246, 0.11)).
- NEVER use loose letter-spacing on H2 headings—Resend uses an aggressive -0.05em (-2.8px at 56px) tracking on section headings.
- NEVER use flat opaque colored buttons for primary hero CTAs—use frosted glass buttons (backdrop-filter: blur(25px), border: 2px solid rgba(255, 255, 255, 0.05), rounded-2xl 16px) or crisp #00A3FF utility actions.
- NEVER clutter code blocks with heavy chrome—use #000000 or rgba(20, 22, 23, 0.6) backgrounds with 1px solid rgba(212, 234, 255, 0.19) borders, 16px–24px border-radius, and CommitMono at 14px–16px.

Full 120-line spec: https://taste-skill.pages.dev/taste/resend/

npx taste-skill add resend