Typography

Typography

Composio uses ABC Diatype by Dinamo as its primary typeface, paired with JetBrains Mono for code and technical chrome.

agent.json
text-mono-sm uppercase tracking-wider

ABC Diatype

Primary typeface by Dinamo

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Download ABC Diatype
text-mono-sm uppercase tracking-wider

JetBrains Mono

For code and technical content

Aa

const agent = new Composio({ apiKey: "..." });

Download from Google Fonts
Principles

How type carries hierarchy

The system gets its quietness from one constraint: weight is mostly fixed, so hierarchy comes from size and space rather than heaviness. The eyebrow signature pairs mono with uppercase and wide tracking: text-mono-sm uppercase tracking-wider.

Sans never goes bold

ABC Diatype renders at weight 400 or 500 only — never 600/700.

Emphasis via size, not weight

To make text louder, go up the scale — don't reach for bold.

Display & H1 are normal weight (400)

The largest type stays light; scale alone carries the hierarchy.

H2 is the only medium heading

Weight 500 is reserved for H2 — every other heading is 400.

Mono can be any weight

JetBrains Mono is free to vary weight for code and UI chrome.

Sans scale

Display → caption

text-display
36 → 64px
normal (400)
lh 1 · ls -0.025em
Hero / page H1

Build with agents

text-h1
24 → 44px
normal (400)
lh 1.1 · ls -0.025em
Section heading

Integrate any tool in minutes

text-h2
20 → 24px
medium (500)
lh 1.1 · ls -0.025em
Sub / card heading — the ONLY medium heading

Managed authentication, built in

text-h3
18px
normal (400)
lh 1.2
Inline / smallest heading

Production-ready by default

text-body-lg
18px
normal (400)
lh 1.5 · ls -0.011em
Lead paragraph

Composio enables AI agents to interact with external tools and services through a unified API. Build workflows that connect agents to the tools your team already uses.

text-body
16px
normal (400)
lh 1.5 · ls -0.011em
Standard paragraph

Connect your AI agents to 150+ tools including GitHub, Slack, and Notion. Every integration is production-ready with built-in error handling and automatic retries.

text-body-sm
14px
normal (400)
lh 1.5 · ls -0.011em
Default body

All integrations come with built-in authentication handling. Composio manages OAuth flows, API keys, and token refresh cycles automatically.

text-caption
12px
normal (400)
lh 1.5 · ls -0.011em
Captions / fine print

Supporting detail and metadata

Mono scale

mono-md → mono-2xs

text-mono-md
13px
any weight
lh 1.625
Code blocks

const agent = new Composio({ apiKey: "..." });

text-mono-sm
11px
any weight
lh 1.2 · ls 0.05em
Eyebrow labels

EYEBROW LABEL

text-mono-xs
10px
any weight
lh 1.2
Badges, chips, version

v1.4.2

text-mono-2xs
9px
any weight
lh 1.2
Dense UI chrome

DENSE UI CHROME