# Instrument · Design system migration spec

> Source: https://instrument.com  ·  Curated by OpenDesign  ·  en

> Worth including for its masterful balance of bold, oversized typography and playful 3D visuals within a refined, high-end agency framework.

## 1. Identity DNA

Instrument's identity functions as a digital-first creative playground where high-contrast typography and playful 3D elements occupy the same deliberate space. The system pairs extreme scale with generous emptiness, creating a rhythm that feels both experimental and precisely constructed.

**One-liner:** Instrument is a premium digital agency combining bold typography, 3D visuals, and refined editorial layouts.
**Keywords:** digital-first · creativity · technology · agency
**Analogy:** A digital-first design agency where creativity meets technology.

## 2. Color

The palette is built on a stark monochrome foundation of near-black and light gray, punctuated by bold, saturated accent blocks like a vibrant yellow-green. This high-contrast base ensures typography commands attention while color provides deliberate visual rhythm.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E8E8E9` | main background |
| `--bg-soft` | `#F0F0F1` | card background |
| `--bg-quiet` | `#D4D4D5` | quiet area |
| `--ink` | `#070708` | body text |
| `--ink-soft` | `#525252` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `rgba(7,7,8,0.5)` | weak hint |
| `--line` | `rgba(7,7,8,0.5)` | divider |

**Color principle:** High-contrast monochrome base with playful 3D gradient accents in hero.

The principle is restraint: a limited monochrome base allows occasional saturated blocks to function as powerful focal points.

## 3. Typography

Typography is the primary structural element, governed by a strict 400 weight and tight tracking on large display text. The scale ranges from massive hero statements to compact navigation labels, with uppercase treatment reserved for interface elements like navigation and category chips.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 352px | 0.85 | 400 | -17.6px | Hero brand title |
| headline | 36px | 1.1 | 400 | -0.9px | Section headers |
| body | 16px | 1.5 | 400 | normal | Main body text |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a consistent 4px base grid, establishing a measured rhythm that supports the large typographic elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px grid with generous whitespace for editorial breathing room.

## 5. Surfaces

Surfaces are defined by minimal intervention: flat planes with only subtle 1px borders for separation. There are no drop shadows, placing all emphasis on the typographic and color hierarchy.

- **Radius:** sm 4px · md 24px · lg 32px · pill 999px
- **Shadows:**
  - 0 0 0 1px rgba(7,7,8,0.5)
- **Borders:** 1px solid rgba(7,7,8,0.5)

## 6. Layout

The layout skeleton begins with a full-width hero that allows massive typography to span the entire container. This dramatic opening then transitions into constrained, clean content columns for detailed information.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy centers on refinement and purpose, using smooth color transitions and subtle transforms to provide polished feedback. Dynamic 3D hero elements may employ continuous rotation or floating, but all interaction animations remain measured at 0.3s ease-in-out.

- **Durations:** micro 150ms · small 250ms · medium 350ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions for interactive states.
  - Subtle transform shifts on hover for depth.

- **Hover:** Invert colors or subtle background shift.
- **Click:** Immediate visual feedback with no scale bounce.
- **Transition:** 0.25s to 0.3s ease-in-out for all color and background changes.
- **Keyboard:** Focus outlines using the ink color.

## 8. Voice & Don'ts

The editorial voice is confident and professional, yet retains a playful edge through bold, oversized statements. It avoids generic corporate jargon and cluttered layouts in favor of direct, uppercase calls to action within pill-shaped containers.

- **Tone:** Confident, minimalist, and professional.
- **Headline style:** Bold, uppercase, and tightly tracked.
- **CTA style:** Direct and action-oriented.
- **Avoid:** Cluttered layouts / Generic stock imagery / Loud, multi-color gradients / Unnecessary borders or shadows

### Don'ts
- ❌ 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.

The system deliberately rejects thin or weak typography, cramped spacing, and generic rounded corners in favor of its own distinct, pill-shaped components.

## System Prompt (paste into AI tool)

```
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.
```
