Resend Publishes Design System Guidelines and Agent Skill

LinkResendResource

Resend has documented its design and brand guidelines in a machine-readable format, packaging the specifications as an installable Agent Skill alongside a web reference. The guide defines typography, colours, logo constraints, and core design principles.

Key points

  1. Brand guidelines are distributed as a Markdown document and as an Agent Skill installable via 'npx skills add resend/design-skills'.
  2. Typography pairs Domaine Display Narrow (display headlines outside product UI), Favorit (headings), Inter (body), and CommitMono (code), enforcing sentence case throughout.
  3. Colour palettes centre on Resend Black (#000000) and White (#FDFDFD), with semantic scales for grey, red, amber, green, and blue.
  4. The system follows five core principles: dark-first, sharp black-and-light contrast, precision over decoration, state-driven accent colours, and simple forms.
  5. Precise CSS definitions are supplied for gradients, noise textures, backdrop blur filters, and logo clearspace requirements.

Why it matters

Delivering design systems as Markdown and Agent Skills bridges the gap between brand guidelines and automated development workflows, enabling AI agents and engineers to implement brand-consistent interfaces reliably.

Analysis

Resend modernises brand delivery by abandoning cumbersome PDFs in favour of plain text and agent integrations. The design system emphasises technical usability: distinct separation between marketing headlines and product UI typography, functional colour mapping restricted to UI states, and explicit gradient and filter values simplify frontend implementation.

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Similar in content, found by the AI search.

  • Repository:VoltAgent/awesome-design-md

    Awesome DESIGN.md: Markdown Design System Profiles for AI Coding Agents

    The awesome-design-md repository curates ready-to-use DESIGN.md files derived from well-known brand design systems. These plain-text Markdown files provide AI coding agents with design tokens, patterns, and style rules for generating visually coherent UIs.

    118.6kstars

    AI & LLMs· Resource

  • Link:Railly

    Tinte: Compile Design Systems into Agent Plugins

    Tinte is a CLI tool that compiles design systems into machine-readable plugins for coding agents such as Claude Code, Cursor, and Codex. Based on a single configuration file, it generates token APIs, LLM composition rules, and matching themes for editors and terminals.

    AI & LLMs· Tool

  • Link:Tailwind Labs

    ui.sh: AI Agent Skills for Interface Builders

    The creators of Tailwind CSS and Refactoring UI have introduced ui.sh, a collection of task-oriented prompts and workflows designed to help AI agents build high-quality user interfaces.

    AI & LLMs· Tool

  • Repository:shadcn-ui/lint

    shadcn/lint: Agent-First Linter for Tailwind Design Systems

    shadcn/lint is a linter designed for Tailwind CSS (v4) that enforces design system boundaries with error messages tailored for AI coding agents. Instead of generic type errors, it provides actionable suggestions based on components, variants, and themes.

    2.2kstarsTypeScript

    AI & LLMs· Tool

  • Article:Vercel

    How Vercel Teaches Coding Agents Product Design

    Vercel details an internal framework called product-design that equips coding agents with the product context and judgment needed to build coherent interfaces.

    AI & LLMs· Resource

  • Link:cuellarfr

    Design Skills: Curated UI and UX Skills for AI Coding Agents

    cuellarfr/design-skills provides ten structured skill packages for developer agents including Claude Code, Cursor, Codex, and OpenCode. The library covers areas ranging from UX research and accessibility to design systems and UX writing.

    AI & LLMs· Resource

Let's talk about your project

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.