composio.dev

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.

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.