Composio

version alpha

name Composio

description A developer-tools brand for AI-agent tool integration whose marketing surfaces lean into a dark, technical aesthetic with a single deep-electric-blue voltage (

#0007cd

). The page floor is near-black (

#0f0f0f

); cards float above on subtle gray-tinted surfaces. abcDiatype carries display and body in a single sans family with weights 400-600. 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 — used as the homepage hero anchor.

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" hairline-strong: "#333333" canvas: "#0f0f0f" canvas-deep: "#000000" surface-card: "#181818" surface-card-elevated: "#222222" surface-strong: "#2a2a2a" on-primary: "#ffffff" on-dark: "#ffffff" accent-cyan: "#00d4ff" accent-violet: "#7b3aed" semantic-error: "#ff4d4d" semantic-success: "#33d17a"

typography display-mega: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 72px fontWeight: 500 lineHeight: 1.05 letterSpacing: -2.16px display-xl: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 56px fontWeight: 500 lineHeight: 1.05 letterSpacing: -1.68px display-lg: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 44px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.32px display-md: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.96px display-sm: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.5px title-md: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.88px textTransform: uppercase code: fontFamily: "'JetBrains Mono', 'Fira Code', monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 nav-link: fontFamily: "'abcDiatype', ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded none: 0px xs: 4px sm: 6px md: 8px lg: 12px xl: 16px pill: 9999px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px base: 16px md: 20px lg: 24px xl: 32px xxl: 48px section: 96px

components top-nav-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.body-strong}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-secondary-dark: backgroundColor: "{colors.surface-card-elevated}" textColor: "{colors.body-strong}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 18px height: 40px button-outline: backgroundColor: transparent textColor: "{colors.body-strong}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 9px 17px height: 40px button-tertiary-text: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.button}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.body-strong}" typography: "{typography.display-mega}" padding: 96px terminal-mockup-grid: backgroundColor: "{colors.canvas-deep}" textColor: "{colors.body-strong}" typography: "{typography.code}" rounded: "{rounded.xl}" padding: 32px terminal-pane: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 20px feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 28px toolkit-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body-strong}" typography: "{typography.title-sm}" rounded: "{rounded.lg}" padding: 20px toolkit-icon: backgroundColor: "{colors.surface-card-elevated}" rounded: "{rounded.md}" size: 40px spotlight-glow-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body-strong}" typography: "{typography.display-md}" rounded: "{rounded.xl}" padding: 48px code-block: backgroundColor: "{colors.canvas-deep}" textColor: "{colors.body}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 20px badge-pill: backgroundColor: "{colors.surface-card-elevated}" textColor: "{colors.body-strong}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.body-strong}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 44px search-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.body-strong}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 10px 16px height: 40px cta-band-spotlight: backgroundColor: "{colors.canvas}" textColor: "{colors.body-strong}" typography: "{typography.display-lg}" padding: 96px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px footer-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px 48px footer-link: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.body-sm}"

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.

Colors

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.

Typography

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%.

Layout

Spacing System

• Base unit: 4px.

• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.

• Section padding: {spacing.section} (96px) for major bands.

Grid & Container

• Max content width: ~1200px.

• Editorial body: 12-column grid.

• Terminal mockup grid: 2×2 equal-size panes.

• Toolkit grid: 4-up at desktop, 2-up tablet, 1-up mobile.

• Footer: 5-column at desktop.

Whitespace Philosophy

The dark canvas creates its own depth — whitespace can stay tight without feeling crowded. 96px between bands; 24px between cards inside a band.

Elevation & Depth

The system uses brightness-step elevation: surfaces step up in brightnes