---
version: alpha
name: Air
description: Agentic-developer-environment minimalism — near-black canvas with high-contrast white ink, a single electric accent for primary actions, grotesque sans display with tight tracking, all-caps mono section labels, and hairline borders over a quiet dark surface system.
colors:
  # Canvas + ink
  background: "#0b0b0d"
  surface: "#141417"
  surface-soft: "#1c1c20"
  ink: "#f5f5f7"
  ink-secondary: "#a1a1aa"
  ink-muted: "#71717a"

  # Accent — primary action / highlight
  primary: "#5b6cff"
  primary-hover: "#4655e6"
  accent-soft: "#1a1f3d"

  # Neutral scale (dark)
  gray-950: "#0b0b0d"
  gray-900: "#141417"
  gray-800: "#1c1c20"
  gray-700: "#2a2a30"
  gray-600: "#3f3f46"
  gray-400: "#71717a"
  gray-200: "#a1a1aa"

  # Borders + hairlines
  border: "#26262b"
  border-soft: "#1c1c20"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#0b0b0d"

  # Status
  success: "#3ecf8e"
  warning: "#f5c518"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -2px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 1px
  caption:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.5px
  code:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    borderColor: "{colors.gray-600}"

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

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

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

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.primary}"

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

  code-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.code}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border}"

  section-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
---

# Air Design System

## Overview

Air's site presents the visual language of an agentic developer environment — a tool meant to delegate work to AI agents while the developer steers. The aesthetic is dark, quiet, and engineered: a near-black canvas (`{colors.background}`) carries high-contrast white-ish ink (`{colors.ink}`), and the entire surface system is built from a tight ladder of dark grays rather than from color. Restraint is the message — the interface should feel like a focused terminal, not a marketing page.

A single electric accent (`{colors.primary}`) does all the work that color is allowed to do: primary actions, highlighted links, active states, and the occasional badge. Everything else is achromatic. Because the canvas is dark, depth comes from subtle surface lifts (`{colors.surface}` → `{colors.surface-soft}`) and hairline borders (`{colors.border}`) rather than from shadows, which would be invisible against black anyway.

Typography splits cleanly into two voices. Space Grotesk — a geometric grotesque with character — carries display and body text, set with tight negative tracking at large sizes to feel compressed and modern. JetBrains Mono provides the "developer console" voice: all-caps, letter-spaced section labels, captions, and code. The mono labels are the strongest brand signal, framing sections the way a CLI frames output.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with high-contrast off-white ink (`{colors.ink}`)
- Surface system built from a dark gray ladder, not from color
- Single electric accent (`{colors.primary}`) reserved for primary actions and highlights
- Space Grotesk display/body with tight negative tracking (-2px at hero)
- JetBrains Mono all-caps section labels with positive letter-spacing
- Hairline borders (`{colors.border}`) instead of shadows for separation
- Quiet, terminal-like restraint — color is functional, never decorative

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-black page canvas.
- **Surface** (`{colors.surface}`): Cards, inputs, code blocks — first lift above the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Secondary panels, hover fills.
- **Ink** (`{colors.ink}`): Primary text and headings — off-white, not pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions, section labels.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled text.

### Accent
- **Primary** (`{colors.primary}`): Electric indigo — primary buttons, active links, highlights.
- **Primary Hover** (`{colors.primary-hover}`): Pressed/hover state of the accent.
- **Accent Soft** (`{colors.accent-soft}`): Tinted badge background under accent text.

### Neutral Scale
- **Gray 950** (`{colors.gray-950}`): Deepest canvas.
- **Gray 900** (`{colors.gray-900}`): Surface.
- **Gray 800** (`{colors.gray-800}`): Soft surface.
- **Gray 700** (`{colors.gray-700}`): Subtle dividers.
- **Gray 600** (`{colors.gray-600}`): Hover borders.
- **Gray 400** (`{colors.gray-400}`): Muted ink.
- **Gray 200** (`{colors.gray-200}`): Secondary ink.

### Borders
- **Border** (`{colors.border}`): The signature hairline separating cards and sections.
- **Border Soft** (`{colors.border-soft}`): Barely-there internal dividers.

### Status
- **Success** (`{colors.success}`): Confirmation, healthy agent state.
- **Warning** (`{colors.warning}`): Attention, caution.

## Typography

### Font Family
- **Primary**: `Space Grotesk`, with fallbacks `Arial, sans-serif`
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px hero — maximum compression, tight tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card cluster headings |
| `card-title` | Feature cards |
| `body-large` | Introductions, feature descriptions |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `button-ui` | Buttons and links |
| `label-mono` | All-caps mono section labels |
| `caption` | Metadata, fine print |
| `code` | Code blocks, terminal output |

### Principles
- **Two voices, strict roles**: Space Grotesk announces and reads; JetBrains Mono labels and codes. They never trade jobs.
- **Tracking scales with size**: -2px at the 64px hero, relaxing toward 0 at body sizes.
- **Mono labels are uppercase**: All-caps with +1px letter-spacing — the CLI framing that defines the brand.
- **Three weights**: 400 (body), 500 (UI/headings), 600 (display).

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro step. The scale jumps from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) to open up section rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single column with generous vertical padding
- Feature sections: 2–3 column grids on hairline-bordered cards
- Sections separated by `1px solid {colors.border}` full-width dividers

### Whitespace Philosophy
- **Quiet darkness**: The dark canvas plus generous spacing (`{spacing.3xl}`–`{spacing.4xl}` between sections) makes content feel calm and focused.
- **Borders, not shadows**: On a near-black canvas, separation comes from hairline borders and surface lifts, not drop shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Canvas `{colors.background}` | Page background |
| Surface (Level 1) | `{colors.surface}` + `1px solid {colors.border}` | Cards, inputs |
| Raised (Level 2) | `{colors.surface-soft}` + `1px solid {colors.border}` | Hover, secondary panels |
| Focus | `1px solid {colors.primary}` border | Keyboard/active focus |

**Depth Philosophy**: There is no shadow system. On a dark canvas, elevation reads through value — each lift is a slightly lighter gray — and through the hairline `{colors.border}`. This keeps the page flat, crisp, and terminal-like.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Inline chips |
| `sm` | 6px | Badges, small controls |
| `md` | 8px | Buttons, inputs |
| `lg` | 12px | Cards, code blocks |
| `xl` | 16px | Large feature panels |
| `pill` | 9999px | Status pills, toggles |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric accent fill, white text, `{rounded.md}`. The default CTA.
- **`button-secondary`** — Dark surface with hairline `{colors.border}`, lifts to `{colors.surface-soft}` on hover.

### Badges
- **`badge`** — Tinted `{colors.accent-soft}` surface, accent text, mono all-caps label.

### Cards
- **`card`** — `{colors.surface}` with `{colors.border}` hairline, `{rounded.lg}`.
- **`card-soft`** — Slightly lighter `{colors.surface-soft}` variant for nested panels.

### Inputs
- **`input`** — Dark surface, hairline border. Focus swaps border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Dark sticky header with bottom hairline. Accent primary CTA at right.

### Code
- **`code-block`** — `{colors.surface}` panel, JetBrains Mono, `{rounded.lg}`.

### Distinctive Components
- **Mono Section Labels**: All-caps JetBrains Mono with letter-spacing introduces each section — the CLI framing that is Air's strongest brand signal.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and ink off-white (`{colors.ink}`)
- Build depth from the surface gray ladder and hairline `{colors.border}`, not shadows
- Reserve `{colors.primary}` for primary actions, active states, and highlights only
- Use JetBrains Mono all-caps for section labels and captions
- Set display text with tight negative tracking

### Don't
- Don't introduce a second accent color — the system is mono + one accent
- Don't use drop shadows for elevation on the dark canvas
- Don't set `{colors.primary}` as a background for large reading areas
- Don't put body text in JetBrains Mono — mono is for labels and code
- Don't use pure black (#000) or pure white (#fff) for canvas/ink — keep the micro-softness

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked CTAs |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1280px | Full layout, max content width |
| Large Desktop | >1280px | Centered with generous margins |

### Collapsing Strategy
- Hero: 64px display scales down, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Section spacing: 96px → 48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: near-black `{colors.background}`
- Heading text: off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: electric accent `{colors.primary}`
- Border: hairline `{colors.border}`
- Focus: `{colors.primary}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 64px Space Grotesk weight 600, line-height 1.04, letter-spacing -2px, color `{colors.ink}`. Subtitle 18px weight 400, color `{colors.ink-secondary}`. Accent CTA (`{colors.primary}` fill, white text, 8px radius) plus a secondary button (`{colors.surface}` fill, `{colors.border}` hairline)."
- "Design a card: `{colors.surface}` background, 1px solid `{colors.border}`, 12px radius, 24px padding. Title 20px Space Grotesk weight 500. Body 16px weight 400 in `{colors.ink-secondary}`."
- "Add a section label: JetBrains Mono 13px weight 500, uppercase, letter-spacing 1px, color `{colors.ink-secondary}`."

### Iteration Guide
1. Dark canvas, off-white ink, one accent — never a second color
2. Elevation via surface gray ladder + hairline border, never shadow
3. Space Grotesk to announce/read, JetBrains Mono to label/code
4. Tracking tightens with size: -2px at 64px, relaxing to 0 at body
5. Accent is functional — primary actions and active states only

---

## 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 Air. Brand names and trademarks belong to their respective owners.