What is Composio's primary brand color?

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.

Is Composio's design system dark-only?

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.

What typography does Composio use, and what should I substitute?

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.

Why are Composio's CTA buttons not pill-shaped?

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.

What is the 2×2 terminal mockup grid?

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.

How do I use this DESIGN.md in my React project?

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

Composio Design System

Composio's design system as a DESIGN.md file.

About Composio DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source composio.dev

AI & LLM Platforms
Developer Tools & IDEs

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.

What makes it distinct

Single voltageComposio Blue (#0007cd) carries every primary CTA, wordmark, and spotlight glow across all 19 components
One sans family across rolesabcDiatype at weight 500 for display, 400/600 for body; only code switches to JetBrains Mono
Compact 8px CTA radius (rounded.md), not full pillsthe developer-tool dialect over consumer marketplace softness
Brightness-step elevation laddersurfaces lift via #181818 → #222222 → #2a2a2a fills, no drop shadow tiers
Signature 2×2 terminal-mockup grid backed by a radial blue glowthe homepage hero anchor, not decoration

Live at composio.dev

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

composio.dev

Explore Composio

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Composio design system FAQ

Common questions about Composio's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Composio (composio.dev)

The brand's live marketing site — the source of every token captured in this spec.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Composio in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→