Design System Inspiration of Composio

AI-agent tool integration platform. Deep electric blue (#0007cd) on compact 8px-radius CTAs — developer-tool dialect on a dark monolithic canvas.

01 — Color Palette

Composio Blue + monolithic dark

Single brand voltage on a near-black canvas. Brightness-step ladder for elevation; cyan/violet are illustrative-only.

Brand

primary
#0007cd
All primary CTAs, wordmark, spotlight glow center.
primary-active
#0005a3
Press state.
primary-glow
#1a26ff
Inside radial atmospheric glows.
accent-cyan
#00d4ff
Sparingly on data-flow visualizations.
accent-violet
#7b3aed
Inside specific product illustrations only.

Surface

canvas
#0f0f0f
Page floor.
canvas-deep
#000000
Terminal mockup grid background, code blocks.
surface-card
#181818
Default content card.
surface-card-elevated
#222222
Terminal panes, secondary buttons.
surface-strong
#2a2a2a
Dropdown menus.

Text & Hairlines

ink
#ffffff
Display headlines.
body
#a8a8a8
Default running-text.
muted
#888888
Sub-titles.
muted-soft
#666666
Disabled text.
hairline
#222222
1px divider.
hairline-strong
#333333
Stronger panel outline.

Semantic

success
#33d17a
Online indicators.
error
#ff4d4d
Validation errors.
02 — Typography

abcDiatype 500 + JetBrains Mono

Single sans family across every text role; mono on every code surface.

display-mega72px / 500 / 1.05 / -2.16px
Your agent decides what to do.
display-xl56px / 500 / 1.05 / -1.68px
Composio for sales
display-lg44px / 500 / 1.1 / -1.32px
Section heading
display-md32px / 500 / 1.15 / -0.96px
Sub-section heading
title-md18px / 600 / 1.4
Component title
body-md16px / 400 / 1.5
Default body — soft gray on dark canvas.
body-sm14px / 400 / 1.5
Footer body.
caption-uppercase11px / 600 / 1.4 / 0.88px
Section label
code13px / 400 / 1.5 (JetBrains Mono)
composio.tools().run({task: 'analyze'})
button14px / 500 / 1.0
Get started
nav-link14px / 500 / 1.4
Product · Toolkits · Docs · Pricing
03 — Buttons

8px radius — developer dialect

Compact CTAs at 8px radius, not full pills. Brightness-step secondaries.

button-primary
Composio Blue / 8px / 40px height
button-primary-active
Deeper press state.
button-secondary-dark
Surface-elevated.
button-outline
Transparent + hairline border.
button-tertiary-text
Inline body-color text.
04 — Terminal Mockup Grid

Brand signature: 2×2 panes

The homepage hero anchor. canvas-deep outer + surface-card panes, JetBrains Mono code, blue spotlight glow behind.

// agent.ts import { Composio } from 'composio' const tools = composio .tools() .filter('sales') await agent.run(tools)
→ Running agent... ✓ slack: message posted ✓ github: PR opened ✓ stripe: invoice sent ✓ notion: doc updated → 4/4 tools succeeded
// toolkits ▸ slack (12 actions) ▸ github (28 actions) ▸ stripe (16 actions) ▸ notion (10 actions) ▸ linear (14 actions) ▸ hubspot (22 actions)
$ composio auth slack ✓ Workspace authorized $ composio status ● 6 toolkits connected → ready to run agents
05 — Cards & Toolkits

Feature cards + toolkit grid

Brightness-step layered cards. Toolkit cards in 4-up grid; feature cards in 3-up.

⚡

Smart triggers

Listen to events from any toolkit. Run agents on webhook fire.

🔒

Built-in auth

OAuth flows, API keys, per-user credentials — managed.

📊

Observability

Trace every tool call; replay agent runs; debug failures.

SL
Slack

12 actions

GH
GitHub

28 actions

ST
Stripe

16 actions

NT
Notion

10 actions

LN
Linear

14 actions

HB
HubSpot

22 actions

GD
Google Drive

18 actions

SF
Salesforce

30 actions

06 — Spotlight Glow Card

CTA atmospheric depth

Centered display headline with radial blue glow behind. The atmospheric pattern.

Your agents are ready. Are you?

07 — Code Block

JetBrains Mono on canvas-deep

// Quickstart — connect a toolkit and run an agent
import { Composio } from 'composio'

const composio = new Composio({ apiKey: process.env.COMPOSIO_KEY })
const tools = await composio.tools().filter('slack')
const result = await agent.run({ tools, task: 'post weekly update' })
08 — Forms

Inputs

09 — Badges

Small uppercase pills.

NewBetaStablePro
10 — Spacing Scale

4px base, 96px section rhythm.

xxs · 4
xs · 8
sm · 12
base · 16
md · 20
lg · 24
xl · 32
xxl · 48
section · 96
11 — Border Radius

Compact developer-ergonomic radii.

0 · none
4 · xs
6 · sm
8 · md
12 · lg
16 · xl
pill
12 — Elevation & Depth

Brightness-step ladder + atmospheric blue glow.

Flat / Canvas

#0f0f0f — body bands, footer.

Recessed

#000000 — terminal grids, code blocks.

Card

#181818 — default content cards.

Card Elevated

#222222 — terminal panes, secondary buttons.

13 — Responsive Behavior
NameWidthKey Changes
Mobile< 640pxHero h1 72→32px; terminal grid collapses to single pane; toolkit grid 1-up; nav hamburger.
Tablet640–1024pxHero h1 56px; terminal grid 2×2; toolkit grid 2-up.
Desktop1024–1280pxFull hero h1 72px; toolkit grid 4-up.
Wide> 1280pxContent caps at 1200px.
375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

Touch Targets

Collapsing Strategy