# Capcargo Design System

> Industrial logistics software interface characterized by high-contrast amber accents on a structured slate-and-white foundation.

**Source:** [https://capcargo.com](https://capcargo.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Capcargo utilizes a utilitarian, grid-heavy design language suited for industrial logistics. The palette is anchored by a primary amber (`#ef9b11`) used for high-visibility CTAs and a secondary orange (`#ff9800`) for interactive text, set against a foundation of slate gray (`#5e686e`) and cool light grays (`#ebeaea`). Typography is strictly sans-serif, pairing **Raleway** for structured headings with **Montserrat** for functional UI elements. Layouts favor sharp 0px borders and generous vertical spacing (30px-50px) to maintain clarity in data-dense environments like pricing tables and news feeds.

## Signature DNA
1. **The Amber Action** (Primary CTAs use a solid `#ef9b11` fill with sharp 0px corners, creating a high-visibility "industrial safety" signal across all pages).
2. **Raleway Display Stack** (Headings use Raleway with consistent 1px letter spacing, providing a modern, wide-track architectural feel to section titles).
3. **Sharp-Edge Containers** (A total absence of border-radius (`0px`) across cards, buttons, and inputs reinforces a rigid, professional software aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.slate}` | `#5e686e` | Primary body text, headings, and icons | 110 | 1 | `--body_typography-color` |
| `{color.white}` | `#ffffff` | Page background, card surfaces, and text on dark | 19 | 1 | `--bg_color` |
| `{color.ash}` | `#ebeaea` | Section dividers, timeline tracks, and borders | 20 | 1 | `--timeline_color` |
| `{color.ink}` | `#333333` | Button text and high-contrast labels | 15 | 1 | `--button_accent_color` |
| `{color.smoke}` | `#f8f8f8` | Subtle card backgrounds and hover states | 12 | 1 | `--awb-color2` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#ef9b11` | Primary button backgrounds, hover states | 16 | 1 | `--primary_color` |
| `{color.accent}` | `#ff9800` | Links, accordion titles, and hover highlights | 22 | 1 | `--link_color` |
| `{color.gold}` | `#fed03d` | Progress bars, checklist circles (decorative) | 8 | 1 | `--awb-color4` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Raleway | 400, 500, 700 | Headings, display, navigation | Raleway (Google Fonts) | SIL OFL |
| Montserrat | 400 | Functional UI, buttons | Montserrat (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 55px | normal | 1px | 700 | Hero pricing | `span.integer-part` |
| `{text.h2}` | 28px | 36.68px | 1px | 400 | Section headers | `h2.fusion-responsive-typography-calculated` |
| `{text.h3}` | 30px | 43.5px | 1px | 400 | Content box titles | `h3.content-box-heading` |
| `{text.h4}` | 18px | 27.36px | normal | 400 | Subheadings | `h4.fusion-responsive-typography-calculated` |
| `{text.button}` | 18px | 21px | 2px | 400 | Primary CTAs | `a.fusion-button` |
| `{text.body}` | 15px | 34.05px | normal | 500 | Default running text | `section#content` |
| `{text.body-sm}` | 15px | 21.75px | 1px | 400 | Pricing table rows | `div.panel-body.pricing-row` |
| `{text.caption}` | 12px | 18px | normal | 500 | Metadata, timestamps | `p.fusion-single-line-meta` |

### Principles
1. **Wide-Track Display**: All Raleway headings above 20px utilize a `1px` letter-spacing to improve legibility on industrial displays.
2. **Button Tracking**: Montserrat buttons use an aggressive `2px` letter-spacing to distinguish interactive elements from static text.
3. **High Vertical Rhythm**: Body text uses a generous `34px` line height (approx 2.2x font size) to prevent fatigue in text-heavy documentation.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 6 |
| `{space.sm}` | 15px | 16 |
| `{space.md}` | 20px | 13 |
| `{space.lg}` | 30px | 17 |
| `{space.xl}` | 50px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Buttons, Cards, Inputs, Images | 162 occurrences; `radius: 0px` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All components | `shadow: none` observed on all primary components |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary site actions and navigation CTAs.
**Pages observed:** [Homepage](https://capcargo.com), [Pricing](https://capcargo.com/pricing)
**Spec:** 
- Background: `{color.primary}` (#ef9b11)
- Text: `{color.ink}` (#333333)
- Radius: `{radius.none}` (0px)
- Padding: 17px 40px
- Typography: `{text.button}` (Montserrat, 18px, 400, 2px spacing)
**States observed:** Default | Hover: `{color.white}` text/border | Active: not captured

#### Surface
**Role:** Content containers and section wrappers.
**Pages observed:** [Homepage](https://capcargo.com), [Pricing](https://capcargo.com/pricing), [About](https://capcargo.com/about)
**Spec:**
- Background: `{color.white}` (#ffffff)
- Text: `{color.slate}` (#5e686e)
- Border: `{color.ash}` (#ebeaea)
- Radius: `{radius.none}` (0px)
- Padding: 0px 30px
**States observed:** Default

### Tier 2: Patterns

#### News Card
**Role:** Displaying blog posts and updates on the homepage.
**Pages observed:** [Homepage](https://capcargo.com)
**Spec:**
- Background: `{color.white}` (#ffffff)
- Border: 1px `{color.ash}` (#ebeaea)
- Title: `{color.accent}` (#ff9800)
- Padding: 15px
- Radius: 0px

#### Pricing Tier
**Role:** Product plan comparison.
**Pages observed:** [Pricing](https://capcargo.com/pricing)
**Spec:**
- Header Background: `{color.smoke}` (#f8f8f8)
- Price Text: `{color.accent}` (#ff9800)
- Border: 1px `{color.ash}` (#ebeaea)
- Radius: 0px

### Tier 3: Surface-specific

#### Timeline
**Role:** Historical company milestones.
**Pages observed:** [About](https://capcargo.com/about)
**Spec:**
- Track Color: `{color.ash}` (#ebeaea)
- Node Background: `{color.white}` (#ffffff)
- Typography: `{text.body}`

#### FAQ Accordion
**Role:** Collapsible information sections.
**Pages observed:** [Homepage](https://capcargo.com)
**Spec:**
- Title Text: `{color.accent}` (#ff9800)
- Content Text: `{color.slate}` (#5e686e)
- Divider: `{color.ash}` (#ebeaea)

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1200px |
| Section Gap | 50px |
| Column Gap | 30px |

## Do's
- Use `#ef9b11` (Amber) for all primary action buttons.
- Apply `1px` letter-spacing to all Raleway headings.
- Maintain `0px` border-radius on all UI components.
- Use `#5e686e` (Slate) for all primary body text to reduce contrast harshness against white.
- Ensure vertical spacing between sections is at least `50px`.

## Don'ts
- **Wrong:** Using `#ff9800` (Orange) for button backgrounds. **Right:** Use `#ef9b11`. **Reason:** `#ff9800` is reserved for text links and interactive headers.
- Do not use rounded corners on any component.
- Do not use drop shadows; the brand is strictly flat.
- Do not use Montserrat for display headings.
- Do not use pure black (`#000000`) for body text; use Slate (`#5e686e`).

## Quick start

### CSS Custom Properties
```css
:root {
  --cap-primary: #ef9b11;
  --cap-accent: #ff9800;
  --cap-slate: #5e686e;
  --cap-ash: #ebeaea;
  --cap-ink: #333333;
  --cap-white: #ffffff;
  
  --cap-font-heading: 'Raleway', sans-serif;
  --cap-font-ui: 'Montserrat', sans-serif;
  
  --cap-radius-none: 0px;
}
```

## Known gaps
- Hover states for secondary buttons were not captured in the evidence.
- Mobile navigation menu transition speeds were not captured.
- Form validation error states were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://capcargo.com | 1440px | 2026-06-06 |
| Pricing | https://capcargo.com/pricing | 1440px | 2026-06-06 |
| About | https://capcargo.com/about | 1440px | 2026-06-06 |