Composio

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 brightness instead of casting drop shadows. Combined with subtle radial blue glows, this creates a focused dark-mode atmosphere.

| Level | Treatment | Use |

|---|---|---|

| Flat (canvas) | `{colors.canvas}` (#0f0f0f) | Body bands, footer |

| Recessed | `{colors.canvas-deep}` (#000000) | Terminal mockup grid background, code blocks |

| Card | `{colors.surface-card}` (#181818) | Default content cards |

| Card elevated | `{colors.surface-card-elevated}` (#222222) | Terminal panes, secondary buttons |

| Atmospheric glow | Radial gradient using `{colors.primary-glow}` | Hero spotlight backdrop |

Decorative Depth

• **Spotlight glow backdrops** — radial blue gradient centered behind hero content.
• **Terminal-pane brightness ladder** — 2×2 mockup uses canvas-deep outer + surface-card-elevated panes.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Reserved |

| `{rounded.xs}` | 4px | Inline tags |

| `{rounded.sm}` | 6px | Compact rows |

| `{rounded.md}` | 8px | CTA buttons, form inputs |

| `{rounded.lg}` | 12px | Toolkit cards, code blocks, terminal panes |

| `{rounded.xl}` | 16px | Feature cards, terminal mockup grids |

| `{rounded.pill}` | 9999px | Section-label badges |

| `{rounded.full}` | 9999px | Avatar plates (rare) |

Compact developer-ergonomic radii — 8px CTAs, 12-16px cards. Signals "developer tool" rather than "consumer brand."

Components

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.

CTA / Footer

**`cta-band-spotlight`** — Pre-footer band. Background `{colors.canvas}` with centered radial spotlight glow. Display headline + single primary CTA pill. 96px padding.

**`footer-dark`** — Closing footer. Background `{colors.canvas}`, text `{colors.body}`. 5-column link list. 64×48px padding.

**`footer-link`** — Background transparent, text `{colors.body}`, type `{typography.body-sm}`.

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.

Responsive Behavior

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.

Iteration Guide

1. Focus on a single component at a time.

2. CTAs default to `{rounded.md}` (8px). Cards use `{rounded.lg}` or `{rounded.xl}`.

3. Variants live as separate entries inside `components:`.

4. Use `{token.refs}` everywhere — never inline hex.

5. Hover state never documented.

6. abcDiatype 500 for display, 400/600 for body. JetBrains Mono on every code surface.

7. Composio Blue stays scarce.

Known Gaps

• abcDiatype is licensed; Inter is the substitute.
• Animation timings out of scope.
• In-product surfaces (toolkit dashboards, agent playground) are behind login walls.
• Form validation states beyond focus not visible on captured surfaces.

개요

Composio의 마케팅 사이트는 심각한 개발자 인프라 브랜드처럼 읽혀집니다. 일반적인 AI 도구 스타트업보다는 분위기 면에서 Vercel 또는 Stripe Docs에 더 가깝습니다. 기본 캔버스는 흰색 문자와 **짙은 일렉트릭 블루**(`` — #0007cd)의 단일 전압을 포함하는 검정색에 가까운 ``(#0f0f0f)으로 모든 기본 CTA, 브랜드 워드마크 및 홈페이지 영웅을 뒷받침하는 대기 스포트라이트 글로우를 담고 있습니다.

Type은 디스플레이, 본문, 탐색 및 캡션 전반에 걸쳐 단일 산세 계열로 **abcDiatype**을 실행합니다. 디스플레이의 무게는 500입니다. 자신감은 있지만 과격하지는 않습니다. 코드 블록 및 터미널 모형이 JetBrains Mono로 전환됩니다.

페이지 리듬은 단일체입니다. 위에서 아래로 어두운 캔버스가 있고 카드 표면을 통해 미묘한 상승 단계가 있습니다. 브랜드의 가장 강력한 시각적 특징은 **4창 터미널 스타일 모형**입니다. 2×2 그리드의 어두운 코드/출력 패널과 그 뒤에 중앙 파란색 스포트라이트가 빛납니다.

**주요 특성:**

• 단일 악센트: 기본 CTA, 워드마크, 스포트라이트 글로우의 경우 ``(#0007cd).
• 단일 산세 제품군: abcDiatype은 코드(JetBrains Mono)를 제외한 모든 것을 전달합니다.
• 어두운 모놀리식 캔버스: ``는 위에서 아래로 실행됩니다. `` 및 `` 밝기 단계의 깊이.
• 터미널 모형 영웅: 2×2 코드/출력 창 그리드가 브랜드 시그니처입니다.
• 컴팩트한 알약 형상: CTA는 전체 알약이 아닌 ``(8px)에 위치합니다. — 개발자 도구 방식입니다.
• 스포트라이트 글로우 대기 배경: 히어로 콘텐츠 뒤 중앙에 방사형 파란색 글로우가 있습니다.
• 96px 섹션 리듬.

색상

브랜드 및 액센트

• **컴포지오 블루**(`` — #0007cd): 기본 CTA, 워드마크, 스포트라이트 글로우 센터.
• **Composio Blue Active** (`` — #0005a3): 프레스 상태.
• **스포트라이트 발광 톤**(`` — #1a26ff): 방사형 대기 광선 내부에 사용되는 더 밝은 파란색.
• **액센트 청록색**(`` — #00d4ff): 데이터 흐름 시각화에 드물게 사용됩니다.
• **액센트 바이올렛** (`` — #7b3aed): 특정 제품 그림 내부에만 해당.

표면

• **캔버스** (`` — #0f0f0f): 페이지 바닥 — 검정색에 가깝습니다.
• **캔버스 딥**(`` — #000000): 터미널 모형 그리드 및 코드 블록을 위한 순수한 검정색.
• **표면 카드**(`` — #181818): 기본 콘텐츠 카드.
• **Surface Card Elevated** (`` — #222222): 터미널 창, 보조 버튼.
• **표면 강화**(`` — #2a2a2a): 드롭다운 메뉴.

헤어라인

• **가는 선** (`` — #222222): 기본 1px 구분선.
• **헤어라인 소프트**(`` — #1a1a1a): 더 가벼운 칸막이.
• **가는 선 강함** (`` — #333333): 패널 윤곽선이 더 강해졌습니다.

텍스트

• **잉크** (`` — #ffffff): 헤드라인을 표시합니다.
• **본문**(`` — #a8a8a8): 기본 실행 텍스트 — 부드러운 회색.
• **바디 스트롱**(`` — #ffffff): 잉크와 동일합니다.
• **음소거됨**(`` — #888888): 부제목, 탐색경로.
• **음소거 소프트**(`` — #666666): 비활성화된 텍스트.
• **기본**(`` — #ffffff): 파란색 CTA에 흰색 텍스트.

의미

• **성공** (`` — #33d17a): "온라인", "활성" 표시기.
• **오류**(`` — #ff4d4d): 유효성 검사 오류.

타이포그래피

글꼴군

시스템은 모든 텍스트 역할에서 **abcDiatype**(Lineto)을 실행합니다. 코드 블록은 **JetBrains Mono**로 전환됩니다. 대체: `ui-sans-serif, system-ui, sans-serif`.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

|---|---|---|---|---|---|

| _`` | 72px | 500 | 1.05 | -2.16px | 홈페이지 히어로 h1 |

| _`` | 56px | 500 | 1.05 | -1.68px | 자회사 영웅 |

| _`` | 44px | 500 | 1.1 | -1.32px | 섹션 헤드 |

| _`` | 32px | 500 | 1.15 | -0.96px | 하위 섹션 머리 |

| _`` | 24px | 500 | 1.25 | -0.5px | 카드 그룹 제목 |

| _`` | 18px | 600 | 1.4 | 0 | 구성요소 제목 |

| _`` | 16px | 600 | 1.4 | 0 | 툴킷 카드 제목 |

| _`` | 16px | 400 | 1.5 | 0 | 기본 본문 |

| _`` | 14px | 400 | 1.5 | 0 | 바닥글 본문 |

| _`` | 13px | 400 | 1.4 | 0 | 사진 캡션 |

| _`` | 11px | 600 | 1.4 | 0.88px | 섹션 라벨, 배지 알약 |

| _`` | 13px | 400 | 1.5 | 0 | 코드 블록 — JetBrains Mono |

| _`` | 14px | 500 | 1.0 | 0 | CTA 알약 라벨 |

| _`` | 14px | 500 | 1.4 | 0 | 상단 탐색 메뉴 |

원칙

• **디스플레이 가중치는 500으로 유지됩니다.** 자신감이 있지만 굵게 표시되지는 않습니다.
• _**모든 역할에 걸쳐 abcDiatype이 적용됩니다.** 디스플레이/본체 계열이 분할되지 않습니다.
• **모든 코드 표면에 JetBrains Mono가 있습니다.**

글꼴 대체에 대한 참고사항

abcDiatype은 Lineto 라이선스 서체입니다. 오픈 소스 대체: **Inter** 가중치 500, 문자 간격 -1.5%.

레이아웃

간격 시스템

• **기본 단위:** 4px.
• **토큰:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **섹션 패딩:** 주요 밴드의 경우 ``(96px).

그리드 및 컨테이너

• 최대 콘텐츠 너비: ~1200px.
• 편집 본문: 12열 그리드.
• 터미널 모형 그리드: 2×2 동일한 크기 창.
• 툴킷 그리드: 데스크탑의 4-up, 태블릿의 2-up, 모바일의 1-up.
• 바닥글: 데스크탑의 5열.

공백 철학

어두운 캔버스는 고유한 깊이를 만들어냅니다. 공백은 혼잡한 느낌 없이 촘촘하게 유지될 수 있습니다. 밴드 간 96px; 밴드 내부 카드 간 24px.

고도 및 깊이

시스템은 **밝기 단계 상승**을 사용합니다. 즉, 그림자를 드리우는 대신 표면의 밝기가 한 단계 높아집니다. 은은한 방사형 파란색 광선과 결합되어 집중된 다크 모드 분위기를 연출합니다.

| 레벨 | 치료 | |

사용

|---|---|---|

| 플랫(캔버스) | `` (#0f0f0f) | 바디 밴드, 바닥글 |

| 최근 | `` (#000000) | 터미널 모형 그리드 배경, 코드 블록 |

| 카드 | `` (#181818) | 기본 콘텐츠 카드 |

| 카드 승격 | _`` (#222222) | 터미널 창, 보조 버튼 |

| 대기의 빛 | ``을 사용한 방사형 그래디언트 | 영웅 스포트라이트 배경 |

장식적 깊이

• **스포트라이트 글로우 배경** — 히어로 콘텐츠 뒤 중앙에 방사형 파란색 그라데이션이 배치됩니다.
• **터미널 창 밝기 사다리** — 2×2 모형은 캔버스 깊이 외부 + 표면 카드 상승 창을 사용합니다.

도형

경계 반경 배율

| 토큰 | 가치 | |

사용

|---|---|---|

| _`` | 0픽셀 | 예약됨 |

| _`` | 4픽셀 | 인라인 태그 |

| _`` | 6픽셀 | 압축 행 |

| _`` | 8픽셀 | CTA 버튼, 양식 입력 |

| _`` | 12px | 툴킷 카드, 코드 블록, 터미널 창 |

| _`` | 16px | 기능 카드, 터미널 모형 그리드 |

| _`` | 9999px | 섹션 라벨 배지 |

| _`` | 9999px | 아바타 플레이트(희귀) |

개발자를 위한 컴팩트한 인체공학적 반경 — 8px CTA, 12-16px 카드. '소비자 브랜드'가 아닌 '개발자 도구'라는 신호를 보냅니다.

구성요소

상단 탐색

**`top-nav-dark`** — 기본 상단 탐색. 배경 ``, 텍스트 ``, 높이 64px. 레이아웃: Composio 워드마크 왼쪽, 기본 가로 메뉴(제품/툴킷/문서/가격/고객/블로그), GitHub 별 + 로그인 + "시작하기" 오른쪽.

버튼

**`button-primary`** — 시그니처 Composio Blue CTA. 배경 ``, 텍스트 ``, 유형 ``(14px/500), 패딩 10px × 18px, 높이 40px, 반올림 ``(8px).

**`button-primary-active`** — 프레스 상태. 배경 ``.

**`button-secondary-dark`** — 표면 상승 보조. 배경 ``, 텍스트 ``.

**`button-outline`** — 1px의 가는 선 테두리가 있는 투명.

**`button-tertiary-text`** — 인라인 텍스트 링크.

영웅 및 분위기 있는 캐릭터

**`hero-band`** — 홈페이지 히어로. 배경 ``, ``(72px/500)의 전체 너비 디스플레이 헤드라인, 부제목, 2개의 CTA 및 중앙에 있는 터미널 모형 그리드 뒤에서 나오는 스포트라이트 글로우 배경.

**`terminal-mockup-grid`** — 브랜드의 가장 강력한 시각적 시그니처입니다. ``(16px) 컨테이너 안에 어두운 코드/출력 패널의 2×2 그리드. 배경 ``, 패딩 32px, 간격 16px.

**`terminal-pane`** — 모형 그리드 내부의 개별 코드/출력 패널. 배경 ``, ``의 텍스트 ``, 반올림 ``(12px), 패딩 20px.

**`spotlight-glow-card`** — 중앙에 디스플레이 헤드라인이 있고 그 뒤에 방사형 파란색 빛이 있는 대형 기능 카드입니다. 배경 ``, ``의 텍스트 ``, 반올림 ``, 패딩 48px.

카드

**`feature-card`** — 3업 혜택 그리드. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 28px.

**`toolkit-card`** — 4업 툴킷 그리드(Slack, GitHub, Stripe, Notion, Linear 등). 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 20px. 40px 정사각형 `` 상단, 툴킷 이름, 한 줄 설명.

**`toolkit-icon`** — 사각형 아이콘 플레이트. 배경 ``, 반올림 ``, 40px 크기.

**`testimonial-card`** — 견적 카드. 배경 ``, 텍스트 ``, 반올림 ``, 패딩 24px.

코드

**`code-block`** — 인라인 코드/터미널 블록. 배경 ``, ``의 텍스트 ``, 반올림 ``, 패딩 20px.

양식

**`text-input`** — 배경 ``, 텍스트 ``, 반올림 ``(8px), 패딩 12px × 16px, 높이 44px.

**`search-input`** — 압축 검색 필드. 동일한 표면과 반경, 더 작은 패딩, 40픽셀 높이.

태그 및 배지

**`badge-pill`** — 작은 대문자 알약입니다. 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 4px × 10px.

CTA/바닥글

**`cta-band-spotlight`** — 프리풋터 밴드. 중앙에 방사형 스포트라이트 광선이 있는 배경 ``. 헤드라인 + 단일 기본 CTA 알약을 표시합니다. 96px 패딩.

**`footer-dark`** — 바닥글 닫기 배경 ``, 텍스트 ``. 5열 링크 목록. 64×48px 패딩.

**`footer-link`** — 배경 투명, 텍스트 ``, 유형 ``.

해야 할 일과 하지 말아야 할 일

Do

• 기본 CTA, 워드마크 및 스포트라이트 글로우를 위해 ``을 예약하세요.
• 모든 CTA에 ``(8px)을 사용하세요. 전체 알약이 아닙니다.
• 고도를 높이려면 밝기 단계 사다리를 사용하세요. 그림자를 피하세요.
• 모든 영웅을 중앙의 방사형 파란색 스포트라이트 광선과 짝을 이루세요.
• 렌더링 코드, ``을 통한 JetBrains Mono의 CLI 명령.
• 2×2 터미널 모형 그리드를 홈페이지 히어로 앵커로 사용하세요.

하지 마세요

• 보조 브랜드 색상을 소개하지 마세요. 청록색과 보라색은 설명용일 뿐입니다.
• CTA에 전체 알약을 사용하지 마세요.
• 표시 가중치를 400으로 낮추지 마세요.
• 그림자 계층을 추가하지 마세요.
• 터미널/코드 표면 외부에 캔버스 깊이(#000000)를 사용하지 마세요.
• 타사 위젯(쿠키 동의, OneTrust)에서 CTA 색상을 추출하지 마세요. 브랜드의 CTA 색상은 실제 페이지 CTA에 표시되는 색상입니다.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

|---|---|---|

| 모바일 | _< 640px | Hero h1 72→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |

| 태블릿 | 640~1024px | 영웅 h1 56px; 터미널 모형 그리드는 2×2로 유지됩니다. 툴킷 그리드 2-up. |_

| 데스크탑 | 1024~1280px | 전체 영웅 h1 72px; 전체 2×2 터미널 모형; 툴킷 그리드 4-up. |

| 와이드 | > 1280px | 콘텐츠는 1200px로 제한됩니다. |_

터치 대상

• 40픽셀 높이의 기본 CTA — WCAG AA, AAA용으로 패딩됨
• 40px에서 검색 입력.

축소 전략

• 상위 탐색은 768px 미만의 햄버거로 전환됩니다.
• 터미널 모형 2×2 그리드는 모바일에서 단일 창으로 축소됩니다.
• 툴킷 그리드: 4개 → 2개 → 1개.
• 영웅 스포트라이트 광선은 모든 중단점에 유지됩니다.

반복 가이드

1. 한 번에 하나의 구성요소에 집중하세요.

2. CTA의 기본값은 ``(8px)입니다. 카드는 `` 또는 ``을 사용합니다.

3. 변형은 `components:`.

내부에 별도의 항목으로 존재합니다.

4. 어디에서나 __CODEBCK_682___을 사용하세요. 16진수 인라인은 사용하지 마세요.

5. 호버 상태는 문서화되지 않았습니다.

6. 디스플레이용 abcDiatype 500, 본체용 400/600. 모든 코드 표면에 JetBrains Mono가 있습니다.

7. Composio Blue는 여전히 희귀합니다.

알려진 격차

• abcDiatype은 라이선스가 부여되었습니다. 인테르가 대체 선수입니다.
• 애니메이션 타이밍이 범위를 벗어났습니다.
• 제품 내 표면(툴킷 대시보드, 에이전트 플레이그라운드)은 로그인 벽 뒤에 있습니다.
• 초점을 벗어난 양식 유효성 검사 상태는 캡처된 표면에 표시되지 않습니다.

概要

Composio のマーケティング サイトは、本格的な開発者インフラストラクチャ ブランドのように見えます。雰囲気は典型的な AI ツールのスタートアップというよりも Vercel や Stripe Docs に近いです。ベース キャンバスは、白に近い色__CODEBCK_537___ (#0f0f0f) と、**深いエレクトリック ブルー** (`` — #0007cd) の単一電圧を持ち、すべての主要な CTA、ブランド ワードマーク、ホームページのヒーローを支える雰囲気のあるスポットライトの輝きを保持しています。

Type は、**abcDiatype** を、ディスプレイ、本文、ナビゲーション、キャプション全体にわたる単一のファミリーとして実行します。ディスプレイのウェイトは 500 です。自信に満ちていますが、大げさではありません。コード ブロックと端末モックアップは JetBrains Mono に切り替わります。

ページのリズムは一枚岩です。暗いキャンバスが上から下まであり、カードの表面を介して微妙な高低差があります。 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.

**主な特徴:**

• 単一アクセント: `` (#0007cd) プライマリ CTA、ワードマーク、スポットライト グロー用。
• 単一のファミリーなし: abcDiatype はコード (JetBrains Mono) 以外のすべてを保持します。
• 暗いモノリシック キャンバス: `` は上から下まで続きます。 `` および `` の明るさステップからの深度。
• ターミナル モックアップのヒーロー: コード/出力ペインの 2×2 グリッドがブランドの特徴です。
• コンパクトな錠剤のジオメトリ: CTA は完全な錠剤ではなく、__CODEBCK_543___ (8 ピクセル) に位置します — 開発者ツールの方言。
• スポットライトのような雰囲気の背景: ヒーロー コンテンツの背後にある放射状の青い輝き。
• 96px セクションのリズム。

色

ブランドとアクセント

• **コンポジオ ブルー** (`` — #0007cd): プライマリ CTA、ワードマーク、スポットライト グロー センター。
• **コンポジオ ブルー アクティブ** (`` — #0005a3): 状態を押します。
• **スポットライト グロー トーン** (`` — #1a26ff): 放射状の大気グローの内側で使用される明るい青。
• **アクセントシアン** (`` — #00d4ff): データフローの視覚化は控えめに。
• **アクセント バイオレット** (`` — #7b3aed): 特定の製品のイラスト内のみ。

サーフェス

• **キャンバス** (`` — #0f0f0f): ページフロア — ほぼ黒。
• **キャンバス ディープ** (`` — #000000): 端末モックアップ グリッドおよびコード ブロック用の純粋な黒。
• **サーフェス カード** (`` — #181818): デフォルトのコンテンツ カード。
• **Surface Card Elevated** (`` — #222222): ターミナル ペイン、セカンダリ ボタン。
• **表面強度** (`` — #2a2a2a): ドロップダウン メニュー。

ヘアライン

• **ヘアライン** (`` — #222222): デフォルトの 1 ピクセルの分割線。
• **ヘアライン ソフト** (`` — #1a1a1a): より軽い分割線。
• **強いヘアライン** (`` — #333333): より強力なパネル アウトライン。

テキスト

• **インク** (`` — #ffffff): 見出しを表示します。
• **本文** (`` — #a8a8a8): デフォルトの実行テキスト — ソフトグレー。
• **ボディ ストロング** (`` — #ffffff): インクと同じ。
• **ミュート** (`` — #888888): 字幕、パンくずリスト。
• **ミュートソフト** (`` — #666666): 無効なテキスト。
• **プライマリ** (`` — #ffffff): 青色の CTA に白いテキスト。

セマンティック

• **成功** (`` — #33d17a): 「オンライン」、「アクティブ」インジケーター。
• **エラー** (`` — #ff4d4d): 検証エラー。

タイポグラフィ

フォント ファミリー

_システムはすべてのテキスト ロールにわたって **abcDiatype** (Lineto) を実行します。 コード ブロックは **JetBrains Mono** に切り替わります。フォールバック: `ui-sans-serif, system-ui, sans-serif`.

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

|---|---|---|---|---|---|

| `` | 72ピクセル | 500 | 1.05 | -2.16ピクセル |ホームページのヒーロー h1 |

| `` | 56ピクセル | 500 | 1.05 | -1.68ピクセル |補助ヒーロー |

| `` | 44ピクセル | 500 | 1.1 | -1.32ピクセル |セクションヘッド |

| `` | 32ピクセル | 500 | 1.15 | -0.96ピクセル |サブセクションの見出し |

| `` | 24ピクセル | 500 | 1.25 | -0.5ピクセル |カード グループのタイトル |

| `` | 18ピクセル | 600 | 1.4 | 0 |コンポーネントのタイトル |

| `` | 16ピクセル | 600 | 1.4 | 0 |ツールキット カードのタイトル |

| `` | 16ピクセル | 400 | 1.5 | 0 |デフォルトの本文 |

| `` | 14ピクセル | 400 | 1.5 | 0 |フッター本文 |

| `` | 13ピクセル | 400 | 1.4 | 0 |写真のキャプション |

| `` | 11ピクセル | 600 | 1.4 | 0.88ピクセル |セクション ラベル、バッジ丸薬 |

| `` | 13ピクセル | 400 | 1.5 | 0 |コードブロック — JetBrains Mono |

| `` | 14ピクセル | 500 | 1.0 | 0 | CTA 錠剤ラベル |

| `` | 14ピクセル | 500 | 1.4 | 0 |トップナビゲーション メニュー |

原則_

• **表示のウェイトは 500 のままです。** 自信はありますが、太字で表示されません。
• **すべての役割にわたる abcDiatype。** 表示/本体ファミリーの分割はありません。
• **すべてのコード サーフェイスに JetBrains Mono。**

フォントの代替に関する注意

abcDiatype は、Lineto ライセンスの書体です。オープンソースの代替品: **Inter**、ウェイト 500、文字間隔 -1.5%。

レイアウト

間隔システム_

• **基本単位:** 4px.
• _**トークン:** `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 32px · `` 48px · `` 96px.
• **セクション パディング:** メジャー バンドの場合は `` (96 ピクセル)。

グリッドとコンテナ

• コンテンツの最大幅: ~1200px。
• 編集本文: 12 列グリッド。
• ターミナル モックアップ グリッド: 2×2 の等しいサイズのペイン。
• ツールキット グリッド: デスクトップで 4 つ、タブレットで 2 つ、モバイルで 1 つ。
• フッター: デスクトップでは 5 列。

ホワイトスペースの哲学

暗いキャンバスは独自の奥行きを生み出します。空白は混雑したように感じることなく、タイトなままにすることができます。バンド間は96ピクセル。バンド内のカード間は 24 ピクセル

標高と深さ

システムは**明るさステップ上昇**を使用します。ドロップ シャドウをキャストする代わりに、サーフェスの明るさが段階的に増加します。 微妙な放射状の青い輝きと組み合わせることで、集中したダークモードの雰囲気が作成されます。

|レベル |治療 | |

を使用します

|---|---|---|

|フラット（キャンバス） | `` (#0f0f0f) |ボディバンド、フッター |

|凹型 | `` (#000000) |ターミナル モックアップ グリッド背景、コード ブロック |

|カード | `` (#181818) |デフォルトのコンテンツ カード |

|カードの昇格 | `` (#222222) |ターミナル ペイン、二次ボタン |

|大気の輝き | `` を使用した放射状グラデーション |ヒーローのスポットライトの背景 |

装飾の深さ

• **スポットライト グロー背景** — ヒーロー コンテンツの背後を中心とした放射状の青のグラデーション。
• **ターミナル ペインの明るさラダー** — 2×2 モックアップは、キャンバスの深さの外側 + 表面カードの高さのペインを使用します。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

|---|---|---|

| `` | 0ピクセル |予約済み |

| `` | 4ピクセル |インライン タグ |

| `` | 6ピクセル |コンパクトな行 |

| `` | 8ピクセル | CTA ボタン、フォーム入力 |

| `` | 12ピクセル |ツールキット カード、コード ブロック、ターミナル ペイン |

| `` | 16ピクセル |フィーチャー カード、端子モックアップ グリッド |

| `` | 9999ピクセル |セクション ラベル バッジ |

| `` | 9999ピクセル |アバター プレート (レア) |

_開発者にとって人間工学に基づいたコンパクトな半径 - 8 ピクセルの CTA、12 ～ 16 ピクセルのカード。 「消費者ブランド」ではなく「開発者ツール」であることを示します。

コンポーネント

トップナビゲーション_

_**`top-nav-dark`** — デフォルトのトップ ナビゲーション。背景__CODEBCK_604___、テキスト__CODEBCK_605___、高さ64ピクセル。レイアウト: コンポジット ワードマーク 左、プライマリ水平メニュー (製品 / ツールキット / ドキュメント / 価格設定 / 顧客 / ブログ)、GitHub スター + サインイン + 「始める」右。

ボタン

**`button-primary`** — 特徴的な Composio Blue CTA。背景 ``、テキスト ``、タイプ `` (14px / 500)、パディング 10px × 18px、高さ 40px、丸め `` (8px).

**`button-primary-active`** — プレス状態。背景 ``.

_**`button-secondary-dark`** — 表面上昇二次。背景__CODEBCK_614___、テキスト__CODEBCK_615___.

**`button-outline`** — 1 ピクセルのヘアラインの強い境界線を持つ透明。

**`button-tertiary-text`** — インライン テキスト リンク。

ヒーローと雰囲気

_**`hero-band`** — ホームページのヒーロー。背景 ``、__CODEBCK_620___ (72px / 500) の全幅表示見出し、小見出し、2 つの CTA、および中央の端末モックアップ グリッドの背後から放射されるスポットライトの背景。

**`terminal-mockup-grid`** — ブランドの最も強力な視覚的特徴。 `` (16px) コンテナ内のダーク コード/出力パネルの 2×2 グリッド。背景 ``、パディング 32 ピクセル、ギャップ 16 ピクセル。

_**`terminal-pane`** — モックアップ グリッド内の個別のコード/出力パネル。 背景__CODEBCK_625___、テキスト__CODEBCK_626___、__CODEBCK_627___、丸め__CODEBCK_628___ (12ピクセル)、パディング20ピクセル。

**`spotlight-glow-card`** — 中央に表示される見出しとその背後にある放射状の青い輝きを持つ大きなフィーチャー カード。背景__CODEBCK_630___、テキスト__CODEBCK_631___、__CODEBCK_632___、丸め__CODEBCK_633___、パディング48px.

カード

**`feature-card`** — 3 アップ特典グリッド。背景__CODEBCK_635___、テキスト__CODEBCK_636___、タイプ__CODEBCK_637___、丸め__CODEBCK_638___、パディング28px.

_**`toolkit-card`** — 4 つのツールキット グリッド (Slack、GitHub、Stripe、Notion、Linear など)。背景__CODEBCK_640___、テキスト__CODEBCK_641___、タイプ__CODEBCK_642___、丸め__CODEBCK_643___、パディング20ピクセル。 40 ピクセルの正方形 `` 上部、ツールキット名、1 行の説明。

**`toolkit-icon`** — 正方形のアイコン プレート。背景__CODEBCK_646___、角丸__CODEBCK_647___、40ピクセルサイズ。

**`testimonial-card`** — 引用カード。背景__CODEBCK_649___、テキスト__CODEBCK_650___、角丸__CODEBCK_651___、パディング24ピクセル。

コード

_**`code-block`** — インライン コード/端子ブロック。背景__CODEBCK_653___、__CODEBCK_655___内のテキスト__CODEBCK_654___、丸め__CODEBCK_656___、パディング20px.

フォーム

_**`text-input`** — 背景__CODEBCK_658___、テキスト__CODEBCK_659___、角丸__CODEBCK_660___ (8px)、パディング12px × 16px、高さ44px。

**`search-input`** — コンパクトな検索フィールド。同じサーフェスと半径、より小さいパディング、40 ピクセルの高さ。

タグとバッジ

**`badge-pill`** — 小さな大文字の錠剤。背景__CODEBCK_663___、テキスト__CODEBCK_664___、タイプ__CODEBCK_665___、丸め__CODEBCK_666___、パディング4px × 10px.

CTA / フッター

_**`cta-band-spotlight`** — プレフッター バンド。中心に放射状のスポットライトが輝く背景__CODEBCK_668___。見出し + 単一の主要な CTA ピルを表示します。 96 ピクセルのパディング。

**`footer-dark`** — フッターを閉じます。背景__CODEBCK_670___、テキスト__CODEBCK_671___。 5列のリンクリスト。 64×48 ピクセルのパディング。

**`footer-link`** - 背景透明、テキスト__CODEBCK_673___、タイプ__CODEBCK_674___.

推奨事項と禁止事項

実行

• __CODEBCK_675___ はプライマリ CTA、ワードマーク、スポットライト グロー用に予約してください。
• すべての CTA に `` (8 ピクセル) を使用します。丸薬全体ではありません。
• _標高には明るさの階段梯子を使用します。ドロップ シャドウを避けてください。
• すべてのヒーローを中心にある放射状の青いスポットライトの輝きと組み合わせます。
• __CODEBCK_677___ 経由で JetBrains Mono でコード、CLI コマンドをレンダリングします。
• 2×2 端子モックアップ グリッドをホームページのヒーロー アンカーとして使用します。

しないでください

• 二次的なブランドカラーを導入しないでください。シアンとバイオレットは説明のみを目的としています。
• CTA では全量を使用しないでください。
• 表示ウェイトを 400 に落とさないでください。
• ドロップ シャドウ層を追加しないでください。
• ターミナル/コード サーフェスの外側でキャンバスディープ (#000000) を使用しないでください。
• サードパーティのウィジェット (Cookie 同意、OneTrust) から CTA カラーを抽出しないでください。 ブランドの CTA カラーは、実際のページの CTA に表示される色です。

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

|---|---|---|

|モバイル | < 640px | Hero h1 72→36px; terminal mockup grid collapses to single pane; toolkit grid 1-up; nav hamburger. |

|タブレット | 640–1024ピクセル |ヒーロー h1 56px;端末モックアップのグリッドは 2×2 のままです。ツールキットグリッド 2 アップ。 |

|デスクトップ | 1024–1280ピクセル |フルヒーロー h1 72px;完全な 2×2 端子モックアップ。ツールキットグリッド 4 アップ。 |

|ワイド | > 1280ピクセル |コンテンツの上限は 1200 ピクセルです。 |

タッチターゲット_

• 高さ 40 ピクセルのプライマリ CTA — WCAG AA で、AAA 用にパディングされます。
• 40 ピクセルで入力を検索します。

戦略の崩壊

• 768 ピクセル以下では、上部のナビゲーションがハンバーガーに切り替わります。
• ターミナルのモックアップ 2×2 グリッドは、モバイルでは 1 つのペインに折りたたまれます。
• ツールキット グリッド: 4-up → 2-up → 1-up.
• ヒーロー スポットライトの輝きはすべてのブレークポイントで維持されます。

反復ガイド

1.一度に 1 つのコンポーネントに注目してください。

2. CTA のデフォルトは `` (8px) です。カードは `` または `` を使用します。

3.バリアントは、__CODEBCK_681___.

内の個別のエントリとして存在します。

4.どこでも `` を使用します。16 進数をインライン化しないでください。

5.ホバー状態は文書化されていません。

6. abcDiatype ディスプレイ用 500、本体用 400/600。 JetBrains Mono はすべてのコード サーフェスにあります。

7.コンポジオ ブルーは引き続き希少です。

既知のギャップ

• abcDiatype はライセンスを取得しています。インテルが代役です。
• アニメーションのタイミングは範囲外です。
• 製品内サーフェス (ツールキット ダッシュボード、エージェント プレイグラウンド) はログイン ウォールの背後にあります。
• フォーカスを超えたフォーム検証状態は、キャプチャされたサーフェスには表示されません。

Accessibility Considerations

Composio's color system, anchored by #0007cd, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Composio's color system, anchored by #0007cd, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Composio's color system, anchored by #0007cd, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

• Posthog Design System
• Warp Design System
• Sanity Design System
• Raycast Design System