---
version: alpha
name: Cowboy Space
description: Frontier-industrial space-infrastructure aesthetic — near-black orbital canvas, high-contrast white display type, a single electric-amber signal accent, technical monospace labels, and hairline grid borders that evoke engineering schematics.

colors:
  # Canvas + ink
  background: "#08090b"
  surface: "#0e1014"
  surface-soft: "#15181d"
  ink: "#f4f5f7"
  ink-secondary: "#a3a8b3"
  ink-muted: "#6b7280"

  # Signal accent — frontier amber
  primary: "#ff8a1f"
  primary-hover: "#ffa14a"
  accent-glow: "#1f1408"     # amber wash flattened over the near-black canvas

  # Secondary signal — orbital cyan
  cyan: "#3ad6e0"
  cyan-soft: "#0e2a2d"

  # On-color
  on-primary: "#08090b"
  on-ink: "#08090b"

  # Grid + borders
  border: "#23262d"
  border-strong: "#33373f"
  grid-line: "#1a1d23"

  # Status
  success: "#4ade80"
  warning: "#fbbf24"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -2.16px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -1.32px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.27
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  mono-label:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.5px
  mono-body:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.cyan-soft}"
    textColor: "{colors.cyan}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.xs}"
    padding: 4px 10px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border-strong}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border}"
  stat-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
---

# Cowboy Space Design System

## Overview

Cowboy Space designs like a company that builds power infrastructure for orbit — the interface reads as a control surface, not a marketing brochure. The canvas is a near-black void (`{colors.background}`), the kind of deep, slightly blue-shifted black that suggests the dark side of a planet rather than pure ink. Against it, white display type (`{colors.ink}`) carries enormous contrast, and a single electric amber (`{colors.primary}`) acts as the system's signal color — the warning light, the active state, the "this is the action" marker. The result is bold and industrial: confident, frontier-flavored, and engineered.

The typographic system pairs a geometric-mechanical display face (Space Grotesk) with a clean humanist body (Inter) and a technical monospace (Space Mono) for labels, coordinates, and metadata. Headlines run large and tight — negative tracking compresses the display type so it feels precise and load-bearing. The monospace labels are the connective tissue: uppercase, letter-spaced, used for section eyebrows, stat captions, and status readouts, lending everything the flavor of a telemetry console.

Structure comes from hairline grid borders rather than shadows. Cards and panels are separated by 1px lines in low-contrast grays (`{colors.border}`, `{colors.grid-line}`), echoing the schematic, gridded look the brand uses in its imagery ("Fenced In by the Grid"). Depth is implied through layered surfaces — `{colors.surface}` over the background, `{colors.surface-soft}` for raised feature panels — not drop shadows. The overall feeling is a dark engineering blueprint brought to life.

**Key Characteristics:**
- Near-black orbital canvas (`{colors.background}`) with high-contrast white display type
- Single electric-amber signal accent (`{colors.primary}`) reserved for actions and active states
- Secondary orbital-cyan (`{colors.cyan}`) for status/badges only
- Space Grotesk display with tight negative tracking; Inter for body
- Space Mono uppercase labels as telemetry-style eyebrows and captions
- Hairline grid borders instead of shadows for structure
- Layered dark surfaces for depth, never glow-heavy chrome

## Colors

### Canvas & Ink
- **Orbital Black** (`{colors.background}`): Page canvas. Deep near-black with a slight cool cast.
- **Panel** (`{colors.surface}`): Cards, nav, inputs — one step up from the canvas.
- **Raised Panel** (`{colors.surface-soft}`): Feature cards and elevated regions.
- **White Ink** (`{colors.ink}`): Headlines and primary text.
- **Secondary Ink** (`{colors.ink-secondary}`): Body copy, supporting text.
- **Muted Ink** (`{colors.ink-muted}`): Captions, disabled labels.

### Signal Accent
- **Frontier Amber** (`{colors.primary}`): The action color — primary CTAs, active links, key highlights. Never the page background.
- **Amber Hover** (`{colors.primary-hover}`): Lighter amber for hover states.
- **Orbital Cyan** (`{colors.cyan}`): Secondary signal for badges, status, and data points.

### Grid & Borders
- **Border** (`{colors.border}`): Default 1px panel separation.
- **Border Strong** (`{colors.border-strong}`): Emphasized borders, input outlines.
- **Grid Line** (`{colors.grid-line}`): Faint schematic grid lines.

### Status
- **Success** (`{colors.success}`): Operational/positive states.
- **Warning** (`{colors.warning}`): Caution readouts.

## Typography

### Font Family
- **Display**: `Space Grotesk`, fallback `Arial, sans-serif`
- **Body**: `Inter`, fallback `Arial, sans-serif`
- **Mono**: `Space Mono`, fallback `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 72px hero — frontier billboard impact |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature/card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | UI text, captions |
| `button-ui` | Buttons and CTAs |
| `mono-label` | Uppercase eyebrows, stat captions, status |
| `mono-body` | Coordinates, technical data |

### Principles
- **Compression as engineering**: Space Grotesk at display sizes uses negative tracking (-2.16px at 72px) so headlines read as precise and load-bearing.
- **Mono as telemetry**: Space Mono uppercase with 1.5px tracking marks every label, eyebrow, and metric — the "console voice."
- **Two-weight discipline on display**: 700 for headlines, 600 for sub-headings; body stays at 400.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps to `{spacing.3xl}` (64px) and `{spacing.4xl}` (120px) for the generous vertical breathing room between dark sections.

### Grid & Container
- Max content width: ~1280px, centered
- Hero: left-aligned or centered single column with large top padding
- Feature sections: 2–3 column panel grids separated by hairline borders
- Schematic grid motifs used as decorative background texture

### Whitespace Philosophy
- **Void emptiness**: Large vertical padding between sections; the dark canvas reads as space.
- **Grid structure**: Separation comes from 1px borders and layered surfaces, not shadows.
- **Signal restraint**: Amber appears sparingly so each use carries weight.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Canvas, no border | Page background, text blocks |
| Panel (Level 1) | `{colors.surface}` + 1px `{colors.border}` | Cards, nav, inputs |
| Raised (Level 2) | `{colors.surface-soft}` + 1px `{colors.border-strong}` | Feature cards |
| Signal | Amber fill or border | Active/primary elements |
| Focus | 1px `{colors.primary}` outline | Keyboard focus |

**Depth Philosophy**: Cowboy Space builds depth through layered dark surfaces and hairline borders, not drop shadows. Each surface is a measured step lighter than the canvas, like stacked schematic layers.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, dividers |
| `xs` | 2px | Badges, small tags |
| `sm` | 4px | Buttons, inputs |
| `md` | 8px | Cards |
| `lg` | 12px | Feature panels |
| `pill` | 9999px | Status pills |

Radii stay tight and rectilinear — the system favors crisp, engineered corners over soft rounding.

## Components

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

### Buttons
- **`button-primary`** — Amber fill, near-black text, 4px radius. The single primary action.
- **`button-secondary`** — Panel surface with a `{colors.border-strong}` outline and white text.

### Badges
- **`badge`** — Cyan-on-dark-cyan tint, mono uppercase label, 2px radius.

### Cards
- **`card`** — Panel surface, 1px border, 8px radius.
- **`card-feature`** — Raised surface, stronger border, 12px radius, larger padding.

### Inputs
- **`input`** — Panel surface, strong border; focus swaps the border to amber (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Canvas-colored sticky header with a bottom hairline border and an amber CTA.

### Distinctive Components
- **Telemetry labels**: Mono uppercase eyebrows and stat captions (`{components.stat-label}`).
- **Schematic grid**: Faint `{colors.grid-line}` grid as decorative background texture.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let white type carry the contrast
- Reserve amber (`{colors.primary}`) for actions and active states only
- Use Space Mono uppercase for eyebrows, captions, and status
- Build structure with hairline borders and layered surfaces
- Keep radii tight and rectilinear

### Don't
- Don't set the primary action color to the page background
- Don't scatter amber decoratively — it loses signal value
- Don't rely on drop shadows for depth — use layered dark surfaces
- Don't soften corners with large radii
- Don't drop body text below `{colors.ink-secondary}` contrast on the dark canvas

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, mono labels persist |
| Tablet | 600–1024px | 2-column panel grids |
| Desktop | 1024–1280px | Full multi-column layout |
| Large | >1280px | Centered, generous margins |

### Collapsing Strategy
- Hero: 72px display scales down, negative tracking held proportionally
- Navigation: horizontal links → hamburger menu
- Feature panels: 3-column → 2-column → single column
- Section spacing: 120px → 64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Orbital Black `{colors.background}`
- Heading text: White Ink `{colors.ink}`
- Body text: Secondary Ink `{colors.ink-secondary}`
- Primary CTA: Frontier Amber `{colors.primary}`
- Border: `{colors.border}`
- Status/badge: Orbital Cyan `{colors.cyan}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Headline 72px Space Grotesk weight 700, letter-spacing -2.16px, `{colors.ink}`. Mono eyebrow 12px Space Mono uppercase 1.5px tracking in `{colors.ink-secondary}`. Amber CTA (`{colors.primary}` fill, near-black text, 4px radius)."
- "Feature card: `{colors.surface-soft}` background, 1px `{colors.border-strong}`, 12px radius, 32px padding. Title 22px Space Grotesk weight 600, body 16px Inter `{colors.ink-secondary}`."
- "Cyan status badge: `{colors.cyan-soft}` background, `{colors.cyan}` text, mono uppercase 12px, 2px radius."

---

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