# Output Design System

> High-contrast brutalism meets warm tactile surfaces, anchored by wide-set industrial typography and a signature electric yellow accent.

**Source:** https://output.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Output utilizes a high-contrast "monochrome plus one" strategy. The system is built on a foundation of deep charcoal (#0d0e0f) and pure white (#ffffff), softened by a warm parchment-like surface (#f1e7d1) used for navigation and section backgrounds. The brand's primary energy comes from an electric yellow (#e5ff00) used exclusively for primary actions and highlighted text. Typography is the dominant brand signal, utilizing the Pilat family in various widths—most notably "Wide Black" and "Wide Heavy"—to create a dense, technical, and authoritative layout that feels like a modern hardware interface.

## Signature DNA
1. **The Pilat Wide Stack** (The use of Pilat Wide Black at 900 weight and Pilat Wide Heavy at 400 weight for all primary headings creates a distinct horizontal, industrial rhythm. Seen on https://output.com and https://output.com/pricing.)
2. **Electric Yellow Punctuation** (The hex #e5ff00 is reserved for the most critical UI moments: primary pill buttons and key emphasis text. It provides a high-voltage break from the otherwise neutral palette.)
3. **Warm Foundation vs. Dark UI** (The brand alternates between a warm #f1e7d1 parchment canvas for marketing sections and a strict #0d0e0f dark mode for product UI previews and footers.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas.warm}` | `#f1e7d1` | Navigation bg, section backgrounds, text | 148 | 0.8 | computed_style |
| `{color.ink.dark}` | `#0d0e0f` | Primary text, footer bg, dark card surfaces | 151 | 0.8 | computed_style |
| `{color.ink.black}` | `#000000` | Primary text, button text | 231 | 0.8 | computed_style |
| `{color.canvas.white}` | `#ffffff` | Page background, ring offset | 13 | 1.0 | computed_style |
| `{color.surface.charcoal}` | `#242628` | Pricing card surfaces | 5 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.accent.yellow}` | `#e5ff00` | Primary CTA background, text highlights | 33 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Pilat Wide Black | 900 | Hero Display | Archivo Black | Proprietary |
| Pilat Wide Heavy | 400, 800 | Section Headings | Montserrat (Wide) | Proprietary |
| Pilat Book | 400 | Body Copy | Inter | Proprietary |
| Pilat Regular | 400 | Secondary Body | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 144px | 144px | normal | 900 | Hero H2 | `h2.mc-font-pilat-wide-black` |
| `{type.display.xl}` | 72px | 72px | 1.44px | 400 | Primary Hero H1 | `h1.mc-mb-[32px]` |
| `{type.display.lg}` | 56px | 56px | 1.12px | 400 | Section Headers | `h2.mc-max-w-[345px]` |
| `{type.heading.md}` | 32px | 32px | 0.6px | 400 | Feature Titles | `h3.mc-pilat-wide-heavy` |
| `{type.heading.sm}` | 24px | 24px | 0.48px | 400 | List Items | `li.whitespace-nowrap` |
| `{type.body.lg}` | 20px | 28px | 0.6px | 400 | Lead Paragraphs | `p.mc-font-pilat-bold` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `div.mc-relative.mc-flex` |
| `{type.caption}` | 12px | 16px | 0.4px | 400 | Small Labels | `h3.mc-font-pilat-bold.mc-text-p-xs` |

### Principles
1. **Horizontal Emphasis:** Headlines use "Wide" variants of Pilat to occupy maximum horizontal space, mimicking hardware labeling.
2. **Tight Leading on Display:** Large display type (144px) uses 1:1 line height to create dense blocks of text.
3. **Letter Spacing for Legibility:** As font size decreases, tracking increases (up to 0.6px for sub-headings) to maintain clarity on textured backgrounds.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 81 |
| `{space.sm}` | 12px | 40 |
| `{space.md}` | 16px | 54 |
| `{space.lg}` | 24px | 29 |
| `{space.section}` | 80px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Navigation, Footer, Sharp Sections | 332 occurrences |
| `{radius.md}` | 12px | Small Cards, Rounded Buttons | 26 occurrences |
| `{radius.lg}` | 16px | Feature Cards, Pricing Tiers | 41 occurrences |
| `{radius.xl}` | 24px | Panel Containers | 21 occurrences |
| `{radius.pill}` | 9999px | Secondary Pill Buttons | 6 occurrences |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** https://output.com, https://output.com/pricing
**Spec:** Background `{color.canvas.warm}` (#f1e7d1) / Text `{color.ink.dark}` (#0d0e0f) / Radius 0px / Padding 0px / Typography 16px
**States observed:** Default: captured | Hover/Active: not captured

#### Footer
**Role:** Global site footer
**Pages observed:** https://output.com, https://output.com/pricing
**Spec:** Background `{color.ink.dark}` (#0d0e0f) / Text `{color.ink.black}` (#000000) / Radius 0px / Padding 80px 48px 48px
**States observed:** Default: captured

### Tier 2: Patterns

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://output.com, https://output.com/pricing
**Spec:** Background `{color.accent.yellow}` (#e5ff00) / Text `{color.ink.dark}` (#0d0e0f) / Radius 12px / Padding 8px 16px / Typography Pilat Bold 16px
**States observed:** Default: captured

#### Rounded Button
**Role:** Secondary actions
**Pages observed:** https://output.com, https://output.com/pricing
**Spec:** Background transparent / Text `{color.ink.dark}` (#0d0e0f) / Border 0px / Radius 12px / Padding 8px 16px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Product highlight
**Pages observed:** https://output.com, https://output.com/pricing
**Spec:** Background `{color.accent.yellow}` (#e5ff00) / Text `{color.ink.dark}` (#0d0e0f) / Radius 16px / Padding 14px 24px
**States observed:** Default: captured

#### Pricing Card
**Role:** Subscription tier
**Pages observed:** https://output.com/pricing
**Spec:** Background `{color.ink.dark}` (#0d0e0f) / Text `{color.ink.black}` (#000000) / Radius 16px / Padding 4px
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding | 80px (Vertical) |
| Grid Gutter | 24px |

## Imagery & decoration
Output uses high-fidelity product UI screenshots and lifestyle photography of music production environments. Visual decoration is minimal, limited to fine-line technical illustrations (sunburst patterns) and high-contrast badges (e.g., "New", "FX") that use small, bold Pilat typography.

## Do's
- Use **Pilat Wide Black** for hero headings to establish industrial authority.
- Apply **#e5ff00** (Electric Yellow) only to primary conversion points.
- Use **#f1e7d1** (Warm Canvas) for large marketing sections to avoid sterile "pure white" layouts.
- Maintain **16px radius** for all primary content cards.
- Ensure all body text uses **Pilat Book** at 16px for consistent legibility.

## Don'ts
- **Wrong:** Using #e5ff00 for secondary or tertiary buttons.
  **Right:** Use transparent backgrounds or #f1e7d1 for non-primary actions.
  **Reason:** Overuse of the accent color dilutes the brand's "voltage" signal.
- **Wrong:** Mixing rounded corners with the global navigation.
  **Right:** Keep navigation and footer at 0px radius.
  **Reason:** The site frame is strictly architectural and sharp.
- **Wrong:** Using thin weights for display headings.
  **Right:** Stick to Pilat Wide Heavy (400) or Black (900).
  **Reason:** The brand identity relies on the density of the typeface.

## Similar brands
- Teenage Engineering (Industrial, technical, high-contrast)
- Ableton (Music-tech focus, clean typography, functional UI)
- Native Instruments (Dark mode UI, bold hardware-inspired type)

## Quick start

```css
/* CSS Variables */
:root {
  --color-yellow: #e5ff00;
  --color-warm-canvas: #f1e7d1;
  --color-dark-ink: #0d0e0f;
  --color-white: #ffffff;
  
  --font-display: "Pilat Wide Black", sans-serif;
  --font-heading: "Pilat Wide Heavy", sans-serif;
  --font-body: "Pilat Book", sans-serif;
  
  --radius-card: 16px;
  --radius-button: 12px;
}
```

## Agent prompt examples
- "Generate a hero section for Output using Pilat Wide Black for the headline, a #f1e7d1 background, and a primary pill button in #e5ff00 with 12px border radius."
- "Create a product feature grid where each card has a 16px border radius, #0d0e0f text, and an #e5ff00 background."
- "Design a footer using #0d0e0f background with sharp 0px corners and Pilat Book 14px typography for link lists."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) were not fully documented.
- Shadow tokens were not present in the source evidence; the system appears to rely on flat color blocks and borders.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://output.com | 1440px | 2026-06-06 |
| Pricing | https://output.com/pricing | 1440px | 2026-06-06 |