Design System Audit

autosend.com
Visual Language

Complete design system extracted from autosend.com — every token, component, interaction pattern, and accessibility note, all from real values.

1Color tokens
7Type styles
1Breakpoints
Ui-Sans-SerifPrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

white

#ffffff

Dominant — background

21.00:1 on black · AAA ✓
02 — Foundations

Typography

Body: Ui-Sans-Serif · Display: CooperLtBT. Font files loaded by the site: Geist (100 900) · Geist Mono (100 900) · cooperLtBT (400) · dataType (400).

RoleSpecsSampleUsed on
Body
Ui-Sans-Serif
16px / 400
lh 1.50
SolutionsAgentsPricingDocsBlogLog inSign upLog inSign up
DIV element · 24 uses · real site copy
UI Label
Ui-Sans-Serif
16px / 600
lh 1.25
The quick brown fox jumps over the lazy dog
BUTTON element · 10 uses
Link
Ui-Sans-Serif
16px / 600
lh 1.25
Read more →
A element · 4 uses
Body
Ui-Sans-Serif
16px / 400
lh 1.50
SolutionsAgentsPricingDocsBlogLog inSign upLog inSign up
HTML element · 3 uses · real site copy
Body
CooperLtBT
80px / 400
lh 1.10
Email for teams who ship with agents
H1 element · 3 uses · real site copy
Body
CooperLtBT
20px / 400
lh 1.60
Transactional, marketing & automations in one platform.Priced by volume, not contacts.
H2 element · 1 uses · real site copy
Body
Ui-Sans-Serif
16px / 400
lh 1.50
SolutionsAgentsPricingDocsBlogLog inSign upLog inSign up
IMG element · 1 uses · real site copy
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
autosend.com logo autosend.com
AgentsPricingDocsBlogLog in
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyUi-Sans-Serif
Links (extracted)Agents · Pricing · Docs · Blog · Log in

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 8px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #333333 · color #ffffff · radius: 8px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #333333.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Flat design system — no box-shadows. Depth is communicated through background contrast and borders.

section surface

bg #ffffff · text lab(15.0353 1.96067 1.53427)

card surface

bg lab(98.2686 -0.0991821 0.364304) · text lab(15.0353 1.96067 1.53427)

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

autosend.com
Get in Touch

no-reply@example.com (extracted from site)

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #333333.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

4px
xs
8px
sm
12px
md
16px
base
120px
section
09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

8px
sm
8px
12px
md
12px
16px
lg
16px
10 — Foundations

Elevation & Depth

Fully flat design — zero box-shadow usage. Depth communicated through background-color contrast and 1px borders.

Level 0 — Page Canvas

bg #ffffff — the outermost layer. Everything sits on top of this.

Level 1 — Card Surface

bg #ffffff with 1px border. No shadow — white lift creates elevation via contrast.

Dark Section

bg #1a1a1a — depth through color contrast, no shadows.

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.1s ease).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.1s3× in stylesheet
duration-base0.2s14× in stylesheet
duration-slow0.4s10× in stylesheet
duration-slower0.5s3× in stylesheet
duration-slowest1.5s3× in stylesheet
easing-1ease10× in stylesheet
easing-2linear8× in stylesheet
easing-3ease-in-out5× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Mobile375px2 @media rules
375px

Extracted from https://autosend.com/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted asset
autosend.com logo

https://dqy38fnwh4fqs.cloudfront.net/autosend/website/company-logos/peerlist-light.webp

Brand asset — bash
bash

https://d26c7l40gvbbg2.cloudfront.net/tool_icons/bash.svg

Brand asset — nodejs
nodejs

https://d26c7l40gvbbg2.cloudfront.net/tool_icons/nodejs.svg

Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.