Quick Reference

Essential values at a glance.

How to Use

Use the Pilot marketing AI design system with your favorite AI vibe coding tool. It includes definitions, brand guidelines, fonts, icons, and logos. You can build marketing websites, decks, assets, ad creative, landing pages, micro-sites, and more!

Use the Pilot design system. Clone the repo https://github.com/Pilot-Design-Team/design-pilot-com and review ReadMe.md before starting. When I prompt you to build, use only the existing patterns, components, layouts, and visual treatments in the design system. Do not create new UI patterns, components, layouts, or visual treatments. Follow the structure, behavior, and visual language already established.

Brand Philosophy: People & Tech Spectrum

Pilot is 50% people, 50% tech. But this ratio shifts depending on the context. Match all visual choices — photography, type, backgrounds — to where the feature sits on this spectrum.

This design system Markdown file is the source of truth for agents and humans and contains everything you need to know about the pilot marketing AI design system.

Color Palette

Named colors are the official brand language. Purple scale: deep (loud, certain) → light (calm, trust). Secondary spread colors pair with purple — subdued tones are standard; "+" variants for accents only. Click any swatch to copy the hex.

Typography

Three fonts. Each carries meaning. Euclid Circular B is the default for everything. Space Mono signals tech. La Belle Aurore signals human warmth — use it sparingly, never more than 4 words.

Spacing & Layout

Container widths, section padding, and grid patterns used across pilot.com.

Gradients

Gradients suggest transformation — moving from one state to another. Because the brand is rigidly accurate, gradients reintroduce human nature: sunlight, depth, a world outside the spreadsheet.

Grids and Shapes

Content lives inside fixed-width containers and uses blessed grid ratios that map to a 12-column design grid. Circles add structure and warmth — but only when they earn their place.

Corners & Border Radius

Traditional finance = rigid spreadsheets. We deliberately round corners to varying degrees to make the brand feel approachable. CTAs are always full pills.

Buttons

All CTAs are pills (999px radius). Font: Space Mono, uppercase. Always a purple. Can have a light gradient stroke or glow ring for emphasis. Transition: all 0.2s.

Form Fields

Clean, minimal. Input border is 1px #e0e0e0 turning purple on hover/focus. Hero form uses a pill container (3.5rem radius). Focus ring: 3px rgba(89,49,220,.08).

/* Standard input / select */
input, select {
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  font-size: 16px;
  min-height: 52px;
  padding: 12px 16px;
  transition: border 0.2s;
}
input:hover  { border-color: #5931DC; }
input:focus  {
  border-color: #5931DC;
  box-shadow: 0 0 0 3px rgba(89,49,220,.08);
  outline: none;
}

Cards

Three canonical card variants for new implementations. Default to pin lines for separating content — only use cards when content needs elevation, a distinct background, or is a clickable surface.

Navigation

Fixed top nav with 1208px max-width container, 40px h-padding. Announcement banner above nav. Nav gains drop shadow on scroll.

Drop Shadows

Only for complex graphics incorporating name tags, layered product snapshots, or icons. Subtle shadows add depth and clarify composition.

Decorative Patterns

Patterns foreshadow what customers see in the product. Four types — all using the purple color family. These are overlays, not backgrounds. They layer on top of section background colors to add visual texture.

/* Ledger grid */
.bg-ledger {
  background-image:
    linear-gradient(to right, rgba(89,49,220,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(89,49,220,.08) 1px, transparent 1px);
  background-size: 40px 24px;
}

/* Dot matrix */
.bg-dots {
  background-image: radial-gradient(circle, rgba(89,49,220,.2) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}

Section Background Colors

Section backgrounds create visual rhythm and signal content tone. Background color choice is not decorative — it follows the warm↔cool spectrum used for photography and visual direction.

Icons

Every icon is composed of two things: 1) precise, angular 45° or 90° lines — representing technology, and 2) a soft, human circle — representing people. Precision, powered by people.

Icon Repository — Key Color Dark Purple

All icons from icons/Icons (Key Color)/. Click any icon to open the file. Alt color variants available in All Icons (Alt Colors)/.

General Concept

AI

Back Office

Badge

Banking

Calculator

Compliant

Dashboard

Fix

Founder

Goal Setting

Growth

Hiring

Legal

Payment

Target

Reports

Revenue

Spreadsheet

Team Member

Team

Verified

Operational Services

AI Bookkeeper

Op Strategy

Invoicing

Payroll

Reporting

Trusted Advisory / CFO

Budgeting

Compensation

Forecast

Fundraising

Pricing

Setup

Financial Foundations

Bookkeeping

Taxes

Compliance

Operations

Admin

Stock Admin

SMB Booster

Startup Booster

Industries

Software

AI Startup

E-Commerce

Consulting

Agencies

Pro Services

Recruiting

Law Firm

Life Sciences

Food & Bev

Coffee Shop

Retail

Food Truck

Franchise

Dentist

Medical Spa

Construction

Plumbing

Trades

Field Services

Residential

Other

Marketing

Newsletter

Toolkit

Calculator

Photography

Rule #1: Real people in real situations. Rule #2: Break people out of their box. We prefer an okay real photo over an eye-grabbing treated fake. Calm, confident honesty.

Animations & Transitions

Transitions are fast and purposeful. Standard is 0.2s. Hover lifts and smooth scrolls reinforce precision and care.

/* Logo wall infinite scroll */
@keyframes moveLogoWall {
  to { transform: translateX(-2872px); }
}
.logo-carousel-flex {
  animation: moveLogoWall 125s linear infinite;
}

/* Testimonial card float */
@keyframes stand-out {
  0%, 39%, 100% { box-shadow: none; transform: translateY(0); }
  6%, 33%       { box-shadow: 0 64px 46px rgba(0,0,0,.04); transform: translateY(-60px); }
}
.testimonial { animation: stand-out 12s infinite; }

Logo Assets

All logo files live in logos/ in this repository. Official SVGs are also hosted on the Webflow CDN.

Wordmarks

Black

Purple on dark

On purple

PNG (small)

Marks & App Icons

Circular Mark

Lettermark

App Icon (Purple)

App Icon (Light)

Logo Lockups and Placement

SECOND LOGO

When pairing the Pilot logo with a second logo (e.g. from a partner), the separating line is always as tall as the Pilot logo. The second logo cannot be taller than the Pilot logo.

In social media graphics, logo should always be placed in the bottom left corner. Exceptions: photography/graphics don't allow it.

CSS Variables

Complete :root variable block — official named colors plus all variables extracted from the live Webflow CSS. Copy and paste into any project.

:root {
  /* ── Official Named Colors ── */
  --color-profit:        #281350;  /* PROFIT — darkest purple */
  --color-pilot:         #5931DC;  /* PILOT — primary brand purple */
  --color-brilliant:     #825BEB;  /* BRILLIANT — medium purple */
  --color-highlight:     #DECEFF;  /* HIGHLIGHT — product change indicator */
  --color-margin:        #F6F3FF;  /* MARGIN — near-white tint */

  /* Secondary — Subdued (standard) */
  --color-access:        #FCF3D6;  /* ACCESS — warm cream */
  --color-clarity:       #FBEDFF;  /* CLARITY — light lavender */
  --color-trust:         #E7F9FF;  /* TRUST — light sky blue */

  /* Secondary — Vivid (accent use only) */
  --color-access-plus:   #FFD967;  /* ACCESS+ — bright gold */
  --color-clarity-plus:  #F891FF;  /* CLARITY+ — bright pink */
  --color-trust-plus:    #8EECFF;  /* TRUST+ — bright cyan */

  /* ── Webflow Live Site Variables ── */
  --pilot-black:               #3f3c3d;
  --pilot-dark-purple:         #281350;  /* = PROFIT */
  --white:                     #ffffff;

  --purple--1-primary-ee5:     #5f2ee5;  /* CTA purple ≈ PILOT */
  --purple--2-beb:             #825beb;  /* = BRILLIANT */
  --purple--3-30-6fc:          #c8b6fc;  /* Light purple nav text */
  --purple--x-d89:             #3c2d89;  /* Deep purple accent */
  --purple--x-c70:             #473c70;
  --purple--3-cfd:             #f0ecfd;

  --light--light-5fa:          #f3f5fa;  /* Borders, pricing tabs — not for section/card bg */
  --light--purple-f2edff:      #f2edff;
  --light--f8f8f8:             #f8f8f8;
  --light--blue-gray-afc:      #f9fafc;
  --light--light-ef5:          #edeef5;
  --light--light-purple-afd:   #e3dafd;
  --gray:                      #f3f5fa;
  --gray-999:                  #999;
  --gray-light:                #e0e0e0;
  --dark-gray-363:             #656363;
  --pale-periwinkle:           #f6f3ff;  /* = MARGIN */

  --bright-blue:               #4f9bf3;
  --cta-green:                 #47bfa4;
  --error-red:                 #ce1836;
  --supernova:                 #ffcc00;
  --light-yellow:              #fee17f;
  --pilot-pink:                #f891ff;  /* = CLARITY+ */
  --pilot-pink-10:             #f891ff1a;
  --pilot-cyan:                #e7f9ff;  /* = TRUST */
  --pale-lavender:             #fef4ff;
  --buttery-cream:             #fcf3d6;  /* = ACCESS */
  --pastel-violet:             #fbedff;  /* = CLARITY */
  --olive-green:               #6e9605;
}

Homepage Section Map

The pilot.com homepage structure — Webflow-built, sections in order from top to bottom.

Third-Party Integrations

Tools and services in the pilot.com marketing stack.

Utility Classes

Spacing scale, text colors, and background colors available as utility classes. Component patterns for common interactive elements.