Home
DESIGN.mdStar on GitHub

One platform, every email

Email marketing software for SaaS teams — send marketing, lifecycle and transactional email from one product.

Colors
Brand · one orange
Surfaces · light-first
Text
Functional signals · product only, not brand
Typography
Newsreader / 600
Display · serif · 56px
One platform, every email
Newsreader
Newsreader / 600
Email subject · 19px
Welcome to Acme — let's get you set up
serif
Inter / 400
UI · body · 15px
Every product, lifecycle and transactional email in one place.
Inter
IBM Plex Mono / 400
Code · meta · 12px
POST app.loops.so/api/v1/contacts/create
Plex Mono
Signature · Lifecycle loop builder
Onboarding loop
Contact ARAna Rivera BCBen Cole
Start
Trigger
userCreated
event · signup
Timer
5 mins
waiting…
Send
welcome email
broadcast · v2
Branch
Timer
3 days
waiting…
Filter
activated?
event · projectCreated
Finish
Sendactivated
setup guide
→ Active user 🎉
Exit!activated
Remove from flow
after 14d
Contact journeyidle
—Pick a contact and press Run to watch them flow through the loop.
Email preview
Emails sent by the loop
appear here.
Pick Ana (activates → gets the setup guide) or Ben (never activates → removed) and press Run. The contact token flows the loop; the branch routes it. Deterministic — fixed journey per contact.
Components
Buttons
Node types
Trigger · event starts the loop
Timer · wait / delay
Filter · branch on a condition
Exit · remove from flow
Audience search
Radius
12 card
10 node
9 btn
pill
Guardrails
Do
Keep a bright white, warm canvas with a warm near-black ink — light is primary.
Use one orange (#FC5200) for logo, CTAs, links and the active flow path.
Set marketing display headings in Newsreader (serif); keep UI & body in Inter.
Make lifecycle loops literal — Trigger → Timer → Send → Filter → Exit, a contact flowing through.
Treat amber / violet / green / slate as functional signals only.
Don't
Lead with a dark or cold canvas, or a second brand hue competing with the orange.
Set UI, labels or node cards in the serif — the serif is marketing display only.
Render the loop as a flat list — the value is the branch and its paths.
Make orange neon or garish — it's one confident hot-orange, warmed by coral.
Swap the spiral loop mark for a generic envelope.