Skip to content
Design System · Overview

Machine-readable
beauty.

ReachOut is marketing automation run by AI agents. Its interface is a precision instrument: Fira Code renders every figure the machine produces, Fira Sans carries the brand voice in headings, and Inter keeps human prose effortless to read. This stylebook is the canonical reference — every token, component, table and chart, live and copy-pasteable.

Design principles

01

Data first

Tables and charts are the hero content of every page. They get the most careful typography (tabular mono figures), the calmest chrome, and the first layout decisions. Everything else is supporting cast.

02

Quiet chrome, loud data

Cards carry a 1px border and never a shadow. Ink does the work; color is spent only where it means something — accent for actions, semantic hues for signed values, the accent ramp for intensity.

03

The machine speaks mono

Every number, ID, date, percentage, tool name and log line is Fira Code with tabular numerals. When you scan a table, columns of figures align like a terminal — because that is what the platform is.

04

Motion with purpose

Animations are subtle, fast, and functional: entrances rise and fade, state changes take 80–220ms, charts draw once on mount. Only transform and opacity ever animate. Reduced-motion preferences are honored.


Typography at a glance

Three families, one job each. Full scale on the tokens page.

Fira Sans · boldHeadings carry the brand voice
Inter · regularBody copy, labels and UI text stay neutral and readable.
Fira Code · tabular12,408 emails · +18.2% · mcp.list_contacts