The identity of
zero-friction
email.
SendFleet is a transactional email API for developers who want email to work — not to become a project. Our brand reflects that: direct, confident, technically precise, and never cold.
The full wordmark
The SendFleet wordmark pairs the envelope logomark with the typeset name. "Send" stays in primary text colour; "Fleet" is always amber. This bicolour split is a core identity signal and must never be broken.
Logomark only
Use the mark alone at sizes below 120px where the wordmark becomes illegible, or where the brand name is already established. Hover any size to download.
Asset export
Download any asset in your preferred format. All SVGs are hand-crafted and pixel-perfect.
Every element has purpose
The mark is a refined envelope — stripped of decoration and sharpened for clarity. The amber square container signals brand; the dark envelope inside is the utility.
/* Logomark colour constants — never alter */
--logo-container: #f5a623; /* amber square */
--logo-envelope: #0a0a0a; /* envelope fill */
--logo-strokes: #f5a623; /* fold & seam strokes */
/* Base SVG viewBox — always 200×200 */
envelope-body: x28 y46 w144 h108 rx7
v-fold: M28,46 L100,92 L172,46
left-seam: M28,154 L68,108
right-seam: M172,154 L132,108
Give the logo room to breathe
The minimum clearspace on all sides of the wordmark equals the height of the logomark (X). Never crowd the mark against other elements, text, or the edge of a container.
| Context | Min. wordmark width | Mark-only min. |
|---|---|---|
| Digital (screen) | 120px | 16px |
| 30mm | 8mm | |
| Favicon / App icon | Mark only | 16px |
| Social avatar | Mark only | 400px recommended |
What never to do
These rules protect the integrity and legibility of the SendFleet identity across every surface and context. Each violation weakens brand recognition.
Dark, precise, amber-lit
Our palette is built on deep near-black backgrounds with a warm amber accent. Keep 80% of every layout in the dark palette. Click any swatch to copy its hex value.
Core palette — click to copy
Amber ramp — click any stop to copy hex
Contrast ratios
- Use amber for primary actions and brand moments only
- Keep 80% of every layout in the dark palette
- Use semantic colours (green/red) strictly for status
- Use alpha values from the amber ramp for backgrounds
- Use amber for decorative elements without purpose
- Mix warm amber with cool blue as co-accents
- Use green or red outside status/feedback contexts
- Place light text directly on the amber base colour
Three fonts, three jobs
Syne carries authority and display weight. Instrument Sans handles everything readable. JetBrains Mono is strictly for code, API keys, and developer-facing copy. Never swap these roles.
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
X-API-Key header, a valid prefix.secret value, and a JSON body.
The 8pt grid
All layout decisions snap to an 8pt baseline grid. Content lives in a 1400px max-width container with 24px gutters on mobile and 64px on desktop. Click any spacing row to copy the value.
12-column grid — 1400px max
← 4 col / 4 col gap / 4 col →
Fast, purposeful, subtle
Motion reinforces SendFleet's promise of speed. Transitions are short, easing is smooth. We animate to communicate state change — never for decoration. Hover the boxes below.
150ms ease
200ms ease400ms spring600ms overshoot
150ms shape/* Motion tokens */
--duration-micro: 150ms; /* hover, focus ring, button press */
--duration-ui: 200ms; /* dropdown, modal open, tab switch */
--duration-page: 400ms; /* page reveal, hero entrance */
--ease-std: ease;
--ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1)
/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
* { transition-duration:
0.01ms !important; }
}
Feather-style, 2px stroke
All product icons use a consistent 2px stroke, rounded linecaps, and rounded joins on a 24×24 grid. Click any icon to copy its SVG code. Hover for download options.
API key
Webhook
Endpoint
Token
Send
Success
Error
Pending
Queued
Warning
Revoked
Inbox
Reply
Address
Navigate
Create
Copy
Download
Status
Search
Filter
Close
Ext. link
Usage
Growth
Pie chart
Log table
Clock
Shield
Info
Refresh
Dashboard
Terminal
Preview
Recipients
/* Icon sizing standards */
--icon-xs: 12px; /* badge indicators */
--icon-sm: 14px; /* inline, button prefix */
--icon-md: 16px; /* nav, card headers (default) */
--icon-lg: 20px; /* feature callouts */
--icon-xl: 24px; /* hero illustrations */
stroke-width: 2px
stroke-linecap: round
stroke-linejoin: round
fill: none /* always, unless status dot */
Code over lifestyle
SendFleet's audience is developers. Imagery should reflect their world — real terminal windows, API payloads, and live dashboards. Avoid stock photography of "people using laptops" and decorative gradients.
The component library
All interactive components follow the dark-first system. Every component has a single clear function — never add decoration that doesn't communicate something.
Sent
247
Left
253
CSS custom properties
All design decisions are encoded as CSS custom properties on :root. Click
any row to copy the token as a CSS declaration. Never hardcode a value that exists as a token.
| Token | Value | Usage | |
|---|---|---|---|
| --bg | #0a0a0a | Page background | |
| --bg-1 | #111111 | Cards, sidebar | |
| --bg-2 | #181818 | Inputs, code, table rows | |
| --bg-3 | #222222 | Hover states, scrollbar thumb | |
| --line | rgba(255,255,255,0.07) | Dividers, subtle borders | |
| --line-2 | rgba(255,255,255,0.13) | Input borders, emphasis | |
| --text | #f0ede8 | Primary text, headings | |
| --text-2 | #8a8480 | Secondary text, labels | |
| --text-3 | #555250 | Tertiary, placeholders, disabled | |
| --accent | #f5a623 | Primary accent — amber | |
| --accent-dim | #7a5112 | Dark amber for deep backgrounds | |
| --accent-bg | rgba(245,166,35,0.08) | Amber-tinted surface | |
| --accent-border | rgba(245,166,35,0.22) | Amber border, callout ring | |
| --green | #22c55e | Success, sent, active | |
| --red | #ef4444 | Error, failed, revoked | |
| --blue | #60a5fa | Info, notice | |
| --r | 6px | Default border radius (buttons, tags) | |
| --rl | 10px | Large radius (cards, toasts) | |
| --rxl | 16px | Extra large (sections, modals) | |
| --display | "Syne", sans-serif | Display font stack | |
| --sans | "Instrument Sans", sans-serif | Body font stack | |
| --mono | "JetBrains Mono", monospace | Code / monospaced font stack |
Developer-first, human second
SendFleet speaks like a senior engineer who's seen enough email infrastructure to know what matters and what's noise. Confident, concise, occasionally dry. Never corporate, never filler.
Before and after
Consistent vocabulary
Using consistent terms across UI, docs, and marketing prevents confusion and reinforces identity. Click any row to copy the correct term.
| Use this | Not this | Notes |
|---|---|---|
| SendFleet | Sendfleet / sendfleet / SF | Always title-case, always one word |
| API key | api key / apikey / token | Two words, uppercase API |
| prefix | key prefix / lookup token | The 8-char public identifier, always lowercase |
| secret key | private key / full key / password | The full prefix.secret string shown once |
| revoke | delete / disable / invalidate | Permanent action — use the precise term |
| email log | message log / email history | The pageable record of all sent emails |
| send endpoint | mail API / sending route | POST /api/send/ — singular, no version prefix in casual copy |
| queued | pending / in progress / processing | Intermediate delivery state before Celery picks up |
| Starter / Growth / Enterprise | Free / Pro / Business | Official plan names, always capitalised |
| dashboard | portal / console / admin | The authenticated web UI at app.sendfleet.net |
sf prefix (e.g. sfApiKey,
sfClient, sf_send).