Composio

Overview

Composio is a developer-first infrastructure platform that empowers AI agents to execute actions across 1,000+ enterprise and SaaS applications. The design system embodies a "Technical Minimalism" aesthetic—a fusion of austere dark-mode sophistication with vibrant accent colors that signal interactivity and energy. The brand personality is precise, confident, and forward-thinking: the UI strips away visual noise to focus on what matters: enabling developers to build intelligent agents that actually work. The emotional response is one of clarity and capability—users feel they're working with a tool built by engineers, for engineers. Voice: direct, technical but accessible, never marketing-speak. Example: "Your agents execute in sandboxed environments with just-in-time tool calls—no bloat, no surprises."

Colors

The color system centers on a dark-first approach (surface #0f0f0f, on-surface #ffffff) that reduces cognitive load during extended development sessions. Primary is pure white (#ffffff) used for CTAs and interactive elements—it commands attention against the dark canvas without feeling aggressive. Secondary (#51a2ff, a vivid electric blue) serves as the brand accent, appearing on hover states, links, and data visualization highlights; it's paired with a darker active state (#1f7ee8) for depth. Tertiary (#3fffdd, a bright cyan) provides a tertiary accent for status indicators and accent highlights. The surface stack progresses from #0a0a0a (surface-dim, for recessed elements) through #1e1e1e (surface-container, standard cards) to #333333 (surface-container-highest, elevated modals). Error r

Typography

The type system pairs abcDiatype (a geometric, contemporary sans-serif) for display and body text with JetBrains Mono for code snippets, labels, and technical callouts. Display (64px, 400 weight, -0.02em tracking) sets the tone for hero headlines with generous line-height (72px) for breathing room. Headline-lg (44px, 400 weight) is used for section titles and maintains the same geometric clarity. Body text (16px, 400 weight, -0.011em tracking) is set at 24px line-height for comfortable reading on dark backgrounds. Labels use JetBrains Mono at 14px (buttons) or 12px (badges) to signal code-like precision. All type sizes scale responsively: display reduces to 48px on tablets, 32px on mobile. Apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.3) on small labels over gradient backgrounds to ensure le

Layout

The layout uses a 12-column grid with a max-width of 1240px (--container-page), centered with symmetric gutters of 24px on desktop, 16px on tablet, 12px on mobile. Hero sections span full-width with a dark gradient background and centered content; the main CTA cluster sits at 120px vertical padding with 40px (lg spacing) between sections. Cards and containers use 24px (md spacing) padding internally, with 40px (lg spacing) between card groups. The page rhythm alternates between full-width hero blocks and constrained content sections, creating visual momentum. White-space is treated as a design element: negative space around CTAs (40px margin) makes them pop; breathing room between text blocks (24px) prevents cognitive overload. Container max-widths vary by content type: narrow containers (

Elevation & Depth

Elevation is achieved through a flat-with-borders approach rather than shadows, maintaining the minimalist aesthetic. Level 1 (Base): surface (#0f0f0f) with no elevation. Level 2 (Standard Cards): surface-container (#1e1e1e) with a 1px border in outline-variant (#444444) and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) for subtle depth. Level 3 (Elevated/Modals): surface-container-high (#2a2a2a) with a 1px border in outline (#666666) and box-shadow 0 8px 24px rgba(0, 0, 0, 0.25) for pronounced separation. Interactive elements (buttons, inputs) use no shadow by default; on hover, they gain a 1px in

Shapes

The shape philosophy is "Technical Precision"—rounded corners are minimal and purposeful, signaling modernity without sacrificing clarity. Buttons and inputs use 0.5rem (8px) border-radius, a subtle softening that feels contemporary without being playful. Cards use 0.75rem (12px) for slightly more breathing room. Modals and elevated containers use 1rem (16px) to create visual distinction. The full radius (9999px) is reserved for badges and pill-shaped elements. This graduated approach creates a visual hierarchy: tighter radii on interactive elements (buttons, inputs) feel precise and technical

Components

Action Elements Buttons use a monospace label (JetBrains Mono, 14px, 400 weight) to reinforce technical identity. Primary buttons are white (#ffffff) on dark background with 10px vertical / 16px horizontal padding, 40px height, and 0.5rem border-radius. On hover, the background shifts to primary-fixed-dim (#d0d0d0) with a smooth 150ms transition (cubic-bezier(0.4, 0, 0.2, 1)). Secondary buttons are transparent with a 1px white border; on hover, they gain a subtle background at rgba(255, 255, 255, 0.08) and remain at 150ms transition. Focus state: 2px outline in secondary (#51a2ff) at 2px offset. Active state: background shifts to primary-fixed-dim with no transition (immediate feedback).

Containers & Surfaces Cards use surface-container (#1e1e1e) background with 24px padding, 0.75

Do's and Don'ts

**Do**

• Do use white (#ffffff) for primary CTAs and interactive elements—it commands attention on dark backgrounds without feeling aggressive.
• Do apply negative letter-spacing (-0.02em to -0.011em) across all typography to create a tight, modern feel that contrasts with generous line-height.
• Do use secondary (#51a2ff) and tertiary (#3fffdd) accents sparingly for hover states, links, and data visualization—they should feel like rewards for interaction.
• Do maintain 24px (md spacing) between sections and 40px (lg spacing) between major content blocks to create visual rhythm and prevent cognitive overload.
• Do use 0.5rem to 1rem border-radius on interactive elements—sharp corners feel dated, excessive rounding feels playful and inconsistent with technical positioning.
• Do apply box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) on standard cards and 0 8px 24px rgba(0, 0, 0, 0.25) on elevated modals for subtle depth without visual noise.

**Don't**

• Don't use primary (#ffffff) for body text or backgrounds—it's reserved for CTAs and interactive elements. Use on-surface (#ffffff) for body text and surface (#0f0f0f) for backgrounds.
• Don't exceed 1.5rem border-radius on any element—it dilutes the technical precision of the brand and feels soft or playful.
• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.25)—the minimalist aesthetic relies on borders and subtle depth, not dramatic shadows.
• Don't apply letter-spacing wider than 0.05em on body text—it reduces readability and contradicts the tight, modern typography system.
• Don't mix abcDiatype and JetBrains Mono arbitrarily—use abcDiatype for display/body and JetBrains Mono exclusively for code, labels, and technical callouts.
• Don't use color gradients outside of hero sections—they should be rare, purposeful accents, not a default treatment.