Skip to content

Composio Design System

Deep electric blue #0007cd on CTAs and glows, abcDiatype throughout, JetBrains Mono for code and 8px buttons. Composio for React and AI coding tools.

Get ProDownload DESIGN.md
Primary color
#0007cd
Typeface
abcDiatype
Shape
Mixed
Base radius
8px
Colors
22
Type tokens
14
Components
21
Spacing values
9

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 highlights

  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

Live at composio.dev

Composio in production, as captured. Scroll the window to see the whole page.

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

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

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

Radii and spacing

8 corner radii and 9 spacing values. Shape language: mixed, on a 8px base radius.

Radii8

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

Spacing9

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

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

The system, in use

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

Marketing heroThe homepage: its nav, a headline and the main call to action.
Composio
Try it free

Think bigger with an AI at your side

Ask anything, write and analyze, and build with an assistant that understands your work.

Try it freeTalk to sales
ComposioS
Summarize this quarter's results in three points.
Revenue grew 18% on last year, churn fell to 2.1%, and two new markets opened in March.
Turn that into a short note for the team.
Ask anything

Composio design system FAQ

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

Related reading

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

Use Composio in your project

One machine-readable file. Drop it into Claude Code, Cursor, VS Code 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.

More systems like this

Algolia, Anthropic, Arc and 61 more in AI & LLM Platforms: each brand's colors, type and components in one file your AI agent builds from.

All 65 in AI & LLM Platforms

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
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • 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
  • 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
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

4.9 out of 5 from 150+ developers

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
  • Cancel anytime
  • Keep what you've shipped