Resend

# Resend Design System

## Overview

This document outlines the core design principles and specifications for the Resend website. It aims to provide a consistent and coherent user experience, reflecting a modern, developer-centric, and professional aesthetic. The design emphasizes clarity, performance, and a sleek, dark-themed interface.

## Color System

The color palette is built around a dark background, accented by a vibrant purple and clean neutrals. This combination ensures high contrast and readability while maintaining a sophisticated look.

*   **Primary:** `#343537` (Dark Charcoal - Used for primary UI elements, backgrounds of secondary components)
*   **Secondary:** `#FFFFFF` (White - Prominent for text on dark backgrounds, key highlights)
*   **Accent:** `#9146FF` (Vibrant Purple - Used sparingly for calls to action, interactive elements, and brand emphasis)
*   **Background:** `#000000` (Black - Dominant background color)
*   **Text Primary:** `#FFFFFF` (White - Default text color on dark backgrounds)
*   **Text Secondary:** `#BDBDBD` (Light Gray - Secondary text, descriptions, subtle information)

### Palette

*   `#343537` (Dark Charcoal)
*   `#9146FF` (Vibrant Purple)
*   `#000000` (Black)
*   `#FFFFFF` (White)
*   `#BDBDBD` (Light Gray)
*   `#24272D` (Dark Grey-Blue - Likely for subtle accents or deeper backgrounds)
*   `#00A3FF` (Bright Blue - Used for specific interactive elements or highlights)
*   `#4983C2` (Moderate Blue - Potentially for links or less aggressive highlights)
*   `#3B9EFF` (Sky Blue - Another shade for interactivity or subtle branding)

## Typography

The typography selection combines a modern sans-serif for body text with a distinctive serif for headings, creating a balance of professionalism and character.

*   **Primary Font Family:** `Inter` (for body text, paragraphs)
*   **Heading Font Family:** `ABCFavorit` (for headings)

### Font Stacks

*   **Heading:** `domaine`, `ui-sans-serif`, `system-ui`, `sans-serif`, `"Apple Color Emoji"`, `"Segoe UI Emoji"`, `"Segoe UI Symbol"`, `"Noto Color Emoji"`
*   **Body:** `Inter`, `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`

Other heading sizes and text sizes should be derived proportionally from these base values, ensuring a consistent typographic scale.

## Spacing & Radius

A modular spacing system and consistent border-radius contribute to a clean and structured layout.

*   **Base Spacing Unit:** `4px` (All padding, margin, and gap values should be multiples of 4px)
*   **Border Radius:** `4px` (Applied consistently to buttons, cards, and other UI elements for a subtle softness)

## Voice and Feel

The Resend brand communicates with a voice that is:

*   **Developer-Centric:** Clear, direct, and technical without being overly jargon-heavy. Empathetic to developer workflows and pain points.
*   **Modern & Sleek:** Reflects cutting-edge technology, with a minimalist and sophisticated aesthetic.
*   **Confident & Authoritative:** Positions Resend as a leader in email solutions, instilling trust and reliability.
*   **Concise & Efficient:** Gets straight to the point, valuing user time and understanding.
*   **Empowering:** Provides powerful tools and resources, enabling developers to achieve their goals effectively.

The overall feel is one of efficiency, power, and elegant simplicity, designed to appeal to a technical audience who values performance and clean design.

## Implementation Notes

This section provides Tailwind CSS variable tokens for easy integration.

```css
/* Color System */
:root {
  --color-primary: #343537;
  --color-secondary: #FFFFFF;
  --color-accent: #9146FF;
  --color-background: #000000;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #BDBDBD;

  --color-palette-dark-charcoal: #343537;
  --color-palette-vibrant-purple: #9146FF;
  --color-palette-black: #000000;
  --color-palette-white: #FFFFFF;
  --color-palette-light-gray: #BDBDBD;
  --color-palette-dark-grey-blue: #24272D;
  --color-palette-bright-blue: #00A3FF;
  --color-palette-moderate-blue: #4983C2;
  --color-palette-sky-blue: #3B9EFF;
}

/* Typography */
:root {
  --font-family-primary: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-heading: "ABCFavorit", domaine, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --font-size-h1: 96px;
  --font-size-h2: 56px;
  --font-size-body: 18px;
}

/* Spacing & Radius */
:root {
  --spacing-unit: 4px; /* For calculating multiples */
  --border-radius: 4px;
}
```

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        accent: 'var(--color-accent)',
        background: 'var(--color-background)',
        text: {
          primary: 'var(--color-text-primary)',
          secondary: 'var(--color-text-secondary)',
        },
        palette: {
          'dark-charcoal': 'var(--color-palette-dark-charcoal)',
          'vibrant-purple': 'var(--color-palette-vibrant-purple)',
          black: 'var(--color-palette-black)',
          white: 'var(--color-palette-white)',
          'light-gray': 'var(--color-palette-light-gray)',
          'dark-grey-blue': 'var(--color-palette-dark-grey-blue)',
          'bright-blue': 'var(--color-palette-bright-blue)',
          'moderate-blue': 'var(--color-palette-moderate-blue)',
          'sky-blue': 'var(--color-palette-sky-blue)',
        },
      },
      fontFamily: {
        body: 'var(--font-family-primary)',
        heading: 'var(--font-family-heading)',
      },
      fontSize: {
        h1: 'var(--font-size-h1)',
        h2: 'var(--font-size-h2)',
        body: 'var(--font-size-body)',
      },
      borderRadius: {
        DEFAULT: 'var(--border-radius)',
      },
      spacing: {
        // Example usage: p-1 maps to 1 * base unit = 4px, p-2 to 2 * base unit = 8px, etc.
        // You would typically generate these dynamically or define specific scales.
        // For custom values, direct `calc` can be used: `p-[calc(var(--spacing-unit)*2)]`
        '1': 'calc(var(--spacing-unit) * 1)', // 4px
        '2': 'calc(var(--spacing-unit) * 2)', // 8px
        '3': 'calc(var(--spacing-unit) * 3)', // 12px
        '4': 'calc(var(--spacing-unit) * 4)', // 16px
        '5': 'calc(var(--spacing-unit) * 5)', // 20px
        '6': 'calc(var(--spacing-unit) * 6)', // 24px
        '8': 'calc(var(--spacing-unit) * 8)', // 32px
        '10': 'calc(var(--spacing-unit) * 10)', // 40px
        '12': 'calc(var(--spacing-unit) * 12)', // 48px
        '16': 'calc(var(--spacing-unit) * 16)', // 64px
      },
    },
  },
  plugins: [],
};
```