Autopilot Design System

Comprehensive design tokens and component reference for Autopilot — the AI autonomous company-operating platform. Covers both the marketing website and the live dashboard application.

Website

Foundation

Color Brushwork

Clean white foundation with warm orange accent. Minimal brushwork emphasizing content over chrome.

Primary

#E8722A

Primary Light

#FEF3EC

Primary Dark

#C95D1E

Text

#1A1A1A

Secondary

#6B7280

Tertiary

#9CA3AF

Border

#E5E7EB

Surface

#F9FAFB

Success

#22C55E

Warning

#F59E0B

Error

#EF4444

Info

#3B82F6

Foundation

Typography

Inter for all UI text. Georgia serif for the Autopilot logotype. Clean, readable hierarchy.

Logo

Autopilot

Georgia 700 / 32px

Hero

AI That Runs Your Company

Inter 800 / 48px / -0.02em

Section Heading

Inter 700 / 36px

Feature Title

Inter 700 / 28px

Card Heading

Inter 600 / 22px

Subsection

Inter 600 / 18px

Body

Autopilot is an autonomous AI platform that builds and runs companies using specialized agents. Each agent handles planning, coding, marketing, and operations 24/7.

Inter 400 / 16px / 1.6

Small

Secondary body text and descriptions

Inter 400 / 14px / 1.5

Caption

Timestamps and metadata

Inter 500 / 12px

Label

Section Label

Inter 600 / 11px / uppercase

Mono

const agent = Autopilot.spawn('engineering')

SF Mono / 13px

Foundation

Spacing Scale

4px base unit with consistent scale for layout rhythm.

4px

8px

16px

24px

32px

2xl

48px

3xl

64px

4xl

96px

Foundation

Borders & Shadows

Rounded corners and subtle elevation for depth.

Border Radius

6px

8px

12px

16px

pill

Shadows

Components

Buttons

Pill-shaped CTAs with clear hierarchy. Primary black, accent orange, secondary outlined.

Variants

Sizes

States

With Icons

Components

Inputs

Simple, clean form elements with orange focus states.

Text Input

Email Address

With CTA

Get Early Access

Components

Navigation

Clean paystreamtal nav with serif logotype and pill CTA.

Header Nav

Autopilot

LIVE

Features

Pricing

Docs

App / Dashboard

App Foundation

Dashboard Colors

The live dashboard uses the same brushwork with additional semantic colors for status and activity indicators.

Active / Running

#E8722A

Tag Background

#FEF3EC

Live / Growth

#22C55E

Chat Background

#1A1A1A

Card Surface

#FFFFFF

Divider

#E5E7EB

App Components

Task Cards

Dashed orange border cards showing active AI agent tasks. Status dot pulses to indicate real-time activity.

P0 Fix: yahoo-finance2 Package Broken — Portfolio + Briefings Down

Critical production bug. The yahoo-finance2 package is throwing errors on every portfolio fetch and briefing generation.

Assessment: Add "Other" and "Not Sure" options to career paths

Two changes to the assessment at /assessment.html: Add an "Other" option and a "Not Sure" option to transferable skills.

Verify free tier exists in code — remove "1 film/month" language

URGENT MESSAGING FIX: The homepage explicitly promises a free tier with "1 film/month".

+ 11,903 tasks completed in the past 24h

App Components

Live Badge

Animated indicator showing real-time platform status.

Live Indicator

LIVE

Green pulsing dot + pill border

Status Dots

Live

Running

Idle

App Components

Business Metrics

Bold numbers with green growth indicators. Left-aligned with label/value/change pattern.

Business

Annual Run Rate: $6,004,997 (+37% WoW)

Active Companies: 5,084 (+52% WoW)

Human Messages Sent: 528,086 (+44% WoW)

Tasks Completed: 223,191 (+55% WoW)

Emails Sent: 162,797 (+54% WoW)

App Components

Badges & Tags

Status indicators and category labels with semantic colors.

Category Tags

Engineering Marketing Research Social Ads

Status Badges

Active Running Queued

App Components

Feed Components

Twitter feed previews and email activity rows from the live dashboard.

Twitter Feed

SMBs overpay vendors by thousands because nobody has time to audit every bill. Tr...

Freelancers spend 120 hours a year on bookkeeping. LedgerKit does it in zero. A...

A third of all food produced goes to waste. Most of it still perfectly go...

+ 2,057 tweets in the past 24h

Email Activity

→ Welcome to TrimLi...

To: o***@***.com

→ Outseta's ICP is the...

To: g***@***.com

→ Portfolio outbound...

To: p***@***.com

App Components

Chat CTA

Full-width dark call-to-action for the live chat interface.

Live Chat

Ask Autopilot anything.

App Components

Toggles

Simple toggle switches for settings and preferences.

Toggle States

Off

Tokens

CSS Custom Properties

Ready-to-paste CSS variables for implementing the Autopilot design system.

/* Autopilot Design Tokens */
:root {
  /* Colors */
  --Autopilot-primary: #E8722A;
  --Autopilot-primary-light: #FEF3EC;
  --Autopilot-primary-dark: #C95D1E;
  --Autopilot-bg: #FFFFFF;
  --Autopilot-surface: #F9FAFB;
  --Autopilot-text: #1A1A1A;
  --Autopilot-text-secondary: #6B7280;
  --Autopilot-text-tertiary: #9CA3AF;
  --Autopilot-border: #E5E7EB;
  --Autopilot-success: #22C55E;
  --Autopilot-warning: #F59E0B;
  --Autopilot-error: #EF4444;
  --Autopilot-chat-bg: #1A1A1A;

  /* Typography */
  --Autopilot-font-body: 'Inter', sans-serif;
  --Autopilot-font-logo: Georgia, serif;
  --Autopilot-font-mono: 'SF Mono', monospace;

  /* Spacing */
  --Autopilot-space-xs: 4px;
  --Autopilot-space-sm: 8px;
  --Autopilot-space-md: 16px;
  --Autopilot-space-lg: 24px;
  --Autopilot-space-xl: 32px;
  --Autopilot-space-2xl: 48px;

  /* Borders */
  --Autopilot-radius-sm: 6px;
  --Autopilot-radius-md: 8px;
  --Autopilot-radius-lg: 12px;
  --Autopilot-radius-xl: 16px;
  --Autopilot-radius-pill: 999px;

  /* Shadows */
  --Autopilot-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --Autopilot-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --Autopilot-shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
}

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`#E8722A`	`'Inter', -apple-system, BlinkMacSystemFont, sans-serif`	`999px`	`—`	`—`
App / Portal	`#E8722A`	`'Inter', -apple-system, BlinkMacSystemFont, sans-serif`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-pill bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-sm border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-section-title font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-section-title focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.