Composio Design System

---

version: alpha

name: Composio-design-analysis

description: A developer-tools brand for AI-agent tool integration whose marketing surfaces lean into a dark, technical aesthetic with a single deep-electric-blue voltage (`#0007cd`). The page floor is near-black (`#0f0f0f`); cards float above on subtle gray-tinted surfaces. abcDiatype carries display and body in a single sans family with weights 400-600. The brand's strongest visual signature is a four-pane terminal-style mockup (a 2×2 grid of dark code/output panels) with a central blue spotlight glow — used as the homepage hero anchor.

colors:

primary: "#0007cd"

primary-active: "#0005a3"

primary-glow: "#1a26ff"

ink: "#ffffff"

body: "#a8a8a8"

body-strong: "#ffffff"

muted: "#888888"

muted-soft: "#666666"

hairline: "#222222"

hairline-soft: "#1a1a1a"

hairline-strong: "#333333"

canvas: "#0f0f0f"

canvas-deep: "#000000"

surface-card: "#181818"

surface-card-elevated: "#222222"

surface-strong: "#2a2a2a"

on-primary: "#ffffff"

on-dark: "#ffffff"

accent-cyan: "#00d4ff"

accent-violet: "#7b3aed"

semantic-error: "#ff4d4d"

semantic-success: "#33d17a"

typography:

display-mega:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 72px

fontWeight: 500

lineHeight: 1.05

letterSpacing: -2.16px

display-xl:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 56px

fontWeight: 500

lineHeight: 1.05

letterSpacing: -1.68px

display-lg:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 44px

fontWeight: 500

lineHeight: 1.1

letterSpacing: -1.32px

display-md:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 32px

fontWeight: 500

lineHeight: 1.15

letterSpacing: -0.96px

display-sm:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 24px

fontWeight: 500

lineHeight: 1.25

letterSpacing: -0.5px

title-md:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 18px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

title-sm:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 16px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

body-md:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 16px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

body-sm:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 14px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

caption:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 13px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

caption-uppercase:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 11px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0.88px

textTransform: uppercase

code:

fontFamily: "'JetBrains Mono', 'Fira Code', monospace"

fontSize: 13px

fontWeight: 400

lineHeight: 1.5

letterSpacing: 0

button:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.0

letterSpacing: 0

nav-link:

fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif"

fontSize: 14px

fontWeight: 500

lineHeight: 1.4

letterSpacing: 0

rounded:

none: 0px

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

pill: 9999px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

base: 16px

md: 20px

lg: 24px

xl: 32px

xxl: 48px

section: 96px

components:

top-nav-dark:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body-strong}"

typography: "{typography.nav-link}"

height: 64px

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

height: 40px

button-primary-active:

backgroundColor: "{colors.primary-active}"

textColor: "{colors.on-primary}"

rounded: "{rounded.md}"

button-secondary-dark:

backgroundColor: "{colors.surface-card-elevated}"

textColor: "{colors.body-strong}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 10px 18px

height: 40px

button-outline:

backgroundColor: transparent

textColor: "{colors.body-strong}"

typography: "{typography.button}"

rounded: "{rounded.md}"

padding: 9px 17px

height: 40px

button-tertiary-text:

backgroundColor: transparent

textColor: "{colors.body}"

typography: "{typography.button}"

hero-band:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body-strong}"

typography: "{typography.display-mega}"

padding: 96px

terminal-mockup-grid:

backgroundColor: "{colors.canvas-deep}"

textColor: "{colors.body-strong}"

typography: "{typography.code}"

rounded: "{rounded.xl}"

padding: 32px

terminal-pane:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body}"

typography: "{typography.code}"

rounded: "{rounded.lg}"

padding: 20px

feature-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body}"

typography: "{typography.title-md}"

rounded: "{rounded.xl}"

padding: 28px

toolkit-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body-strong}"

typography: "{typography.title-sm}"

rounded: "{rounded.lg}"

padding: 20px

toolkit-icon:

backgroundColor: "{colors.surface-card-elevated}"

rounded: "{rounded.md}"

size: 40px

spotlight-glow-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body-strong}"

typography: "{typography.display-md}"

rounded: "{rounded.xl}"

padding: 48px

code-block:

backgroundColor: "{colors.canvas-deep}"

textColor: "{colors.body}"

typography: "{typography.code}"

rounded: "{rounded.lg}"

padding: 20px

badge-pill:

backgroundColor: "{colors.surface-card-elevated}"

textColor: "{colors.body-strong}"

typography: "{typography.caption-uppercase}"

rounded: "{rounded.pill}"

padding: 4px 10px

text-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body-strong}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 12px 16px

height: 44px

search-input:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body-strong}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 10px 16px

height: 40px

cta-band-spotlight:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body-strong}"

typography: "{typography.display-lg}"

padding: 96px

testimonial-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.body}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 24px

footer-dark:

backgroundColor: "{colors.canvas}"

textColor: "{colors.body}"

typography: "{typography.body-sm}"

padding: 64px 48px

footer-link:

backgroundColor: transparent

textColor: "{colors.body}"

typography: "{typography.body-sm}"

---

Composio's marketing site reads like a serious developer-infrastructure brand — closer to Vercel or Stripe Docs in atmosphere than to a typical AI-tools startup. The base canvas is a near-black `{colors.canvas}` (#0f0f0f) holding white type and a single voltage of **deep electric blue** (`{colors.primary}` — #0007cd) carrying every primary CTA, brand wordmark, and atmospheric spotlight glow that backs the homepage hero.

Type runs **abcDiatype** as the single sans family across display, body, navigation, and captions. Display sits at weight 500 — confident but not bombastic. Code blocks and terminal mockups switch to JetBrains Mono.

The page rhythm is monolithic: dark canvas top to bottom with subtle elevation steps via card surfaces. The brand's strongest visual signature is a **four-pane terminal-style mockup** — a 2×2 grid of dark code/output panels with a central blue spotlight glow behind them.

**Key Characteristics:**

The system runs **abcDiatype** (Lineto) across every text role. Code blocks switch to **JetBrains Mono**. Fallback: `ui-sans-serif, system-ui, sans-serif`.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-mega}` | 72px | 500 | 1.05 | -2.16px | Homepage hero h1 |

| `{typography.display-xl}` | 56px | 500 | 1.05 | -1.68px | Subsidiary heroes |

| `{typography.display-lg}` | 44px | 500 | 1.1 | -1.32px | Section heads |

| `{typography.display-md}` | 32px | 500 | 1.15 | -0.96px | Sub-section heads |

| `{typography.display-sm}` | 24px | 500 | 1.25 | -0.5px | Card group titles |

| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component titles |

| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | Toolkit card titles |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |

| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |

| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo captions |

| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section labels, badge pills |

| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code blocks — JetBrains Mono |

| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA pill labels |

| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |

abcDiatype is a Lineto licensed typeface. Open-source substitute: **Inter** at weight 500 with letter-spacing -1.5%.

The dark canvas creates its own depth — whitespace can stay tight without feeling crowded. 96px between bands; 24px between cards inside a band.

The system uses **brightness-step elevation**: surfaces step up in brightness instead of casting drop shadows. Combined with subtle radial blue glows, this creates a focused dark-mode atmosphere.

| Level | Treatment | Use |

|---|---|---|

| Flat (canvas) | `{colors.canvas}` (#0f0f0f) | Body bands, footer |

| Recessed | `{colors.canvas-deep}` (#000000) | Terminal mockup grid background, code blocks |

| Card | `{colors.surface-card}` (#181818) | Default content cards |

| Card elevated | `{colors.surface-card-elevated}` (#222222) | Terminal panes, secondary buttons |

| Atmospheric glow | Radial gradient using `{colors.primary-glow}` | Hero spotlight backdrop |

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Reserved |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | CTA buttons, form inputs |

| `{rounded.lg}` | 12px | Toolkit cards, code blocks, terminal panes |

| `{rounded.xl}` | 16px | Feature cards, terminal mockup grids |

| `{rounded.pill}` | 9999px | Section-label badges |

| `{rounded.full}` | 9999px | Avatar plates (rare) |

Compact developer-ergonomic radii — 8px CTAs, 12-16px cards. Signals "developer tool" rather than "consumer brand."

**`top-nav-dark`** — Default top nav. Background `{colors.canvas}`, text `{colors.body-strong}`, height 64px. Layout: Composio wordmark left, primary horizontal menu (Product / Toolkits / Docs / Pricing / Customers / Blog), GitHub stars + Sign In + "Get started" right.

**`button-primary`** — The signature Composio Blue CTA. Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}` (14px / 500), padding 10px × 18px, height 40px, rounded `{rounded.md}` (8px).

**`button-primary-active`** — Press state. Background `{colors.primary-active}`.

**`button-secondary-dark`** — Surface-elevated secondary. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`.

**`button-outline`** — Transparent with 1px hairline-strong border.

**`button-tertiary-text`** — Inline text link.

**`hero-band`** — Homepage hero. Background `{colors.canvas}`, full-width display headline in `{typography.display-mega}` (72px / 500), subhead, two CTAs, and a spotlight-glow backdrop emanating from behind the centered terminal-mockup grid.

**`terminal-mockup-grid`** — The brand's strongest visual signature. 2×2 grid of dark code/output panels inside a `{rounded.xl}` (16px) container. Background `{colors.canvas-deep}`, padding 32px, gap 16px.

**`terminal-pane`** — Individual code/output panel inside the mockup grid. Background `{colors.surface-card}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}` (12px), padding 20px.

**`spotlight-glow-card`** — Large feature card with centered display headline and a radial blue glow behind it. Background `{colors.surface-card}`, text `{colors.body-strong}` in `{typography.display-md}`, rounded `{rounded.xl}`, padding 48px.

**`feature-card`** — 3-up benefit grid. Background `{colors.surface-card}`, text `{colors.body}`, type `{typography.title-md}`, rounded `{rounded.xl}`, padding 28px.

**`toolkit-card`** — 4-up toolkit grid (Slack, GitHub, Stripe, Notion, Linear, etc.). Background `{colors.surface-card}`, text `{colors.body-strong}`, type `{typography.title-sm}`, rounded `{rounded.lg}`, padding 20px. 40px square `{component.toolkit-icon}` top, toolkit name, one-line description.

**`toolkit-icon`** — Square icon plate. Background `{colors.surface-card-elevated}`, rounded `{rounded.md}`, 40px size.

**`testimonial-card`** — Quote card. Background `{colors.surface-card}`, text `{colors.body}`, rounded `{rounded.lg}`, padding 24px.

**`code-block`** — Inline code/terminal block. Background `{colors.canvas-deep}`, text `{colors.body}` in `{typography.code}`, rounded `{rounded.lg}`, padding 20px.

**`text-input`** — Background `{colors.surface-card}`, text `{colors.body-strong}`, rounded `{rounded.md}` (8px), padding 12px × 16px, height 44px.

**`search-input`** — Compact search field. Same surface and radius, smaller padding, 40px height.

**`badge-pill`** — Small uppercase pill. Background `{colors.surface-card-elevated}`, text `{colors.body-strong}`, type `{typography.caption-uppercase}`, rounded `{rounded.pill}`, padding 4px × 10px.

**`cta-band-spotlight`** — Pre-footer band. Background `{colors.canvas}` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.

**`footer-dark`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.

**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 640px | Hero h1 72→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |

| Tablet | 640–1024px | Hero h1 56px; terminal mockup grid stays 2×2; toolkit grid 2-up. |

| Desktop | 1024–1280px | Full hero h1 72px; full 2×2 terminal mockup; toolkit grid 4-up. |

| Wide | > 1280px | Content caps at 1200px. |

1. Focus on a single component at a time.

2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` or `{rounded.xl}`.

3. Variants live as separate entries inside `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. abcDiatype 500 for display, 400/600 for body. JetBrains Mono on every code surface.

7. Composio Blue stays scarce.