Brand Guidelines

Brand Guidelines

The complete Composio brand book — overview, platforms, logo, color, type, layout, and voice in one place.

agent.json

Composio's brand runs on two product surfaces unified by one adaptive identity. Write things once and let the surface decide how they look.

Download .md
01 — Overview

Overview

There are two worlds. FOR YOU is the light, consumer-facing surface; DEV is the dark, developer-facing one. The same brand color, type, and components render in either context — the brand flips to suit the surface rather than locking to a single look.

  • Adaptive brand blue — sky blue on FOR YOU (light), deep blue on DEV (dark). The flip is the signature.
  • Two-surface system with token-flipping — never mix light and dark within one section.
  • ABC Diatype (sans) for everything readable; JetBrains Mono for code and chrome.
  • Sans never goes bold — emphasis comes from size, not weight.
  • An expressive gradient palette for broad-brand moments; the adaptive blue and neutral surfaces carry product UI.
02 — The Two Platforms

The Two Platforms

Every Composio surface belongs to one of two worlds. Keep each section internally consistent.

FOR YOU — consumer, light. Off-white surfaces (#f6f6f6), generous space, the brand at its brightest (sky blue #51a2ff). Marketing, onboarding, the consumer product.

DEV — developer, dark. Warm near-black surfaces (#0f0f0f / #1e1e1e), tight chrome, the brand deepened to #0007cd so it sits against the dark. Docs, dashboards, code, the developer product.

Do
  • Pick one surface per section and commit to it.
  • Wrap a whole region to flip it from FOR YOU to DEV.
  • Let the surface set the brand value — sky blue on light, deep blue on dark.
Don't
  • Mix light and dark within a single section.
  • Paint a dark card on a light section — flip the section instead.
  • Hardcode a single brand hex across both surfaces.
04 — Color

Color

One adaptive brand, two surface systems, and a clear separation between identity, meaning, and expression.

The brand is adaptive: sky blue #51a2ff on FOR YOU, deep blue #0007cd on DEV. It isn't one hex lightened or darkened — it's swapped to a hue that suits the surface.

Surfaces are deliberately off-pure: background #f6f6f6 / #0f0f0f, card #ffffff / #1e1e1e, popover #fafafa / #2a2a2a, with hairline borders #eaeaea / #2c2c2c.

Semantic colors (destructive, success, warning) mean what they say — use them only for errors, confirmations, and cautions, never as a generic accent.

Gradients are the expressive palette for broad-brand moments — covers, hero art, social; the Core Gradient is the default. Persona accents are specialty and sit outside the brand.

Do
  • Use the adaptive brand for CTAs, links, and brand accents.
  • Reach for gradients on expressive, broad-brand surfaces.
  • Use semantic colors for their literal meaning.
Don't
  • Hardcode the brand hex — it flips per surface.
  • Pick a semantic color because it 'looks nice'.
  • Treat persona accents as general UI color.
05 — Typography

Typography

A two-typeface system: a clean sans for everything readable, mono for the developer-grade chrome.

ABC Diatype by Dinamo is the primary typeface for headings, body, and UI. JetBrains Mono carries code, terminal text, badges, eyebrow labels, and version chips.

Sans never goes bold. Use weight 400 or 500 only — display and h1 are normal weight, and h2 is the only medium-weight heading. Emphasis comes from size, not weight.

Mono can be any weight. The eyebrow signature — mono, uppercase, wide tracking (text-mono-sm uppercase tracking-wider) — labels categories throughout the brand.

Do
  • Promote to a larger size when you need emphasis.
  • Use mono uppercase for eyebrow and category labels.
  • Let the type tokens bundle size, weight, leading, and tracking.
Don't
  • Bold or semibold sans text — ever.
  • Combine a type token with a conflicting weight.
  • Introduce a new weight or a third typeface.
06 — Layout & Elevation

Layout & Elevation

Structure carries the brand as much as color and type do.

Page content sits within a 1240px max width; long-form columns at 720px, forms at 520px, single CTAs at 380px. Don't hardcode pixel widths — use the container tokens.

Elevation has one signature: a two-layer card shadow (shadow-elevated) for primary surface cards, with the standard shadow scale for ordinary lifts. Lead with whitespace and surface contrast before adding decoration.

07 — Voice & Tone

Voice & Tone

Composio speaks to two audiences without splitting in two: approachable on FOR YOU, precise on DEV, infrastructure-grade throughout.

  • Clear over clever — say the thing plainly.
  • Technical, not cold — precise, never jargon for its own sake.
  • Confident, not loud — let size and space carry emphasis, the way the type system does.