Resend

# Resend Design System

## Overview

This document outlines the core design principles and specifications for the Resend website. The goal is to provide a consistent, clear, and developer-friendly guide for implementing UI elements. The design emphasizes a modern, professional aesthetic with a focus on readability and a premium user experience.

## Color System

The color palette is minimalist and high-contrast, designed for clarity and a sophisticated look.

*   **Primary:** `#222222` (Dark Grey - Dominant background for light sections, text on light backgrounds)
*   **Secondary:** `#FFFFFF` (White - Dominant for text on dark backgrounds, backgrounds for light sections)
*   **Accent:** `#3B9EFF` (Bright Blue - For interactive elements, highlights, and calls to action)
*   **Background:** `#000000` (Black - Primary background for dark sections)
*   **Text Primary:** `#FFFFFF` (White - Default text color on dark backgrounds)

**Palette Breakdown:**
*   `#222222`
*   `#000000`
*   `#FFFFFF`

## Typography

Resend uses a combination of modern sans-serif and elegant serif typefaces to create a balanced and impactful visual hierarchy.

*   **Primary Font Family:** `Inter` (sans-serif) - Used for body text, paragraphs, and most UI elements. Highly legible and versatile.
*   **Heading Font Family:** `Domaine` (serif) - Used for prominent headings, adding a touch of sophistication and distinction.

**Font Stacks:**

*   **Body:** `Inter`, `ui-sans-serif`, `system-ui`, `sans-serif`, `Apple Color Emoji`, `Segoe UI Emoji`, `Segoe UI Symbol`, `Noto Color Emoji`
*   **Heading:** `Domaine`, `ui-sans-serif`, `system-ui`, `sans-serif`, `Apple Color Emoji`, `Segoe UI Emoji`, `Segoe UI Symbol`, `Noto Color Emoji`
*   **Paragraph:** `Inter`, `ui-sans-serif`, `system-ui`, `sans-serif`, `Apple Color Emoji`, `Segoe UI Emoji`, `Segoe UI Symbol`, `Noto Color Emoji`

**Font Sizes:**

*   **H1:** `96px`
*   **H2:** `56px`
*   **Body:** `18px` (default paragraph and base text size)

## Spacing & Radius

A consistent spacing system and subtle border-radius are used to ensure visual harmony and a polished appearance.

*   **Base Unit:** `4px` - All spacing values should be multiples of this base unit.
*   **Border Radius:** `4px` - Applied to interactive elements, containers, and cards for a soft, modern feel.

## Voice and Feel

The Resend brand communicates a sense of **professionalism, efficiency, and reliability**. The design is **modern, clean, and developer-centric**, prioritizing clarity and ease of use. The overall feel is that of a premium, high-performance tool, designed to be impactful without being overly flashy.

## Implementation Notes (Tailwind Tokens)

This section provides a mapping of design tokens to Tailwind CSS custom properties (variables) for easier integration.

```css
/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        'resend-primary': 'var(--color-primary)',
        'resend-secondary': 'var(--color-secondary)',
        'resend-accent': 'var(--color-accent)',
        'resend-background': 'var(--color-background)',
        'resend-text-primary': 'var(--color-text-primary)',
      },
      fontFamily: {
        'resend-primary': ['var(--font-primary)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        'resend-heading': ['var(--font-heading)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      },
      spacing: {
        'resend-base-unit': 'var(--spacing-base-unit)',
      },
      borderRadius: {
        'resend-default': 'var(--border-radius-default)',
      },
      fontSize: {
        'resend-h1': 'var(--font-size-h1)',
        'resend-h2': 'var(--font-size-h2)',
        'resend-body': 'var(--font-size-body)',
      }
    },
  },
  // ... other configs
}
```

```css
/* src/styles/globals.css or similar CSS entry point */
:root {
  /* Colors */
  --color-primary: #222222;
  --color-secondary: #FFFFFF;
  --color-accent: #3B9EFF;
  --color-background: #000000;
  --color-text-primary: #FFFFFF;

  /* Typography - Font Families */
  --font-primary: 'Inter';
  --font-heading: 'Domaine';

  /* Typography - Font Sizes */
  --font-size-h1: 6rem; /* 96px */
  --font-size-h2: 3.5rem; /* 56px */
  --font-size-body: 1.125rem; /* 18px */

  /* Spacing */
  --spacing-base-unit: 4px; /* Use with calc() for multiples, e.g., calc(var(--spacing-base-unit) * 2) */

  /* Border Radius */
  --border-radius-default: 4px;
}
```