---
version: alpha
name: Rig
description: Terminal-native developer minimalism — near-black canvas, monospace-first typography, hairline borders over fills, restrained green "ready" accent, and a build-for-control-freaks aesthetic that treats the marketing page like a CLI.
colors:
  # Canvas + ink
  background: "#08090a"
  surface: "#0e0f11"
  surface-soft: "#141517"
  ink: "#f4f4f5"
  ink-secondary: "#a1a1aa"
  ink-muted: "#71717a"

  # Accent — restrained terminal green
  primary: "#3ecf8e"        # "Ready" / success accent
  primary-dim: "#2c9d6c"

  # Status signals
  status-ready: "#3ecf8e"
  status-warn: "#e2b341"
  status-error: "#f0506e"

  # Borders + hairlines (flattened over canvas)
  border: "#26272b"         # was rgba(244,244,245,.10) over #08090a
  border-strong: "#3a3b40"  # was rgba(244,244,245,.18) over #08090a

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

  # Code / terminal surface tints
  code-bg: "#0b0c0e"
  selection: "#1c2b24"      # was rgba(62,207,142,.16) over #08090a

typography:
  display-hero:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.08px
  sub-heading:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.72px
  card-title:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.40
    letterSpacing: -0.36px
  body-large:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.5px
  code:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  caption:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  micro: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  pill: 9999px

components:
  # Primary CTA — green terminal accent
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.primary}"

  # Secondary — hairline-bordered, transparent fill
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

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

  # Card — hairline over canvas
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  # Terminal / code block
  code-block:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 16px 20px
    borderColor: "{colors.border}"

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

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

# Rig Design System

## Overview

Rig is on-device AI coding tooling "built for control freaks," and its design system makes that thesis literal — the marketing site reads like the product, a terminal. The canvas is a deep near-black (`{colors.background}`), text is set almost entirely in a monospace face (`{typography.body}`), and structure comes from hairline borders (`{colors.border}`) rather than filled cards or heavy shadows. Where most landing pages soften, Rig sharpens: the page wants to feel like something engineered in Rust and shipped to a CLI, not a brand deck.

The monospace-first decision is the identity. Headlines, body copy, buttons, and labels all share the same fixed-width family, so the visual rhythm is even and grid-like, echoing aligned terminal output. At display sizes the type takes negative tracking (`{typography.display-hero}`) to stay tight and confident; at reading sizes the tracking relaxes and line-height opens up so dense technical copy stays legible. The effect is uniform and intentional — every word sits on the same monospace lattice.

Color is functional and scarce. The palette is achromatic — black canvas, near-white ink (`{colors.ink}`), a gray scale for secondary and muted text — punctuated by a single restrained terminal green (`{colors.primary}`) that signals "ready," success, and primary action. Warning amber and error red exist only as status signals, never decoration. This is the developer-console voice: color means state, not style.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with near-white monospace ink (`{colors.ink}`)
- Monospace-first typography (JetBrains Mono lineage) across the entire hierarchy, not just code
- Negative tracking at display sizes; relaxed tracking and open line-height at reading sizes
- Hairline borders (`{colors.border}`) over fills and shadows for structure
- Single restrained terminal-green accent (`{colors.primary}`) for "ready" + primary action
- Status colors as signals only — green/amber/red mean state, never decoration
- Tight radii (`{rounded.sm}`–`{rounded.md}`); no soft, friendly rounding
- Real terminal/code blocks as first-class layout elements

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Deep near-black page canvas.
- **Surface** (`{colors.surface}`): Slightly lifted card/panel fill.
- **Surface Soft** (`{colors.surface-soft}`): Inset panels, badge fills.
- **Ink** (`{colors.ink}`): Primary near-white text, headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and description copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, metadata.

### Accent
- **Terminal Green** (`{colors.primary}`): "Ready" state, success, primary CTA fill.
- **Green Dim** (`{colors.primary-dim}`): Hover/pressed variant of the accent.

### Status Signals
- **Ready** (`{colors.status-ready}`): Success / online indicators.
- **Warn** (`{colors.status-warn}`): Caution states.
- **Error** (`{colors.status-error}`): Failures, destructive states.

### Borders
- **Border** (`{colors.border}`): The signature hairline — defines most structure.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary buttons, emphasis.

### Code Surfaces
- **Code Bg** (`{colors.code-bg}`): Terminal/code block fill.
- **Selection** (`{colors.selection}`): Text selection over green tint.

## Typography

### Font Family
- **Primary**: `JetBrains Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`
- The entire system is monospace — there is no separate sans for body copy.

### 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` | 56px hero — tight, confident, negative tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature card titles |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-small` | Compact UI text, captions in dense areas |
| `button-ui` | Buttons, primary actions |
| `mono-label` | Uppercase-ish technical labels, badges |
| `code` | Terminal output, code blocks |
| `caption` | Metadata, footnotes |

### Principles
- **Monospace as identity**: Every text role uses the same fixed-width family — the grid alignment IS the brand.
- **Tracking scales with size**: Negative letter-spacing at display sizes tightens headlines; reading sizes use neutral tracking for legibility.
- **State over emphasis**: Weight (500/600/700) and the green accent carry hierarchy; the system avoids decorative type treatments.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a tight micro/xs range for hairline-precise alignment and large `{spacing.3xl}`–`{spacing.4xl}` jumps for generous section breathing room.

### Grid & Container
- Max content width: approximately 1120px
- Hero: left- or center-aligned single column with a live terminal/CLI panel
- Feature sections: 2–3 column grids of hairline-bordered cards
- Section separation via `{colors.border}` dividers, not background shifts

### Whitespace Philosophy
- **Dark gallery emptiness**: Large vertical gaps between sections; the black canvas does the separating.
- **Hairlines over fills**: Structure reads from 1px `{colors.border}` lines, keeping the page flat and technical.
- **Terminal as hero**: Real code/CLI panels anchor sections instead of decorative illustration.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, on canvas | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, code blocks, nav divider |
| Emphasis (Level 1b) | `1px solid {colors.border-strong}` | Inputs, secondary buttons |
| Focus (Accessibility) | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Rig avoids shadows almost entirely. Depth comes from hairline borders and subtle surface lifts (`{colors.surface}` over `{colors.background}`), not blur. The page should feel flat, sharp, and engineered — like a terminal, not a card stack.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, dividers |
| `micro` | 2px | Inline code spans |
| `xs` | 4px | Badges, small chips |
| `sm` | 6px | Buttons, inputs |
| `md` | 8px | Cards, code blocks |
| `lg` | 10px | Larger panels |
| `pill` | 9999px | Rare — status dots, avatars |

## Components

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

### Buttons
- **`button-primary`** — Terminal-green fill, near-black text, `{rounded.sm}`. The default CTA ("Join Waitlist").
- **`button-secondary`** — Surface fill with `{colors.border-strong}` hairline, near-white text.

### Pills & Badges
- **`badge`** — Surface-soft fill, green text, mono label. Used for "✓ Ready"-style status.

### Cards
- **`card`** — Surface fill, 1px `{colors.border}` hairline, `{rounded.md}`. No shadow.

### Code & Terminal
- **`code-block`** — Darker code-bg fill, secondary-ink mono text, hairline border. A first-class layout element, not an afterthought.

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

### Navigation
- **`nav-bar`** — Black background, near-white mono links, bottom hairline border. Green pill CTA right-aligned.

## Do's and Don'ts

### Do
- Set body copy in the monospace family — the grid alignment is the identity
- Use hairline `{colors.border}` lines for structure instead of fills or shadows
- Reserve the green accent (`{colors.primary}`) for "ready," success, and primary action
- Use status colors (green/amber/red) only as state signals
- Apply negative tracking at display sizes, neutral tracking at reading sizes
- Keep radii tight (`{rounded.sm}`–`{rounded.md}`)
- Treat terminal/code panels as hero content

### Don't
- Don't switch to a sans-serif for body copy — break the monospace grid and you break the brand
- Don't use the green accent decoratively or for large fills
- Don't add soft drop shadows or glows — the system is flat
- Don't use large friendly radii — keep corners sharp
- Don't lighten the canvas toward gray; it stays near-black
- Don't introduce extra hues beyond the achromatic scale + status signals

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, terminal panel scrolls horizontally |
| Tablet | 600–1024px | 2-column card grids begin |
| Desktop | 1024–1200px | Full multi-column layout |
| Large Desktop | >1200px | Centered, max ~1120px content width |

### Touch Targets
- Buttons use 10px vertical padding for comfortable tap targets
- Nav links at 14px mono with adequate spacing
- Status badges keep 4–8px padding

### Collapsing Strategy
- Hero: 56px display scales down, maintains negative tracking proportionally
- Navigation: horizontal mono links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Code/terminal panels: maintain aspect, allow horizontal scroll
- Section spacing: 64px+ → 40px on mobile

### Image Behavior
- Terminal panels keep hairline border treatment at all sizes
- ASCII/CLI art maintains monospace alignment, scales with container

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Terminal Green `{colors.primary}` with `{colors.on-primary}` text
- Background: Near-black `{colors.background}`
- Heading text: Near-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border (hairline): `1px solid {colors.border}`
- Focus ring: `{colors.primary}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 56px JetBrains Mono weight 700, line-height 1.05, letter-spacing -1.68px, color `{colors.ink}`. Subtitle at 18px mono weight 400, color `{colors.ink-secondary}`. Green CTA button (`{colors.primary}` fill, `{colors.on-primary}` text, 6px radius, 10px 18px padding) and a hairline-bordered secondary button (`{colors.surface}`, 1px `{colors.border-strong}`)."
- "Design a card: `{colors.surface}` fill, 1px solid `{colors.border}`, 8px radius, 24px padding. Title at 18px JetBrains Mono weight 600, body at 16px weight 400 in `{colors.ink-secondary}`. No shadow."
- "Build a status badge: `{colors.surface-soft}` fill, `{colors.primary}` text, 4px radius, 4px 8px padding, 12px JetBrains Mono weight 500. Prefix with a ✓."
- "Create a terminal block: `{colors.code-bg}` fill, 1px `{colors.border}`, 8px radius, 14px JetBrains Mono in `{colors.ink-secondary}`, with green `{colors.primary}` for ready/success lines."

### Iteration Guide
1. Everything is monospace — never reach for a sans-serif
2. Structure with hairline borders, not shadows or fills
3. Green is state and action only — keep it scarce
4. Tracking is negative at display sizes, neutral at reading sizes
5. Keep the canvas near-black and corners tight

---

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