# Convo Design System

> A high-contrast corporate canvas where deep navy depths meet vibrant cobalt actions, anchored by the technical clarity of Asap typography.

**Source:** https://convo.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Convo utilizes a sophisticated monochrome foundation of deep slates (#363840) and pure whites (#ffffff), punctuated by a primary "Convo Blue" (#497bf4). The system leans heavily on the **Asap** font family, utilizing its full weight range from 300 (light) for secondary headers to 700 (bold) for high-impact display text. Layouts are characterized by generous vertical spacing (up to 120px section gaps) and a mix of sharp edges and soft 16px radius cards. Primary actions are consistently rendered as cobalt blue pills or slightly rounded rectangles, ensuring high visibility against both light and dark-themed sections.

## Signature DNA
1. **The Cobalt Pivot** (#497bf4): Used as the singular high-voltage accent for primary CTAs and key links, creating a clear interactive path against a neutral background.
2. **Asap Weight Contrast**: The brand moves between 300 weight (light) for technical sub-labels and 700 weight (bold) for display headers, creating a hierarchy that feels both approachable and authoritative.
3. **Hybrid Geometry**: A disciplined mix of sharp 0px corners for structural containers and soft 16px radii for feature cards and 9999px pills for buttons.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 111 | 1.0 | Computed Style |
| `{color.black}` | `#000000` | Primary text, button text | 261 | 0.8 | Computed Style |
| `{color.slate-dark}` | `#363840` | Secondary text, dark section backgrounds | 7 | 0.6 | Computed Style |
| `{color.gray-light}` | `#f6f7f8` | Secondary button backgrounds, light surfaces | 26 | 1.0 | Computed Style |
| `{color.border-muted}` | `#d9e0e8` | Table borders, dividers | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#497bf4` | Primary button background, branding text | 6 | 0.6 | Computed Style |
| `{color.blue-alt}` | `#4485d4` | Pricing CTA background | 3 | 0.6 | Computed Style |
| `{color.slate-muted}` | `#94a3b8` | Deemphasized body text | 5 | 0.6 | Computed Style |
| `{color.navy-text}` | `#34475a` | Section sub-headers | 4 | 0.6 | Computed Style |
| `{color.decorative-blue}` | `#007bff` | Inline links (Pricing) | 1 | 1.0 | decorative_only |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{color.success}` | `#28a745` | Confirmation states (declared token) |
| `{color.error}` | `#dc3545` | Error validation (declared token) |
| `{color.warning}` | `#ffc107` | Warning alerts (declared token) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Asap** | 300, 400, 500, 600, 700, 800 | All headlines, body, and UI | Asap (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 44px | 52.8px | -0.9px | 700 | Hero headers | `h2.title_text.mb-0` |
| `{type.h1}` | 36px | 43.2px | -0.9px | 700 | Section headers | `h2.title_text.mb-5` |
| `{type.h2}` | 30px | 36px | -0.24px | 700 | Feature titles | `h2` |
| `{type.h3}` | 26px | 31.2px | -0.24px | 700 | Card titles | `span` |
| `{type.h4}` | 21px | 25.2px | -0.24px | 500 | Subsection labels | `h2.lg-pt-top-80` |
| `{type.ui-lg}` | 20px | 24px | 0.666px | 300 | Accordion buttons | `button.btn-link.btn-block` |
| `{type.body-lg}` | 18px | 52px | -0.24px | 400 | Primary CTAs | `a.btn.bg_blue` |
| `{type.body}` | 16px | 29.8px | -0.24px | 400 | Default running text | `section#breadcrumb_section` |
| `{type.caption}` | 13px | 24.2px | -0.24px | 400 | List items | `div.list` |

### Principles
1. **Tight Display Tracking**: Large headers (36px+) use negative letter-spacing (-0.9px) to maintain visual density.
2. **Light Technicals**: Use Asap 300 for interactive UI elements like accordions to signal a lighter, "expandable" weight.
3. **High-Contrast Body**: Paragraph text is frequently set at 16px with a generous 1.8x line height for readability.

## Spacing
**Base unit:** 4px (approximate, system uses many 5px/10px increments)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 20 |
| `{space.sm}` | 10px | 15 |
| `{space.md}` | 20px | 71 |
| `{space.lg}` | 30px | 19 |
| `{space.xl}` | 60px | 5 |
| `{space.section}` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Structural containers, pricing cards | 277 occurrences |
| `{radius.sm}` | 3px | Primary buttons, inputs | Rounded Button component |
| `{radius.md}` | 10px | UI controls | Radii evidence |
| `{radius.lg}` | 16px | Feature cards | Card component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.15) 0px 5px 10px 0px` | Floating cards and dropdowns | 16 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide action
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#497bf4` | Text: `#ffffff` | Radius: `3px` | Padding: `0px 30px` | Typography: `18px/400`
**States observed:** Default: Captured | Hover: Not captured

#### Surface
**Role:** Full-width section container
**Pages observed:** Homepage, Pricing
**Spec:** Background: `transparent` | Border: `#ffffff` | Radius: `6px` | Padding: `60px 0px`
**States observed:** Default: Captured

### Tier 2: Patterns

#### Pricing Card
**Role:** Tiered product selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #d9e0e8` | Radius: `0px` | Padding: `0px`
**States observed:** Default: Captured

#### Tab Switcher
**Role:** Monthly/Yearly toggle
**Pages observed:** Pricing
**Spec:** Typography: `18px/600` | Color: `#000000` | Border-radius: `9999px` (visual)

### Tier 3: Surface-specific

#### Feature Card
**Role:** Augmented Intelligence section highlights
**Pages observed:** Homepage
**Spec:** Background: `rgba(255, 255, 255, 0.04)` | Border: `1px solid rgba(255, 255, 255, 0.06)` | Radius: `16px` | Padding: `32px`
**States observed:** Default: Captured

#### Accordion Item
**Role:** FAQ section
**Pages observed:** Pricing
**Spec:** Typography: `20px/300` | Text: `#000000` | Border-bottom: `1px solid #d9e0e8`

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1140px (standard container) |
| Section Gap | 120px |
| Feature Grid | 2-column (desktop) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 2-column grids stack to 1-column. |
| Desktop | 1440px | Full horizontal navigation; 60px-120px vertical padding. |

## Do's
- Use **Asap 700** for all primary section headings.
- Apply **#497bf4** for the primary CTA background.
- Maintain a **120px** vertical gap between major homepage sections.
- Use **16px** border radius for cards on dark backgrounds.
- Set body text to **16px** with at least **29px** line height.

## Don'ts
- **Wrong:** Using `#007bff` for primary buttons. **Right:** Use `#497bf4`. **Reason:** `#007bff` is a legacy/decorative token and lacks brand alignment.
- Do not use border-radius on pricing cards; these must remain **0px (sharp)**.
- Do not use weights heavier than **400** for long-form body copy.
- Avoid using shadows on primary buttons; keep them flat with a **3px** radius.

## Quick start

### CSS Custom Properties
```css
:root {
  --convo-blue: #497bf4;
  --convo-slate: #363840;
  --convo-white: #ffffff;
  --convo-gray-light: #f6f7f8;
  --font-main: 'Asap', sans-serif;
  --radius-card: 16px;
  --radius-btn: 3px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #497bf4;
  --color-surface-dark: #363840;
  --font-asap: "Asap";
  --radius-btn: 3px;
  --shadow-card: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
```

## Agent prompt examples
- "Generate a hero section with a background of #363840, a title in Asap 700 at 44px (#ffffff), and a primary button using #497bf4 with a 3px radius."
- "Create a pricing grid using white cards with 0px radius and 1px solid #d9e0e8 borders."
- "Design a feature card with a dark transparent background `rgba(255, 255, 255, 0.04)`, 16px border radius, and Asap 700 headers."

## Known gaps
- Hover and active states for buttons were not explicitly captured in the computed style logs.
- Mobile-specific typography scale (fluid type) was not fully mapped.
- Iconography set was observed but no specific library (e.g., FontAwesome) was declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://convo.com | 1440x900 | 2026-06-06 |
| Pricing | https://convo.com/pricing | 1440x900 | 2026-06-06 |
| Mobile Home | https://convo.com | 390x844 | 2026-06-06 |