# Composio Brand Guidelines Composio's brand runs on two product surfaces unified by one adaptive identity. Write things once and let the surface decide how they look. ## 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. ## 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. ## Logo The wordmark and logomark come in black and white. Match the variant to the surface. Use the **black** logo on FOR YOU (light) surfaces and the **white** logo on DEV (dark) surfaces. The logomark (icon only) is for tight spaces; the full logo everywhere else. **Clear space:** keep a margin of `x` on all sides, where `x` equals the width of the logomark. Never crowd it. **Do** - Match logo color to the surface (black on light, white on dark). - Preserve the clear-space margin. - Use the provided SVGs and scale freely. **Don't** - Recolor, rotate, skew, or distort the logo. - Place it on a busy or low-contrast background. - Recreate the wordmark in another typeface. ## 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. ## 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. ## 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. ## 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. --- Generated from the Composio Brand Hub. Browse the live reference at /guidelines.