Composio Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

22tokens

10type steps

6radius steps

4pxspacing base

Composio, in one page

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.

Do's and don'ts

Do

Reserve {colors.primary} for primary CTAs, wordmark, and spotlight glows.
Use {rounded.md} (8px) for every CTA — not full pills.
Use brightness-step ladder for elevation; avoid drop shadows.
Pair every hero with a centered radial blue spotlight glow.
Render code, CLI commands in JetBrains Mono via {typography.code}.
Use the 2×2 terminal-mockup grid as the homepage hero anchor.

Don't

Don't introduce a secondary brand color. Cyan and violet are illustrative-only.
Don't use full pills on CTAs.
Don't drop display weight to 400.
Don't add drop shadow tiers.
Don't use canvas-deep (#000000) outside terminal/code surfaces.
Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual page CTAs.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Composio design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #0007cd
- primary-active: #0005a3
- primary-glow: #1a26ff
- ink: #ffffff
- body: #a8a8a8
- body-strong: #ffffff
- muted: #888888
- muted-soft: #666666
- hairline: #222222
- hairline-soft: #1a1a1a

Type:
- families: abcDiatype, ui-sans-serif, JetBrains Mono, Fira Code
- scale: 11, 13, 14, 16, 18, 24, 32, 44, 56
- weights: 400, 500, 600

Shape:
- radius: 0, 4, 6, 8, 12, 16
- elevation: Don't add drop shadow tiers.

Spacing: 4, 8, 10, 12, 16, 20, 24, 28, 32, 48

Rules:
- Reserve `{colors.primary}` for primary CTAs, wordmark, and spotlight glows.
- Use `{rounded.md}` (8px) for every CTA — not full pills.
- Use brightness-step ladder for elevation; avoid drop shadows.
- Pair every hero with a centered radial blue spotlight glow.
- Render code, CLI commands in JetBrains Mono via `{typography.code}`.
- Use the 2×2 terminal-mockup grid as the homepage hero anchor.

Avoid:
- Don't introduce a secondary brand color. Cyan and violet are illustrative-only.
- Don't use full pills on CTAs.
- Don't drop display weight to 400.
- Don't add drop shadow tiers.
- Don't use canvas-deep (#000000) outside terminal/code surfaces.
- Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual page CTAs.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Composio Blue ({colors.primary} — #0007cd): Primary CTAs, wordmark, spotlight glow center.
Composio Blue Active ({colors.primary-active} — #0005a3): Press state.
Spotlight Glow Tone ({colors.primary-glow} — #1a26ff): Brighter blue used inside radial atmospheric glows.
Accent Cyan ({colors.accent-cyan} — #00d4ff): Sparingly on data-flow visualizations.
Accent Violet ({colors.accent-violet} — #7b3aed): Inside specific product illustrations only.

Surface

Canvas ({colors.canvas} — #0f0f0f): Page floor — near-black.
Canvas Deep ({colors.canvas-deep} — #000000): Pure black for terminal mockup grids and code blocks.
Surface Card ({colors.surface-card} — #181818): Default content card.
Surface Card Elevated ({colors.surface-card-elevated} — #222222): Terminal panes, secondary buttons.
Surface Strong ({colors.surface-strong} — #2a2a2a): Dropdown menus.

Hairlines

Hairline ({colors.hairline} — #222222): Default 1px divider.
Hairline Soft ({colors.hairline-soft} — #1a1a1a): Lighter divider.
Hairline Strong ({colors.hairline-strong} — #333333): Stronger panel outline.

Text

Ink ({colors.ink} — #ffffff): Display headlines.
Body ({colors.body} — #a8a8a8): Default running-text — soft gray.
Body Strong ({colors.body-strong} — #ffffff): Same as ink.
Muted ({colors.muted} — #888888): Sub-titles, breadcrumbs.
Muted Soft ({colors.muted-soft} — #666666): Disabled text.
On Primary ({colors.on-primary} — #ffffff): White text on blue CTAs.

Semantic

Success ({colors.semantic-success} — #33d17a): "Online", "active" indicators.
Error ({colors.semantic-error} — #ff4d4d): Validation errors.

Type scaleRead the full spec

Font Family

The system runs abcDiatype (Lineto) across every text role. Code blocks switch to JetBrains Mono. Fallback: ui-sans-serif, system-ui, sans-serif.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-mega}`	72px	500	1.05	-2.16px	Homepage hero h1
`{typography.display-xl}`	56px	500	1.05	-1.68px	Subsidiary heroes
`{typography.display-lg}`	44px	500	1.1	-1.32px	Section heads
`{typography.display-md}`	32px	500	1.15	-0.96px	Sub-section heads
`{typography.display-sm}`	24px	500	1.25	-0.5px	Card group titles
`{typography.title-md}`	18px	600	1.4	0	Component titles
`{typography.title-sm}`	16px	600	1.4	0	Toolkit card titles
`{typography.body-md}`	16px	400	1.5	0	Default body
`{typography.body-sm}`	14px	400	1.5	0	Footer body
`{typography.caption}`	13px	400	1.4	0	Photo captions
`{typography.caption-uppercase}`	11px	600	1.4	0.88px	Section labels, badge pills
`{typography.code}`	13px	400	1.5	0	Code blocks — JetBrains Mono
`{typography.button}`	14px	500	1.0	0	CTA pill labels
`{typography.nav-link}`	14px	500	1.4	0	Top-nav menu

Principles

Display weight stays at 500. Confident but not display-bold.
abcDiatype across every role. No display/body family split.
JetBrains Mono on every code surface.

Note on Font Substitutes

abcDiatype is a Lineto licensed typeface. Open-source substitute: Inter at weight 500 with letter-spacing -1.5%.

Components and layoutRead the full spec

Top Navigation

top-nav-dark — Default top nav. Background {colors.canvas}, text {colors.body-strong}, height 64px. Layout: Composio wordmark left, primary horizontal menu (Product / Toolkits / Docs / Pricing / Customers / Blog), GitHub stars + Sign In + "Get started" right.

Buttons

button-primary — The signature Composio Blue CTA. Background {colors.primary}, text {colors.on-primary}, type {typography.button} (14px / 500), padding 10px × 18px, height 40px, rounded {rounded.md} (8px).

button-primary-active — Press state. Background {colors.primary-active}.

button-secondary-dark — Surface-elevated secondary. Background {colors.surface-card-elevated}, text {colors.body-strong}.

button-outline — Transparent with 1px hairline-strong border.

button-tertiary-text — Inline text link.

Hero & Atmospheric

hero-band — Homepage hero. Background {colors.canvas}, full-width display headline in {typography.display-mega} (72px / 500), subhead, two CTAs, and a spotlight-glow backdrop emanating from behind the centered terminal-mockup grid.

terminal-mockup-grid — The brand's strongest visual signature. 2×2 grid of dark code/output panels inside a {rounded.xl} (16px) container. Background {colors.canvas-deep}, padding 32px, gap 16px.

terminal-pane — Individual code/output panel inside the mockup grid. Background {colors.surface-card}, text {colors.body} in {typography.code}, rounded {rounded.lg} (12px), padding 20px.

spotlight-glow-card — Large feature card with centered display headline and a radial blue glow behind it. Background {colors.surface-card}, text {colors.body-strong} in {typography.display-md}, rounded {rounded.xl}, padding 48px.

Cards

feature-card — 3-up benefit grid. Background {colors.surface-card}, text {colors.body}, type {typography.title-md}, rounded {rounded.xl}, padding 28px.

toolkit-card — 4-up toolkit grid (Slack, GitHub, Stripe, Notion, Linear, etc.). Background {colors.surface-card}, text {colors.body-strong}, type {typography.title-sm}, rounded {rounded.lg}, padding 20px. 40px square {component.toolkit-icon} top, toolkit name, one-line description.

toolkit-icon — Square icon plate. Background {colors.surface-card-elevated}, rounded {rounded.md}, 40px size.

testimonial-card — Quote card. Background {colors.surface-card}, text {colors.body}, rounded {rounded.lg}, padding 24px.

Code

code-block — Inline code/terminal block. Background {colors.canvas-deep}, text {colors.body} in {typography.code}, rounded {rounded.lg}, padding 20px.

Forms

text-input — Background {colors.surface-card}, text {colors.body-strong}, rounded {rounded.md} (8px), padding 12px × 16px, height 44px.

search-input — Compact search field. Same surface and radius, smaller padding, 40px height.

Tags & Badges

badge-pill — Small uppercase pill. Background {colors.surface-card-elevated}, text {colors.body-strong}, type {typography.caption-uppercase}, rounded {rounded.pill}, padding 4px × 10px.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Mobile	< 640px	Hero h1 72→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger.
Tablet	640–1024px	Hero h1 56px; terminal mockup grid stays 2×2; toolkit grid 2-up.
Desktop	1024–1280px	Full hero h1 72px; full 2×2 terminal mockup; toolkit grid 4-up.
Wide	> 1280px	Content caps at 1200px.

Touch Targets

Primary CTA at 40px height — at WCAG AA, padded for AAA.
Search input at 40px.

Collapsing Strategy

Top nav switches to hamburger below 768px.
Terminal mockup 2×2 grid collapses to a single pane on mobile.
Toolkit grid: 4-up → 2-up → 1-up.
Hero spotlight glow stays at every breakpoint.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-composio {--page-bg: #0f0f0f;
  --page-bg-gradient: none;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --link-color: #6e75ff;
  --link-hover-color: #3b44ff;
  --border-color: #3a3a3a;
  --card-bg: #0f0f0f;
  --card-shadow: 0 1px 2px rgba(255,255,255,0.06);
  --card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
  --header-bg: #222222;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #0f0f0f;
  --footer-text-color: #ababab;
  --button-bg: #0007cd;
  --button-text-color: #ffffff;
  --button-hover-bg: #00059a;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #1d1d1d;
  --button-secondary-text-color: #ffffff;
  --button-secondary-hover-bg: #2c2c2c;
  --button-secondary-border: 1px solid #3a3a3a;
  --prompt-bg: #1b1b1b;
  --prompt-text-color: #ffffff;
  --base-font: var(--font-serif);
  --heading-font: var(--font-mono);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

expo 82.7%
hp 80.5%
resend 79.1%
cal 78.2%
bmw m 77.9%

Where this came from

Source document: volt/design-md/composio/DESIGN.md · 20.0 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.