---
version: alpha
name: Composio
website: "https://composio.dev"
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.

seo:
  title: "Composio Design System for React — #0007cd, abcDiatype, 19 components"
  metaDescription: "Composio's design system as a DESIGN.md file. Deep electric blue #0007cd, abcDiatype, 20 colors, 19 components. For React, Next.js, and AI tools."
  highlights:
    - "Single voltage — Composio Blue (#0007cd) carries every primary CTA, wordmark, and spotlight glow across all 19 components"
    - "One sans family across roles — abcDiatype at weight 500 for display, 400/600 for body; only code switches to JetBrains Mono"
    - "Compact 8px CTA radius (rounded.md), not full pills — the developer-tool dialect over consumer marketplace softness"
    - "Brightness-step elevation ladder — surfaces lift via #181818 → #222222 → #2a2a2a fills, no drop shadow tiers"
    - "Signature 2×2 terminal-mockup grid backed by a radial blue glow — the homepage hero anchor, not decoration"
  tags:
    - "AI & LLM Platforms"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Composio sells tool integration for AI agents, and its marketing site reads like a serious developer-infrastructure brand — closer to Vercel or Stripe Docs than to a typical AI startup. The canvas is near-black #0f0f0f from top nav to footer. A single voltage of deep electric blue (#0007cd) carries every primary CTA, the wordmark, and the radial spotlight glow that backs the homepage hero. There is no second brand color in mainline marketing; cyan and violet appear only inside specific product illustrations. The shape language stays compact and ergonomic — 8px button radii, 12-16px card radii, no full pills, no drop shadows. Elevation comes from brightness steps across three card surfaces (#181818, #222222, #2a2a2a), not from layered shadow tiers. The brand's strongest visual signature is a 2×2 terminal-mockup grid with a blue spotlight glow centered behind it.

    The file packages all of that into a single DESIGN.md spec: 20 color tokens (one primary, two surface tiers, three hairline tones, six text grades, two semantic, plus accent cyan and violet), 15 typography tokens running abcDiatype across display through caption with JetBrains Mono for code, 8 corner radii from 0 to pill, a 9-step spacing scale ending at a 96px section unit, and 19 named components from `top-nav-dark` to `cta-band-spotlight`. The format is Google Labs' open DESIGN.md spec — machine-readable YAML frontmatter plus human prose underneath.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Composio's restraint — single accent, brightness-step elevation, compact developer-tool radii — instead of guessing at a generic dark-mode theme. Or reference the tokens directly: every hex, font, radius, and spacing value is a quoted YAML scalar ready for Tailwind config, CSS variables, or a component library. The system is worth studying for one move in particular: the discipline of using a single deep blue across every primary surface and trusting brightness contrast to do the rest of the visual work.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://composio.dev"
      title: "Composio (composio.dev)"
      description: "The brand's live marketing site — the source of every token captured in this spec."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Composio's primary brand color?"
      answer: "Composio's brand color is a deep electric blue at #0007cd — closer to ultramarine than to a typical SaaS indigo. It carries every primary CTA, the wordmark, and the radial spotlight glow that backs the homepage hero. The brand is strict about scarcity: cyan (#00d4ff) and violet (#7b3aed) tokens exist but only appear inside product illustrations and data-flow diagrams, never as a second CTA color. A brighter variant (#1a26ff) is reserved for the center of the atmospheric blue glow."
    - id: "dark-mode"
      title: "Is Composio's design system dark-only?"
      answer: "Yes — the public marketing site is monolithic dark from top nav to footer. The page floor is near-black #0f0f0f (`colors.canvas`), with deeper #000000 (`colors.canvas-deep`) reserved for terminal mockup grids and code blocks. Depth comes from a brightness-step ladder of card surfaces (#181818 → #222222 → #2a2a2a) rather than from drop shadows. The spec does not document a light-mode counterpart; in-product authenticated surfaces (toolkit dashboards, agent playground) are behind a login wall and out of scope."
    - id: "typography"
      title: "What typography does Composio use, and what should I substitute?"
      answer: "Composio runs abcDiatype (a Lineto typeface) as the single sans family across display, body, navigation, and captions — display sits at weight 500, body at 400, titles at 600. Code blocks and terminal mockups switch to JetBrains Mono. abcDiatype is licensed and not freely redistributable. The closest open-source substitute is Inter at weight 500 with letter-spacing tightened to roughly -1.5%; the proportions transfer cleanly across the display scale from 24px through 72px."
    - id: "shape-language"
      title: "Why are Composio's CTA buttons not pill-shaped?"
      answer: "Composio uses an 8px CTA radius (`rounded.md`) rather than full pills (`rounded.full`). That is a deliberate dialect choice — pill buttons read as consumer-marketplace soft, while 8px reads as developer-tool ergonomic. Cards sit slightly larger at 12-16px (`rounded.lg` / `rounded.xl`), pills only appear on uppercase badge labels. The compact radii reinforce the brand's positioning closer to Vercel or Stripe Docs than to a typical AI-tools startup with full-rounded everything."
    - id: "terminal-grid"
      title: "What is the 2×2 terminal mockup grid?"
      answer: "The signature visual on Composio's homepage is a 2×2 grid of dark code/output panels — a `terminal-mockup-grid` component holding four `terminal-pane` cells inside a 16px-rounded container with 32px padding. The grid sits on the deepest surface (#000000), individual panes step up to #181818, and a radial blue glow centered at #1a26ff sits behind the whole composition. The grid stays 2×2 down to tablet width and collapses to a single pane on mobile."
    - id: "use-in-project"
      title: "How do I use this DESIGN.md in my React project?"
      answer: "Paste the file into Claude, Cursor, or GitHub Copilot as context and the agent will scaffold React components matching Composio's restraint — single blue accent, brightness-step elevation, 8px CTAs — rather than a generic dark-mode shadcn theme. Or reference the YAML directly: every value is a quoted scalar ready for Tailwind config, CSS variables, or a token export. The 19 component entries map cleanly onto shadcn primitives — `button-primary` is your `Button`, `feature-card` your `Card`, `text-input` your `Input`."

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.

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