# Capsource Design System

> High-contrast academic professional: geometric Avenir headlines anchored by a vibrant orange primary accent and structured grid layouts.

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

## TL;DR
Capsource utilizes a high-energy monochrome base, relying on pure white (#ffffff) and soft gray (#f3f3f3) surfaces punctuated by a signature orange (#f7931d) accent. Typography is strictly Avenir-Book, ranging from massive 60px display headers to highly legible 16px body text, maintaining a professional yet accessible educational aesthetic. The system favors extreme rounded geometry, with buttons and cards often utilizing 99px or 50px radii to create a "pill" or "bubble" motif. Layouts are characterized by generous vertical spacing (up to 113px) and a distinct "dot grid" decorative pattern used in hero backgrounds.

## Signature DNA
1. **The Orange Accent** (#f7931d used as `--primary` for CTAs, borders, and text emphasis, providing high-voltage contrast against white canvases).
2. **Pill Geometry** (Consistent use of 99px and 50px border radii for buttons and feature cards, creating a soft, approachable UI language).
3. **Dot Grid Decoration** (A repeating pattern of circular motifs in hero sections and background overlays, reinforcing the "source" or "network" brand concept).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--white` | `#ffffff` | Primary surface background, button text | 517 | 1 | Computed style |
| `--gray-light` | `#f3f3f3` | Secondary section backgrounds, card borders | 403 | 1 | Brand page |
| `--dark` | `#333333` | Primary body text | 31 | 1 | Brand page |
| `--black` | `#000000` | High-contrast text, footer background | 1134 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--primary` | `#f7931d` | Primary CTA borders, text links, icons | 35 | 1 | CSS Variable |
| `--red` | `#cc3131` | Secondary decorative CTA, newsletter block | 2 | 1 (warn) | Decorative only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Avenir-Book | 400, 500, 600, 700 | All headlines, body, and UI | Montserrat | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `display-xl` | 60px | 66px | normal | 700 | Hero H1 | `h1.vc_custom_heading` |
| `heading-lg` | 38px | 53px | normal | 700 | Section headers | `h2.vc_custom_heading` |
| `heading-md` | 28px | 30.8px | normal | 600 | Sub-section titles | `h3.vc_custom_heading` |
| `heading-sm` | 22px | 31.9px | normal | 600 | Card titles | `div.author-name` |
| `body-lg` | 18px | 32.4px | normal | 600 | Lead paragraphs | `h4.vc_custom_heading` |
| `body-md` | 17px | 28px | normal | 400 | Standard body | `p` |
| `body-sm` | 16px | 23.2px | normal | 400 | UI labels, footer | `div.vc_row` |
| `button` | 16px | 23.2px | 1px | 500 | CTA text | `a.cap-btn.vc_btn3` |

### Principles
- **Heavyweight Headers:** Display and section headers always use 700 weight for maximum authority.
- **Generous Line Heights:** Body text maintains a 1.6x - 1.75x ratio (28px height for 16px/17px text) to ensure readability in academic contexts.
- **Tracking for Action:** Buttons utilize a 1px letter spacing to distinguish interactive elements from static prose.

## Spacing
**Base unit:** 5px (derived from high occurrence of 5px, 10px, 20px)
| Token | Value | Occurrences |
|------|-------|-------------|
| `--space-xs` | 5px | 426 |
| `--space-sm` | 10px | 88 |
| `--space-md` | 20px | 403 |
| `--space-lg` | 48px | 48 |
| `--space-xl` | 113px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `--radius-pill` | 99px | Primary buttons, feature cards | Observed on 501 elements |
| `--radius-lg` | 50px | Large section containers | Observed on 440 elements |
| `--radius-md` | 30px | Secondary UI panels | Observed on 24 elements |
| `--radius-none` | 0px | Section bands | Observed on 312 elements |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Default card state | Card component spec |
| `accent-focus` | `rgb(247, 147, 29) 0px 0px 0px 2px` | Active card or focused state | Shadow evidence |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Book a Meeting, Learn More)
**Pages observed:** https://capsource.io, https://capsource.io/about
**Spec:** Background: transparent / Text: #f7931d / Border: 2px #f7931d / Radius: 99px / Typography: 16px Avenir 500
**States observed:** Default: Captured | Hover: Not captured

#### Card
**Role:** Feature highlights and testimonials
**Pages observed:** https://capsource.io, https://capsource.io/about
**Spec:** Background: #ffffff / Text: #333333 / Border: 1px #f3f3f3 / Radius: 99px / Padding: 20px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Newsletter Block
**Role:** Lead capture in footer
**Pages observed:** https://capsource.io
**Spec:** Background: #cc3131 / Text: #ffffff / Radius: 10px / Padding: 30px
**States observed:** Default: Captured

#### Testimonial Slider
**Role:** Social proof
**Pages observed:** https://capsource.io
**Spec:** Background: #f3f3f3 / Border: 1px #f7931d / Radius: 10px / Typography: 17px Avenir 400
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Hero Section
**Role:** Page entry
**Pages observed:** https://capsource.io
**Spec:** Background: Linear gradient (Orange to White) / Text: #ffffff / Decoration: Dot grid pattern
**States observed:** Default: Captured

#### Partner Logo Grid
**Role:** Trust building
**Pages observed:** https://capsource.io, https://capsource.io/about
**Spec:** Background: #ffffff / Border-bottom: 1px #f3f3f3 / Padding: 48px 0px
**States observed:** Default: Captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Gutter | 20px |
| Vertical Rhythm | 113px (Section gaps) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; H1 reduces to ~32px; 1-column stack. |
| Desktop | 1440px | Multi-column grid (3-up for features); full horizontal nav. |

## Imagery & decoration
- **Dot Grids:** Used as a watermark-style background element in heroes.
- **Circular Icons:** All iconography is contained within circular #ffffff or #f3f3f3 containers.
- **Photography:** Professional headshots for team and advisors, often clipped into circles.

## Do's
- Use #f7931d for all primary interactive borders.
- Maintain 99px radius for all "pill" style buttons.
- Set display headers to 700 weight Avenir-Book.
- Use #f3f3f3 for alternating section backgrounds to define content boundaries.
- Ensure 1px letter spacing on all button components.

## Don'ts
- **Wrong:** Using #cc3131 for primary site navigation. **Right:** Use #f7931d. **Reason:** Red is reserved for the decorative newsletter block and tertiary alerts.
- **Wrong:** Applying sharp corners to feature cards. **Right:** Use `--radius-pill` (99px). **Reason:** Brand identity relies on soft, circular geometry.
- **Wrong:** Using pure black (#000000) for long-form body text. **Right:** Use #333333. **Reason:** Improves readability on high-brightness white screens.

## Similar brands
- Coursera (Academic professional)
- LinkedIn Learning (Professional development)
- Handshake (Student-to-career platform)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #f7931d;
  --dark: #333333;
  --gray-light: #f3f3f3;
  --white: #ffffff;
  --font-main: 'Avenir-Book', sans-serif;
  --radius-pill: 99px;
  --space-section: 113px;
}
```

## Agent prompt examples
- "Create a primary action button using the Capsource pill style: 2px orange border #f7931d, 99px radius, and 16px Avenir text with 1px tracking."
- "Design a feature card with a white background, 1px light gray border #f3f3f3, and a 99px border radius."
- "Generate a section header using Avenir-Book at 38px, 700 weight, with a line height of 53px."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Specific mobile breakpoint transitions for the dot-grid decoration were not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-----|----------|--------------|
| Homepage | https://capsource.io | 1440x900 | 2026-06-06 |
| About | https://capsource.io/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://capsource.io | 390x844 | 2026-06-06 |