Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
DM Sans| Mono:JetBrains Mono- Font stack (CSS):font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Composio's interface is a nocturnal command center — a dense, developer-focused darkness punctuated by electric cyan and deep cobalt signals. The entire experience is built on an almost-pure-black canvas (#0f0f0f) where content floats within barely-visible containment borders, creating the feeling of a high-tech control panel rather than a traditional marketing page. It's a site that whispers authority to developers who live in dark terminals.
The visual language leans heavily into the aesthetic of code editors and terminal windows. JetBrains Mono appears alongside the geometric precision of abcDiatype, reinforcing the message that this is a tool built by developers for developers. Decorative elements are restrained but impactful — subtle cyan-blue gradient glows emanate from cards and sections like bioluminescent organisms in deep water, while hard-offset shadows (4px 4px) on select elements add a raw, brutalist edge that prevents the design from feeling sterile.
What makes Composio distinctive is its tension between extreme minimalism and strategic bursts of luminous color. The site never shouts — headings use tight line-heights (0.87) that compress text into dense, authoritative blocks. Color is rationed like a rare resource: white text for primary content, semi-transparent white (rgba(255,255,255,0.5-0.6)) for secondary, and brand blue (#0007cd) or electric cyan (#00ffff) reserved exclusively for interactive moments and accent glows.
Key Characteristics:
- Pitch-black canvas with near-invisible white-border containment (4-12% opacity)
- Dual-font identity: geometric sans-serif (abcDiatype) for content, monospace (JetBrains Mono) for technical credibility
- Ultra-tight heading line-heights (0.87-1.0) creating compressed, impactful text blocks
- Bioluminescent accent strategy — cyan and blue glows that feel like they're emitting light from within
- Hard-offset brutalist shadows (4px 4px) on select interactive elements
- Monochrome hierarchy with color used only at the highest-signal moments
- Developer-terminal aesthetic that bridges marketing and documentation
#0007cd): The core brand color — a deep, saturated blue used sparingly for high-priority interactive elements and brand moments. It anchors the identity with quiet intensity.#00ffff): The attention-grabbing accent — used at low opacity (rgba(0,255,255,0.12)) for glowing button backgrounds and card highlights. At full saturation, it serves as the energetic counterpoint to the dark canvas.#0089ff / rgb(0,137,255)): Used for select button borders and interactive focus states, bridging the gap between Cobalt and Cyan.#0096ff / rgb(0,150,255)): Accent border color on CTA buttons, slightly warmer than Signal Blue.#0f0f0f): The primary page background — not pure black, but a hair warmer, reducing eye strain on dark displays.#000000): Used for card interiors and deep-nested containers, creating a subtle depth distinction from the page background.#2c2c2c / rgb(44,44,44)): Used for secondary button borders and divider lines on dark surfaces.#ffffff): Primary heading and high-emphasis text color on dark surfaces.#444444): De-emphasized body text, metadata, and tertiary content.rgba(255,255,255,0.6)): Secondary body text and link labels — visible but deliberately receded.rgba(255,255,255,0.5)): Tertiary button text and placeholder content.rgba(255,255,255,0.2)): Subtle button backgrounds and deeply receded UI chrome.rgba(255,255,255,0.12)): Highest-opacity border treatment — used for prominent card edges and content separators.rgba(255,255,255,0.10)): Standard container borders on dark surfaces.rgba(255,255,255,0.08)): Subtle section dividers and secondary card edges.rgba(255,255,255,0.06)): Near-invisible containment borders for background groupings.rgba(255,255,255,0.04)): The faintest border — used for atmospheric separation only.#e0e0e0 / rgb(224,224,224)): Reserved for light-surface contexts (rare on this site).#00ffff at very low opacity, creating bioluminescent halos behind cards and feature sections.#0007cd) fading into Void Black (#0f0f0f), used in hero backgrounds and section transitions.abcDiatype, with fallbacks: abcDiatype Fallback, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color EmojiJetBrains Mono, with fallbacks: JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier NewMenlo, monospace for smallest inline code| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | abcDiatype | 64px (4rem) | 400 | 0.87 (ultra-tight) | normal | Massive, compressed headings |
| Section Heading | abcDiatype | 48px (3rem) | 400 | 1.00 (tight) | normal | Major feature section titles |
| Sub-heading Large | abcDiatype | 40px (2.5rem) | 400 | 1.00 (tight) | normal | Secondary section markers |
| Sub-heading | abcDiatype | 28px (1.75rem) | 400 | 1.20 (tight) | normal | Card titles, feature names |
| Card Title | abcDiatype | 24px (1.5rem) | 500 | 1.20 (tight) | normal | Medium-emphasis card headings |
| Feature Label | abcDiatype | 20px (1.25rem) | 500 | 1.20 (tight) | normal | Smaller card titles, labels |
| Body Large | abcDiatype | 18px (1.125rem) | 400 | 1.20 (tight) | normal | Intro paragraphs |
| Body / Button | abcDiatype | 16px (1rem) | 400 | 1.50 | normal | Standard body text, nav links, buttons |
| Body Small | abcDiatype | 15px (0.94rem) | 400 | 1.63 (relaxed) | normal | Longer-form body text |
| Caption | abcDiatype | 14px (0.875rem) | 400 | 1.63 (relaxed) | normal | Descriptions, metadata |
| Label | abcDiatype | 13px (0.81rem) | 500 | 1.50 | normal | UI labels, badges |
| Tag / Overline | abcDiatype | 12px (0.75rem) | 500 | 1.00 (tight) | 0.3px | Uppercase overline labels |
| Micro | abcDiatype | 12px (0.75rem) | 400 | 1.00 (tight) | 0.3px | Smallest sans-serif text |
| Code Body | JetBrains Mono | 16px (1rem) | 400 | 1.50 | -0.32px | Inline code, terminal output |
| Code Small | JetBrains Mono | 14px (0.875rem) | 400 | 1.50 | -0.28px | Code snippets, technical labels |
| Code Caption | JetBrains Mono | 12px (0.75rem) | 400 | 1.50 | -0.28px | Small code references |
| Code Overline | JetBrains Mono | 14px (0.875rem) | 400 | 1.43 | 0.7px | Uppercase technical labels |
| Code Micro | JetBrains Mono | 11px (0.69rem) | 400 | 1.33 | 0.55px | Tiny uppercase code tags |
| Code Nano | JetBrains Mono | 9-10px | 400 | 1.33 | 0.45-0.5px | Smallest monospace text |
uppercase + letter-spacing treatment is reserved exclusively for tiny overline labels and technical tags — never for headings.Primary CTA (White Fill)
- Background: Pure White (#ffffff)
- Text: Near Black (oklch(0.145 0 0))
- Padding: comfortable (8px 24px)
- Border: none
- Radius: subtly rounded (likely 4px based on token scale)
- Hover: likely subtle opacity reduction or slight gray shift
Cyan Accent CTA
- Background: Electric Cyan at 12% opacity (rgba(0,255,255,0.12))
- Text: Near Black (oklch(0.145 0 0))
- Padding: comfortable (8px 24px)
- Border: thin solid Ocean Blue (1px solid rgb(0,150,255))
- Radius: subtly rounded (4px)
- Creates a "glowing from within" effect on dark backgrounds
Ghost / Outline (Signal Blue)
- Background: transparent
- Text: Near Black (oklch(0.145 0 0))
- Padding: balanced (10px)
- Border: thin solid Signal Blue (1px solid rgb(0,137,255))
- Hover: likely fill or border color shift
Ghost / Outline (Charcoal)
- Background: transparent
- Text: Near Black (oklch(0.145 0 0))
- Padding: balanced (10px)
- Border: thin solid Charcoal (1px solid rgb(44,44,44))
- For secondary/tertiary actions on dark surfaces
Phantom Button
- Background: Phantom White (rgba(255,255,255,0.2))
- Text: Whisper White (rgba(255,255,255,0.5))
- No visible border
- Used for deeply de-emphasized actions
#000000) or transparentrgba(255,255,255,0.04)) to Border Mist 12 (rgba(255,255,255,0.12)) depending on prominencergba(0,0,0,0.15) 4px 4px 0px 0px) — a distinctive design choice that adds raw depthrgba(0,0,0,0.5) 0px 8px 32px)rgba(255,255,255,0.10))#0089ff) or Electric Cyan#ffffff) at standard body size (16px, abcDiatype)Stats/Metrics Display - Large monospace numbers (JetBrains Mono) — "10k+" style - Tight layout with subtle label text beneath
Code Blocks / Terminal Previews - Dark containers with JetBrains Mono - Syntax-highlighted content - Subtle bordered containers (Border Mist 10)
Integration/Partner Logos Grid - Grid layout of tool logos on dark surface - Contained within bordered card - Demonstrates ecosystem breadth
"COMPOSIO" Brand Display - Oversized brand typography — likely the largest text on the page - Used as a section divider/brand statement - Stark white on black
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, inline text |
| Contained (Level 1) | Border Mist 04-08, no shadow | Background groupings, subtle sections |
| Card (Level 2) | Border Mist 10-12, no shadow | Standard content cards, code blocks |
| Brutalist (Level 3) | Hard offset shadow (4px 4px, 15% black) |
Select interactive cards, distinctive feature highlights |
| Floating (Level 4) | Soft diffuse shadow (0px 8px 32px, 50% black) |
Modals, overlays, deeply elevated content |
Shadow Philosophy: Composio uses shadows sparingly and with deliberate contrast. The hard-offset brutalist shadow is the signature — it breaks the sleek darkness with a raw, almost retro-computing feel. The soft diffuse shadow is reserved for truly floating elements. Most depth is communicated through border opacity gradations rather than shadows.
#0f0f0f) as the primary page background — never pure white for main surfaces#00ffff) for high-signal moments only — CTAs, glows, interactive accents4px 4px) intentionally on select elements for brutalist personalityoklch(0.145 0 0)) even on the darkest backgrounds — buttons carry their own surface#0007cd) as a text color — it's too dark on dark and too saturated on light| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column, hamburger nav, full-width cards, reduced section padding, hero text scales down to ~28-40px |
| Tablet | 768-1024px | 2-column grid for cards, condensed nav, slightly reduced hero text |
| Desktop | 1024-1440px | Full multi-column layout, expanded nav with all links visible, large hero typography (64px) |
| Large Desktop | >1440px | Max-width container centered, generous horizontal margins |
When refining existing screens generated with this design system: 1. Focus on ONE component at a time 2. Reference specific color names and hex codes from this document — "use Ghost White (rgba(255,255,255,0.6))" not "make it lighter" 3. Use natural language descriptions — "make the border barely visible" = Border Mist 04-06 4. Describe the desired "feel" alongside specific measurements — "compressed and authoritative heading at 48px with line-height 1.0" 5. For glow effects, specify "Electric Cyan at 12% opacity as a radial gradient behind the element" 6. Always specify which font — abcDiatype for marketing, JetBrains Mono for technical/code content