---
name: Composio
description: "This site exemplifies a clean, developer-focused design that prioritizes readability and functionality while maintaining professional aesthetics through restrained use of color and typography."
version: alpha

colors:
  background: "#0f0f0f"
  primary: "#ffffff"
  secondary: "#e2e2e2"
  neutral: "#444444"
  bg-soft: "#1a1a1a"
  line: "rgba(44, 44, 44, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  h1:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A developer platform for building and deploying AI agents with built-in tooling and integrations.

*A clean, developer-centric platform that feels like a modern SaaS tool for building AI agents.*

## Colors

High-contrast dark mode with near-black backgrounds and crisp white typography for maximum readability and focus.

- **Background (`#0f0f0f`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#e2e2e2`)** — uses `ink-soft` token
- **Muted (`#444444`)** — uses `muted` token
- **Borders (`rgba(44, 44, 44, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Use abcDiatype for display and body text
- Use JetBrains Mono for code and technical content
- Keep letter-spacing tight for headlines and normal for body text
- Maintain consistent vertical rhythm with 1.5 line height for body text

## Layout

Centered content with generous whitespace, maximum content width of 1280px

*Rhythm:* Consistent 4px base grid with modular spacing scale for vertical and horizontal rhythm

## Elevation & Depth

- rgba(0, 0, 0, 0.15) 4px 4px 0px 0px
- rgba(0, 0, 0, 0.5) 0px 8px 32px 0px
- rgba(0, 0, 0, 0.5) 0px 16px 48px 0px
- rgba(0, 0, 0, 0.35) 0px 6px 20px 0px
- rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
- rgba(0, 0, 0, 0.4) 0px 4px 20px 0px
- Borders: 1px solid rgb(44, 44, 44) for subtle container boundaries

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Clean, minimal buttons with uppercase text, subtle borders, and smooth transitions. Primary buttons have white backgrounds with dark text, secondary buttons have transparent backgrounds with borders.
- **card:** Dark containers with subtle borders and rounded corners, featuring clean typography and minimal decoration.
- **chip:** Small, rounded tags with uppercase text, used for labels and categories.
- **input:** Dark input fields with subtle borders and clear typography, designed for technical content.
- **hero:** Full-width dark section with large, bold typography, gradient backgrounds, and centered call-to-action buttons.

## Do's and Don'ts

**Don't:**
- Don't use light backgrounds — screenshot shows dark mode with #0f0f0f backgrounds
- Don't use decorative serif fonts — screenshot shows geometric sans-serif typography
- Don't use bright, saturated accent colors — screenshot shows monochrome palette with subtle gradients
- Don't use small, cramped spacing — screenshot shows generous whitespace and 4px base grid
- Don't use rounded, playful UI elements — screenshot shows sharp, minimal design with subtle border-radius
- Don't use complex, layered visual effects — screenshot shows clean, flat design with subtle shadows

---

## System Prompt (paste into AI agent)

```
Composio is a developer platform for building and deploying AI agents, positioned as a clean, professional tooling solution. The design uses a dark mode palette with near-black backgrounds (#0f0f0f), crisp white text (#ffffff), and subtle gray accents (#444444). Typography features geometric sans-serif fonts (abcDiatype) for display and body text, with monospace (JetBrains Mono) for technical content. The layout follows a centered, spacious design with a 4px base grid. Key donts: avoid light backgrounds, skip decorative fonts, don't use bright accent colors, maintain generous spacing, avoid playful UI elements, and keep visual effects minimal.
```