---
version: alpha
name: Shuttle
description: Terminal-grade developer minimalism — near-black canvas, monospace-led typography, a single electric-cyan accent, hairline borders and razor-tight radii. "Your files. Your rules." rendered as a privacy-first command-line aesthetic.

colors:
  # Canvas + ink
  background: "#0a0a0b"
  surface: "#121214"
  surface-soft: "#1a1a1d"
  ink: "#f4f4f5"
  ink-secondary: "#a1a1aa"
  ink-muted: "#71717a"

  # Accent — single electric cyan, used sparingly
  primary: "#22d3ee"
  primary-hover: "#67e8f9"
  primary-dim: "#0e7490"

  # On-color
  on-primary: "#0a0a0b"
  on-ink: "#0a0a0b"

  # Borders + hairlines
  border: "#27272a"
  border-strong: "#3f3f46"

  # Functional
  success: "#34d399"
  warning: "#fbbf24"
  danger: "#f87171"

  # Code / terminal tints
  code-bg: "#0d0d0f"
  code-green: "#4ade80"
  code-purple: "#a78bfa"

typography:
  display-hero:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.8px
  card-title:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.5px
  code-body:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  caption:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 8px 14px

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.xs}"
    padding: 2px 8px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  code-block:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.code-green}"
    typography: "{typography.code-body}"
    rounded: "{rounded.md}"
    padding: 16px 20px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.code-body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Shuttle Design System

## Overview

Shuttle wears the aesthetic of the terminal it was born in. The canvas is a near-black `{colors.background}` — not pure black, but a barely-warmed off-black that reads as a high-end code editor rather than a void. Against it, text sits in a soft off-white `{colors.ink}`, and a single electric cyan `{colors.primary}` carries every interactive accent. The tagline "Your files. Your rules." is a privacy thesis, and the design honors it: nothing decorative, nothing that asks for trust it hasn't earned. The interface looks engineered, not marketed.

Typography is the load-bearing decision. Headings and all UI chrome are set in **JetBrains Mono**, the monospace lending the product a command-line authority — labels, buttons, and badges all read like terminal output. Long-form reading copy switches to **Inter** so body text stays comfortable at length, but the monospace voice dominates the brand surface. The result is a system where structure is legible at a glance: if it's mono, it's a control; if it's sans, it's prose.

Depth is achieved through hairline borders rather than shadows. Surfaces step up in a tight luminance ladder — `{colors.background}` to `{colors.surface}` to `{colors.surface-soft}` — and every container is outlined with a 1px `{colors.border}`. Radii are razor-tight (2px–8px) to preserve the squared, engineered feel; only avatars and status pills go fully round. The cyan accent is rationed: it marks the primary CTA, focused inputs, and active links, never washing across the page.

**Key Characteristics:**
- Near-black `{colors.background}` canvas — editor-dark, not pure black
- JetBrains Mono for headings, buttons, badges, and all UI chrome
- Inter for long-form reading copy only
- Single electric-cyan accent (`{colors.primary}`) rationed to interactive moments
- Hairline 1px borders (`{colors.border}`) replace shadows for depth
- Tight luminance ladder of surfaces for elevation
- Razor-tight radii (2px–8px) — squared and engineered
- Terminal/code-block treatment as a first-class component

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-black page canvas. Editor-dark.
- **Surface** (`{colors.surface}`): Cards, nav, inputs — one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, badges, hover states.
- **Ink** (`{colors.ink}`): Primary text, headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, placeholders, metadata.

### Accent
- **Primary Cyan** (`{colors.primary}`): CTA fills, links, focus rings, active labels.
- **Primary Hover** (`{colors.primary-hover}`): Lighter cyan on hover.
- **Primary Dim** (`{colors.primary-dim}`): Muted cyan for subtle accents.

### Borders
- **Border** (`{colors.border}`): The default hairline outline on every container.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary buttons, emphasized edges.

### Functional
- **Success** (`{colors.success}`): Confirmations, healthy status.
- **Warning** (`{colors.warning}`): Cautions.
- **Danger** (`{colors.danger}`): Errors, destructive actions.

### Code / Terminal
- **Code Bg** (`{colors.code-bg}`): Terminal block background, darkest surface.
- **Code Green** (`{colors.code-green}`): Default terminal output text.
- **Code Purple** (`{colors.code-purple}`): Syntax keywords.

## Typography

### Font Family
- **Primary (UI + headings)**: `JetBrains Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`
- **Reading**: `Inter`, fallbacks `system-ui, -apple-system, sans-serif`

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 52px mono hero — command-line authority |
| `section-heading` | Section titles |
| `card-title` | Feature card headings |
| `body-large` | Intros, lead paragraphs (Inter) |
| `body` | Standard reading text (Inter) |
| `body-small` | Secondary copy (Inter) |
| `button-ui` | Buttons, links |
| `label-mono` | Badges, uppercase-ish labels |
| `code-body` | Terminal / code blocks |
| `caption` | Metadata, captions |

### Principles
- **Mono = control, sans = prose**: If an element is interactive or structural, it's JetBrains Mono. If it's a paragraph to read, it's Inter.
- **Negative tracking on display**: Hero compresses to -1.5px for an engineered, minified feel.
- **Restraint in weight**: 400 body, 500 UI, 600 card titles, 700 display only.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base unit is 8px; the scale skips from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) for generous section rhythm.

### Grid & Container
- Max content width: ~1100px, centered
- Hero: single-column, left- or center-aligned with the mono headline
- Feature sections: 2–3 column card grids on `{colors.background}`

### Whitespace Philosophy
- **Editor calm**: Dark canvas with generous vertical padding between sections.
- **Borders, not shadows**: Separation comes from 1px hairlines and surface luminance steps, never elevation glow.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | `{colors.background}` | Page canvas, text blocks |
| Surface | `{colors.surface}` + 1px `{colors.border}` | Cards, nav, inputs |
| Raised | `{colors.surface-soft}` + 1px `{colors.border}` | Feature cards, hover states |
| Focus | 1px `{colors.primary}` outline | Focused inputs, keyboard focus |

**Depth Philosophy**: Shuttle builds depth from a luminance ladder, not shadows. Each surface is a measured step lighter than the canvas, outlined by a hairline. The effect is flat and precise — like nested panes in a code editor.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 2px | Badges, tiny chips |
| `sm` | 4px | Buttons, inputs |
| `md` | 6px | Code blocks |
| `lg` | 8px | Cards |
| `xl` | 12px | Large feature cards |
| `pill` | 9999px | Avatars, status dots |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Cyan fill, near-black text, 4px radius, JetBrains Mono.
- **`button-secondary`** — Surface fill with `{colors.border-strong}` outline.
- **`button-ghost`** — Transparent, muted ink, for tertiary actions.

### Badges
- **`badge`** — Surface-soft chip, cyan mono text, 2px radius, bordered.

### Cards
- **`card`** — Surface fill, 1px border, 8px radius.
- **`card-feature`** — Surface-soft, larger padding, for highlighted features.

### Code
- **`code-block`** — Darkest surface, green mono output, bordered. The signature terminal component.

### Inputs
- **`input`** — Surface fill, strong border; focus swaps the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Background canvas, mono links, bottom hairline border.

## Do's and Don'ts

### Do
- Use JetBrains Mono for every interactive or structural element
- Reserve Inter for long-form reading copy
- Build depth with hairline borders and surface luminance steps
- Ration the cyan accent to CTAs, links, and focus states
- Keep radii tight (2px–8px) for the engineered feel

### Don't
- Don't use shadows for elevation — use borders and surface steps
- Don't wash cyan across large areas — it marks interaction only
- Don't set headings in a sans-serif — mono carries the brand
- Don't use large rounded radii except on avatars/status dots
- Don't use pure black `#000000` — `{colors.background}` is intentionally off-black

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards |
| Tablet | 600–1024px | 2-column grids |
| Desktop | >1024px | Full layout, ~1100px max width |

### Collapsing Strategy
- Hero: 52px → scales down, maintains negative tracking
- Navigation: mono links → hamburger
- Feature cards: 3-column → 2 → single
- Code blocks: maintain mono, horizontal scroll on overflow
- Section spacing: 64px → 40px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Cyan `{colors.primary}` with `{colors.on-primary}` text
- Background: Near-black `{colors.background}`
- Heading text: `{colors.ink}` in JetBrains Mono
- Body text: `{colors.ink-secondary}` in Inter
- Border: 1px `{colors.border}`
- Focus ring: `{colors.primary}`

### Example Component Prompts
- "Hero on `{colors.background}`. Headline 52px JetBrains Mono weight 700, letter-spacing -1.5px, `{colors.ink}`. Subtitle 18px Inter weight 400, `{colors.ink-secondary}`. Cyan CTA (`{colors.primary}`, 4px radius, mono 14px) and bordered secondary button."
- "Card: `{colors.surface}` fill, 1px solid `{colors.border}`, 8px radius, 24px padding. Title 20px JetBrains Mono weight 600, `{colors.ink}`. Body 16px Inter, `{colors.ink-secondary}`."
- "Code block: `{colors.code-bg}` background, `{colors.code-green}` mono text 14px, 1px border, 6px radius, 16px padding."
- "Badge: `{colors.surface-soft}` fill, `{colors.primary}` mono text 12px, 2px radius, 1px border."

### Iteration Guide
1. Mono for controls, Inter for prose — never mix the rule
2. Borders and surface steps for depth, never shadows
3. Cyan is rationed — one accent, interactive moments only
4. Tight radii keep the engineered, terminal feel
5. Off-black canvas, off-white ink — never pure black/white

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Shuttle. Brand names and trademarks belong to their respective owners.