---
version: alpha
name: Superset
description: Terminal-native dark developer tool — IBM Plex Mono everywhere, near-black #111 canvas with off-white #fafafa ink, a single warm orange (#fe6e00) accent, hairline #ffffff1a borders, and macOS traffic-light window chrome as a recurring motif.

colors:
  # Canvas + ink (dark is the brand default)
  background: "#111111"
  surface: "#171717"
  surface-soft: "#1e1e1e"
  surface-raised: "#262626"
  ink: "#fafafa"
  ink-secondary: "#a1a1a1"
  ink-muted: "#737373"

  # Accent — single warm orange, the only saturated brand hue
  primary: "#fe6e00"
  accent-orange-soft: "#ff8c3a"
  accent-orange-deep: "#f05100"

  # Status / semantic
  success: "#00bb7f"
  success-soft: "#5ee9b5"
  destructive: "#ff6568"
  warning: "#fcbb00"

  # macOS window traffic-light chrome (recurring motif)
  window-close: "#ff5f57"
  window-min: "#febc2e"
  window-max: "#28c840"

  # Borders / inputs — hairline white-alpha, flattened over #111
  border: "#2a2a2a"        # was #ffffff1a over #111
  border-strong: "#3a3a3a" # was #ffffff26 over #111
  input: "#2a2a2a"

  # On-color
  on-primary: "#111111"
  on-ink: "#111111"

typography:
  display-hero:
    fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1px
  sub-heading:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.5px
  card-title:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  mono-label:
    fontFamily: "IBM Plex Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px

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

rounded:
  none: 0px
  xs: 2px
  sm: 6px
  md: 10px
  lg: 14px
  xl: 16px
  2xl: 24px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"

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

  badge:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: 2px 8px
    borderColor: "{colors.border}"

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

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

  card-terminal:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.input}"
  input-focus:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

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

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

# Superset Design System

## Overview

Superset is a native macOS desktop tool for orchestrating many AI coding agents in parallel, each isolated in its own Git worktree. The visual language matches the product literally: this is an interface that lives in the terminal, so the entire site is rendered in monospace. IBM Plex Mono is not a code accent here — it is the only typeface, used for hero headlines, body copy, buttons, and captions alike. The result reads like a polished terminal window that happens to be a marketing page.

The canvas is dark by default. A near-black `{colors.background}` (#111) sits under off-white `{colors.ink}` (#fafafa) text, with a tight ladder of elevated surfaces — `{colors.surface}`, `{colors.surface-soft}`, `{colors.surface-raised}` — separating cards, terminal panes, and inputs by a single step of lightness each. There is exactly one saturated brand hue: a warm orange (`{colors.primary}`, #fe6e00) used for primary CTAs, key accents, and highlight states. Everything else is achromatic gray, which lets the orange carry all the energy.

Borders are deliberately faint. Rather than solid gray lines, Superset draws hairline dividers from low-alpha white (`#ffffff1a`, flattened here to `{colors.border}` #2a2a2a) so that structure is suggested rather than stated. The recurring decorative motif is the macOS window chrome itself: the red / yellow / green traffic-light dots (`{colors.window-close}` / `{colors.window-min}` / `{colors.window-max}`) appear atop cards and terminal mockups, constantly reminding you this is a desktop-native app.

**Key Characteristics:**
- IBM Plex Mono as the sole typeface — headlines, body, buttons, captions all monospace
- Dark-first canvas: #111 background, #fafafa ink, never a light page
- A single warm orange accent (`{colors.primary}`) against an otherwise achromatic palette
- Stepped dark surface ladder (#171717 → #1e1e1e → #262626) for elevation
- Hairline low-alpha white borders instead of solid gray lines
- macOS traffic-light dots as a recurring window-chrome motif
- shadcn/ui token architecture (background/foreground/card/muted/accent/border)
- Soft 10px default radius (`--radius: .625rem`) across cards and controls

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas. The default and only page mode.
- **Surface** (`{colors.surface}`): Card and popover background, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Terminal panes, inputs, code blocks.
- **Surface Raised** (`{colors.surface-raised}`): Highest elevation — raised badges, hovered rows.
- **Ink** (`{colors.ink}`): Off-white primary text. Never pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted body and nav text.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, lowest-emphasis labels.

### Accent
- **Primary Orange** (`{colors.primary}`): The single brand hue — CTAs, highlights, focus.
- **Orange Soft** (`{colors.accent-orange-soft}`): Lighter accent / hover glow.
- **Orange Deep** (`{colors.accent-orange-deep}`): Pressed / deep accent state.

### Status
- **Success** (`{colors.success}`): Passing agents, completed runs.
- **Destructive** (`{colors.destructive}`): Errors, conflicts, destructive actions.
- **Warning** (`{colors.warning}`): Pending / attention states.

### Window Chrome (motif)
- **Close** (`{colors.window-close}`) / **Minimize** (`{colors.window-min}`) / **Maximize** (`{colors.window-max}`): macOS traffic-light dots decorating card and terminal mockups.

### Borders
- **Border** (`{colors.border}`): Hairline low-alpha white divider, flattened over canvas.
- **Border Strong** (`{colors.border-strong}`): Slightly more visible divider for hover/active.

## Typography

### Font Family
- **Primary (and only)**: `IBM Plex Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`
- There is no separate sans typeface — the entire system is 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` | 60px hero headline, mono, slight negative tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, large card heads |
| `card-title` | Feature / workspace card titles |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-small` | UI text, terminal output, captions |
| `button-ui` | Buttons and links |
| `caption` | Metadata, fine print |
| `mono-label` | Uppercase-ish technical labels, badges |

### Principles
- **Monospace as identity**: Every word on the page is IBM Plex Mono. The terminal aesthetic IS the brand.
- **Weight discipline**: 400 (read), 500 (UI / headings). Heavier weights are rare.
- **Subtle display tracking**: Large headlines pull tracking slightly negative (~-1.5px at 60px) to tighten the otherwise wide mono rhythm.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Roughly 8px-based, with generous jumps to `{spacing.3xl}`/`{spacing.4xl}` for section rhythm.

### Grid & Container
- Centered single-column hero with terminal/app mockups below
- Feature sections as 2–3 column card grids
- Max content width ~1100–1200px

### Whitespace Philosophy
- **Dark room, lit objects**: The black canvas recedes; orange accents and lit cards advance.
- **Hairline structure**: Separation comes from low-alpha borders and elevation steps, not heavy dividers.
- **Generous vertical rhythm**: Large section padding (`{spacing.3xl}`+) keeps the dense mono type breathing.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (0) | `{colors.background}`, no border | Page canvas, text |
| Surface (1) | `{colors.surface}` + `{colors.border}` | Cards, popovers |
| Terminal (1b) | `{colors.surface-soft}` + `{colors.border}` | Terminal panes, inputs, code |
| Raised (2) | `{colors.surface-raised}` | Hover rows, raised badges |
| Focus | `{colors.primary}` border/ring | Keyboard + input focus |

**Depth Philosophy**: Elevation is expressed as one-step lightness changes against the dark canvas, reinforced by hairline borders, rather than drop shadows. Cards feel like stacked terminal panes.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed, dividers |
| `xs` | 2px | Inline code, tiny chips |
| `sm` | 6px | Inputs, badges, ghost buttons |
| `md` | 10px | Default — buttons, terminal cards |
| `lg` | 14px | Standard cards |
| `xl` | 16px | Large cards |
| `2xl` | 24px | Hero mockups, large panels |
| `pill` | 9999px | Status dots, pills |

## Components

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

### Buttons
- **`button-primary`** — Orange fill, near-black text, 10px radius. The single high-emphasis CTA.
- **`button-secondary`** — Dark surface with hairline border.
- **`button-ghost`** — Transparent on canvas, muted text, for low-emphasis nav.

### Badges
- **`badge`** — Raised dark chip, muted text, hairline border.
- **`badge-accent`** — Same chrome with orange text for highlighted labels.

### Cards
- **`card`** — `{colors.surface}` with hairline border, 14px radius.
- **`card-terminal`** — `{colors.surface-soft}`, mono body, often topped with traffic-light dots.

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

### Navigation
- **`nav-bar`** — Transparent-over-canvas sticky header, muted mono links, orange CTA right.

### Distinctive Components
- **Window Chrome Header**: macOS traffic-light dots (`{colors.window-close}` / `{colors.window-min}` / `{colors.window-max}`) atop card and terminal mockups — the signature motif.
- **Terminal Card**: `{colors.surface-soft}` pane with mono output and a spinner glyph, mirroring the actual product UI.

## Do's and Don'ts

### Do
- Use IBM Plex Mono for everything — there is no sans fallback in the brand
- Keep the canvas dark (#111) — Superset has no light marketing mode
- Reserve orange (`{colors.primary}`) for one high-emphasis action per view
- Use hairline low-alpha borders and stepped surfaces for structure
- Add macOS traffic-light dots to terminal/app mockups for product authenticity

### Don't
- Don't introduce a sans-serif typeface
- Don't render the page on a light/white canvas
- Don't use pure white (#fff) for text — use `{colors.ink}` (#fafafa)
- Don't add a second saturated accent alongside the orange
- Don't replace hairline borders with heavy solid gray lines or drop shadows

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, stacked cards, smaller hero |
| Tablet | 640–1024px | 2-column grids begin |
| Desktop | 1024–1280px | Full card grids, max width |
| Large | >1280px | Centered, generous side margins |

### Collapsing Strategy
- Hero: 60px → scales down, keeps mono rhythm
- Feature grids: 3-col → 2-col → single column
- Terminal mockups: maintain aspect, may horizontally scroll
- Nav: links → compact menu, orange CTA persists

---

## Agent Prompt Guide

### Quick Color Reference
- Background: near-black `{colors.background}` (#111)
- Heading + body text: off-white `{colors.ink}` (#fafafa)
- Muted text: `{colors.ink-secondary}`
- Primary CTA: orange `{colors.primary}` with `{colors.on-primary}` text
- Card surface: `{colors.surface}` + hairline `{colors.border}`
- Focus / accent: orange `{colors.primary}`

### Example Component Prompts
- "Create a dark hero (#111). Headline in IBM Plex Mono 60px weight 500, letter-spacing -1.5px, color #fafafa. Subtitle 18px mono weight 400 in `{colors.ink-secondary}`. Orange CTA button (`{colors.primary}`, #111 text, 10px radius) plus a dark secondary button with hairline `{colors.border}`."
- "Design a terminal card: `{colors.surface-soft}` background, 10px radius, hairline `{colors.border}`. Top row has three macOS dots (`{colors.window-close}`, `{colors.window-min}`, `{colors.window-max}`). Body is IBM Plex Mono 14px in `{colors.ink}` with a spinner glyph."
- "Build a feature card: `{colors.surface}`, hairline border, 14px radius, 24px padding. Title 20px mono weight 500, body 16px mono weight 400 in `{colors.ink-secondary}`."

### Iteration Guide
1. Everything is IBM Plex Mono — never reach for a sans-serif
2. Stay dark: #111 canvas, #fafafa ink, no light mode
3. One orange accent carries all emphasis; everything else is gray
4. Structure via hairline borders + one-step surface lightness, not shadows
5. Traffic-light dots signal "native macOS app" — use them on mockups

---

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