The SendFleet
brand system.
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.
How to apply the SendFleet brand
Six rules, in order. Most brand problems are a violation of one of them, and almost all of them are cheap to avoid up front and expensive to fix after publication.
-
Choose the correct logo lockup
Use the horizontal lockup by default. Use the stacked lockup only when the available width is less than four times the mark's height. Use the mono lockup on a single-colour or photographic background where the amber would not hold contrast.
-
Respect the clear space
Keep a minimum clear space equal to the height of the mark's corner radius on all four sides. Nothing enters that zone: no text, no rule, no image edge, no other logo.
-
Use only the defined palette
Amber is the single accent and is used for emphasis, never for body copy. The dark and light neutrals carry all other surfaces. Do not introduce a second accent, and do not tint the neutrals.
-
Set type with the defined scale
Syne carries display and heading text, Instrument Sans carries body and UI text, and JetBrains Mono carries code, tokens, labels and tabular figures. Never substitute a system font for any of the three.
-
Follow the spacing grid
All spacing derives from a single 8pt base unit. Snap every margin, padding and gap to a multiple of it so that unrelated elements still align across screens.
-
Write in the SendFleet voice
Direct, plain and technically precise. Lead with what something does, state the limitation in the same breath, and never overstate a guarantee.
Frequently asked questions
- Where can I download the SendFleet logo?
- The Download kit button in the navigation of this page packages every logo lockup as SVG, plus the PNG raster set and the favicon and app-icon sizes, generated from the same vector sources as the marks shown here.
- What are the official SendFleet brand colours?
- Amber
#f5a623is the single accent. The dark neutral runs from#0a0a0ato#222222and the light neutral from#f5f4f1to#e5e1db, with#f0ede8as the primary text value on dark. The full token set with light-theme variants is listed in the Colour section. - Which typefaces does SendFleet use?
- Syne for display and headings, Instrument Sans for body and UI text, and JetBrains
Mono for code, design tokens, labels and tabular figures. All three are loaded from
Google Fonts with
font-displayset toswap. - Where are the SendFleet product and documentation sites?
- The product and marketing site is at sendfleet.net, the developer documentation is at docs.sendfleet.net, and service status is at status.sendfleet.net. All three carry the same logo, palette and type system described here.
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 /v1/send on api.sendfleet.net, singular; the version prefix may be dropped in casual copy |
| queued | pending / in progress / processing | Intermediate delivery state before the send is dispatched |
| Starter / Growth / Enterprise | Free / Pro / Business | Official plan names, always capitalised |
| dashboard | portal / console / admin | The authenticated web UI at sendfleet.net/dashboard/ |
sf prefix (e.g. sfApiKey,
sfClient, sf_send).