Composio DESIGN.md — Design System for AI Coding Agents

Design tokens (YAML front matter)

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}"

Overview

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:

Single accent: {colors.primary} (#0007cd) for primary CTAs, wordmark, spotlight glows.
Single sans family: abcDiatype carries everything except code (JetBrains Mono).
Dark monolithic canvas: {colors.canvas} runs top to bottom; depth from {colors.surface-card} and {colors.surface-card-elevated} brightness steps.
Terminal-mockup hero: 2×2 grid of code/output panes is the brand signature.
Compact pill geometry: CTAs sit at {rounded.md} (8px), not full pills — developer-tool dialect.
Spotlight-glow atmospheric backdrop: a radial blue glow centered behind hero content.
96px section rhythm.

Colors

Brand & Accent

Composio Blue ({colors.primary} — #0007cd): Primary CTAs, wordmark, spotlight glow center.
Composio Blue Active ({colors.primary-active} — #0005a3): Press state.
Spotlight Glow Tone ({colors.primary-glow} — #1a26ff): Brighter blue used inside radial atmospheric glows.
Accent Cyan ({colors.accent-cyan} — #00d4ff): Sparingly on data-flow visualizations.
Accent Violet ({colors.accent-violet} — #7b3aed): Inside specific product illustrations only.

Surface

Canvas ({colors.canvas} — #0f0f0f): Page floor — near-black.
Canvas Deep ({colors.canvas-deep} — #000000): Pure black for terminal mockup grids and code blocks.
Surface Card ({colors.surface-card} — #181818): Default content card.
Surface Card Elevated ({colors.surface-card-elevated} — #222222): Terminal panes, secondary buttons.
Surface Strong ({colors.surface-strong} — #2a2a2a): Dropdown menus.

Hairlines

Hairline ({colors.hairline} — #222222): Default 1px divider.
Hairline Soft ({colors.hairline-soft} — #1a1a1a): Lighter divider.
Hairline Strong ({colors.hairline-strong} — #333333): Stronger panel outline.

Text

Ink ({colors.ink} — #ffffff): Display headlines.
Body ({colors.body} — #a8a8a8): Default running-text — soft gray.
Body Strong ({colors.body-strong} — #ffffff): Same as ink.
Muted ({colors.muted} — #888888): Sub-titles, breadcrumbs.
Muted Soft ({colors.muted-soft} — #666666): Disabled text.
On Primary ({colors.on-primary} — #ffffff): White text on blue CTAs.

Semantic

Success ({colors.semantic-success} — #33d17a): “Online”, “active” indicators.
Error ({colors.semantic-error} — #ff4d4d): Validation errors.

Typography

Font Family

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

Hierarchy

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

Principles

Display weight stays at 500. Confident but not display-bold.
abcDiatype across every role. No display/body family split.
JetBrains Mono on every code surface.

Note on Font Substitutes

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

Layout

Spacing System

Base unit: 4px.
Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
Section padding: {spacing.section} (96px) for major bands.

Grid & Container

Max content width: ~1200px.
Editorial body: 12-column grid.
Terminal mockup grid: 2×2 equal-size panes.
Toolkit grid: 4-up at desktop, 2-up tablet, 1-up mobile.
Footer: 5-column at desktop.

Whitespace Philosophy

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

Elevation & Depth

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

Decorative Depth

Spotlight glow backdrops — radial blue gradient centered behind hero content.
Terminal-pane brightness ladder — 2×2 mockup uses canvas-deep outer + surface-card-elevated panes.

Shapes

Border Radius Scale

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.”

Components

Top Navigation

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.

Buttons

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 & Atmospheric

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.

Cards

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

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

Forms

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.

Tags & Badges

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 / Footer

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}.

Do’s and Don’ts

Do

Reserve {colors.primary} for primary CTAs, wordmark, and spotlight glows.
Use {rounded.md} (8px) for every CTA — not full pills.
Use brightness-step ladder for elevation; avoid drop shadows.
Pair every hero with a centered radial blue spotlight glow.
Render code, CLI commands in JetBrains Mono via {typography.code}.
Use the 2×2 terminal-mockup grid as the homepage hero anchor.

Don’t

Don’t introduce a secondary brand color. Cyan and violet are illustrative-only.
Don’t use full pills on CTAs.
Don’t drop display weight to 400.
Don’t add drop shadow tiers.
Don’t use canvas-deep (#000000) outside terminal/code surfaces.
Don’t extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand’s CTA color is what appears on actual page CTAs.

Responsive Behavior

Breakpoints

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.

Touch Targets

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

Collapsing Strategy

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

Iteration Guide

Focus on a single component at a time.
CTAs default to {rounded.md} (8px). Cards use {rounded.lg} or {rounded.xl}.
Variants live as separate entries inside components:.
Use {token.refs} everywhere — never inline hex.
Hover state never documented.
abcDiatype 500 for display, 400/600 for body. JetBrains Mono on every code surface.
Composio Blue stays scarce.

Known Gaps

abcDiatype is licensed; Inter is the substitute.
Animation timings out of scope.
In-product surfaces (toolkit dashboards, agent playground) are behind login walls.
Form validation states beyond focus not visible on captured surfaces.

Palette

At a glance

Design System · Composio