# Copilot Design System

> A soft, high-contrast interface where deep charcoal ink floats over warm, parchment-toned canvases.

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

## TL;DR
Copilot utilizes a monochrome foundation that prioritizes legibility and soft elevation. The system is anchored by a warm-white background `#f8f4f1` and high-contrast text in `#272320`. Interaction points are defined by generous border radii (up to 32px) and subtle, tinted shadows that create a sense of physical layering. Typography is exclusively **Ginto**, used at a singular weight (400) across all roles, relying on scale and letter-spacing for hierarchy rather than bold weights.

## Signature DNA
1. **Soft-Pill Geometry** (The interface is dominated by large radii, specifically 32px for main containers and 12px for buttons, creating a friendly, approachable container system.)
2. **Tinted Elevation** (Shadows are not neutral; the system uses a specific peach-tinted ambient shadow `rgba(248, 188, 140, 0.18)` to maintain warmth even in elevated states.)
3. **Monospace-Adjacent Clarity** (The use of Ginto at 400 weight with tight tracking `-0.28px` for headlines creates a precise, technical feeling without the harshness of a true mono font.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#f8f4f1` | Primary page background | 6 | 0.6 | Computed Style |
| `{color.ink}` | `#272320` | Primary text and dark button backgrounds | 57 | 0.8 | Computed Style |
| `{color.ink-muted}` | `#635c57` | Secondary text and button labels | 48 | 0.8 | Computed Style |
| `{color.surface}` | `#ffffff` | Pure white for card interiors and offsets | 27 | 1.0 | Computed Style |
| `{color.canvas-alt}` | `#fffbf8` | Lighter section background | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.shadow-tint}` | `#f8bc8c` | Decorative shadow tint (ambient glow) | 3 | 0.6 | `--color-shadow-tint` |
| `{color.border-light}` | `#e2ddd9` | Subtle button text/borders | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Ginto | 400 | All (Heading, Body, UI) | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 28px | 32px | -0.28px | 400 | Hero headlines | `h1` |
| `{type.body-lg}` | 16px | 26px | normal | 400 | Primary reading text | `div.absolute.size-full` |
| `{type.input}` | 16px | 22px | normal | 400 | User input fields | `textarea#userInput` |
| `{type.button}` | 14px | 20px | normal | 400 | UI labels and CTAs | `button.relative.flex` |

### Principles
- **Weight Uniformity:** The system avoids bold weights, using 400 for both display and body to maintain a light, airy feel.
- **Negative Tracking on Display:** Headlines pull letter spacing in by -1% of font size (-0.28px at 28px) to increase visual density.
- **Vertical Rhythm:** Line heights are generous, typically 1.4x to 1.6x the font size for body copy to ensure legibility on warm backgrounds.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.1}` | 4px | 30 |
| `{space.2}` | 8px | 24 |
| `{space.3}` | 12px | 24 |
| `{space.8}` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.control}` | 12px | Standard buttons | 27 occurrences |
| `{radius.card}` | 16px | Small cards | 9 occurrences |
| `{radius.panel}` | 32px | Main input containers | 12 occurrences |
| `{radius.sharp}` | 0px | Full-width sections | 54 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `Flat` | `none` | Standard surfaces | 24 occurrences |
| `Soft` | `rgba(0, 0, 0, 0.16) 0px 1px 3px 0px` | Primary buttons | 3 occurrences |
| `Warm Glow` | `rgba(248, 188, 140, 0.18) 0px 16px 48px 0px` | Floating input panels | 3 occurrences |
| `Deep` | `rgba(0, 0, 0, 0.08) 0px 16px 24px 0px` | Elevated cards | 3 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary actions
**Pages observed:** All
**Spec:** Background `{color.ink}` (#272320) / Text `{color.border-light}` (#e2ddd9) / Radius 12px / Padding 4px 10px / Typography `{type.button}`
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

#### Ghost Button
**Role:** Tertiary actions and suggestion chips
**Pages observed:** All
**Spec:** Background `rgba(255, 255, 255, 0.3)` / Text `{color.ink-muted}` (#635c57) / Border `rgba(0, 0, 0, 0.08)` / Radius 12px / Padding 8px 12px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Input Panel
**Role:** Primary AI interaction container
**Pages observed:** https://copilot.com
**Spec:** Background `{color.surface}` (#ffffff) / Radius 32px / Shadow `{color.shadow-tint}` glow / Padding 6px
**States observed:** Default | Focus: captured

### Tier 3: Surface-specific

#### Content Card
**Role:** Feature highlights
**Pages observed:** pricing, about
**Spec:** Background `rgba(255, 251, 248, 0.6)` / Radius 32px / Shadow `rgba(0, 0, 0, 0.08) 0px 16px 24px 0px`
**States observed:** Default | Hover: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Container Padding | 32px |
| Component Gap | 12px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Input panel moves to bottom; sidebar collapses to top-left menu icon. |
| Desktop | 1440px | Sidebar persistent on left; centered hero layout. |

## Imagery & decoration
Copilot uses "Achromatic Softness." It avoids photography in favor of high-quality UI renders and subtle gradients. The primary decorative element is the ambient peach glow (#f8bc8c) used in shadows.

## Do's
- Use `#f8f4f1` as the primary background to maintain brand warmth.
- Apply `32px` radius to all primary floating containers.
- Keep typography at weight 400; use size and tracking for hierarchy.
- Use the ambient shadow `rgba(248, 188, 140, 0.18)` for high-importance floating elements.
- Maintain a `12px` gap between suggestion chips.

## Don'ts
- **Wrong:** Using `#3b82f6` (system ring color) as a primary button background.
  **Right:** Use `#272320` for primary buttons.
  **Reason:** The brand is monochrome; blue is reserved for system-level focus rings only.
- **Wrong:** Using pure black `#000000` for body text.
  **Right:** Use `#272320`.
  **Reason:** Pure black breaks the "warm parchment" aesthetic.
- **Wrong:** Applying sharp corners to interactive buttons.
  **Right:** Use a minimum of `12px` radius.
  **Reason:** Sharp corners are reserved for full-width layout sections only.

## Quick start

```css
:root {
  --color-canvas: #f8f4f1;
  --color-ink: #272320;
  --color-ink-muted: #635c57;
  --color-surface: #ffffff;
  --radius-panel: 32px;
  --radius-button: 12px;
  --shadow-warm: 0px 16px 48px 0px rgba(248, 188, 140, 0.18);
}
```

## Agent prompt examples
- "Generate a primary CTA button using Copilot's ink color #272320, 12px border radius, and Ginto 14px text."
- "Create a card container with a 32px radius, #ffffff background, and the signature warm ambient shadow."
- "Layout a grid of suggestion chips with #f8f4f1 background, 12px radius, and 12px spacing."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the CSS variable transition.
- The specific font-face file for Ginto was identified but the full weight range (if any) was not present in the analyzed pages.

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