---
title: "AutoSend design system"
variant: extended
source: https://autosend.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/autosend-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# AutoSend · Design System

> Quiet editorial polish for developer email infrastructure

**Theme:** light · **Industry:** devtools · **Source:** https://autosend.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

AutoSend pairs a calm, near-white canvas with expressive editorial typography and restrained violet calls to action. Pixel-art landscapes and crisp product UI previews bring personality to a dense, modular SaaS homepage.

## North star

Keep the page calm and editorial: warm white space, precise technical labeling, and violet reserved for the clearest action.

## Overview

The page is built on a warm near-white canvas (#fafaf9), with white panels and fine stone-gray rules separating a long sequence of product stories. Ink-dark copy carries the interface, while muted gray is reserved for supporting explanations. Saturated violet marks the primary signup action and selected links; green and coral appear sparingly as semantic or product accents rather than broad brand fields. A large, characterful Cooper-style serif headline contrasts with practical Geist sans-serif body copy and Geist Mono labels, buttons, and technical details. The centered hero leaves generous breathing room before a wide pixel-art landscape, then shifts into compact bordered feature modules with embedded interface and code previews. Repeated alignment, thin dividers, and restrained shadows keep the varied imagery coherent without making the page feel like a conventional dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fafaf9` | `--color-warm-canvas` | surface | Dominant page background and button text on saturated accents. |
| Deep Violet | `#4f39f6` | `--color-deep-violet` | accent | Darker violet detail on primary-button outlines and selected badge text. |
| Panel White | `#ffffff` | `--color-panel-white` | surface | Feature panels, cards, logo areas, secondary buttons, and product UI surfaces. |
| Warm Ink | `#292524` | `--color-warm-ink` | neutral | Headings, body copy, footer text, dark badges, and secondary-button labels. |
| Stone Copy | `#79716b` | `--color-stone-copy` | neutral | Muted descriptions, supporting hero text, and subdued heading details. |
| Stone Rule | `#e7e5e4` | `--color-stone-rule` | neutral | Fine borders and dividers around panels, cards, and secondary controls. |
| Coral Signal | `#d97757` | `--color-coral-signal` | semantic | Small product-interface accent; measured on controls and cards, not a page-wide brand field. |
| Signal Violet | `#615fff` | `--color-signal-violet` | brand | Primary signup buttons and occasional links or interface highlights. |
| Status Green | `#008236` | `--color-status-green` | semantic | Technical status and feature text; use as a restrained semantic highlight. |

### Semantic aliases

`--color-canvas` → `#fafaf9` (Warm Canvas) · `--color-surface` → `#ffffff` (Panel White) · `--color-surface-2` → `#e7e5e4` (Stone Rule) · `--color-text` → `#292524` (Warm Ink) · `--color-text-muted` → `#79716b` (Stone Copy) · `--color-border` → `#e7e5e4` (Stone Rule) · `--color-accent` → `#008236` (Status Green) · `--color-accent-2` → `#615fff` (Signal Violet) · `--color-accent-3` → `#d97757` (Coral Signal) · `--color-on-accent` → `#fafaf9` (Warm Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292524` | `#fafaf9` | 14.52:1 | AAA |
| `#292524` | `#ffffff` | 15.17:1 | AAA |
| `#292524` | `#e7e5e4` | 12.08:1 | AAA |
| `#79716b` | `#fafaf9` | 4.58:1 | AA |
| `#79716b` | `#ffffff` | 4.79:1 | AA |
| `#79716b` | `#e7e5e4` | 3.81:1 | AA-large |
| `#008236` | `#fafaf9` | 4.74:1 | AA |
| `#008236` | `#ffffff` | 4.95:1 | AA |
| `#008236` | `#e7e5e4` | 3.94:1 | AA-large |

### Gradients

- `linear-gradient(to top, oklab(0.999998 -0.00000980496 0.0000234246 / 0.8) 0%, oklab(0.999998 -0.00000980496 0.0000234246 / 0.4) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, oklab(0.984998 -0.000292599 0.000982165 / 0.8) 0%, oklab(0.984998 -0.000292599 0.000982165 / 0.4) 50%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(lab(100 0 0) 0%, lab(100 0 0) 40%, rgb(97, 95, 255) 100%)`
- `linear-gradient(45deg, rgb(120, 113, 108) 0%, rgb(120, 113, 108) 42%, rgb(231, 229, 228) 50%, rgb(120, 113, 108) 60%, rgb(120, 113, 108) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500, 600 | Main interface and marketing copy, including headings, body text, and feature descriptions. | Inter |
| Geist Mono | `--font-mono` | webfont | 500, 600, 400 | Navigation, buttons, labels, eyebrow text, code, and compact technical metadata. | Geist Mono |
| cooperLtBT | `--font-display` | webfont | 400 | Oversized editorial hero display headline. | DM Serif Display |

- **Geist:** Use measured regular weight for most copy; keep line spacing open and casing natural.
- **Geist Mono:** Use compact monospaced uppercase for actions and eyebrows; reserve stronger weights for controls.
- **cooperLtBT:** Use a light, expressive serif at display scale; preserve natural casing and relaxed line spacing.

### Type scale — Perfect Fifth (ratio ≈ 1.495, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.1 | 0 | — | cooperLtBT | Oversized serif hero headline with editorial character. |
| h1 | 40px | 400 | 1.2 | 0 | — | Geist | Primary page and feature-section headings in Geist. |
| h2 | 24px | 400 | 1.33 | 0 | — | dataType | Secondary feature headings and explanatory section titles. |
| h3 | 20px | 400 | 1.5 | 0 | — | Geist | Smaller feature and card headings. |
| body | 16px | 400 | 1.5 | 0 | — | Geist | Product descriptions, explanations, and testimonial copy. |
| caption | 13px | 500 | 1.54 | 0 | — | Geist Mono | Compact monospaced technical labels and metadata. |
| button | 14px | 600 | 1.43 | 0 | uppercase | Geist Mono | Uppercase monospaced calls to action. |
| link | 14px | 600 | 1.43 | 0 | uppercase | Geist Mono | Uppercase monospaced section and resource links. |
| eyebrow | 12px | 600 | 1.33 | 0.04em | uppercase | Geist Mono | Small uppercase mono labels above feature headings. |
| code | 13px | 500 | 1.54 | 0 | — | Geist Mono | Monospaced snippets inside developer-oriented previews. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 8, 12, 16, 24, 80 px.
- Section rhythm 80px · element gap 8px · card padding 24px · max content width 1102px.

Use a centered content frame with a measured maximum width of 1102px. The hero is centrally aligned, with the navigation spanning the top and substantial whitespace around the headline and calls to action. Below it, alternate wide product imagery with bordered feature panels, split layouts, logo strips, metrics, integrations, testimonials, and FAQ-style content. Maintain a comfortable density and an approximately 80px section rhythm; align copy and previews consistently within each module.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `50%` · badge `8px` · link `8px` · xs `8px` · sm `12px` · md `16px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8p`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(33, 33, 33, 0.05) 0px 8px 16px 0px`
- Motion: standard transition `0.1s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with white panels set against the warm canvas and fine stone borders defining their edges. Product previews may feel layered through a restrained card shadow, but avoid pervasive elevation. Use contrast, spacing, and framing—not stacked shadows—to establish hierarchy.

## Imagery

The hero uses a broad, colorful pixel-art landscape as a distinctive brand moment. Later sections rely mainly on crisp product screenshots, code examples, workflow diagrams, and integration marks, often inset into white framed panels. Supporting customer logos and testimonials stay small. Keep imagery contained within the modular page structure; illustration colors are product storytelling, not a replacement for the restrained site palette.

## Components

### Primary action

Violet SIGN UP button with warm-white text, a darker violet outline, rounded corners, and uppercase Geist Mono lettering.

### Secondary action

White LOG IN or demo button with dark text and a fine stone-gray border; visually quieter than signup.

### Announcement pill

A compact outlined update link with a dark NEW badge preceding a short product announcement.

### Feature module

Border-defined white or canvas-colored panel pairing an eyebrow and heading with concise copy, a product preview, and a small learn-more link.

### Technical preview

Code, API, campaign, or workflow interface shown inside a clean framed product image with readable dark text.

### Proof strip

A divided horizontal row for customer marks or metrics, using restrained typography and minimal decoration.

### Measured component styles

- **Primary button** (“SIGN UP”): background #615fff · text #fafaf9 · border 1px solid #4f39f6 · radius 12px · padding 6px 16px · 600 14px Geist Mono · uppercase
- **Secondary button** (“LOG IN”): background #ffffff · text #292524 · border 1px solid #e7e5e4 · radius 12px · padding 6px 16px · 600 14px Geist Mono · uppercase
- **Link** (“CHATGPT”): transparent background · text #292524 · radius 0px · padding 24px · 400 16px Geist
- **Card** (“Email API Fast and reliable email API yo”): background #ffffff · text #292524 · radius 0px · padding 24px · 400 16px Geist
- **Badge** (“NEW”): background #292524 · text #fafaf9 · radius 8px · padding 8px 16px · 500 12px Geist Mono · uppercase

## Do

- Use #fafaf9 as the dominant page canvas.
- Reserve #615fff for the primary signup action.
- Pair expressive serif display text with practical Geist copy.
- Use Geist Mono for technical labels and uppercase actions.
- Separate product stories with thin #e7e5e4 rules.
- Give screenshots clear white framing and room to breathe.

## Don't

- Do not flood large sections with saturated accent colors.
- Do not make every heading a display serif.
- Do not turn the modular layout into a dense dashboard grid.
- Do not add heavy shadows to routine cards.
- Do not treat illustration colors as the site-wide palette.
- Do not use decorative gradients as a substitute for hierarchy.

## Agent prompt

Build a new AutoSend page in a calm, editorial developer-tool style. Use Warm Canvas (#fafaf9) as the main background, Panel White (#ffffff) for framed content, Warm Ink (#292524) for primary copy, Stone Copy (#79716b) for supporting text, and Stone Rule (#e7e5e4) for dividers. Apply Signal Violet (#615fff) selectively to the main CTA, with Deep Violet (#4f39f6) as its outline detail. Set an expressive Cooper-like serif display headline against clean Geist sans-serif copy; use Geist Mono for uppercase buttons, eyebrows, navigation, and technical metadata. Center content in a measured 1102px frame, leave generous hero whitespace, then organize features as bordered split modules with product screenshots or code previews. Keep surfaces mostly flat and accents sparse. Use coral and green only as small semantic details.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long, centered homepage: navigation and announcement lead into a spacious hero, then product modules, proof strips, integrations, testimonials, and footer. | Top navigation links, Announcement link, Demo and signup actions, Feature learn-more links | Centered serif hero, Pixel-art landscape, Bordered feature panels, Product interface previews, Metrics and customer logos |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/autosend-com