Skip to content
shadcn.io

Composio Design System

Composio's design system as a DESIGN.md file. Deep electric blue #0007cd, abcDiatype, 22 colors, 21 components. For React, Next.js, and AI tools.

Get ProDownload DESIGN.md

Add shadcn.io to your AI agent. · Pro It installs blocks, icons and templates in your design system from a prompt, with Pro.

Set up MCP
Primary
#0007cd
Typeface
abcDiatype
Shape
Mixed
Base radius
8px
Colors
22
Type tokens
14
Components
21
Spacing values
9

About

About Composio DESIGN.md

Curated by Dov Azencot · Updated May 12, 2026 · Source composio.dev (opens in a new tab)

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: 22 colors 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

5

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

composio.dev

Live at composio.dev

A snapshot of the brand in production. Scroll the frame to see the whole page.

Visit composio.dev (opens in a new tab)
Composio's website at composio.dev

Colors

22 colors

Composio's system runs on #0007cd as its primary voltage, used in 1 of 21 components. Type is set in abcDiatype across 14 tokens from 11px to 72px, weights 400–600. Shape language is mixed across 21 components, blending pills, soft rounds, and squarer corners.

Brand & Accent

Sparing, CTA-only voltage · 5

Surface

Page and card backgrounds · 5

Text

Headlines, body, captions · 7

Borders & Hairlines

Dividers, outlines, rules · 3

Semantic

Status, errors, success, links · 2

Typography

14 type tokens

Set in abcDiatype across 14 tokens, from 11px to 72px, weights 400–600. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.

  • display-mega72px · weight 500 · lh 1.05 · tracking -2.16pxThe quick brown fox jumps over the lazy dog
  • display-xl56px · weight 500 · lh 1.05 · tracking -1.68pxThe quick brown fox jumps over the lazy dog
  • display-lg44px · weight 500 · lh 1.1 · tracking -1.32pxThe quick brown fox jumps over the lazy dog
  • display-md32px · weight 500 · lh 1.15 · tracking -0.96pxThe quick brown fox jumps over the lazy dog
  • display-sm24px · weight 500 · lh 1.25 · tracking -0.5pxThe quick brown fox jumps over the lazy dog
  • title-md18px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
  • title-sm16px · weight 600 · lh 1.4The quick brown fox jumps over the lazy dog
  • body-md16px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • body-sm14px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • caption13px · weight 400 · lh 1.4The quick brown fox jumps over the lazy dog
  • caption-uppercase11px · weight 600 · lh 1.4 · tracking 0.88pxThe quick brown fox jumps over the lazy dog
  • code13px · weight 400 · lh 1.5The quick brown fox jumps over the lazy dog
  • button14px · weight 500 · lh 1The quick brown fox jumps over the lazy dog
  • nav-link14px · weight 500 · lh 1.4The quick brown fox jumps over the lazy dog

Layout

Radii and spacing

8 corner radii and 9 spacing values. Shape language: mixed.

Radii

  • none0px
  • xs4px
  • sm6px
  • md8px
  • lg12px
  • xl16px
  • pill9999px
  • full9999px

Spacing

  • xxs4px
  • xs8px
  • sm12px
  • base16px
  • md20px
  • lg24px
  • xl32px
  • xxl48px
  • section96px

Components

21 components

Each rendered from its tokens (color, type, radius, padding) on Composio's own canvas.

  • Top Nav Dark
    top-nav-darkTop Nav Dark
  • Button Primary
    button-primaryButton Primary
  • Button Primary Active
    button-primary-activeButton Primary Active
  • Button Secondary Dark
    button-secondary-darkButton Secondary Dark
  • Button Outline
    button-outlineButton Outline
  • Button Tertiary Text
    button-tertiary-textButton Tertiary Text
  • Hero Band
    hero-bandHero Band
  • Terminal Mockup Grid
    terminal-mockup-gridTerminal Mockup Grid
  • Terminal Pane
    terminal-paneTerminal Pane
  • Feature Card
    feature-cardFeature Card
  • Toolkit Card
    toolkit-cardToolkit Card
  • Toolkit Icon
    toolkit-iconToolkit Icon
  • Spotlight Glow Card
    spotlight-glow-cardSpotlight Glow Card
  • Code Block
    code-blockCode Block
  • Badge Pill
    badge-pillBadge Pill
  • Type here…
    text-inputText Input
  • Search Input
    search-inputSearch Input
  • Cta Band Spotlight
    cta-band-spotlightCta Band Spotlight
  • Testimonial Card
    testimonial-cardTestimonial Card
  • Footer Dark
    footer-darkFooter Dark
  • Footer Link
    footer-linkFooter Link

In use

The system, in use

Composio's tokens on the kind of product it builds.

Build something people actually use.

A short paragraph of marketing copy that previews how the brand's display tier and body tier read together. Two sentences is usually enough.

Get startedLearn more
Marketing heroHeadline, sub-copy, primary CTA — the universal homepage opener.

FAQ

Composio design system FAQ

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

Read next

Related reading

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

Use it

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

  1. Download the DESIGN.md

    One machine-readable file: every color, type, radius, spacing, and component token of Composio.

  2. Feed it to your AI tool

    Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Composio's visual language.

  3. Reference the tokens directly

    Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.

Read the full DESIGN.md: overview, rationale, do’s and don’ts

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.

AI & LLM Platforms

More systems like this

More DESIGN.md files in AI & LLM Platforms.

All 65 in AI & LLM Platforms

Pricing

Build it with Pro

The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
  • Complete multi-page sites you can ship as they are.Templates: All 14 templates
  • React icons from every major library, installable with one command.React icons: 294k+ icons
  • Presets that restyle every block, in light and dark.Themes: All 59 themes
  • Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Lets your AI editor search, preview and install blocks for you.MCP server: High usage
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

Your system, built for you

Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.

Get Pro