# 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

Email
API Key
Workspace
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

Name | Width | Key Changes
--- | --- | ---
Mobile | < 640px | Hero h1 72→32px; terminal grid collapses to single pane; toolkit grid 1-up; nav hamburger.
Tablet | 640–1024px | Hero h1 56px; terminal grid 2×2; toolkit grid 2-up.
Desktop | 1024–1280px | Full hero h1 72px; toolkit grid 4-up.
Wide | > 1280px | Content caps at 1200px.

375
mobile
640
small
768
tablet
1024
laptop
1280
desktop

#### Touch Targets

- Primary CTA at 40px height — at WCAG AA, padded for AAA.
- Search input 40px.

#### Collapsing Strategy

- Top nav switches to hamburger below 768px.
- Terminal mockup 2×2 collapses to single pane on mobile.
- Toolkit grid: 4-up → 2-up → 1-up.
- Hero spotlight glow stays at every breakpoint.