skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-composio

Apply Composio's design system tokens, typography, and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#composio#dark theme#ui generation
One-click install
npx skills add https://github.com/deepparser/skills --skill design-composio-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-composio
Source: https://github.com/deepparser/skills/tree/main/design-composio
Command: npx skills add https://github.com/deepparser/skills --skill design-composio-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Composio's visual identity requires exact knowledge of its color tokens, typography scale, spacing system, and component patterns, which are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact color values (Void Black #0f0f0f, Composio Cobalt #0007cd, Electric Cyan #00ffff), typography specs (abcDiatype and JetBrains Mono scales), spacing, radius, and elevation rules. - Component Styling Rules: Defines button variants, card treatments (including the signature 4px hard-offset brutalist shadow), form inputs, and navigation patterns with do's and don'ts. - Light and Dark HTML Previews: Bundled preview.html and preview-dark.html files let you verify exact CSS values and component structure visually. - Use Case: When asked to build a developer-tool landing page styled like Composio, generate a dark hero section with 64px headings at 0.87 line-height, white CTA buttons, cyan glow accents, and JetBrains Mono code blocks. ## Quick Start Use the design-composio skill to build a dark-themed landing page for a developer tool with Composio's visual style.

Frequently Asked Questions about design-composio

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that looks like Composio's website?▼

Apply Composio's design tokens: Void Black (#0f0f0f) backgrounds, white text with opacity-based secondary text, abcDiatype for content and JetBrains Mono for code. Use white-opacity borders (4-12%) for containment and reserve Electric Cyan for accents.

What colors does the Composio design system use?▼

The palette centers on Void Black (#0f0f0f) backgrounds, Composio Cobalt (#0007cd) as the brand color, and Electric Cyan (#00ffff) for glows and accents. Text uses Pure White plus white at 60%, 50%, and 20% opacity for hierarchy.

What fonts does Composio use in its interface?▼

Composio pairs abcDiatype, a geometric sans-serif for marketing and body content, with JetBrains Mono for code and technical labels. Headings use weight 400 with ultra-tight line-heights of 0.87 to 1.0.

Does this design system support both light and dark themes?▼

Yes, the skill bundles preview.html and preview-dark.html showing the token catalog in both themes. Note that Composio's identity is primarily dark-first, with the dark variant using Pure Black (#000000) as the page background.

When should I not use the Composio design style?▼

Avoid it for light-themed consumer products or warm color palettes, since the system is strictly cool-toned (blue, cyan, white, black) and dark-first. It also prohibits bold weights above 500 and border radii above 4px on cards.

Related Skills

Explore More Design & Creative Skills→
deadhearth01deadhearth01

frontend-design

Generate production-grade frontend interfaces with structured frontmatter-driven design processes.

Community
Advanced
TekLabsVNTekLabsVN
1

ui-design

Generate HTML and React previews for UI components using Tailwind, MagicUI, Shadcn, and Phosphor icons.

Official
Advanced
Community-AccessCommunity-Access
387

Contrast Master

Audit color contrast and visual accessibility for WCAG AA compliance.

Official
Advanced
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate