№ instrument-com

Instrument

Electric lime grounds stark black, assertive geometric type, a cool, digital expanse.

Feature Stackminimalism brutalism dark mode monochrome playful agencydark

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · high-contrast · muted

SwatchHexOKLCHSuggested roleCopy

Hex#e8bc34
OKLCHoklch(81.2% 0.151 90)
RoleDominant
find sites →
Hex#1c1c70
OKLCHoklch(29.5% 0.139 274)
RoleSurface
find sites →
Hex#e4eb5c
OKLCHoklch(90.8% 0.163 112)
RoleInk
find sites →
Hex#5c96a9
OKLCHoklch(64.0% 0.067 221)
RoleAccent
find sites →
Hex#cac9a8
OKLCHoklch(82.8% 0.045 106)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h2	Instrument-Sans	12px	400	1.33	1.32px	Aa Bb Cc
h3	Instrument-Sans	28px	400	1.14	-0.28px	Aa Bb Cc
body	Instrument-Sans	16px	400	1	0	Aa Bb Cc
button	Instrument-Sans	12px	400	1.33	1.32px	Aa Bb Cc

Spacing scale

6px

8px

12px

15px

24px

32px

48px

96px

Radius scale

0px

24px

32px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #e8bc34;
  --color-surface: #1c1c70;
  --color-ink: #e4eb5c;
  --color-accent: #5c96a9;
  --color-detail: #cac9a8;
}

/* CSS variables exposed by source */
:root {
  --space-16: calc((calc(8*16/8)/1440)*100vw);
  --space-85: calc((calc(8*85/8)/1440)*100vw);
  --space-4: calc((calc(8*4/8)/1440)*100vw);
  --space-97-unitless: calc(8*97/8);
  --space-40: calc((calc(8*40/8)/1440)*100vw);
  --space-320-unitless: calc(8*320/8);
  --space-8: calc((calc(8*8/8)/1440)*100vw);
  --space-32: calc((calc(8*32/8)/1440)*100vw);
  --space-8-unitless: calc(8*8/8);
  --space-20-unitless: calc(8*20/8);
  --space-40-unitless: calc(8*40/8);
  --space-384: calc((calc(8*384/8)/1440)*100vw);
  --space-3-unitless: calc(8*3/8);
  --space-3: calc((calc(8*3/8)/1440)*100vw);
  --text-sans: "Instrument-Sans",Helvetica,sans-serif;
  --space-144: calc((calc(8*144/8)/1440)*100vw);
  --space-32-unitless: calc(8*32/8);
  --space-97: calc((calc(8*97/8)/1440)*100vw);
  --space-10: calc((calc(8*10/8)/1440)*100vw);
  --space-24: calc((calc(8*24/8)/1440)*100vw);
  --space-804: calc((calc(8*804/8)/1440)*100vw);
  --space-12-unitless: calc(8*12/8);
  --space-85-unitless: calc(8*85/8);
  --space-64-unitless: calc(8*64/8);
  --space-80-unitless: calc(8*80/8);
  --space-24-unitless: calc(8*24/8);
  --space-804-unitless: calc(8*804/8);
  --text-serif-italic: "Instrument-Serif-Italic",Times,serif;
  --border-radius: 24px;
  --space-320: calc((calc(8*320/8)/1440)*100vw);
  --text-mono: "Instrument-Mono",Courier,monospace;
  --space-192-unitless: calc(8*192/8);
  --space-64: calc((calc(8*64/8)/1440)*100vw);
  --space-589: calc((calc(8*589/8)/1440)*100vw);
  --space-384-unitless: calc(8*384/8);
  --space-6: calc((calc(8*6/8)/1440)*100vw);
  --space-96: calc((calc(8*96/8)/1440)*100vw);
  --space-80: calc((calc(8*80/8)/1440)*100vw);
  --space-20: calc((calc(8*20/8)/1440)*100vw);
  --space-589-unitless: calc(8*589/8);
  --space-96-unitless: calc(8*96/8);
  --space-48-unitless: calc(8*48/8);
  --space-16-unitless: calc(8*16/8);
  --space-144-unitless: calc(8*144/8);
  --space-12: calc((calc(8*12/8)/1440)*100vw);
  --space-10-unitless: calc(8*10/8);
  --space-192: calc((calc(8*192/8)/1440)*100vw);
  --space-4-unitless: calc(8*4/8);
  --space-48: calc((calc(8*48/8)/1440)*100vw);
  --space-6-unitless: calc(8*6/8);
  --text-serif: "Instrument-Serif",Times,serif;
  --header-height: 60px;
  --t-display-1-size: 64;
  --t-overline-2-width: 80;
  --t-body-2-width: 100;
  --theme-opacity-faded: $theme-default-opacity-faded;
  --t-body-2-weight: 400;
  --t-headline-1-width: 100;
  --t-headline-7-letter-spacing: -.06em;
  --t-headline-6-width: 100;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Instrument.
Reference design system (extracted from the live site):
- Palette: #e8bc34, #1c1c70, #e4eb5c, #5c96a9, #cac9a8
- Typefaces: Instrument-Sans
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/instrument-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Instrument-Sans

12px

400

1.33

1.32px

Aa Bb Cc

Instrument-Sans

28px

400

1.14

-0.28px

Aa Bb Cc

body

Instrument-Sans

16px

400

Aa Bb Cc

button

Instrument-Sans

12px

400

1.33

1.32px

Aa Bb Cc

:root { --color-dominant: #e8bc34; --color-surface: #1c1c70; --color-ink: #e4eb5c; --color-accent: #5c96a9; --color-detail: #cac9a8; } /* CSS variables exposed by source */ :root { --space-16: calc((calc(8*16/8)/1440)*100vw); --space-85: calc((calc(8*85/8)/1440)*100vw); --space-4: calc((calc(8*4/8)/1440)*100vw); --space-97-unitless: calc(8*97/8); --space-40: calc((calc(8*40/8)/1440)*100vw); --space-320-unitless: calc(8*320/8); --space-8: calc((calc(8*8/8)/1440)*100vw); --space-32: calc((calc(8*32/8)/1440)*100vw); --space-8-unitless: calc(8*8/8); --space-20-unitless: calc(8*20/8); --space-40-unitless: calc(8*40/8); --space-384: calc((calc(8*384/8)/1440)*100vw); --space-3-unitless: calc(8*3/8); --space-3: calc((calc(8*3/8)/1440)*100vw); --text-sans: "Instrument-Sans",Helvetica,sans-serif; --space-144: calc((calc(8*144/8)/1440)*100vw); --space-32-unitless: calc(8*32/8); --space-97: calc((calc(8*97/8)/1440)*100vw); --space-10: calc((calc(8*10/8)/1440)*100vw); --space-24: calc((calc(8*24/8)/1440)*100vw); --space-804: calc((calc(8*804/8)/1440)*100vw); --space-12-unitless: calc(8*12/8); --space-85-unitless: calc(8*85/8); --space-64-unitless: calc(8*64/8); --space-80-unitless: calc(8*80/8); --space-24-unitless: calc(8*24/8); --space-804-unitless: calc(8*804/8); --text-serif-italic: "Instrument-Serif-Italic",Times,serif; --border-radius: 24px; --space-320: calc((calc(8*320/8)/1440)*100vw); --text-mono: "Instrument-Mono",Courier,monospace; --space-192-unitless: calc(8*192/8); --space-64: calc((calc(8*64/8)/1440)*100vw); --space-589: calc((calc(8*589/8)/1440)*100vw); --space-384-unitless: calc(8*384/8); --space-6: calc((calc(8*6/8)/1440)*100vw); --space-96: calc((calc(8*96/8)/1440)*100vw); --space-80: calc((calc(8*80/8)/1440)*100vw); --space-20: calc((calc(8*20/8)/1440)*100vw); --space-589-unitless: calc(8*589/8); --space-96-unitless: calc(8*96/8); --space-48-unitless: calc(8*48/8); --space-16-unitless: calc(8*16/8); --space-144-unitless: calc(8*144/8); --space-12: calc((calc(8*12/8)/1440)*100vw); --space-10-unitless: calc(8*10/8); --space-192: calc((calc(8*192/8)/1440)*100vw); --space-4-unitless: calc(8*4/8); --space-48: calc((calc(8*48/8)/1440)*100vw); --space-6-unitless: calc(8*6/8); --text-serif: "Instrument-Serif",Times,serif; --header-height: 60px; --t-display-1-size: 64; --t-overline-2-width: 80; --t-body-2-width: 100; --theme-opacity-faded: $theme-default-opacity-faded; --t-body-2-weight: 400; --t-headline-1-width: 100; --t-headline-7-letter-spacing: -.06em; --t-headline-6-width: 100; }

Build a landing page in the visual style of Instrument. Reference design system (extracted from the live site): - Palette: #e8bc34, #1c1c70, #e4eb5c, #5c96a9, #cac9a8 - Typefaces: Instrument-Sans - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/instrument-com