Composio — AI Integrations Landing Page

---
version: alpha
name: Composio — AI Integrations Landing Page
colors:
  primary: '#0007CD'
  canvas: '#0F0F0F'
  ink: '#FFFFFF'
  surface: '#F6F6F6'
typography:
  heading:
    fontFamily: geistSans, "geistSans Fallback", ui-sans-serif, system-ui, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 69.12px
  body:
    fontFamily: geistSans, "geistSans Fallback", ui-sans-serif, system-ui, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16px
---

## Overview
A black-and-white integrations landing page with electric-blue hero emphasis, app illustrations, use-case cards, security panels and a FAQ. Inspected at 1440px desktop and 390px mobile widths on September 30, 2026.

## Colors
Palette tokens describe the observed visual roles. Alternate near-black and pale sections. Use calm Geist typography, electric blue emphasis, square outlined controls and colorful application illustrations. Transparent and gradient text layers must be considered with their painted background, not interpreted as solid-color text.

## Typography
The sampled heading uses geistSans, "geistSans Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" at 64px, weight 400, with 69.12px leading. Supporting sample: geistSans, "geistSans Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 14px / 16px. These are computed styles at capture width, not fixed requirements for every breakpoint. Use licensed font assets or deliberate substitutes.

## Layout
Alternate centered introductions with product demonstration panels; reserve saturated color for illustrations and emphasized words. Mobile reflows into a readable vertical sequence. Exact responsive breakpoints were not measured.

## Elevation & Depth
Preserve separation through the reference’s surface contrast, border rules and whitespace. Avoid adding heavy shadows to a flat interface. Shadow strength is visual guidance, not a measured token.

## Shapes
Keep the visible distinction between content panels, fields and actions. Match the photographed corner treatment rather than applying one global radius; measured element radii are retained in the evidence.

## Components
The illustrations and animated demos show a single capture state; functionality was not exercised.

## Do's and Don'ts
Do adapt hierarchy, spacing and responsive ordering with your own brand and truthful copy. Do not reuse customer endorsements or performance numbers as your own. Do not infer hover, keyboard, validation, dark-mode or accessibility compliance from static images.