# Copilot.cx Design System

> High-contrast technical precision anchored by a signature safety-yellow accent against deep oxford navy.

**Source:** https://copilot.cx | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Copilot.cx utilizes a high-voltage "monochrome+" system where a deep navy foundation (#020925) is punctuated by a single, high-visibility primary yellow (#ffd407). The interface relies on Montserrat for all typographic layers, favoring medium weights (500) for display and headings to maintain a technical, engineering-forward aesthetic. Layouts are characterized by significant vertical breathing room (120px section gaps) and a distinct "stadium" geometry for primary CTAs and decorative containers. Surfaces alternate between a clinical off-white (#f8fbfd) and deep dark-mode sections to signal transitions between marketing content and technical product depth.

## Signature DNA
1. **The Safety-Yellow Pivot** (Primary CTA background #ffd407 used against navy #051242 text. This high-contrast pairing is the brand's primary action signal, appearing on every page analyzed.)
2. **Stadium-to-Sharp Geometry** (The system mixes perfectly sharp 0px corners for section containers with aggressive 25px to 100px+ radii for buttons and feature cards, creating a "contained fluid" look.)
3. **Oxford Navy Depth** (The use of #020925 as a surface background provides a professional, IoT-infrastructure feel that distinguishes the brand from standard SaaS blues.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.canvas}` | `#f8fbfd` | Page background, scrollbar track | 118 | 1.0 | computed_style |
| `{colors.ink}` | `#343434` | Primary body text, scrollbar thumb | 19 | 1.0 | computed_style |
| `{colors.white}` | `#ffffff` | Input backgrounds, button text | 6 | 1.0 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.primary}` | `#ffd407` | Primary button BG, feature borders | 8 | 0.6 | computed_style |
| `{colors.navy-deep}` | `#020925` | Dark section surface backgrounds | 4 | 0.6 | computed_style |
| `{colors.navy-accent}` | `#051242` | Button text on yellow, dark headings | 9 | 0.6 | computed_style |
| `{colors.slate}` | `#374151` | Secondary text (decorative_only) | 2 | 1.0 | --fui-gray-700 |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{colors.success-bg}` | `#f3faf7` | Alert success background |
| `{colors.success-text}` | `#03543f` | Alert success text |
| `{colors.error-bg}` | `#fdf2f2` | Alert error background |
| `{colors.error-text}` | `#771d1d` | Alert error text |
| `{colors.error-border}` | `#f8b4b4` | Input error border |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 400, 500, 600, 700 | All roles | Montserrat (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-xl}` | 52px | 56px | -0.52px | 500 | Hero H1 | `h1.h1.text-white` |
| `{type.display-lg}` | 44px | 51.04px | normal | 500 | Section Intro | `p:nth-of-type(1)` |
| `{type.heading-md}` | 26px | 33.904px | normal | 500 | Sub-section head | `h3.lg:h4.h2` |
| `{type.body-lg}` | 18px | 27.04px | normal | 400 | Lead paragraph | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body | `section` |
| `{type.caption-bold}` | 12px | 15.04px | 0.96px | 600 | Primary CTA text | `a.btn.btn-primary-yellow` |
| `{type.caption-md}` | 12px | 18.08px | 0.24px | 500 | Small descriptors | `p` |
| `{type.label-xs}` | 10px | 12.6px | 0.504px | 600 | Form labels | `label.fui-label` |

### Principles
1. **Medium-Weight Authority**: Display and headings avoid Bold (700) in favor of Medium (500), creating a cleaner, more modern technical profile.
2. **Wide Tracking for Small Caps**: Captions and button labels use aggressive letter-spacing (0.5px to 0.96px) to maintain legibility in high-contrast scenarios.
3. **Negative Display Kerning**: Large hero text (52px) pulls tracking in (-0.52px) to tighten the visual impact of the Montserrat geometry.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 16px | 4 |
| `{space.lg}` | 24px | 10 |
| `{space.section}` | 120px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers, footer | 138 occurrences |
| `{radius.sm}` | 7px | Form inputs | Text Input component |
| `{radius.lg}` | 25px | Primary buttons | Rounded Button component |
| `{radius.xl}` | 104px | Feature cards | Card component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide CTA (Request a Demo)
**Pages observed:** All
**Spec:** Background `#ffd407` / Text `#051242` / Border `1px #ffd407` / Radius `24.96px` / Padding `12.48px 15.04px` / Typography `{type.caption-bold}`
**States observed:** Default | Hover: captured (darker yellow) | Focus: not captured

#### Text Input
**Role:** Lead capture and newsletter forms
**Pages observed:** pricing, about
**Spec:** Background `#ffffff` / Text `#343434` / Border `1px #d1d5db` / Radius `7.04px` / Padding `15.04px` / Typography `{type.body-md}`
**States observed:** Default | Focus: captured (`#a4cafe` border)

### Tier 2: Patterns
#### Card
**Role:** Feature highlights and testimonials
**Pages observed:** pricing, about
**Spec:** Background `#ffd407` / Text `#343434` / Border `0px` / Radius `104px` / Padding `50.08px 24.96px`
**States observed:** Default

#### Surface
**Role:** Dark-mode content sections
**Pages observed:** pricing, about
**Spec:** Background `#020925` / Text `#ffffff` / Border `0px` / Radius `0px` / Padding `120px 0px`
**States observed:** Default

### Tier 3: Surface-specific
#### Button (Utility)
**Role:** Secondary navigation or footer links
**Pages observed:** pricing, about
**Spec:** Background `#ffffff` / Text `#343434` / Border `0px` / Radius `0px` / Padding `0px 14.08px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Section Gap | 120px |
| Content Max-Width | ~1280px |
| Horizontal Gutter | 24px |

## Imagery & decoration
- **Technical Grids**: Uses subtle navy-on-navy or gray-on-white grid patterns to reinforce the "platform" and "infrastructure" metaphor.
- **Stadium Containers**: Large, asymmetrical rounded corners (104px) used for background yellow blocks.
- **Avoids**: Soft drop shadows, organic shapes, and pastel gradients.

## Do's
- Use `#ffd407` for all primary conversion actions.
- Pair Montserrat Medium (500) with negative tracking for headlines >40px.
- Maintain 120px vertical spacing between major content sections.
- Use `#020925` as the primary background for technical or "Product" sections.
- Apply `0.96px` letter spacing to all uppercase button labels.

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Use `#ffd407`. **Reason:** The yellow-on-navy contrast is the brand's primary visual identifier.
- **Wrong:** Applying soft shadows to cards. **Right:** Use flat borders or high-contrast background shifts. **Reason:** The system is strictly flat/monochrome-plus.
- **Wrong:** Using Bold (700) for body text. **Right:** Use Regular (400) or Medium (500) for emphasis.

## Similar brands
- Caterpillar (CAT)
- New Relic
- Datadog
- DeWalt

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #ffd407;
  --color-navy-deep: #020925;
  --color-navy-accent: #051242;
  --color-canvas: #f8fbfd;
  --color-ink: #343434;
  --font-main: 'Montserrat', sans-serif;
  --radius-button: 25px;
  --radius-card: 104px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Montserrat 12px semi-bold with 0.96px tracking, a #ffd407 background, and #051242 text, with a 25px border radius."
- "Design a hero section with a #020925 background, featuring an H1 in Montserrat 52px Medium with -0.52px letter spacing."
- "Generate a feature card with a #ffd407 background and a massive 104px border radius on the top-left and bottom-right corners."

## Known gaps
- Shadow tokens were not captured in the evidence, suggesting a purely flat design system.
- Mobile-specific typography overrides for display sizes were not explicitly tokenized in the source.
- Hover states for secondary buttons were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://copilot.cx | 1440x900 | 2026-06-06 |
| Pricing | https://copilot.cx/pricing | 1440x900 | 2026-06-06 |
| About | https://copilot.cx/about | 1440x900 | 2026-06-06 |