---
name: Instrument
description: "Worth including for its masterful balance of bold, oversized typography and playful 3D visuals within a refined, high-end agency framework."
version: alpha

colors:
  background: "#E8E8E9"
  primary: "#070708"
  secondary: "#525252"
  neutral: "#808080"
  bg-soft: "#F0F0F1"
  bg-quiet: "#D4D4D5"
  muted-soft: "rgba(7,7,8,0.5)"
  line: "rgba(7,7,8,0.5)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 352px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-17.6px"
  headline:
    fontFamily: sans-serif
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.9px"
  body:
    fontFamily: sans-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 24px
  lg: 32px
  pill: 999px

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

---

## Overview

Instrument is a premium digital agency combining bold typography, 3D visuals, and refined editorial layouts.

*A digital-first design agency where creativity meets technology.*

## Colors

High-contrast monochrome base with playful 3D gradient accents in hero.

- **Background (`#E8E8E9`)** — uses `bg` token
- **Primary text (`#070708`)** — uses `ink` token
- **Secondary text (`#525252`)** — uses `ink-soft` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(7,7,8,0.5)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** sans-serif
- **Mono:** monospace

- Use Instrument-Sans for all primary UI and body text.
- Use Instrument-Serif for elegant editorial highlights.
- Use Instrument-Mono for technical metadata or tags.
- Set display headlines with tight tracking and high contrast.

## Layout

Grid-based with a massive full-bleed hero and stacked content sections.

*Rhythm:* 4px grid with generous whitespace for editorial breathing room.

## Elevation & Depth

- 0 0 0 1px rgba(7,7,8,0.5)
- Borders: 1px solid rgba(7,7,8,0.5)

## Shapes

- `sm`: 4px
- `md`: 24px
- `lg`: 32px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary buttons with high contrast ink/bg.
- **card:** Large editorial cards with 3D or photographic content.
- **chip:** Small pill tags for navigation with thin borders.
- **input:** Minimalist form inputs with bottom borders.
- **hero:** Full-bleed 3D animated scene with a centered play button.

## Do's and Don'ts

**Don't:**
- Don't use multi-colored gradients — the palette is primarily monochromatic with specific accent scenes.
- Don't use rounded corners on everything — the hero uses sharp edges and circles.
- Don't use heavy drop shadows — use subtle 1px borders for separation.
- Don't use center-aligned body text — the layout is strictly left-aligned.
- Don't use casual or friendly fonts — stick to the sharp, grotesque Instrument family.
- Don't clutter the interface — use generous whitespace and clear hierarchy.

---

## System Prompt (paste into AI agent)

```
This site is a premium digital-first design agency portfolio. It features a bold, monochromatic base (#E8E8E9 bg, #070708 ink) with playful 3D colorful accents in the hero. The typography is dominated by a custom grotesque-sans family (Instrument-Sans) used for massive, tightly tracked headlines and clean body copy. Key criticals: never use center-aligned body text (it's strictly left-aligned), never use heavy drop shadows (use 1px borders instead), and never break the minimalist, high-contrast monochromatic aesthetic. The layout is editorial and spacious, using a 4px grid and 12-column system.
```