---
name: Teenage Engineering
description: "A masterclass in premium hardware branding, using extreme minimalism and a restrained palette to emphasize product craftsmanship and industrial design."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  secondary: "#e5e5e5"
  tertiary: "#f56b2a"
  neutral: "#767676"
  bg-quiet: "#0f0e12"
  muted-soft: "#b2b2b2"
  line: "rgba(229,229,229,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 26.4px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 13.2px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A stark, premium aesthetic for modular music hardware that blends industrial precision with playful, colorful accents.

*A minimalist industrial design studio that creates premium, toy-like musical instruments.*

## Colors

Stark contrast with a single high-chroma accent.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#e5e5e5`)** — uses `ink-soft` token
- **Accent (`#f56b2a`)** — uses `accent` token
- **Muted (`#767676`)** — uses `muted` token
- **Borders (`rgba(229,229,229,1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** geometric-sans

- Use lowercase for most text elements
- Maintain extremely light font weights (100-300)
- Use generous tracking on smaller text

## Layout

Centered product photography with generous negative space; grid-aligned navigation.

*Rhythm:* Asymmetric and generous, often using large horizontal padding (66px) for edge-to-edge layouts.

## Elevation & Depth

- Borders: 1px solid rgba(229,229,229,1.0) for light UI elements; otherwise, borders are absent in dark mode.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid accent-colored rectangle with uppercase text.
- **card:** Minimalist product cards with no visible borders or shadows, relying on negative space.
- **chip:** N/A
- **input:** N/A
- **hero:** Large-scale, high-contrast product photography set against a pure black background.

## Do's and Don'ts

**Don't:**
- don't use bold typography — screenshot shows thin, light-weight (100-300) geometric sans-serif fonts throughout
- don't use complex gradients — screenshot shows solid, stark black backgrounds with minimal color
- don't use rounded, friendly UI shapes — screenshot shows sharp-edged, rectangular product forms and UI elements
- don't use multiple accent colors — screenshot shows a single, dominant orange (#f56b2a) as the primary accent
- don't use cluttered, busy layouts — screenshot shows generous negative space and a focus on single product shots
- don't use traditional serif typography — screenshot shows purely geometric sans-serif font categories

---

## System Prompt (paste into AI agent)

```
This is a minimalist, premium website for a hardware design studio. It uses a stark dark mode with a pure black background (#000000) and high-contrast white/light gray text. The typography is exclusively geometric sans-serif, used at very light weights (100-300) and often in lowercase. A single, high-chroma orange (#f56b2a) serves as the primary accent for buttons and active states. Layouts are spacious, centering on large-scale product photography. Critical don'ts: never use bold or heavy font weights, never use multiple accent colors, and never create busy or cluttered interfaces that distract from the hardware.
```