# composio.dev

Source: https://composio.dev/
Captured: 2026-09-13
Tags: saas, landing, dark, both, dark-techno, swiss, bento, technical, futuristic, confident, cold, energetic
Colors: #101113, #213284, #2c2c2c, #151f4e, #4e4e4e, #717172, #909191, #1c7d92
Type (h1): geistSans · 64px/69.12px · 400 · tracking -1.6px — "Give your AI secure access to 1,500+ apps in minutes"
Type (h2): geistSans · 44px/48.4px · 400 · tracking -1.1px — "Composio turns your AI into a doer"
Type (h3): geistSans · 28px/33.6px · 400 — "The right tools, without the context bloat"
Type (body): geistSans · 14px/16px · 400 — "Composio is now live in the ChatGPT Plugins Directory."
Type (small): JetBrains Mono · 12px/12px · 400 — "TRY IT OUT"
Type (button): JetBrains Mono · 14px/21px · 400 · tracking -0.154px — "TRY FOR FREE"
Button (primary): "TRY FOR FREE" — fill #ffffff, text #000000, radius 0px, border 1px, padding 6px 8px, height 35px, type 14px/400
Button (secondary): "LOG IN" — text #ffffff, radius 0px, border 1px, padding 6px 8px, height 35px, type 14px/400
Button (tertiary): "PRODUCTS" — text #ffffff, radius 0px, border 0px, padding 0px 8px, height 21px, type 14px/400
Radii: 24px (2), 28px (1), 9999px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/composio-dev/hero.webp?v=7bec6f28
- Page crop (mid-1): https://media.lvly.design/library/composio-dev/mid-1.webp?v=896f1d9e
- Page crop (mid-2): https://media.lvly.design/library/composio-dev/mid-2.webp?v=1b008498
- Hero (mobile): https://media.lvly.design/library/composio-dev/mobile-hero.webp?v=a8ed4bc4
- Full page (desktop): https://media.lvly.design/library/composio-dev/full.jpg?v=765627ab
- Full page (mobile): https://media.lvly.design/library/composio-dev/mobile-full.jpg?v=500bd585
- Clip preview (mp4): https://media.lvly.design/library/composio-dev/video-nbl3ki.preview.mp4?v=6de840e7

Composio's landing is a dev-tool page built from two registers played against each other: an almost-black ground (#101113) with a strict hairline grid and monospaced uppercase labels everywhere a UI element needs naming, and a loud, pixelated blue-cyan-green glitch texture that floods the hero and later bleeds into the feature panels as hard-edged color blocks (electric blue, cyan, salmon, pink) behind fake terminal windows. Type is Geist Sans at 64px regular with tight -1.6px tracking for the headline, but the real voice is the mono system: nav links, buttons, section numbers ("01 SMART TOOLS"), tool ids ("GMAIL_SEND_EMAIL v2.1.3") and status pills are all small uppercase mono, and the CTAs are square, zero-radius, white-on-black or outlined boxes. Sections sit in outlined rectangles that share edges, so the whole page reads as one bordered schematic; product proof is shown as mocked agent chats and tool-call logs inside those cells, not as screenshots. It is a page that wants to feel like a terminal with a signal-processing hallucination playing behind it — precise, cold, and slightly unhinged in color.

## Steal-worthy details

- Hero background is a low-res, blocky "spectrum analyser" glitch in blue/cyan/green, faded to black behind the centered type — a texture that gives a dark hero energy without a 3D render.
- Zero-radius CTA pair: solid white "GET STARTED FOR FREE" beside a 1px-outlined "GET A DEMO", both in small uppercase mono; the fine print "100,000 free tool calls/mo. No credit card required." sits directly under in muted gray.
- Numbered vertical tab rail ("01 SMART TOOLS", "02 CONSTANT EVOLUTION" …) where the active row gets a blue-filled number chip and a blue hairline outline, the rest stay gray mono.
- Feature panels are outlined cells sharing borders with the neighbour cell — a schematic grid rather than floating cards — and each cell has a small boxed section number top-left before its headline.
- Bullet lists rendered as short lines with a 1px left rule per item (a hairline "pipe") instead of dots.
- Product mockups are dark terminal windows with mono headers (tool id left, version right), status dots in green, and inline "MATCH" / "Connected" mono badges — the product is explained as logs and chats.
- Hard-edged color blocks (cyan, salmon, pink, cobalt) behind the mockups, with grainy pixel noise, revive the hero texture mid-page so the scroll stays coherent.
- Nav CTA is a small square white block that breaks the dark bar; the rest of the nav is uppercase mono with tiny chevrons.
- Client logo strip is pure white monochrome wordmarks, evenly spaced, cut off at the right edge to imply a marquee.

## Style recipe

Build on a near-black ground (#101113) with a slightly lifted panel tone (#151517–#1c1c1e) and 1px hairlines in #2c2c2c; never use drop shadows, use borders. Lay every section out as outlined rectangles that share edges — cells in one continuous grid, bordered on all sides, 0px radius. Headlines in Geist Sans (or Inter) regular weight, 56–64px, -1.6px tracking, white, centered in the hero and left-aligned in cells; body 18px/1.2 regular in #d0d0d0 with muted gray (#909191) for secondary lines. Use a monospace face (Geist Mono / JetBrains Mono) at 11–14px, uppercase, +0.04em tracking, for all labels: nav links, buttons, section numbers, badges, mock UI headers. Buttons are square (0px radius), 33px tall, 6px 8px padding, uppercase mono 14px: primary is solid #ffffff on #000000 text, secondary is transparent with a 1px #4e4e4e border and white text. Accent is electric blue (#213284 deep, brightened toward #2a5bff for fills and active chips) plus a green status dot (#1c7d92–#22c55e) for "connected"; keep all other chrome gray. Number each section with a small boxed mono "01/02/03" chip; render lists as lines with a 1px left rule instead of bullets. For atmosphere, use a pixelated, low-resolution glitch texture in blue/cyan/green faded into black behind the hero, and reprise it later as hard-edged color blocks (cobalt, cyan, salmon, pink) with grain behind dark terminal-style mockups. Mockups are dark windows with mono headers, tiny status pills, and monochrome brand icons — show the product as logs and chat, not as polished screenshots. Logo strips are white monochrome wordmarks on black.