Typography
Base Font · abcDiatype (fallback: JetBrains Mono)
abcDiatype
The quick brown fox jumps over the lazy dog
Regular · 400
Medium · 500
Bold · 700
Mono Font · JetBrains Mono
JetBrains Mono
const result = await composio.tools.execute({ action: 'run' })
Regular · 400
Medium · 500
Display
font-size-64px · 64px · Bold · letter-spacing: −0.98px
Connect everything.
font-size-48px · 48px · Bold · letter-spacing: −0.98px
Build AI agents faster.
font-size-40px · 40px · Medium
Heading Level 2
font-size-28px · 28px · Medium
Heading Level 3
font-size-24px · 24px · Medium
Composio lets you build AI agents with 250+ integrations in minutes.
font-size-20px · 20px · Regular
Body text at 18px — used for primary reading content throughout the application.
font-size-18px · 18px · Regular
Default body copy — 16px size for standard interface text.
font-size-6xl · 16px · Regular
CAPTION · LABEL · MICRO COPY
font-size-4xl · 14px · Medium · letter-spacing: 0.7px
Letter Spacing
Tight Display
letter-spacing-tight
−0.98px · hero, display, large headings
Normal Heading
letter-spacing-normal
−0.32px · body, standard text
MICRO LABELS
letter-spacing-ls-11
0.7px · uppercase labels, captions
Spacing
Spacing Scale
28 tokens — 1px → 180px
Borders
Border Width
Hairline
1px — used universally
A single border width governs the entire design system. Applied to cards, inputs, dividers, table rows, badges, and all bordered elements via --border-width-hairline: 1px.
Shadows / Elevation
Shadow Tokens
4 levels — flat offset to ambient glow
shadow-sm
Hard offset shadow
rgba(0,0,0,0.15) 4px 4px 0px — brutalist, hard shadow effect
shadow-md
Raised surface
rgba(0,0,0,0.5) 0px 8px 32px — elevated panels, dropdowns
shadow-xl
Ambient glow
rgba(0,0,0,0.5) 0px 0px 40px — modals, overlays, top-level
Z-Index
| Layer | Value | Usage |
|---|
| z-1 · Base | 1 | Base content, default document flow |
| z-2 · Raised | 2 | Slightly elevated content layers |
| z-3 · Stack | 3 | Stacked UI elements |
| z-4 · Float | 5 | Floating elements, tooltips |
| z-5 · Nav | 10 | Sticky navigation, headers |
| z-6 · Overlay | 20 | Dropdowns, popovers, menus |
| z-7 · Top | 50 | Modals, toasts, critical UI |
Breakpoints
📐
No breakpoints defined
No breakpoint tokens extracted from the Composio design system. The system does not define explicit responsive breakpoints in its token set.
Opacity
Opacity Tokens
8 tokens — 0.35 → 0.92
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
| Text Token | Background Token | Ratio | WCAG Rating |
|---|
| --color-black | --color-white | 19.8:1 | AAA |
| --color-black | --color-black-2 | 1.06:1 | Fail |
| --color-black | --color-dark-gray-3 | 1.03:1 | Fail |
| --color-black | --color-white-2 | 18.32:1 | AAA |
| --color-black | --color-dark-gray-4 | 1.07:1 | Fail |
| --color-dark-gray | --color-white | 9.74:1 | AAA |
| --color-dark-gray | --color-black-2 | 2.16:1 | Fail |
| --color-dark-gray | --color-white-2 | 9.01:1 | AAA |
| --color-mid-gray | --color-white | 2.85:1 | Fail |
| --color-mid-gray | --color-black-2 | 7.37:1 | AAA |
| --color-mid-gray | --color-dark-gray-3 | 6.73:1 | AA |
| --color-mid-gray | --color-dark-gray-4 | 6.47:1 | AA |
| --color-light-gray-4 | --color-black-2 | 10.94:1 | AAA |
| --color-light-gray-4 | --color-dark-gray-3 | 9.98:1 | AAA |
| --color-light-gray-5 | --color-black-2 | 17.78:1 | AAA |
| --color-light-gray-5 | --color-dark-gray-3 | 16.23:1 | AAA |
| --color-light-gray-5 | --color-dark-gray-4 | 15.59:1 | AAA |
CSS Variables Reference
White--color-white#FFFFFF
White 2--color-white-2#F6F6F6
Black 2--color-black-2#000000
Dark Gray 3--color-dark-gray-3#0F0F0F
Dark Gray 9--color-dark-gray-9#111111
Dark Gray 4--color-dark-gray-4#141414
Dark Gray 5--color-dark-gray-5#1A1A1A
Dark Gray 7--color-dark-gray-7#1E1E1E
Dark Gray 8--color-dark-gray-8#2A2A2A
Dark Gray 6--color-dark-gray-6#333333
Green--color-green#05DF72
Blue 2 (tint)--color-blue-2rgba(0,137,255,.08)
Black (text)--color-black#0A0A0A
Dark Gray--color-dark-gray#444444
Mid Gray--color-mid-gray#999999
Light Gray 4--color-light-gray-4#BBBBBB
Light Gray 5--color-light-gray-5#ECECEC
Orange--color-orange#FC9800
Cyan 2--color-cyan-2#3FFFDD
Light Gray (border)--color-light-gray#E5E5E5
Light Gray 2--color-light-gray-2#E0E0E0
Light Gray 3--color-light-gray-3#DDDDDD
Dark Gray 2 (border)--color-dark-gray-2#2C2C2C
Mid Gray 2 (border)--color-mid-gray-2#818181
Base Font--font-family-baseabcDiatype
Mono Font--font-family-2JetBrains Mono
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
2xs--font-size-2xs5.5px
xs--font-size-xs7.5px
sm--font-size-sm8px
base--font-size-base9px
6xl (16)--font-size-6xl16px
18px--font-size-18px18px
24px--font-size-24px24px
40px--font-size-40px40px
48px--font-size-48px48px
64px--font-size-64px64px
Tight (−0.98px)--letter-spacing-tight−0.98px
Normal (−0.32px)--letter-spacing-normal−0.32px
Wide (0.7px)--letter-spacing-ls-110.7px
128 (48px)--space-12848px
160 (64px)--space-16064px
192 (72px)--space-19272px
28 (160px)--space-28160px
Hairline--border-width-hairline1px
SM (asymmetric)--radius-sm0 2px 2px 0
LG (asymmetric)--radius-lg2px 0 0 2px
Instant--duration-instant150ms
Fast--duration-fast200ms
Normal--duration-normal300ms
Slow--duration-slow500ms
Base--z-11
Raised--z-22
Stack--z-33
Float--z-45
Navigation--z-510
Overlay--z-620
Top Layer--z-750
Design System Preview · Composio · Generated 15/04/2026 · 51 color tokens · 18 font-size · 4 font-family · 3 font-weight · 23 line-height · 11 letter-spacing · 28 spacing · 8 radius · 1 border-width · 4 shadow · 4 duration · 7 z-index · 8 opacity