mailagents.dev / foundations
Clarity, by design.
A shared language for the website, the console, and every conversation in between.
Color tokens
Graphite, cool white, and restrained spectral accents. Switch themes to compare.
Made for
the next reply.
inbox.created
agent: research-agent
status: ready
Spacing scale
4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96
Space separates sections and keeps related content together. Borders define controls, panels, and rows that need a clear boundary.
Corner radii
Actions & feedback
One clear primary action. Familiar, accessible states.
Primary · Secondary · Ghost · Disabled · Loading
Controls with context
Labels, helpful validation, and explicit feedback.
Nothing gets left blank.
Every state tells you what happened and what comes next.
Your first conversation starts here.
Create an inbox to give your agent an address.
Put the pieces to work.
The same components, assembled into a complete interaction.
import { MailAgents } from "mailagents";
const client = new MailAgents({ apiKey });
const inbox = await client.inboxes.create({
name: "research-agent",
});
console.log(inbox.address);
This is where replies land.
Run the request to create a demo inbox.API preview. Email is simulated locally.
A request. An inbox. A conversation.
Keyboard-accessible tabs, copy feedback, loading states, and an inspectable result. This is the same component used on the homepage.
Run the request, simulate an incoming email, then reply as an agent.
Both dark and light themes are supported. Motion respects your system’s reduced-motion preference.