first commit

design-md/composio/DESIGN.md

@@ -0,0 +1,307 @@
+# Design System: Composio
+
+## 1. Visual Theme & Atmosphere
+
+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
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Composio Cobalt** (`#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.
+
+### Secondary & Accent
+- **Electric Cyan** (`#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.
+- **Signal Blue** (`#0089ff` / `rgb(0,137,255)`): Used for select button borders and interactive focus states, bridging the gap between Cobalt and Cyan.
+- **Ocean Blue** (`#0096ff` / `rgb(0,150,255)`): Accent border color on CTA buttons, slightly warmer than Signal Blue.
+
+### Surface & Background
+- **Void Black** (`#0f0f0f`): The primary page background — not pure black, but a hair warmer, reducing eye strain on dark displays.
+- **Pure Black** (`#000000`): Used for card interiors and deep-nested containers, creating a subtle depth distinction from the page background.
+- **Charcoal** (`#2c2c2c` / `rgb(44,44,44)`): Used for secondary button borders and divider lines on dark surfaces.
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`): Primary heading and high-emphasis text color on dark surfaces.
+- **Muted Smoke** (`#444444`): De-emphasized body text, metadata, and tertiary content.
+- **Ghost White** (`rgba(255,255,255,0.6)`): Secondary body text and link labels — visible but deliberately receded.
+- **Whisper White** (`rgba(255,255,255,0.5)`): Tertiary button text and placeholder content.
+- **Phantom White** (`rgba(255,255,255,0.2)`): Subtle button backgrounds and deeply receded UI chrome.
+
+### Semantic & Accent
+- **Border Mist 12** (`rgba(255,255,255,0.12)`): Highest-opacity border treatment — used for prominent card edges and content separators.
+- **Border Mist 10** (`rgba(255,255,255,0.10)`): Standard container borders on dark surfaces.
+- **Border Mist 08** (`rgba(255,255,255,0.08)`): Subtle section dividers and secondary card edges.
+- **Border Mist 06** (`rgba(255,255,255,0.06)`): Near-invisible containment borders for background groupings.
+- **Border Mist 04** (`rgba(255,255,255,0.04)`): The faintest border — used for atmospheric separation only.
+- **Light Border** (`#e0e0e0` / `rgb(224,224,224)`): Reserved for light-surface contexts (rare on this site).
+
+### Gradient System
+- **Cyan Glow**: Radial gradients using `#00ffff` at very low opacity, creating bioluminescent halos behind cards and feature sections.
+- **Blue-to-Black Fade**: Linear gradients from Composio Cobalt (`#0007cd`) fading into Void Black (`#0f0f0f`), used in hero backgrounds and section transitions.
+- **White Fog**: Bottom-of-page gradient transitioning from dark to a diffused white/gray, creating an atmospheric "horizon line" effect near the footer.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `abcDiatype`, with fallbacks: `abcDiatype Fallback, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
+- **Monospace**: `JetBrains Mono`, with fallbacks: `JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+- **System Monospace** (fallback): `Menlo`, `monospace` for smallest inline code
+
+### Hierarchy
+
+| 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 |
+
+### Principles
+- **Compression creates authority**: Heading line-heights are drastically tight (0.87-1.0), making large text feel dense and commanding rather than airy and decorative.
+- **Dual personality**: abcDiatype carries the marketing voice — geometric, precise, friendly. JetBrains Mono carries the technical voice — credible, functional, familiar to developers.
+- **Weight restraint**: Almost everything is weight 400 (regular). Weight 500 (medium) is reserved for small labels, badges, and select card titles. Weight 700 (bold) appears only in microscopic system-monospace contexts.
+- **Negative letter-spacing on code**: JetBrains Mono uses negative letter-spacing (-0.28px to -0.98px) for dense, compact code blocks that feel like a real IDE.
+- **Uppercase is earned**: The `uppercase` + `letter-spacing` treatment is reserved exclusively for tiny overline labels and technical tags — never for headings.
+
+## 4. Component Stylings
+
+### Buttons
+
+**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
+
+### Cards & Containers
+- Background: Pure Black (`#000000`) or transparent
+- Border: white at very low opacity, ranging from Border Mist 04 (`rgba(255,255,255,0.04)`) to Border Mist 12 (`rgba(255,255,255,0.12)`) depending on prominence
+- Radius: barely rounded corners (2px for inline elements, 4px for content cards)
+- Shadow: select cards use the hard-offset brutalist shadow (`rgba(0,0,0,0.15) 4px 4px 0px 0px`) — a distinctive design choice that adds raw depth
+- Elevation shadow: deeper containers use soft diffuse shadow (`rgba(0,0,0,0.5) 0px 8px 32px`)
+- Hover behavior: likely subtle border opacity increase or faint glow effect
+
+### Inputs & Forms
+- No explicit input token data extracted — inputs likely follow the dark-surface pattern with:
+  - Background: transparent or Pure Black
+  - Border: Border Mist 10 (`rgba(255,255,255,0.10)`)
+  - Focus: border shifts to Signal Blue (`#0089ff`) or Electric Cyan
+  - Text: Pure White with Ghost White placeholder
+
+### Navigation
+- Sticky top nav bar on dark/black background
+- Logo (white SVG): Composio wordmark on the left
+- Nav links: Pure White (`#ffffff`) at standard body size (16px, abcDiatype)
+- CTA button in the nav: White Fill Primary style
+- Mobile: collapses to hamburger menu, single-column layout
+- Subtle bottom border on nav (Border Mist 06-08)
+
+### Image Treatment
+- Dark-themed product screenshots and UI mockups dominate
+- Images sit within bordered containers matching the card system
+- Blue/cyan gradient glows behind or beneath feature images
+- No visible border-radius on images beyond container rounding (4px)
+- Full-bleed within their card containers
+
+### Distinctive Components
+
+**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
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 30px, 32px, 40px
+- Component padding: typically 10px (buttons) to 24px (CTA buttons horizontal)
+- Section padding: generous vertical spacing (estimated 80-120px between major sections)
+- Card internal padding: approximately 24-32px
+
+### Grid & Container
+- Max container width: approximately 1200px, centered
+- Content sections use single-column or 2-3 column grids for feature cards
+- Hero: centered single-column with maximum impact
+- Feature sections: asymmetric layouts mixing text blocks with product screenshots
+
+### Whitespace Philosophy
+- **Breathing room between sections**: Large vertical gaps create distinct "chapters" in the page scroll.
+- **Dense within components**: Cards and text blocks are internally compact (tight line-heights, minimal internal padding), creating focused information nodes.
+- **Contrast-driven separation**: Rather than relying solely on whitespace, Composio uses border opacity differences and subtle background shifts to delineate content zones.
+
+### Border Radius Scale
+- Nearly squared (2px): Inline code spans, small tags, pre blocks — the sharpest treatment, conveying technical precision
+- Subtly rounded (4px): Content cards, images, standard containers — the workhorse radius
+- Pill-shaped (37px): Select buttons and badges — creates a softer, more approachable feel for key CTAs
+- Full round (9999px+): Circular elements, avatar-like containers, decorative dots
+
+## 6. Depth & Elevation
+
+| 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.
+
+### Decorative Depth
+- **Cyan Glow Halos**: Radial gradient halos using Electric Cyan at low opacity behind feature cards and images. Creates a "screen glow" effect as if the UI elements are emitting light.
+- **Blue-Black Gradient Washes**: Linear gradients from Composio Cobalt to Void Black used as section backgrounds, adding subtle color temperature shifts.
+- **White Fog Horizon**: A gradient from dark to diffused white/gray at the bottom of the page, creating an atmospheric "dawn" effect before the footer.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Void Black (`#0f0f0f`) as the primary page background — never pure white for main surfaces
+- Keep heading line-heights ultra-tight (0.87-1.0) for compressed, authoritative text blocks
+- Use white-opacity borders (4-12%) for containment — they're more important than shadows here
+- Reserve Electric Cyan (`#00ffff`) for high-signal moments only — CTAs, glows, interactive accents
+- Pair abcDiatype with JetBrains Mono to reinforce the developer-tool identity
+- Use the hard-offset shadow (`4px 4px`) intentionally on select elements for brutalist personality
+- Keep button text dark (`oklch(0.145 0 0)`) even on the darkest backgrounds — buttons carry their own surface
+- Layer opacity-based borders to create subtle depth without shadows
+- Use uppercase + letter-spacing only for tiny overline labels (12px or smaller)
+
+### Don't
+- Don't use bright backgrounds or light surfaces as primary containers
+- Don't apply heavy shadows everywhere — depth comes from border opacity, not box-shadow
+- Don't use Composio Cobalt (`#0007cd`) as a text color — it's too dark on dark and too saturated on light
+- Don't increase heading line-heights beyond 1.2 — the compressed feel is core to the identity
+- Don't use bold (700) weight for body or heading text — 400-500 is the ceiling
+- Don't mix warm colors — the palette is strictly cool (blue, cyan, white, black)
+- Don't use border-radius larger than 4px on content cards — the precision of near-square corners is intentional
+- Don't place Electric Cyan at full opacity on large surfaces — it's an accent, used at 12% max for backgrounds
+- Don't use decorative serif or handwritten fonts — the entire identity is geometric sans + monospace
+- Don't skip the monospace font for technical content — JetBrains Mono is not decorative, it's a credibility signal
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| 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 |
+
+### Touch Targets
+- Minimum touch target: 44x44px for all interactive elements
+- Buttons use comfortable padding (8px 24px minimum) ensuring adequate touch area
+- Nav links spaced with sufficient gap for thumb navigation
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav on desktop collapses to hamburger on mobile
+- **Feature grids**: 3-column → 2-column → single-column stacking
+- **Hero text**: 64px → 40px → 28px progressive scaling
+- **Section padding**: Reduces proportionally but maintains generous vertical rhythm
+- **Cards**: Stack vertically on mobile with full-width treatment
+- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping
+
+### Image Behavior
+- Product screenshots scale proportionally within their containers
+- Dark-themed images maintain contrast on the dark background at all sizes
+- Gradient glow effects scale with container size
+- No visible art direction changes between breakpoints — same crops, proportional scaling
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: "Pure White (#ffffff)"
+- Page Background: "Void Black (#0f0f0f)"
+- Brand Accent: "Composio Cobalt (#0007cd)"
+- Glow Accent: "Electric Cyan (#00ffff)"
+- Heading Text: "Pure White (#ffffff)"
+- Body Text: "Ghost White (rgba(255,255,255,0.6))"
+- Card Border: "Border Mist 10 (rgba(255,255,255,0.10))"
+- Button Border: "Signal Blue (#0089ff)"
+
+### Example Component Prompts
+- "Create a feature card with a near-black background (#000000), barely visible white border at 10% opacity, subtly rounded corners (4px), and a hard-offset shadow (4px right, 4px down, 15% black). Use Pure White for the title in abcDiatype at 24px weight 500, and Ghost White (60% opacity) for the description at 16px."
+- "Design a primary CTA button with a solid white background, near-black text, comfortable padding (8px vertical, 24px horizontal), and subtly rounded corners. Place it next to a secondary button with transparent background, Signal Blue border, and matching padding."
+- "Build a hero section on Void Black (#0f0f0f) with a massive heading at 64px, line-height 0.87, in abcDiatype. Center the text. Add a subtle blue-to-black gradient glow behind the content. Include a white CTA button and a cyan-accented secondary button below."
+- "Create a code snippet display using JetBrains Mono at 14px with -0.28px letter-spacing on a black background. Add a Border Mist 10 border (rgba(255,255,255,0.10)) and 4px radius. Show syntax-highlighted content with white and cyan text."
+- "Design a navigation bar on Void Black with the Composio wordmark in white on the left, 4-5 nav links in white abcDiatype at 16px, and a white-fill CTA button on the right. Add a Border Mist 06 bottom border."
+
+### Iteration Guide
+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