AutoSend is a lightweight SendGrid alternative for transactional and marketing emails. Simple, modern, and built to scale.
Design Analysis
This design language combines an editorial white landing page with developer-grade controls. The core feeling is direct and technical without becoming cold: huge soft serif headlines, monospaced navigation, violet CTAs,...
This design language combines an editorial white landing page with developer-grade controls. The core feeling is direct and technical without becoming cold: huge soft serif headlines, monospaced navigation, violet CTAs, and product proof shown in quiet broad panels.
Use white as the dominant surface. Use 272321 for text and mono controls. Use 635BFF only for primary actions, active nav states, slider controls, and selected states. Use F7F7F5 and E7E5E2 for quiet product panels, dividers, and hover states. Pink can appear as a small annotation signal, but it should not compete with violet.
Use a Cooper-style serif for hero and pricing headlines around 80px / 88px or 64px / 72px. Use a clean sans for section headings and explanatory copy. Use mono type for navigation, button text, labels, docs references, pricing sliders, and developer copy. The serif should carry personality. The mono layer should carry utility.
Keep the page open and text-led. Lead with one large headline, short support copy, and a small CTA row. Place product media below the hero as a calm proof field. Pricing pages should feel measured: centered title, centered slider, then simple plan columns separated by a single divider.
Core identity and authoring metadata from the refto.one design model.
A white email-infrastructure language with oversized Cooper-style serif headlines, monospaced controls, violet CTAs, measurement-like pricing controls, and quiet product imagery.
Editorial, direct, technical, and calm, with a magazine-like headline paired with developer-grade controls.
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 88px |
page_title | 72px |
section_title | 48px |
body | 28px |
control | 18px |
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 400 |
title | 600 |
control | 500 |
body | 400 |
Fields outside the primary renderer remain visible here as structured fallback content.
Border tokens with resolved values.
Shadow tokens with resolved values and shadow samples where applicable.
Motion tokens rendered as resolved values for timing and personality.
Resolved border token values.
| Property | Value |
|---|---|
hairline | 1px solid #E7E5E2 |
violet | 1px solid #635BFF |
ink | 1px solid rgba(39, 35, 33, 0.18) |
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
media_soft | 0 24px 70px rgba(39, 35, 33, 0.08) |
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 140ms |
duration_base | 200ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.
