Composio

version: alpha name: Composio-design-analysis 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

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 是 Lineto 授权字体。开源替代：Inter 字重 500，字距 -1.5%。

布局

间距系统

• 基础单位： 4px。
• Token： {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。
• 章节内边距： 主章节用 {spacing.section}（96px）。

网格与容器

• 最大内容宽：~1200px。
• 编辑正文：12 栏网格。
• 终端 mockup 网格：2×2 等大面板。
• 工具集栅格：桌面 4 栏、平板 2 栏、手机 1 栏。
• 页脚：桌面 5 栏。

留白哲学

深色画布自带深度 —— 留白可以紧凑而不显拥挤。章节间 96px；带内卡片间 24px。

层次与深度

系统使用亮度阶梯式层次：表面按亮度逐级上升，而不是投影。结合克制的径向蓝色辉光，营造聚焦的暗色氛围。

装饰性深度

• 聚光辉光背景 —— 居中于 hero 内容后的径向蓝色渐变。
• 终端面板亮度阶梯 —— 2×2 mockup 使用外层 canvas-deep + 浮起 surface-card-elevated 面板。

形状

圆角等级

紧凑的开发者人体工学圆角 —— 8px CTA、12-16px 卡片。传达"开发者工具"而非"消费品牌"。

组件

顶部导航

top-nav-dark —— 默认顶栏。底色 {colors.canvas}，文字 {colors.body-strong}，高 64px。布局：左侧 Composio 字标、中左主菜单（Product / Toolkits / Docs / Pricing / Customers / Blog）、右侧 GitHub stars + Sign In + "Get started"。

按钮

button-primary —— 标志性 Composio Blue CTA。底色 {colors.primary}，文字 {colors.on-primary}，字体 {typography.button}（14px / 500），内边距 10px × 18px，高 40px，圆角 {rounded.md}（8px）。

button-primary-active —— 按下态。底色 {colors.primary-active}。

button-secondary-dark —— 浮起表面的次按钮。底色 {colors.surface-card-elevated}，文字 {colors.body-strong}。

button-outline —— 透明带 1px hairline-strong 边框。

button-tertiary-text —— 行内文字链接。

Hero 与氛围

hero-band —— 首页 hero。底色 {colors.canvas}，满版展示标题用 {typography.display-mega}（72px / 500），副标题、两个 CTA，以及从居中终端 mockup 网格后发出的聚光辉光背景。

terminal-mockup-grid —— 品牌最强的视觉标志。2×2 暗色代码/输出面板，包裹在 {rounded.xl}（16px）容器中。底色 {colors.canvas-deep}，内边距 32px，间距 16px。

terminal-pane —— mockup 网格中的单个代码/输出面板。底色 {colors.surface-card}，文字 {colors.body} 用 {typography.code}，圆角 {rounded.lg}（12px），内边距 20px。

spotlight-glow-card —— 大型功能卡，居中展示标题，背后有径向蓝色辉光。底色 {colors.surface-card}，文字 {colors.body-strong} 用 {typography.display-md}，圆角 {rounded.xl}，内边距 48px。

卡片

feature-card —— 3 栏收益栅格。底色 {colors.surface-card}，文字 {colors.body}，字体 {typography.title-md}，圆角 {rounded.xl}，内边距 28px。

toolkit-card —— 4 栏工具集栅格（Slack、GitHub、Stripe、Notion、Linear 等）。底色 {colors.surface-card}，文字 {colors.body-strong}，字体 {typography.title-sm}，圆角 {rounded.lg}，内边距 20px。顶部 40px 方形 {component.toolkit-icon}、工具集名、一行描述。

toolkit-icon —— 方形图标底板。底色 {colors.surface-card-elevated}，圆角 {rounded.md}，40px 尺寸。

testimonial-card —— 引言卡。底色 {colors.surface-card}，文字 {colors.body}，圆角 {rounded.lg}，内边距 24px。

代码

code-block —— 行内代码/终端块。底色 {colors.canvas-deep}，文字 {colors.body} 用 {typography.code}，圆角 {rounded.lg}，内边距 20px。

表单

text-input —— 底色 {colors.surface-card}，文字 {colors.body-strong}，圆角 {rounded.md}（8px），内边距 12px × 16px，高 44px。

search-input —— 紧凑搜索框。同一表面与圆角，更小内边距，40px 高。

标签与徽标

badge-pill —— 小型大写胶囊。底色 {colors.surface-card-elevated}，文字 {colors.body-strong}，字体 {typography.caption-uppercase}，圆角 {rounded.pill}，内边距 4px × 10px。

CTA / 页脚

cta-band-spotlight —— 页脚前色带。底色 {colors.canvas}，居中径向聚光辉光。展示标题 + 单一主 CTA 胶囊。96px 内边距。

footer-dark —— 收尾页脚。底色 {colors.canvas}，文字 {colors.body}。5 栏链接列表。64×48px 内边距。

footer-link —— 底色透明，文字 {colors.body}，字体 {typography.body-sm}。

推荐与避免

推荐

• 把 {colors.primary} 留给主 CTA、字标和聚光辉光。
• 每个 CTA 用 {rounded.md}（8px）—— 不要用完整胶囊。
• 层次用亮度阶梯；避免投影。
• 每个 hero 配居中的径向蓝色聚光辉光。
• 在 JetBrains Mono 中通过 {typography.code} 渲染代码、CLI 命令。
• 用 2×2 终端 mockup 网格作为首页 hero 锚点。

避免

• 不要引入第二种品牌色。青色与紫色仅作示意。
• CTA 不要用完整胶囊。
• 不要把展示字重降到 400。
• 不要增加投影等级。
• 不要在终端/代码表面之外使用 canvas-deep（#000000）。
• 不要从第三方 widget（cookie 同意、OneTrust）抽取 CTA 色。品牌的 CTA 色是页面上实际 CTA 出现的色。

响应式行为

断点

触控目标

• 主 CTA 40px 高 —— 达 WCAG AA，加内边距可达 AAA。
• 搜索输入 40px。

折叠策略

• 顶栏在 768px 以下切为汉堡菜单。
• 终端 mockup 2×2 网格在手机上折为单面板。
• 工具集栅格：4 栏 → 2 栏 → 1 栏。
• Hero 聚光辉光在各断点保持。

迭代指南

1. 一次专注一个组件。
2. CTA 默认 {rounded.md}（8px）。卡片用 {rounded.lg} 或 {rounded.xl}。
3. 变体作为独立条目存在于 components: 内。
4. 始终用 {token.refs} —— 绝不内联 hex。
5. 悬停态永不入文档。
6. abcDiatype 500 用于展示，400/600 用于正文。所有代码表面用 JetBrains Mono。
7. Composio Blue 保持稀缺。

已知缺口

• abcDiatype 是授权字体；Inter 是替代。
• 动效时长不在范围内。
• 产品内表面（工具集仪表盘、agent playground）在登录墙后。
• 超出聚焦态的表单校验态在截取表面上不可见。