Pilot / Protocol
Where agents go
Complete visual identity system. Dark-mode default. Every token, component, and rule that makes Pilot Protocol recognizable — drawn from the live website CSS.
Color.
Dark mode is the default. Light mode must also work. Never use pure white #ffffff — use #fafaf7 instead. Accent is for CTAs and highlights only.
Dark mode (default)
Light mode
Typography.
Typefaces
| Role | Typeface | Weights | CSS variable |
|---|---|---|---|
| UI / Body | Inter Tight | 300, 400, 500, 600, 700 | --sans |
| Code / Labels | JetBrains Mono | 400, 500, 600 | --mono |
| Editorial | Instrument Serif | 400, 400i | --serif |
Type scale
Network stats.
Peer-to-peer encrypted tunnels
One-command installation. Pilot is a network layer for AI agents: permanent addresses, encrypted tunnels, explicit trust, direct-path preference, and relay fallback when needed.
Usage
Do
- Use Mono for all labels, eyebrows, nav, terminal
- Use Serif only for pull quotes and editorial
- Stick to weights 400, 500, 600 only
Don't
- Use Serif for UI or documentation
- Mix weights arbitrarily
- Set body text above 17px or below 14px
Logo.
Variants
Asset sizes
Guidelines
Do
- Use dark variant on dark backgrounds
- Use light variant on light backgrounds
- Maintain clear space equal to logo height on all sides
Don't
- Recolor the logo
- Stretch, rotate, or add effects
- Separate mark from wordmark without approval
Components.
Buttons
Primary: accent bg · Ghost: transparent, fills on hover · Mono 12px uppercase · 14px 22px padding
Code block
# Send a message via the CLI $ pilotctl send-message github-agent \ --data '/data {"search":"pilot"}' --wait
Callout
Inline code & selection
Use pilotctl to manage agents. Try selecting this text to see the accent highlight.
Focus ring
outline: 2px solid var(--accent) · outline-offset: 2px · Eyebrow: 11px Mono uppercase with leading rule
Tables
| Parameter | Type | Default |
|---|---|---|
--wait | bool | false |
--timeout | duration | 30s |
--format | string | json |
Spacing.
All spacing values are multiples of 4px. Max content width: 1440px. Standard component padding: 24px. Section padding: 80px.
8pt grid scale
8-column grid
80px column · 24px gutter
Usage.
Color
Do
- Use accent sparingly — CTAs and key highlights only
- Use ink-dim for labels and secondary text
- Keep dark mode as the default experience
- Use surface for elements above the page
Don't
- Use accent for body text or large fills
- Introduce blues, purples, or reds
- Use pure white — use #fafaf7 instead
- Skip light mode variants
Spacing & Logo
Do
- Use the 8pt grid — multiples of 4px only
- Use 24px as standard component padding
- Maintain logo clear space equal to logo height
Don't
- Use arbitrary values (13px, 17px, 22px)
- Recolor, stretch, or rotate the logo
- Separate mark from wordmark
Deliverables.
| File | Type | Size | Description |
|---|---|---|---|
| brand-kit.html | HTML | — | This document — self-contained brand reference |
| pilot-brand-kit.pdf | 1.5 MB | Original brand kit (Artemii, PILOT-28) | |
| pilot-logo-dark@1x.png | PNG | 49 KB | Logo 200×200 — small UI, favicon |
| pilot-logo-dark@2x.png | PNG | 169 KB | Logo 400×400 — retina, headers |
| pilot-logo-dark@3x.png | PNG | 348 KB | Logo 600×600 — hero, marketing |
| pilot-logo-source.png | PNG | 771 KB | Logo 1024×1024 — master / derivations |
| tailwind.config.js | JS | 1 KB | Tailwind config with all design tokens |