Design System Preview:
Composio

Auto-generated design token catalog from DESIGN.md

01 / Color Palette

Color Palette & Roles

Primary

Composio Cobalt
#0007cd
Core brand color for high-priority interactive elements

Secondary & Accent

Electric Cyan
#00ffff
Attention-grabbing accent for glows and highlights
Signal Blue
#0089ff
Button borders and interactive focus states
Ocean Blue
#0096ff
CTA button accent borders

Surface & Background

Void Black
#0f0f0f
Primary page background
Pure Black
#000000
Card interiors and deep-nested containers
Charcoal
#2c2c2c
Secondary button borders and dividers

Neutrals & Text

Pure White
#ffffff
Primary headings and high-emphasis text
Muted Smoke
#444444
De-emphasized body text, metadata
Ghost White
rgba(255,255,255,0.6)
Secondary body text and link labels
Whisper White
rgba(255,255,255,0.5)
Tertiary button text and placeholders
Phantom White
rgba(255,255,255,0.2)
Subtle button backgrounds and receded UI

Border System

Border Mist 12
rgba(255,255,255,0.12)
Prominent card edges, content separators
Border Mist 10
rgba(255,255,255,0.10)
Standard container borders
Border Mist 06
rgba(255,255,255,0.06)
Section dividers, subtle groupings
Border Mist 04
rgba(255,255,255,0.04)
Faintest atmospheric separation
02 / Typography Scale

Typography Rules

Display Hero
Display / Hero — 64px / 400 / 0.87 / normal — abcDiatype
Section Heading
Section Heading — 48px / 400 / 1.00 / normal — abcDiatype
Sub-heading Large
Sub-heading Large — 40px / 400 / 1.00 / normal — abcDiatype
Sub-heading
Sub-heading — 28px / 400 / 1.20 / normal — abcDiatype
Card Title
Card Title — 24px / 500 / 1.20 / normal — abcDiatype
Feature Label
Feature Label — 20px / 500 / 1.20 / normal — abcDiatype
Body Large
Body Large — 18px / 400 / 1.20 / normal — abcDiatype
Body / Button Text
Body / Button — 16px / 400 / 1.50 / normal — abcDiatype
Body Small — used for longer-form content blocks
Body Small — 15px / 400 / 1.63 / normal — abcDiatype
Caption text for descriptions and metadata
Caption — 14px / 400 / 1.63 / normal — abcDiatype
Label Text
Label — 13px / 500 / 1.50 / normal — abcDiatype
TAG / OVERLINE
Tag / Overline — 12px / 500 / 1.00 / 0.3px / uppercase — abcDiatype
const agent = composio.create({ tools: ["github", "slack"] })
Code Body — 16px / 400 / 1.50 / -0.32px — JetBrains Mono
npx composio-cli init --framework langchain
Code Small — 14px / 400 / 1.50 / -0.28px — JetBrains Mono
import { Composio } from "composio-core"
Code Caption — 12px / 400 / 1.50 / -0.28px — JetBrains Mono
CODE OVERLINE
Code Overline — 14px / 400 / 1.43 / 0.7px / uppercase — JetBrains Mono
CODE MICRO TAG
Code Micro — 11px / 400 / 1.33 / 0.55px / uppercase — JetBrains Mono
03 / Button Variants

Buttons

Primary / White Fill
Cyan Accent CTA
Ghost / Signal Blue
Ghost / Charcoal
Phantom
04 / Card Examples

Cards & Containers

Standard Card

Border Mist 10

Standard content card with subtle white border at 10% opacity and 4px radius. The default container for most content blocks.

Brutalist Shadow

Hard Offset 4px

Distinctive hard-offset shadow (4px right, 4px down) at 15% opacity. Adds a raw, retro-computing personality to select elements.

Floating + Glow

Cyan Glow Halo

Soft diffuse shadow (8px 32px) with a radial cyan gradient halo. Used for highest-emphasis elevated content and feature highlights.

05 / Form Elements

Inputs & Forms

Invalid API key format
06 / Spacing Scale

Spacing System

Base unit: 8px. Scale builds from 1px to 40px.

1px
2px
4px
6px
8px
10px
12px
14px
16px
18px
20px
24px
30px
32px
40px
07 / Border Radius Scale

Border Radius

0px
Sharp / None
2px
Nearly squared
4px
Subtly rounded
37px
Pill-shaped
9999px
Full round
08 / Elevation & Depth

Depth & Elevation

Flat
No shadow, no border. Page background and inline text.
Level 0
Contained
Border Mist 04-08. Background groupings, subtle sections.
Level 1
Card
Border Mist 10-12. Standard content cards, code blocks.
Level 2
Brutalist
Hard offset shadow (4px 4px, 15% black). Distinctive feature highlights.
Level 3
Floating
Soft diffuse shadow (0px 8px 32px, 50% black). Modals, overlays.
Level 4