---
title: "Instrument design system"
variant: extended
source: https://www.instrument.com/
captured_at: 2026-10-12
theme: dark
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/instrument-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Instrument · Design System

> A monochrome canvas for expressive work

**Theme:** dark · **Industry:** agency · **Source:** https://www.instrument.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Instrument’s homepage pairs a restrained near-black canvas with oversized typography and expansive project media. A pale footer and occasional imagery provide contrast without interrupting the editorial, studio-led flow.

## North star

Keep the interface nearly monochrome and let oversized type and project media provide the drama.

## Overview

The page is built around a near-black canvas (#070708), with cool, pale text (#e8e8e9) carrying navigation, headings, and links. The palette stays deliberately quiet in the interface; vivid orange and other saturated tones belong to project imagery in the first viewport, not the measured brand palette. Oversized, tightly tracked sans-serif display lettering makes the opening feel like a studio masthead, while Instrument-Serif adds a distinct editorial voice to selected statements. Most content sits directly on the dark background, separated by generous vertical breathing room and subtle hairlines. Work and news are arranged as media-led grids, offset by spare text-led interludes. Rounded media frames and pill-like navigation or CTA treatments soften the otherwise sharp, flat composition. A single pale inverse footer gathers newsletter, contact, and site links into a clear closing band.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#070708` | `--color-studio-black` | brand | The dominant page canvas, also used for dark text on pale inverse surfaces. |
| Gallery Chalk | `#e8e8e9` | `--color-gallery-chalk` | surface | Primary light text, inverse footer surface, and pale CTA treatments. |
| Smoke Gradient | `#777779` | `--color-smoke-gradient` | neutral | Subdued footer and navigation text, including the measured fade gradient. |
| Graphite Line | `#222223` | `--color-graphite-line` | semantic | Fine navigation and section separators against the dark canvas. |
| Muted Gray | `#808080` | `--color-muted-gray` | neutral | Secondary text where contrast is intentionally quieter than the main copy. |
| Footer Silver | `#cdcdce` | `--color-footer-silver` | neutral | Subtle footer border detail; a minor measured color, not a broad surface. |

### Semantic aliases

`--color-canvas` → `#070708` (Studio Black) · `--color-surface` → `#e8e8e9` (Gallery Chalk) · `--color-text` → `#e8e8e9` (Gallery Chalk) · `--color-text-muted` → `#808080` (Muted Gray) · `--color-text-subtle` → `#070708` (Studio Black) · `--color-border` → `#222223` (Graphite Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e8e8e9` | `#070708` | 16.44:1 | AAA |
| `#808080` | `#070708` | 5.1:1 | AA |
| `#808080` | `#e8e8e9` | 3.23:1 | AA-large |
| `#070708` | `#e8e8e9` | 16.44:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(232, 232, 233, 0.5) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Instrument-Sans | `--font-body` | webfont | 400 | Dominant family for navigation, display lettering, headings, body copy, and links. | Inter |
| Instrument-Serif | `--font-display` | webfont | 400 | Editorial serif accents in selected large statements and featured messaging. | Cormorant Garamond |

- **Instrument-Sans:** Mostly regular weight; oversized display is tightly tracked, while nav and eyebrow labels use uppercase with wide tracking.
- **Instrument-Serif:** Regular weight; use selectively to contrast with the sans-led system, not as the default body face.

### Type scale — Custom (ratio ≈ 1.856, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 352px | 400 | 0.85 | -0.05em | — | Instrument-Sans | Oversized wordmark-style hero lettering and visual masthead. |
| h1 | 64px | 400 | 1.13 | -0.02em | — | Instrument-Serif | Editorial lead statements and prominent page-level messaging. |
| h2 | 36px | 400 | 1.11 | -0.025em | — | Instrument-Sans | Major section headings and featured content titles. |
| h3 | 28px | 400 | 1.14 | -0.01em | — | Instrument-Sans | Secondary feature and editorial card headings. |
| h4 | 23px | 400 | 1.22 | -0.005em | — | Instrument-Sans | Smaller content headings and supporting feature labels. |
| body | 16px | 400 | 1 | 0 | — | Instrument-Sans | Standard project descriptions, agency copy, and navigation content. |
| caption | 12px | 400 | 1.33 | 0.11em | uppercase | Instrument-Sans | Compact uppercase labels and metadata. |
| button | 16px | 400 | 1 | 0 | — | Instrument-Sans | Pill CTA and action text. |
| nav | 12px | 400 | 1.33 | 0.11em | uppercase | Instrument-Sans | Compact, uppercase primary navigation labels. |
| eyebrow | 12px | 400 | 1.33 | 0.11em | uppercase | Instrument-Sans | Section labels and small uppercase introductory markers. |

OpenType features in use: `"liga", "ss12" 0`, `"liga", "ss12"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 48, 96 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1344px.

The measured page uses a 1344px maximum content width with comfortable density and a 48px section-gap reference. The initial masthead spans the viewport; later sections alternate sparse full-width text moments with four-column work and news grids and a six-column offerings layout. Content is generally left aligned, with centered editorial moments used for emphasis. Large vertical intervals are part of the composition, not empty space to compress. The footer switches to a three-column light-on-light inverse arrangement.

## Shape & elevation

- Radius: button `9999px` · media `24px` · nav `9999px` · xs `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Use fine dark hairlines to divide sections and restrained borders for structure. Rounded media frames and pill-shaped navigation or CTA elements add softness, while the black canvas and pale footer create the primary layer contrast.

## Imagery

Project imagery is the principal source of color and variation: photography, campaign artwork, interfaces, and media previews appear in broad rounded frames or compact editorial grids. Keep image crops confident and edge-clean, with minimal decorative framing. The bright orange visible in the first viewport belongs to project media, not the measured interface palette. Treat imagery as portfolio evidence rather than generic background decoration.

## Components

### Primary navigation

Compact uppercase Instrument-Sans links sit in pill-like dark treatments at the top, with the measured navigation using a 999px radius.

### Section eyebrow

Small uppercase labels with wide tracking introduce work, services, recognition, and news sections.

### Text CTA

Pale rounded CTA treatments use regular Instrument-Sans; links elsewhere remain clean text without prominent boxes.

### Work grid

A four-column project listing pairs media with compact uppercase category labels, project names, and brief descriptions.

### Feature media

Large portfolio media sits in rounded frames, with play controls used where the preview implies motion.

### Footer

A pale inverse band organizes newsletter, contact, and navigation links into three columns with subtle divider lines.

### Measured component styles

- **Primary button** (“Skip Navigation”): background #e8e8e9 · text #070708 · radius 0px · padding 0px 20px · 400 16px Instrument-Sans
- **Link** (“Deadstock Coffee”): transparent background · text #e8e8e9 · radius 0px · padding 0px · 400 16px Instrument-Sans
- **Navigation item** (“WORK”): background #222223 · text #070708 · border 2px solid · radius 999px · padding 3px 10px · 400 12px Instrument-Sans · uppercase

## Do

- Use #070708 as the dominant canvas.
- Set primary interface text in #e8e8e9.
- Reserve Instrument-Serif for editorial contrast.
- Give hero typography substantial visual scale.
- Let portfolio imagery supply most color.
- Separate long sections with restrained hairlines.
- Keep generous vertical pauses between content blocks.

## Don't

- Do not introduce unmeasured accent colors into interface UI.
- Do not turn every link into a filled button.
- Do not compress the page into a dense dashboard.
- Do not add decorative shadows to flat media cards.
- Do not use serif typography for all body copy.
- Do not mistake project-image colors for brand palette colors.

## Agent prompt

Build a new creative-agency page in Instrument’s visual language. Use Studio Black (#070708) as the main canvas and Gallery Chalk (#e8e8e9) for primary text; reserve Smoke Gradient (#777779), Muted Gray (#808080), Graphite Line (#222223), and Footer Silver (#cdcdce) for subdued text and fine dividers. Use a clean regular-weight sans for most content, with a selective editorial serif contrast. Make the hero typographic and oversized, then alternate spacious copy-led sections with media-rich project grids. Keep labels compact, uppercase, and widely tracked. Use rounded media frames and pill-like action treatments sparingly. Allow vivid color to come from portfolio images, not new interface accents. Finish with a pale inverse footer containing clear newsletter, contact, and navigation groups.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width masthead above a large featured media preview. | primary navigation, play control, announcement link | oversized wordmark, dark canvas, rounded media |
| 2 | other | Centered statement and CTA within a spacious dark section. | agency introduction, view-work CTA | serif statement, minimal link treatment |
| 3 | product-grid | Four-column project grid with category filters and media. | category filters, project links | uppercase eyebrow, media-led cards, compact metadata |
| 4 | logo-cloud | Sparse client roster band separated by a fine rule. | client proof | hairline divider, small labels |
| 5 | feature-split | Copy and CTA paired with media in a multi-column split. | service overview, offerings link | left-aligned copy, rounded project media |
| 6 | logo-cloud | Compact recognition band with awards beneath a divider. | credibility signals | small award marks, hairline divider |
| 7 | feature-split | Purpose copy paired with oversized typographic statement. | purpose narrative, learn-more link | dramatic display type, dark monochrome field |
| 8 | other | Centered editorial heading and compact link. | news entry point | serif heading, pill CTA |
| 9 | content-feed | Four-column editorial feed with image thumbnails and summaries. | article links, category metadata | media cards, compact labels, dark backdrop |
| 10 | other | Left-aligned statement and link in a wide, open section. | agency approach, services link | large body copy, minimal CTA |
| 11 | footer | Pale three-column footer with newsletter, contact, and site links. | newsletter signup link, contact navigation | inverse surface, fine footer divider |

## Source CSS custom properties (selected)

```css
--text-sans: "Instrument-Sans",Helvetica,sans-serif;
--text-serif: "Instrument-Serif",Times,serif;
--text-serif-italic: "Instrument-Serif-Italic",Times,serif;
--text-mono: "Instrument-Mono",Courier,monospace;
--side-spacing: calc((calc(8*48/8)/1440)*100vw);
--grid-gap: 8px;
--work-features-grid-gap: 25px;
--border-radius: 24px;
--t-body-1-letter-spacing: .03em;
--t-body-2-letter-spacing: .02em;
--t-body-3-letter-spacing: .02em;
--t-headline-1-letter-spacing: .005em;
--t-headline-2-letter-spacing: -.005em;
--t-headline-3-letter-spacing: -.01em;
--t-headline-4-letter-spacing: -.025em;
--t-headline-5-letter-spacing: -.025em;
--t-headline-6-letter-spacing: -.025em;
--t-headline-7-letter-spacing: -.06em;
--t-display-1-letter-spacing: -.02em;
--t-display-2-letter-spacing: -.02em;
--t-display-3-letter-spacing: -.02em;
--t-overline-1-letter-spacing: .11em;
--t-overline-2-letter-spacing: .08em;
--t-caption-1-letter-spacing: .11em;
--t-caption-2-letter-spacing: .05em;
--theme-background: $color-black;
--theme-foreground: $color-white;
--theme-accent-foreground: #fff;
--theme-accent-background: #070708;
--theme-background-faded: hsla(0,0%,100%,.75);
--theme-background-neutral: hsla(0,0%,100%,.5);
--theme-background-shade: hsla(0,0%,100%,.12);
--theme-foreground-faded: rgba(7,7,8,.75);
--theme-foreground-neutral: rgba(7,7,8,.5);
--theme-foreground-shade: rgba(7,7,8,.12);
--theme-accent-background-faded: rgba(7,7,8,.75);
--theme-accent-background-neutral: rgba(7,7,8,.5);
--theme-accent-background-shade: rgba(7,7,8,.12);
--theme-accent-foreground-faded: hsla(0,0%,100%,.75);
--theme-accent-foreground-neutral: hsla(0,0%,100%,.5);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/instrument-com