Skip to content
DesignMunkDesignMunk Submit a site

AutoSend

autosend.com
Transactional, marketing & automations—one platform by volume, not contacts.
AI Software Next.js Tailwind Homepage cooper Lt BT Geist Mono
Share Visit site
autosend.com DESKTOP · 1440
AutoSend

AI Breakdown

Design export

---
version: alpha
name: AutoSend
description: Transactional, marketing & automations—one platform by volume, not contacts.
colors:
  primary: "#292524"
  secondary: "#040404"
  tertiary: "#615fff"
  neutral: "#fafaf9"
  brand-royal-vessel: "#4e3df4"
  brand-dull-lavender: "#ac9cf4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: cooperLtBT
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
  headline-md:
    fontFamily: Geist
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.19
  headline-sm:
    fontFamily: ui-sans-serif
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.2
  headline-xs:
    fontFamily: ui-sans-serif
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Geist Mono
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 12px
  md: 16px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 6px 16px
    height: 32px
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 6px 16px
    height: 32px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# AutoSend: Cooper headlines and indigo CTAs for agent email

## Overview

AutoSend's UI is friendly, technical, and agent-forward. A soft display headline style leads, supported by a crisp sans UI and monospaced data. The page is light, spacious, and shadowless; hierarchy relies on typography, tone, and generous spacing. Use one strong accent for actions and keep content modular with rounded cards.

## Colors

- **primary (#292524):** Charcoal for headlines, core text, and strong keylines.
- **secondary (#040404):** Deep black for high-emphasis text in compact UI.
- **tertiary (#615fff):** Indigo accent for primary actions, chips, and selected states.
- **neutral (#fafaf9):** Porcelain background for the overall canvas.
- **brand-royal-vessel (#4e3df4):** Rich brand indigo for elevated accents or gradients adjacent to the main action.
- **brand-dull-lavender (#ac9cf4):** Soft lavender for subtle highlights and supporting accents.
- **surface ({colors.neutral} → #fafaf9):** Default section and card backdrop where needed.
- **on-surface ({colors.primary} → #292524):** Default text color on light surfaces.

## Typography

- Headline LG — Cooper Lt BT, 40px/1.1, weight 400. Custom/self-hosted; agents should not attempt to fetch it directly. Suitable free substitutes with a similar soft, rounded serif tone: Zilla Slab, Coustard, or Bitter (Google Fonts).
- Headline MD — Geist, 32px/1.19, weight 400. Google-hosted; safe to load. Use for subheads and important lead-ins.
- Headline SM — ui-sans-serif, 25px/1.2. System sans for smaller section titles and compact hero support lines.
- Headline XS — ui-sans-serif, 20px/1.2. Use for captions, feature names, and compact list headings.
- Body MD — Geist Mono, 16px/1.5, weight 400. Google-hosted; use for metrics, code, and technical UI text where fixed-width alignment aids scanning.

## Layout

Spacing follows a compact-to-generous ladder: 4, 8, 16, 24, 80. Use 80px for section breaks and large hero offsets; 24px for block gaps in cards or between stacked components; 16px as the default internal padding and grid gutter; 8px and 4px for control-level spacing. Content reads in centered columns with modular cards; align repeated blocks to a common baseline using 16px increments.

## Elevation & Depth

No shadows are used (all measured shadows: none). Depth is communicated through tonal contrast (neutral backgrounds vs. white cards), clear typographic scale, and whitespace. Where separation is needed, prefer card surfaces, spacing, and concise keylines over drop shadows.

## Shapes

Corners are friendly and consistent: 12px radius for interactive controls (buttons, pills) and 16px for larger containers (cards, modals, feature blocks). Links remain unrounded (0px) to signal text-only affordances.

## Components

Buttons and cards are standardized:
- Primary Button — #615fff background, #fafaf9 text, 12px radius, 6px×16px padding, 32px height. Reserve for the main action per view.
- Secondary Button — #ffffff background, #292524 text, 12px radius, same sizing as primary.
- Link Button — #292524 text only, 0px radius. Use for inline navigational actions.
- Card — #ffffff background, #292524 text, 16px radius, 16px padding.

### Announcement Pill
A compact "New / update" pill near the hero. Use 12px radius, small text, and keep the accent minimal; link to release or docs.

### Hero Heading with Emphasis
Two-line headline at 40px (Cooper Lt BT or substitute), with italic emphasis on key nouns. Supporting line in smaller sans; place a primary and a secondary CTA beneath.

### KPI Strip
Four to six metrics in a single row. Set numeric values in Geist Mono 16–20px, labels smaller. Use neutral background and even 24px gaps.

### Feature List Blocks
Transactional, Marketing, and Automation sections each use stacked lists. Titles at 20–25px, body at 16px, with 16px card padding and 24px vertical rhythm.

### Code Sample Tabs
Language tabs above a code pane. Pane is a card (16px radius) with Geist Mono 16px; tabs highlight the selected state with the indigo accent (#615fff).

### Campaigns Panel
A marketing-campaign mockup inside a card: header row, status badge, and a short list. Use 16px padding and 16px gaps between list items.

### Multi-Project Switcher
Small project cards showing name and domain. Use card pattern with 16px corners, 16px padding, and even 24px gaps in a grid.

### Ask an LLM Row
Inline links to "Ask ChatGPT / Gemini / Claude / Perplexity." Treat as secondary links with clear spacing; avoid overusing the indigo accent here so CTAs remain dominant.

## Do's and Don'ts

- Do reserve #615fff for the primary action and selected states; avoid using it for decorative text.
- Do set numeric telemetry and code in Geist Mono 16px for alignment and scanning.
- Do keep section spacing at 80px multiples to maintain the page's calm rhythm.
- Don't introduce drop shadows; use cards, spacing, or keylines for separation.
- Don't mix additional accent colors; stick to indigo with lavender as a soft support when needed.
- Don't round links; radius 0px signals text-first behavior distinct from buttons (12px) and cards (16px).

## Agent Prompt Guide

Quick color reference:
- Text: #292524
- Background: #fafaf9 (cards #ffffff)
- Border: #292524
- Accent: #615fff (brand support: #4e3df4, #ac9cf4)

1) Build a hero with headline and two CTAs
- Background #fafaf9, centered column.
- Headline: use Zilla Slab (substitute for Cooper Lt BT) at 40px/1.1, weight 400, color #292524. Add italic emphasis on two words.
- Support line: Geist at 20–25px/1.2, color #292524.
- Buttons: primary #615fff text #fafaf9, secondary #ffffff text #292524, both 32px height, 6px×16px padding, 12px radius. 24px gap between buttons.

2) Implement a KPI strip
- Four cards on a neutral background.
- Each card: #ffffff, 16px padding, 16px radius; no shadow.
- Number set in Geist Mono 20px/1.5, color #292524; label in Geist 14–16px.
- 24px gaps horizontally and vertically.

3) Create a code sample with language tabs
- Tabs row above a code pane. Selected tab uses #615fff text/background accent; unselected tabs use #292524 text on #fafaf9.
- Code pane: #ffffff card, 16px radius, 16px padding; Geist Mono 16px/1.5.

4) Design a feature list block
- Section spacing: 80px top/bottom.
- Title in Geist 32px/1.19, color #292524.
- Each feature item: title in ui-sans-serif 20–25px, body in Geist Mono 16px; 16px item padding; 24px gaps; links styled as button-link (text-only, radius 0).

5) Build a multi-project grid
- Grid of project cards on #fafaf9.
- Each card: #ffffff, 16px radius, 16px padding, headline in Geist 20–25px, domain in Geist Mono 16px. Use #615fff for the primary "New Project" button at 32px height, 12px radius.

## Similar Brands

- Resend — similarly minimal with a strong indigo accent; AutoSend leans softer with a rounded serif headline and mono KPIs.
- Postmark — clean, technical storytelling; Postmark's yellow brand is bolder, while AutoSend keeps accents restrained.
- Mailgun — developer-forward with code-first sections; AutoSend uses more rounded cards and a gentler palette.
- Customer.io — campaigns and automation emphasized; AutoSend presents more agent/LLM integrations and compact CTAs.
- Courier — API-centric messaging with language tabs; AutoSend's serif headline and no-shadow surfaces feel warmer.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 35 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 35 minutes ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 12 hours ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago