Design system
Contract
All new UI uses tokens and components from this page. If a primitive does not exist here, add it here first. Teal is healthy and the only accent — do not invent a second green. Buyer install, env, and screens live in Documentation.
Every screen is a table, timeline, split inbox, or kanban — not a card grid. Radius is 6px on controls and 8px on panels. No 16px+ marketing cards, no gradients, no emoji icons.
Phone is under 768. Tablet is 768–1023. Desktop is 1024 and up. The rail is a charcoal drawer below desktop. KPI strips go 1 / 2 / 3. Split pages stack. Inbox is list or thread on the phone, two panes on tablet, three on desktop. Pipeline scrolls sideways until desktop. Tables scroll sideways — never squash columns. Header forms open in a Sheet, never inside the title row.
Reply rate
2.4%
Positive replies
1.1%
Bounce rate
4.1%
Teal · healthy + accent
Orange · attention
Red · money-losing
Canvas
Panel
Rail
Ready states map 1:1: inbox ready, list clean, sequence ready, campaign sending, deal won → teal. Anything still working → orange (pulse if in-progress). Anything that loses money or blocks send → red.
Page titles only
Sans for humans. Never serif inside a card, table, or form.
you@acme.dev · 20 / 40 · v=spf1 include:_spf.google.com ~all
| Inbox | Cap | Status |
|---|---|---|
| hello@send.acme.dev | 20 / 40 | Paused |
| mailpit@local | 10 / 40 | Ready |
Row 40px. Mono for emails, counts, DNS. Selection tint is interaction state, not health — status is carried by the chip only. Do not tint danger rows red.
Machine-truthful value
Max 40/day — higher volumes on a new inbox trigger spam filters.
File lives inside Field — no second browser box.
Field is the only box. Input, Select, Textarea, FileInput, and CheckList have no border of their own. Focus ring sits on the field, not a second inner control.
Multi-select is a CheckList inside Field — never select multiple.
Meter fill inherits the status color of what it measures — ramp/pending = orange, healthy usage = teal, red only for bounce/danger. Bounce is rate vs the 3% pause limit; fill is distance-to-pause, not a 0–100 vanity bar.
Launch blocked: DMARC missing. Fix records
Welcome, invite, and password reset share one chrome: src/emails/ledger.tsx. Same tokens as this page. Campaigns never use this template — those leave on the customer's SMTP.
OutboundOS
Ledger · account
Workspace
WebBuddy is live. Add an inbox you own, pass DNS, then launch. OutboundOS never sends from outboundos.org on your behalf.
Workspace
WebBuddy
Next
Inbox · DNS · launch
Sending
Your SMTP
| File | When | |
|---|---|---|
| Welcome | src/emails/welcome.tsx | Signup |
| Invite | src/emails/invite.tsx | Seat added |
| Reset | src/emails/reset.tsx | Password forgot |
Preview the live React Email templates with npm run email on port 3333. Do not add a fourth account mail without putting a specimen here first.
`/` and the auth panes are the only marketing surface. Same tokens, same 40px controls. ButtonLink is the link-shaped Button. No second palette, no shadow cards, no stock photos.
Busy disables the control, swaps the label to the verb in progress, and pulses with the verifying token. Locked = blocked by a gate, always shows why and the fix. Never use a grayed primary for a deliverability gate.
Bottom-right, 3.2s, one at a time (replace, do not stack). Only copied / test sent / imported n. Failures use banners or field errors.
Tables and meters while polling. Pulse token is the same as verifying; it respects prefers-reduced-motion.
Add inbox
Bottom sheet on the phone, centered panel from tablet up. Close on backdrop. This is the only place a create form may live — never in the page header.
One focus style: teal 2px ring, 2px offset. Do not invent another.
Errors state the rule and the reason. “Max 40/day — higher volumes on a new inbox trigger spam filters.” That is the product, not Instantly-generic validation.
No inboxes yet.
Add a Mailpit inbox to send the first test.
Inbox paused — bounce rate 4.1%
Red banner. Orange is only for in-progress work, never this.