# Composio — Design System
> Composio connects AI agents to 1,000+ apps, enabling them to perform complex workflows and automate tasks across various platforms.
- **Canonical:** https://uiuxskills.com/library/composio
- **Source:** https://composio.dev
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:55.534Z

---

---
version: alpha
name: Composio
description: Tool execution platform for AI agents.
tone: Technical, precise, and developer-centric.
color-scheme: dark
colors:
  background: "#000000"
  surface: "#1A1A1A"
  surface-container: "#262626"
  primary: "#FFFFFF"
  on-surface: "#A3A3A3"
  outline: "#333333"
  error: "#EF4444"
  success: "#22C55E"
  focus-ring: "#60A5FA"
  on-primary: "#000000"
typography:
  display-lg:
    fontFamily: monospace
    fontSize: 3rem
  display-md:
    fontFamily: monospace
    fontSize: 2.25rem
  headline-lg:
    fontFamily: monospace
    fontSize: 1.875rem
  headline-md:
    fontFamily: monospace
    fontSize: 1.5rem
  body-md:
    fontFamily: monospace
    fontSize: 1rem
  body-sm:
    fontFamily: monospace
    fontSize: 0.875rem
  label-sm:
    fontFamily: monospace
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: fit-content
  button-primary-hover:
    backgroundColor: "#E5E5E5"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
  input-field:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.on-surface}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Composio is a developer-focused platform designed to bridge the gap between AI intelligence and real-world execution. The visual identity is strictly technical and high-contrast, utilizing a dark-mode aesthetic to mirror the environments where developers spend their time.

## Colors

The color strategy relies on a high-contrast, monochromatic base with targeted semantic accents to highlight critical status information.

*   Background (`{colors.background}`): The absolute black base for the entire interface.
*   Surface (`{colors.surface}`) (inferred): The primary container color for cards and panels.
*   Surface Container (`{colors.surface-container}`) (inferred): An elevated, slightly lighter shade for interactive UI components.
*   Primary (`{colors.primary}`): Pure white used for primary text and high-impact action elements.
*   On Surface (`{colors.on-surface}`): A neutral grey used for secondary text and descriptive labels.
*   Outline (`{colors.outline}`) (inferred): The structural border color for all containers and inputs.
*   Error (`{colors.error}`) (inferred): Semantic red for alerts and critical errors.
*   Success (`{colors.success}`) (inferred): Semantic green for status indicators and completed tasks.
*   Focus Ring (`{colors.focus-ring}`) (inferred): A bright blue used to indicate keyboard focus and active states.

## Typography

The typography system is exclusively monospace, reinforcing the platform's focus on code-centric workflows and technical precision.

*   Display Levels (`{typography.display-lg}`, `{typography.display-md}`): Used for high-impact hero headlines and section headers.
*   Headline Levels (`{typography.headline-lg}`, `{typography.headline-md}`): Used for sub-headers and component titles.
*   Body Levels (`{typography.body-md}`, `{typography.body-sm}`): Used for standard paragraph text and secondary descriptions.
*   Label Level (`{typography.label-sm}`): Used for UI metadata, button text, and small status tags.

## Layout

The layout follows a 4px grid system, ensuring consistent vertical and horizontal rhythm across the platform. The page structure follows a logical flow: hero, clients, features, security, community, and footer. The hero composition is strictly centered, featuring a primary headline followed by dual call-to-action buttons. Responsive behavior is mobile-first, with multi-column feature grids collapsing into single-column layouts on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to create a subtle sense of depth against the dark background. The values are inferred based on standard dark-mode UI patterns.

*   `elevation.sm`: Used for subtle card lift.
*   `elevation.md`: Used for dropdowns and popover menus.
*   `elevation.lg`: Used for modal windows and drawer overlays.

## Shapes

The shape language balances technical precision with modern accessibility. Containers use a range of radii from `{rounded.sm}` to `{rounded.lg}` for cards, while interactive buttons often utilize `{rounded.full}` to distinguish them from structural elements.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds with `{colors.outline}` borders for secondary actions. They are designed to be `fit-content` and use `{typography.label-sm}` for clear, concise labeling.

### Card
Cards use `{colors.surface}` as a base with `{rounded.md}` corners and `{colors.outline}` borders. Elevated cards utilize `{colors.surface-container}` to create visual hierarchy within feature grids.

### Input Field
Inputs feature a `{colors.background}` fill with an `{colors.outline}` border. On focus, the border transitions to `{colors.focus-ring}` to ensure clear accessibility during interaction.

### Badge
Badges use `{colors.surface-container}` as a background and `{typography.label-sm}` for text. Semantic variants, such as `{badge-error}` and `{badge-success}`, provide immediate visual feedback on status.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use light backgrounds for the main page surface. |
| Use `{typography.body-md}` for all body copy. | Use serif fonts for body text. |
| Apply `{rounded.md}` to all card containers. | Use `{colors.error}` for non-critical UI elements. |
| Use `{colors.outline}` for all borders and dividers. | Mix rounded corners with sharp edges on the same component. |
| Maintain `{spacing.md}` between grid items. | Use `{typography.display-lg}` for body text. |
| Use `{typography.label-sm}` for small UI labels. | Use low-contrast text on `{colors.surface}`. |
| Use `{colors.focus-ring}` for active input states. | Use standard blue for non-interactive text. |
| Use `{colors.success}` for completed task states. | Use generic grey for success indicators. |

## Content Style

CTA labels are written as imperative verbs in sentence case, kept short and direct to maintain a high-velocity feel.

Headings are benefit-driven and technical, focusing on the specific capability or outcome the developer will achieve.

Copy density is low, utilizing short, scannable paragraphs and frequent code snippets to explain complex workflows quickly.

## Imagery & Icons

The imagery style is mixed, combining flat vector illustrations, logo grids, and code-block snippets. Iconography should be minimal and sharp, maintaining the technical aesthetic. Avoid decorative imagery that does not directly support the functional narrative of the platform.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Composio, a technical, developer-centric tool execution platform with a strict dark-mode, monospace aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.background}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font stacks.
2. Respect every component defined under `components:` exactly. Do not invent variants (e.g. a ghost button or pill input) that the spec does not list.
3. Follow the Layout section for page structure and responsive behavior: hero → clients → features → security → community → footer, mobile-first, single breakpoint at 768px.
4. Use the Elevation scale as scoped: `elevation.sm` for cards, `elevation.md` for dropdowns, `elevation.lg` for modals. Do not apply elevation arbitrarily.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use token names for every color, type, spacing, radius, and elevation value.
- Implement hover, focus, and disabled states for all interactive components where the spec defines them (e.g. `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{spacing.md}` as the default gap between grid items; use the full `{spacing.xs}`–`{spacing.2xl}` scale for all padding and layout rhythm.
- Write CTAs as short imperative verbs in sentence case, per the Content Style section.
- Use `{rounded.full}` for buttons and `{rounded.md}` for cards, consistent with the Shapes narrative.

**Must NOT:**
- Introduce any color, font, radius, or spacing value not present in the spec.
- Use generic utility defaults (e.g. `gray-500`, `rounded-md` as a literal string) when a named token exists.
- Use `{colors.error}` for non-critical elements or `{colors.focus-ring}` on non-interactive text.
- Add emoji, decorative imagery, or filler copy.
- Rewrite page copy, button labels, headings, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If a value is not in the spec, ask the user before inventing one.
- Tokens marked "(inferred)" are visual approximations; if an authoritative source (theme file, Storybook) exists, it takes precedence.
- For ambiguous backgrounds, default to `{colors.surface}` for containers and `{colors.background}` for the page base.
- Prefer composing existing components over introducing new tokens.
- For unspecified states or variants, surface the gap to the user rather than silently defaulting.