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.
Logo system
The SendFleet identity is built from three distinct assets: the combination mark (logomark + wordmark together), the wordmark (typeset name only), and the logomark (envelope icon only). Each serves a different context — never substitute one for another. "Send" stays in primary text colour; "Fleet" is always amber. This bicolour split is a core identity signal and must never be broken.
Combination mark
The primary brand asset. Use this wherever space allows and the brand needs to be fully identified. The logomark always sits to the left of the wordmark with consistent proportional spacing.
Wordmark
The typeset name alone, without the envelope icon. Use when the logomark is already established in context — e.g. next to a product name, in running copy, or inside an app where the icon appears separately. Never use the wordmark as a primary brand identifier without prior logomark exposure on the same surface.
Logomark
The envelope icon alone. Use at sizes below 120 px where the wordmark becomes illegible, or in contexts where the brand is already established (app icon, favicon, avatar). Hover any size to reveal download actions.
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. The library covers every surface of the SendFleet product — from email sending to domain management, billing, analytics, and beyond.
Send
Inbox
Reply
Forward
Address
Mail open
New mail
Bounce
Delivered
Spam flag
Unsub
Attachment
Template
Bulk send
Schedule
Mail lock
Mail star
Reply all
Draft
Mail search
Mail filter
Transactional
Mail queue
Mail tag
Suppress
Retry
Header
Footer
Subject
Preheader
Signature
API key
Webhook
Endpoint
Terminal
Token
Request
Response
Rate limit
SDK
Docs
Payload
JSON
Pagination
Version
Batch
Idempotent
Latency
Environment
Domain
DNS
SPF
DKIM
DMARC
Verified
MX record
Sender
Subdomain
BIMI
IP warmup
Blacklist
CNAME
Reputation
PTR record
Success
Error
Pending
Queued
Warning
Revoked
Active
Info
Deferred
Paused
Sending
Archived
Disabled
Blocked
Expired
Log
Email log
Event log
Audit
Trace
Debug
Receipt
Del. receipt
Timeline
Stream
Error log
Export log
Severity
Usage
Growth
Pie chart
Line chart
Open rate
Click rate
Bounce rate
Recipients
Deliverability
Throughput
Conversion
Segment
Funnel
Heatmap
Trend down
Report
Compare
Unsub rate
A/B test
Invoice
Credit card
Plan
Upgrade
Quota
Usage bar
Overage
Billing cycle
Pay-as-go
Coupon
Downgrade
Trial
Shield
Lock
Unlock
Auth
Hash
Rotate key
2FA
SSO
Encryption
Permission
Role
IP allowlist
Session
Settings
Sliders
Toggle on
Toggle off
Sidebar
Notify
Team
Invite
Preferences
Workspace
Remove user
Theme
Timezone
Language
Navigate
Create
Copy
Download
Upload
Search
Filter
Sort
Close
Menu
More horiz
More vert
Chevron →
Chevron ↓
Ext. link
Refresh
Dashboard
Preview
Edit
Delete
Tag
Pin
Star
Bookmark
Link
Share
Clock
Calendar
Drag
Collapse
Expand
Fullscreen
Grid view
List view
Panel left
Panel right
Split
Breadcrumb
Modal
Tooltip
Keyboard
Workflow
Trigger
Condition
Delay
Loop
Action
Branch
Cron
Sequence
Drip
Contact
Contact list
Import
Export
Subscriber
Audience
Suppression
CSV
Opt-in
Merge
Server
Cloud
Network
Database
Queue
Relay
SMTP
CDN
Region
Health
Uptime
Migration
/* 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).