first commit
This commit is contained in:
necatiozmen
307
design-md/composio/DESIGN.md
Normal file
307
design-md/composio/DESIGN.md
Normal file
@@ -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
|
||||
25
design-md/composio/README.md
Normal file
25
design-md/composio/README.md
Normal file
@@ -0,0 +1,25 @@
|
||||
# Composio — Design System
|
||||
|
||||
> Design.md extracted from the public [composio.dev](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Composio design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Light Mode
|
||||
|
||||
|
||||
### Dark Mode
|
||||
|
||||
958
design-md/composio/preview-dark.html
Normal file
958
design-md/composio/preview-dark.html
Normal file
@@ -0,0 +1,958 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: Composio (Dark)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-white: #ffffff;
|
||||
--color-brand: #0007cd;
|
||||
--color-black: #000000;
|
||||
--color-void: #0f0f0f;
|
||||
--color-charcoal: #2c2c2c;
|
||||
--color-muted-smoke: #444444;
|
||||
--color-cyan: #00ffff;
|
||||
--color-signal-blue: #0089ff;
|
||||
--color-ocean-blue: #0096ff;
|
||||
--color-light-border: #e0e0e0;
|
||||
--ghost-white: rgba(255,255,255,0.6);
|
||||
--whisper-white: rgba(255,255,255,0.5);
|
||||
--phantom-white: rgba(255,255,255,0.2);
|
||||
--border-mist-12: rgba(255,255,255,0.12);
|
||||
--border-mist-10: rgba(255,255,255,0.10);
|
||||
--border-mist-08: rgba(255,255,255,0.08);
|
||||
--border-mist-06: rgba(255,255,255,0.06);
|
||||
--border-mist-04: rgba(255,255,255,0.04);
|
||||
--cyan-12: rgba(0,255,255,0.12);
|
||||
--font-sans: 'abcDiatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
/* Dark mode overrides */
|
||||
--page-bg: #000000;
|
||||
--surface: #0a0a0a;
|
||||
--card-bg: #050505;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--page-bg);
|
||||
color: var(--color-white);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 200;
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: rgba(0,0,0,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-mist-04);
|
||||
}
|
||||
.nav-brand { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a { color: var(--ghost-white); text-decoration: none; font-size: 14px; transition: color 0.2s; }
|
||||
.nav-links a:hover { color: var(--color-white); }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(0,7,205,0.3) 0%, rgba(0,255,255,0.1) 35%, transparent 65%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 64px;
|
||||
font-weight: 400;
|
||||
line-height: 0.87;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: var(--ghost-white);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-primary {
|
||||
background: var(--color-white);
|
||||
color: var(--color-black);
|
||||
padding: 10px 28px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-cyan {
|
||||
background: var(--cyan-12);
|
||||
color: var(--color-white);
|
||||
padding: 10px 28px;
|
||||
border: 1px solid var(--color-ocean-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-mist-04);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--card-bg);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--ghost-white); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--muted-smoke); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-mist-04); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--muted-smoke);
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
.btn-ghost-blue {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-signal-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-ghost-charcoal {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-charcoal);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-phantom {
|
||||
background: var(--phantom-white);
|
||||
color: var(--whisper-white);
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 4px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-mist-08); }
|
||||
.card-brutalist {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.4);
|
||||
}
|
||||
.card-glow {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.7);
|
||||
position: relative;
|
||||
}
|
||||
.card-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 4px;
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,255,0.05) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.card h3 { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; position: relative; z-index: 1; }
|
||||
.card p { color: var(--ghost-white); font-size: 15px; line-height: 1.63; position: relative; z-index: 1; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-mist-08);
|
||||
border-radius: 4px;
|
||||
color: var(--color-white);
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.form-input::placeholder { color: var(--whisper-white); }
|
||||
.form-input-focus { border-color: var(--color-signal-blue); }
|
||||
.form-input-error { border-color: #ff4444; }
|
||||
.form-error-text { font-size: 12px; color: #ff4444; margin-top: 6px; }
|
||||
textarea.form-input { min-height: 100px; resize: vertical; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: var(--cyan-12);
|
||||
border: 1px solid rgba(0,255,255,0.2);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-mist-10);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; }
|
||||
.elevation-contained { border: 1px solid var(--border-mist-04); }
|
||||
.elevation-standard { border: 1px solid var(--border-mist-08); }
|
||||
.elevation-brutalist {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.4);
|
||||
}
|
||||
.elevation-floating {
|
||||
border: 1px solid var(--border-mist-08);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.7);
|
||||
}
|
||||
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--ghost-white); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-cyan);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
.dark-badge { top: auto; bottom: 16px; right: 16px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- DARK MODE BADGE -->
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<div class="nav-brand">Composio</div>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#forms">Forms</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System Preview:<br>Composio</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md — Dark Mode</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary">Explore Tokens</button>
|
||||
<button class="btn-cyan">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0007cd;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Composio Cobalt</div>
|
||||
<div class="color-swatch-hex">#0007cd</div>
|
||||
<div class="color-swatch-role">Core brand color for high-priority interactive elements</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #00ffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Electric Cyan</div>
|
||||
<div class="color-swatch-hex">#00ffff</div>
|
||||
<div class="color-swatch-role">Attention-grabbing accent for glows and highlights</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0089ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Signal Blue</div>
|
||||
<div class="color-swatch-hex">#0089ff</div>
|
||||
<div class="color-swatch-role">Button borders and interactive focus states</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0096ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ocean Blue</div>
|
||||
<div class="color-swatch-hex">#0096ff</div>
|
||||
<div class="color-swatch-role">CTA button accent borders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid var(--border-mist-08);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Dark mode page background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0f0f0f; border-bottom: 1px solid var(--border-mist-08);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Void Black</div>
|
||||
<div class="color-swatch-hex">#0f0f0f</div>
|
||||
<div class="color-swatch-role">Standard page background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #2c2c2c;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal</div>
|
||||
<div class="color-swatch-hex">#2c2c2c</div>
|
||||
<div class="color-swatch-role">Secondary button borders and dividers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary headings and high-emphasis text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #444444;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Smoke</div>
|
||||
<div class="color-swatch-hex">#444444</div>
|
||||
<div class="color-swatch-role">De-emphasized body text, metadata</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.6);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ghost White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
|
||||
<div class="color-swatch-role">Secondary body text and link labels</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.5);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Whisper White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.5)</div>
|
||||
<div class="color-swatch-role">Tertiary button text and placeholders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.2);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Phantom White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.2)</div>
|
||||
<div class="color-swatch-role">Subtle button backgrounds and receded UI</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Border System</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 12</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
|
||||
<div class="color-swatch-role">Prominent card edges, content separators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 10</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.10)</div>
|
||||
<div class="color-swatch-role">Standard container borders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 06</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.06)</div>
|
||||
<div class="color-swatch-role">Section dividers, subtle groupings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--page-bg); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.04); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 04</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
|
||||
<div class="color-swatch-role">Faintest atmospheric separation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 64px; font-weight: 400; line-height: 0.87;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 64px / 400 / 0.87 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 48px; font-weight: 400; line-height: 1.0;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — 48px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 40px; font-weight: 400; line-height: 1.0;">Sub-heading Large</div>
|
||||
<div class="type-sample-label">Sub-heading Large — 40px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 28px; font-weight: 400; line-height: 1.2;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — 28px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 24px; font-weight: 500; line-height: 1.2;">Card Title</div>
|
||||
<div class="type-sample-label">Card Title — 24px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 20px; font-weight: 500; line-height: 1.2;">Feature Label</div>
|
||||
<div class="type-sample-label">Feature Label — 20px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 18px; font-weight: 400; line-height: 1.2;">Body Large</div>
|
||||
<div class="type-sample-label">Body Large — 18px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 16px; font-weight: 400; line-height: 1.5;">Body / Button Text</div>
|
||||
<div class="type-sample-label">Body / Button — 16px / 400 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 15px; font-weight: 400; line-height: 1.63;">Body Small — used for longer-form content blocks</div>
|
||||
<div class="type-sample-label">Body Small — 15px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 14px; font-weight: 400; line-height: 1.63; color: var(--ghost-white);">Caption text for descriptions and metadata</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 13px; font-weight: 500; line-height: 1.5;">Label Text</div>
|
||||
<div class="type-sample-label">Label — 13px / 500 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 12px; font-weight: 500; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.3px;">TAG / OVERLINE</div>
|
||||
<div class="type-sample-label">Tag / Overline — 12px / 500 / 1.00 / 0.3px / uppercase — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px;">const agent = composio.create({ tools: ["github", "slack"] })</div>
|
||||
<div class="type-sample-label">Code Body — 16px / 400 / 1.50 / -0.32px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">npx composio-cli init --framework langchain</div>
|
||||
<div class="type-sample-label">Code Small — 14px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">import { Composio } from "composio-core"</div>
|
||||
<div class="type-sample-label">Code Caption — 12px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 0.7px;">CODE OVERLINE</div>
|
||||
<div class="type-sample-label">Code Overline — 14px / 400 / 1.43 / 0.7px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.55px;">CODE MICRO TAG</div>
|
||||
<div class="type-sample-label">Code Micro — 11px / 400 / 1.33 / 0.55px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-primary">Get Started</button>
|
||||
<div class="button-demo-label">Primary / White Fill</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-cyan">View Docs</button>
|
||||
<div class="button-demo-label">Cyan Accent CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-blue">Learn More</button>
|
||||
<div class="button-demo-label">Ghost / Signal Blue</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-charcoal">Secondary</button>
|
||||
<div class="button-demo-label">Ghost / Charcoal</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-phantom">Dismiss</button>
|
||||
<div class="button-demo-label">Phantom</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Border Mist 08</h3>
|
||||
<p>Standard content card with subtle white border at 8% opacity on pure black surface. Deeper darkness for the dark mode variant.</p>
|
||||
</div>
|
||||
<div class="card card-brutalist">
|
||||
<div class="card-label">Brutalist Shadow</div>
|
||||
<h3>Hard Offset 4px</h3>
|
||||
<p>Hard-offset shadow intensified to 40% opacity on pure black. The brutalist personality cuts deeper against the absolute dark.</p>
|
||||
</div>
|
||||
<div class="card card-glow">
|
||||
<div class="card-label">Floating + Glow</div>
|
||||
<h3>Cyan Glow Halo</h3>
|
||||
<p>Soft diffuse shadow at 70% opacity with restrained cyan glow. The deeper black makes the glow more pronounced.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<div class="section-title">05 / Form Elements</div>
|
||||
<h2 class="section-heading">Inputs & Forms</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Default Input</label>
|
||||
<input type="text" class="form-input" placeholder="Enter your API key...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Focus State</label>
|
||||
<input type="text" class="form-input form-input-focus" value="composio-api-key-xxxxx">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Error State</label>
|
||||
<input type="text" class="form-input form-input-error" value="invalid-key">
|
||||
<div class="form-error-text">Invalid API key format</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Textarea</label>
|
||||
<textarea class="form-input" placeholder="Describe your agent's task..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">06 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--ghost-white); margin-bottom: 32px;">Base unit: 8px. Scale builds from 1px to 40px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 4px; height: 4px;"></div>
|
||||
<div class="spacing-label">1px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 8px; height: 8px;"></div>
|
||||
<div class="spacing-label">2px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 16px; height: 16px;"></div>
|
||||
<div class="spacing-label">4px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 24px; height: 24px;"></div>
|
||||
<div class="spacing-label">6px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 32px; height: 32px;"></div>
|
||||
<div class="spacing-label">8px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 40px; height: 40px;"></div>
|
||||
<div class="spacing-label">10px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 48px; height: 48px;"></div>
|
||||
<div class="spacing-label">12px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 56px; height: 56px;"></div>
|
||||
<div class="spacing-label">14px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 64px; height: 64px;"></div>
|
||||
<div class="spacing-label">16px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 72px; height: 72px;"></div>
|
||||
<div class="spacing-label">18px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 80px; height: 80px;"></div>
|
||||
<div class="spacing-label">20px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 96px; height: 96px;"></div>
|
||||
<div class="spacing-label">24px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 120px; height: 120px;"></div>
|
||||
<div class="spacing-label">30px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 128px; height: 128px;"></div>
|
||||
<div class="spacing-label">32px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 160px; height: 160px;"></div>
|
||||
<div class="spacing-label">40px</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">07 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 0px;"></div>
|
||||
<div class="radius-label">0px</div>
|
||||
<div class="radius-context">Sharp / None</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 2px;"></div>
|
||||
<div class="radius-label">2px</div>
|
||||
<div class="radius-context">Nearly squared</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 4px;"></div>
|
||||
<div class="radius-label">4px</div>
|
||||
<div class="radius-context">Subtly rounded</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 37px;"></div>
|
||||
<div class="radius-label">37px</div>
|
||||
<div class="radius-context">Pill-shaped</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 9999px;"></div>
|
||||
<div class="radius-label">9999px</div>
|
||||
<div class="radius-context">Full round</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">08 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div>
|
||||
<div class="elevation-name">Flat</div>
|
||||
<div class="elevation-desc">No shadow, no border. Page background and inline text.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-contained">
|
||||
<div>
|
||||
<div class="elevation-name">Contained</div>
|
||||
<div class="elevation-desc">Border Mist 04. Background groupings, subtle sections.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-standard">
|
||||
<div>
|
||||
<div class="elevation-name">Card</div>
|
||||
<div class="elevation-desc">Border Mist 08. Standard content cards, code blocks.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-brutalist">
|
||||
<div>
|
||||
<div class="elevation-name">Brutalist</div>
|
||||
<div class="elevation-desc">Hard offset shadow (4px 4px, 40% black). Distinctive feature highlights.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-floating">
|
||||
<div>
|
||||
<div class="elevation-name">Floating</div>
|
||||
<div class="elevation-desc">Soft diffuse shadow (0px 8px 32px, 70% black). Modals, overlays.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
933
design-md/composio/preview.html
Normal file
933
design-md/composio/preview.html
Normal file
@@ -0,0 +1,933 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: Composio</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--color-white: #ffffff;
|
||||
--color-brand: #0007cd;
|
||||
--color-black: #000000;
|
||||
--color-void: #0f0f0f;
|
||||
--color-charcoal: #2c2c2c;
|
||||
--color-muted-smoke: #444444;
|
||||
--color-cyan: #00ffff;
|
||||
--color-signal-blue: #0089ff;
|
||||
--color-ocean-blue: #0096ff;
|
||||
--color-light-border: #e0e0e0;
|
||||
--ghost-white: rgba(255,255,255,0.6);
|
||||
--whisper-white: rgba(255,255,255,0.5);
|
||||
--phantom-white: rgba(255,255,255,0.2);
|
||||
--border-mist-12: rgba(255,255,255,0.12);
|
||||
--border-mist-10: rgba(255,255,255,0.10);
|
||||
--border-mist-08: rgba(255,255,255,0.08);
|
||||
--border-mist-06: rgba(255,255,255,0.06);
|
||||
--border-mist-04: rgba(255,255,255,0.04);
|
||||
--cyan-12: rgba(0,255,255,0.12);
|
||||
--font-sans: 'abcDiatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--color-void);
|
||||
color: var(--color-white);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 40px;
|
||||
background: rgba(15,15,15,0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border-mist-06);
|
||||
}
|
||||
.nav-brand { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; }
|
||||
.nav-links { display: flex; gap: 32px; align-items: center; }
|
||||
.nav-links a { color: var(--ghost-white); text-decoration: none; font-size: 14px; transition: color 0.2s; }
|
||||
.nav-links a:hover { color: var(--color-white); }
|
||||
.nav-cta {
|
||||
background: var(--color-white);
|
||||
color: var(--color-void);
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 120px 40px 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(0,7,205,0.25) 0%, rgba(0,255,255,0.08) 40%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 64px;
|
||||
font-weight: 400;
|
||||
line-height: 0.87;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.hero p {
|
||||
color: var(--ghost-white);
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 16px; justify-content: center; position: relative; }
|
||||
.btn-primary {
|
||||
background: var(--color-white);
|
||||
color: var(--color-void);
|
||||
padding: 10px 28px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-cyan {
|
||||
background: var(--cyan-12);
|
||||
color: var(--color-white);
|
||||
padding: 10px 28px;
|
||||
border: 1px solid var(--color-ocean-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.section-heading {
|
||||
font-size: 40px;
|
||||
font-weight: 400;
|
||||
line-height: 1.0;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border-mist-06);
|
||||
margin: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* COLOR PALETTE */
|
||||
.color-group { margin-bottom: 40px; }
|
||||
.color-group-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 20px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.color-swatch-block {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.color-swatch-info {
|
||||
padding: 12px;
|
||||
background: var(--color-black);
|
||||
}
|
||||
.color-swatch-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
|
||||
.color-swatch-hex { font-family: var(--font-mono); font-size: 12px; color: var(--ghost-white); margin-bottom: 4px; }
|
||||
.color-swatch-role { font-size: 12px; color: var(--muted-smoke); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--border-mist-04); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample-text { margin-bottom: 8px; }
|
||||
.type-sample-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
color: var(--muted-smoke);
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-demo { text-align: center; }
|
||||
.button-demo-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
}
|
||||
.btn-ghost-blue {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-signal-blue);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-ghost-charcoal {
|
||||
background: transparent;
|
||||
color: var(--color-white);
|
||||
padding: 10px 24px;
|
||||
border: 1px solid var(--color-charcoal);
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-phantom {
|
||||
background: var(--phantom-white);
|
||||
color: var(--whisper-white);
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
|
||||
.card {
|
||||
background: var(--color-black);
|
||||
border-radius: 4px;
|
||||
padding: 28px;
|
||||
}
|
||||
.card-standard { border: 1px solid var(--border-mist-10); }
|
||||
.card-brutalist {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15);
|
||||
}
|
||||
.card-glow {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
}
|
||||
.card-glow::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
border-radius: 4px;
|
||||
background: radial-gradient(ellipse at center, rgba(0,255,255,0.06) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.card h3 { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; position: relative; z-index: 1; }
|
||||
.card p { color: var(--ghost-white); font-size: 15px; line-height: 1.63; position: relative; z-index: 1; }
|
||||
.card-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
color: var(--color-cyan);
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: var(--ghost-white);
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-mist-10);
|
||||
border-radius: 4px;
|
||||
color: var(--color-white);
|
||||
font-size: 16px;
|
||||
font-family: var(--font-sans);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.form-input::placeholder { color: var(--whisper-white); }
|
||||
.form-input-focus { border-color: var(--color-signal-blue); }
|
||||
.form-input-error { border-color: #ff4444; }
|
||||
.form-error-text { font-size: 12px; color: #ff4444; margin-top: 6px; }
|
||||
textarea.form-input { min-height: 100px; resize: vertical; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-box {
|
||||
background: var(--cyan-12);
|
||||
border: 1px solid rgba(0,255,255,0.3);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.spacing-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--color-black);
|
||||
border: 1px solid var(--border-mist-12);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.radius-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
}
|
||||
.radius-context {
|
||||
font-size: 11px;
|
||||
color: var(--muted-smoke);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
|
||||
.elevation-card {
|
||||
background: var(--color-black);
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.elevation-flat { border: none; }
|
||||
.elevation-contained { border: 1px solid var(--border-mist-06); }
|
||||
.elevation-standard { border: 1px solid var(--border-mist-10); }
|
||||
.elevation-brutalist {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.15);
|
||||
}
|
||||
.elevation-floating {
|
||||
border: 1px solid var(--border-mist-10);
|
||||
box-shadow: 0px 8px 32px rgba(0,0,0,0.5);
|
||||
}
|
||||
.elevation-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
|
||||
.elevation-desc { font-size: 13px; color: var(--ghost-white); line-height: 1.5; }
|
||||
.elevation-level {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--color-cyan);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav { padding: 12px 20px; }
|
||||
.nav-links a:not(.nav-cta-wrapper) { display: none; }
|
||||
.hero { padding: 80px 20px 60px; }
|
||||
.hero h1 { font-size: 36px; }
|
||||
.section { padding: 60px 20px; }
|
||||
.section-heading { font-size: 28px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.hero-buttons { flex-direction: column; align-items: center; }
|
||||
.button-row { flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav class="nav">
|
||||
<div class="nav-brand">Composio</div>
|
||||
<div class="nav-links">
|
||||
<a href="#colors">Colors</a>
|
||||
<a href="#typography">Typography</a>
|
||||
<a href="#buttons">Buttons</a>
|
||||
<a href="#cards">Cards</a>
|
||||
<a href="#forms">Forms</a>
|
||||
<a href="#spacing">Spacing</a>
|
||||
<a href="#elevation">Elevation</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<h1>Design System Preview:<br>Composio</h1>
|
||||
<p>Auto-generated design token catalog from DESIGN.md</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-primary">Explore Tokens</button>
|
||||
<button class="btn-cyan">View Source</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<div class="section-title">01 / Color Palette</div>
|
||||
<h2 class="section-heading">Color Palette & Roles</h2>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0007cd;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Composio Cobalt</div>
|
||||
<div class="color-swatch-hex">#0007cd</div>
|
||||
<div class="color-swatch-role">Core brand color for high-priority interactive elements</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #00ffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Electric Cyan</div>
|
||||
<div class="color-swatch-hex">#00ffff</div>
|
||||
<div class="color-swatch-role">Attention-grabbing accent for glows and highlights</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0089ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Signal Blue</div>
|
||||
<div class="color-swatch-hex">#0089ff</div>
|
||||
<div class="color-swatch-role">Button borders and interactive focus states</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0096ff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ocean Blue</div>
|
||||
<div class="color-swatch-hex">#0096ff</div>
|
||||
<div class="color-swatch-role">CTA button accent borders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #0f0f0f; border-bottom: 1px solid var(--border-mist-10);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Void Black</div>
|
||||
<div class="color-swatch-hex">#0f0f0f</div>
|
||||
<div class="color-swatch-role">Primary page background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #000000; border-bottom: 1px solid var(--border-mist-10);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure Black</div>
|
||||
<div class="color-swatch-hex">#000000</div>
|
||||
<div class="color-swatch-role">Card interiors and deep-nested containers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #2c2c2c;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Charcoal</div>
|
||||
<div class="color-swatch-hex">#2c2c2c</div>
|
||||
<div class="color-swatch-role">Secondary button borders and dividers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #ffffff;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Pure White</div>
|
||||
<div class="color-swatch-hex">#ffffff</div>
|
||||
<div class="color-swatch-role">Primary headings and high-emphasis text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: #444444;"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Muted Smoke</div>
|
||||
<div class="color-swatch-hex">#444444</div>
|
||||
<div class="color-swatch-role">De-emphasized body text, metadata</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.6);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Ghost White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.6)</div>
|
||||
<div class="color-swatch-role">Secondary body text and link labels</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.5);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Whisper White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.5)</div>
|
||||
<div class="color-swatch-role">Tertiary button text and placeholders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: rgba(255,255,255,0.2);"></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Phantom White</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.2)</div>
|
||||
<div class="color-swatch-role">Subtle button backgrounds and receded UI</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-group">
|
||||
<h3 class="color-group-title">Border System</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 12</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.12)</div>
|
||||
<div class="color-swatch-role">Prominent card edges, content separators</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 10</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.10)</div>
|
||||
<div class="color-swatch-role">Standard container borders</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.06); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 06</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.06)</div>
|
||||
<div class="color-swatch-role">Section dividers, subtle groupings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-swatch">
|
||||
<div class="color-swatch-block" style="background: var(--color-void); display: flex; align-items: center; justify-content: center;"><div style="width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.04); border-radius: 4px;"></div></div>
|
||||
<div class="color-swatch-info">
|
||||
<div class="color-swatch-name">Border Mist 04</div>
|
||||
<div class="color-swatch-hex">rgba(255,255,255,0.04)</div>
|
||||
<div class="color-swatch-role">Faintest atmospheric separation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<div class="section-title">02 / Typography Scale</div>
|
||||
<h2 class="section-heading">Typography Rules</h2>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 64px; font-weight: 400; line-height: 0.87;">Display Hero</div>
|
||||
<div class="type-sample-label">Display / Hero — 64px / 400 / 0.87 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 48px; font-weight: 400; line-height: 1.0;">Section Heading</div>
|
||||
<div class="type-sample-label">Section Heading — 48px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 40px; font-weight: 400; line-height: 1.0;">Sub-heading Large</div>
|
||||
<div class="type-sample-label">Sub-heading Large — 40px / 400 / 1.00 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 28px; font-weight: 400; line-height: 1.2;">Sub-heading</div>
|
||||
<div class="type-sample-label">Sub-heading — 28px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 24px; font-weight: 500; line-height: 1.2;">Card Title</div>
|
||||
<div class="type-sample-label">Card Title — 24px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 20px; font-weight: 500; line-height: 1.2;">Feature Label</div>
|
||||
<div class="type-sample-label">Feature Label — 20px / 500 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 18px; font-weight: 400; line-height: 1.2;">Body Large</div>
|
||||
<div class="type-sample-label">Body Large — 18px / 400 / 1.20 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 16px; font-weight: 400; line-height: 1.5;">Body / Button Text</div>
|
||||
<div class="type-sample-label">Body / Button — 16px / 400 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 15px; font-weight: 400; line-height: 1.63;">Body Small — used for longer-form content blocks</div>
|
||||
<div class="type-sample-label">Body Small — 15px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 14px; font-weight: 400; line-height: 1.63; color: var(--ghost-white);">Caption text for descriptions and metadata</div>
|
||||
<div class="type-sample-label">Caption — 14px / 400 / 1.63 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 13px; font-weight: 500; line-height: 1.5;">Label Text</div>
|
||||
<div class="type-sample-label">Label — 13px / 500 / 1.50 / normal — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-size: 12px; font-weight: 500; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.3px;">TAG / OVERLINE</div>
|
||||
<div class="type-sample-label">Tag / Overline — 12px / 500 / 1.00 / 0.3px / uppercase — abcDiatype</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: -0.32px;">const agent = composio.create({ tools: ["github", "slack"] })</div>
|
||||
<div class="type-sample-label">Code Body — 16px / 400 / 1.50 / -0.32px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">npx composio-cli init --framework langchain</div>
|
||||
<div class="type-sample-label">Code Small — 14px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -0.28px;">import { Composio } from "composio-core"</div>
|
||||
<div class="type-sample-label">Code Caption — 12px / 400 / 1.50 / -0.28px — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 14px; font-weight: 400; line-height: 1.43; text-transform: uppercase; letter-spacing: 0.7px;">CODE OVERLINE</div>
|
||||
<div class="type-sample-label">Code Overline — 14px / 400 / 1.43 / 0.7px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-sample-text" style="font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.33; text-transform: uppercase; letter-spacing: 0.55px;">CODE MICRO TAG</div>
|
||||
<div class="type-sample-label">Code Micro — 11px / 400 / 1.33 / 0.55px / uppercase — JetBrains Mono</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-title">03 / Button Variants</div>
|
||||
<h2 class="section-heading">Buttons</h2>
|
||||
|
||||
<div class="button-row">
|
||||
<div class="button-demo">
|
||||
<button class="btn-primary">Get Started</button>
|
||||
<div class="button-demo-label">Primary / White Fill</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-cyan">View Docs</button>
|
||||
<div class="button-demo-label">Cyan Accent CTA</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-blue">Learn More</button>
|
||||
<div class="button-demo-label">Ghost / Signal Blue</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-ghost-charcoal">Secondary</button>
|
||||
<div class="button-demo-label">Ghost / Charcoal</div>
|
||||
</div>
|
||||
<div class="button-demo">
|
||||
<button class="btn-phantom">Dismiss</button>
|
||||
<div class="button-demo-label">Phantom</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<div class="section-title">04 / Card Examples</div>
|
||||
<h2 class="section-heading">Cards & Containers</h2>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-standard">
|
||||
<div class="card-label">Standard Card</div>
|
||||
<h3>Border Mist 10</h3>
|
||||
<p>Standard content card with subtle white border at 10% opacity and 4px radius. The default container for most content blocks.</p>
|
||||
</div>
|
||||
<div class="card card-brutalist">
|
||||
<div class="card-label">Brutalist Shadow</div>
|
||||
<h3>Hard Offset 4px</h3>
|
||||
<p>Distinctive hard-offset shadow (4px right, 4px down) at 15% opacity. Adds a raw, retro-computing personality to select elements.</p>
|
||||
</div>
|
||||
<div class="card card-glow">
|
||||
<div class="card-label">Floating + Glow</div>
|
||||
<h3>Cyan Glow Halo</h3>
|
||||
<p>Soft diffuse shadow (8px 32px) with a radial cyan gradient halo. Used for highest-emphasis elevated content and feature highlights.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<div class="section-title">05 / Form Elements</div>
|
||||
<h2 class="section-heading">Inputs & Forms</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Default Input</label>
|
||||
<input type="text" class="form-input" placeholder="Enter your API key...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Focus State</label>
|
||||
<input type="text" class="form-input form-input-focus" value="composio-api-key-xxxxx">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Error State</label>
|
||||
<input type="text" class="form-input form-input-error" value="invalid-key">
|
||||
<div class="form-error-text">Invalid API key format</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Textarea</label>
|
||||
<textarea class="form-input" placeholder="Describe your agent's task..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-title">06 / Spacing Scale</div>
|
||||
<h2 class="section-heading">Spacing System</h2>
|
||||
<p style="color: var(--ghost-white); margin-bottom: 32px;">Base unit: 8px. Scale builds from 1px to 40px.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 4px; height: 4px;"></div>
|
||||
<div class="spacing-label">1px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 8px; height: 8px;"></div>
|
||||
<div class="spacing-label">2px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 16px; height: 16px;"></div>
|
||||
<div class="spacing-label">4px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 24px; height: 24px;"></div>
|
||||
<div class="spacing-label">6px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 32px; height: 32px;"></div>
|
||||
<div class="spacing-label">8px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 40px; height: 40px;"></div>
|
||||
<div class="spacing-label">10px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 48px; height: 48px;"></div>
|
||||
<div class="spacing-label">12px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 56px; height: 56px;"></div>
|
||||
<div class="spacing-label">14px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 64px; height: 64px;"></div>
|
||||
<div class="spacing-label">16px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 72px; height: 72px;"></div>
|
||||
<div class="spacing-label">18px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 80px; height: 80px;"></div>
|
||||
<div class="spacing-label">20px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 96px; height: 96px;"></div>
|
||||
<div class="spacing-label">24px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 120px; height: 120px;"></div>
|
||||
<div class="spacing-label">30px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 128px; height: 128px;"></div>
|
||||
<div class="spacing-label">32px</div>
|
||||
</div>
|
||||
<div class="spacing-item">
|
||||
<div class="spacing-box" style="width: 160px; height: 160px;"></div>
|
||||
<div class="spacing-label">40px</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BORDER RADIUS -->
|
||||
<section class="section">
|
||||
<div class="section-title">07 / Border Radius Scale</div>
|
||||
<h2 class="section-heading">Border Radius</h2>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 0px;"></div>
|
||||
<div class="radius-label">0px</div>
|
||||
<div class="radius-context">Sharp / None</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 2px;"></div>
|
||||
<div class="radius-label">2px</div>
|
||||
<div class="radius-context">Nearly squared</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 4px;"></div>
|
||||
<div class="radius-label">4px</div>
|
||||
<div class="radius-context">Subtly rounded</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 37px;"></div>
|
||||
<div class="radius-label">37px</div>
|
||||
<div class="radius-context">Pill-shaped</div>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius: 9999px;"></div>
|
||||
<div class="radius-label">9999px</div>
|
||||
<div class="radius-context">Full round</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-title">08 / Elevation & Depth</div>
|
||||
<h2 class="section-heading">Depth & Elevation</h2>
|
||||
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elevation-flat">
|
||||
<div>
|
||||
<div class="elevation-name">Flat</div>
|
||||
<div class="elevation-desc">No shadow, no border. Page background and inline text.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 0</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-contained">
|
||||
<div>
|
||||
<div class="elevation-name">Contained</div>
|
||||
<div class="elevation-desc">Border Mist 04-08. Background groupings, subtle sections.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 1</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-standard">
|
||||
<div>
|
||||
<div class="elevation-name">Card</div>
|
||||
<div class="elevation-desc">Border Mist 10-12. Standard content cards, code blocks.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 2</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-brutalist">
|
||||
<div>
|
||||
<div class="elevation-name">Brutalist</div>
|
||||
<div class="elevation-desc">Hard offset shadow (4px 4px, 15% black). Distinctive feature highlights.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 3</div>
|
||||
</div>
|
||||
<div class="elevation-card elevation-floating">
|
||||
<div>
|
||||
<div class="elevation-name">Floating</div>
|
||||
<div class="elevation-desc">Soft diffuse shadow (0px 8px 32px, 50% black). Modals, overlays.</div>
|
||||
</div>
|
||||
<div class="elevation-level">Level 4</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height: 80px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user