---
version: alpha
name: Pilot
description: Light design system extracted from pilot.com (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#FFFFFF"
  surface: "#E7F9FF"
  primary: "#FFD967"
  outline: "#E9E7ED"
  pilot-dark-purple: "#281350"
  buttery-cream: "#FCF3D6"
  color-7: "#5931DC"
  pastel-violet: "#FBEDFF"
  pilot-black: "#3F3C3D"
  pilot-pink: "#F891FF"
  color-11: "#F3FFD3"
  gray-999: "#999999"
  color-13: "#FFD96766"
  color-14: "#8EECFF66"
  dark-gray-363: "#656363"
  on-primary: "#281350"
typography:
  display-lg:
    fontFamily: Euclid Circular B
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.15
  headline-md:
    fontFamily: Euclid Circular B
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.05
  body-md:
    fontFamily: Euclid Circular B
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Euclid Circular B
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  mono-md:
    fontFamily: Spacemono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.846
rounded:
  full: 9999px
spacing:
  xxs: 6px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 30px
  3xl: 40px
  4xl: 56px
  5xl: 80px
  6xl: 84.5px
  7xl: 120px
  base: 4px
  container: 1328px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.pilot-dark-purple}"
    rounded: "{rounded.full}"
    padding: 0px
    height: 44px
  button-secondary:
    textColor: "{colors.background}"
    rounded: "{rounded.full}"
    padding: 14px
    height: 46px
---

# Pilot

> Extracted from [https://pilot.com/start](https://pilot.com/start) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Pilot uses a light canvas (#FFFFFF) with a palette led by #FFD967. Type is set in **Euclid Circular B** (display + body), **Spacemono** (mono), with 20px body text. Layout: 1328px container, top-static navigation, 10 sections. Built with webflow, gsap, jquery, google-tag-manager, cloudflare.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#FFFFFF` | 1 0 0 | bg | 34.2% | — |
| `surface` | `#E7F9FF` | 0.971 0.021 219.7 | surface | 15.8% | `--pilot-cyan` |
| `primary` | `#FFD967` | 0.896 0.138 90.9 | accent | 0.28% | — |
| `outline` | `#E9E7ED` | 0.931 0.008 301.3 | border | 0.16% | — |
| `pilot-dark-purple` | `#281350` | 0.258 0.105 293.5 | other | 22.4% | `--pilot-dark-purple` |
| `buttery-cream` | `#FCF3D6` | 0.964 0.039 92.7 | other | 13.3% | `--buttery-cream` |
| `color-7` | `#5931DC` | 0.483 0.238 283.7 | other | 9.3% | — |
| `pastel-violet` | `#FBEDFF` | 0.962 0.028 318.7 | other | 0.90% | `--pastel-violet` |
| `pilot-black` | `#3F3C3D` | 0.36 0.004 354.9 | other | 0.74% | `--pilot-black` |
| `pilot-pink` | `#F891FF` | 0.802 0.183 324.8 | other | 0.74% | `--pilot-pink` |
| `color-11` | `#F3FFD3` | 0.98 0.058 119.9 | other | 0.45% | — |
| `gray-999` | `#999999` | 0.683 0 0 | other | 0.31% | `--gray-999` |
| `color-13` | `#FFD96766` (on bg `#FFF0C2`) | 0.896 0.138 90.9 | other | 0.30% | — |
| `color-14` | `#8EECFF66` (on bg `#D2F7FF`) | 0.891 0.093 212 | other | 0.30% | — |
| `dark-gray-363` | `#656363` | 0.502 0.003 17.2 | other | 0.26% | `--dark-gray-363` |

Sparse chromatic highlights (not accents): `#967000`, `#F891FF` (`--pilot-pink`), `#DB2BE8`.

Contrast: text on background 1:1, accent 1.37:1.

Gradients in use: `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(90deg, rgba(248, 145, 255, 0.2) 0%, rgba(248, 145, 255, 0) 100%)`; `linear-gradient(155deg, rgba(255, 217, 103, 0) 50%, rgba(255, 217, 103, 0.4))`.

The site does not change under `prefers-color-scheme: dark`.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **Euclid Circular B** | display, body | 400, 500, 600 | 89.2% | webfont |
| **La Belle Aurore** | other | 400 | 5.8% | webfont |
| **Spacemono** | mono | 400 | 4.5% | webfont |

Declared in `@font-face` but not used to paint text on this page: Euclid, Euclidcircularb Webs, Poppins. Don't treat these as the page's fonts.

Scale (px): 12, 13, 14, 16, 20, 24, 32, 40, 56. Effective ratio ≈ 1.294 (close to a perfect fourth). Body 20px at line-height 1.5; display 56px with tracking 0em. Headings are sentence case. On a 390px viewport the body is 18px and display 32px.

## Layout

Spacing follows a 4px base unit; the most used steps are 6, 8, 12, 16, 20, 24, 30, 40, 56, 80, 84.5, 120px. Sections open with about 184px of space before their first line of text. Content sits in a 1328px container on a 5-column grid. Text density 0.135 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **section** (137px, bg #FFFFFF)
2. **hero** — “Accounting and tax services” (986px, bg #281350)
3. **section** — “We handle bookkeeping, tax, and advisory work for startups and small businesses.” (1891px, bg #E7F9FF)
4. **section** — “Stop digging through spreadsheets for answers you need right now.” (832px, bg #FFFFFF)
5. **section** — “Get guidance from CFOs and COOs who've been there.” (1243px, bg #FFFFFF)
6. **section** — “Whether you're scaling from 2 to 20 people or preparing for your exit—Pilot work” (1428px, bg #FCF3D6)
7. **section** — “Here's how we solve the exact problems keeping you up at night.” (1329px, bg #281350)
8. **section** — “Not ready to talk? Get free insights that move the needle.” (1003px, bg #FFFFFF)
9. **section** — “Three ways to get the back office support your business needs.” (1068px, bg #5931DC)
10. **footer** (944px, bg #FFFFFF)

## Elevation & Depth

Style: flat. Most used shadows:

- `rgba(0, 0, 0, 0.05) 0px 15.57px 35.94px 0px, rgba(0, 0, 0, 0.04) 0px 64.69px 64.69px 0px, rgba(0, 0, 0, 0.03) 0px 144.94px 86.25px 0px, rgba(0, 0, 0, 0.01) 0px 257.54px 103.02px 0px`

## Shapes

Dominant corner radius 0px; radii in use: pill. Borders: hairline (1px).

## Components

- **button-primary**: backgroundColor `#FFD967`, textColor `#281350`, rounded `9999px`, padding `0px 0px`, height `44px`, fontFamily `Spacemono`, fontSize `16px`, fontWeight `400` (e.g. “Get Started”)
- **button-secondary**: textColor `#FFFFFF`, rounded `9999px`, padding `14px 20px`, height `46px`, fontFamily `Spacemono`, fontSize `16px`, fontWeight `400`, border `1px solid #FFFFFF` (e.g. “start FREE TRIAL”)

## Do's and Don'ts

- Do reserve `#FFD967` for primary actions and highlights; it covers only 0.28% of the painted page.
- Do set body copy in Euclid Circular B at 20px / 1.5.
- Don't introduce font weights beyond 400, 500, 600.
- Don't add drop shadows; depth comes from tone and borders.
- Do keep corners at 0px for most controls.
- Do snap spacing to multiples of 4px.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.