Instrument

Item: Instrument
Rating: 7.5

Digital-first design agency making brands, products, websites and campaigns.

instrument.com Save page

7.5/10MABTU rating

DESKTOP · 1440 × 6,710/ ↗

MOBILE · 390

Section outline · Home

01header50
02hero811
03content230
04portfolioRECENT WORK510
05content217
06media textWe make brands, products, websites, and campaigns.668
07content217
08contentShape a better future.900
09content158
10cta522
11content232
12footerKeep up to date with our quarterly newsletter, “Liner Notes.”397

Rating · Home

Visual design8.3

UX & clarity7.3

Originality8.1

Craft & consistency7.3

Motion6.3

Performance & a11y8.5

This page scores 7.7; the site score weights the home page double.

Main colours

Dark·black background·mono

Typography

Instrument-Sansheading · sans · self-hosted Instrument-Sansbody · sans · self-hosted

Stack & style

Nuxt Vue Swiper

Minimal Bold typography Editorial Rounded / soft Dark tech Marquee Sticky header

Also: HubSpot, Netlify

Design DNA

Near-black #070708 canvas under a full-width ultra-black INSTRUMENT wordmark (about 140px tall) flanked by small uppercase pill nav buttons and a centred news ticker. The hero is a case-study video in a browser frame on a rounded dark panel. Statements are set centred in a tall condensed serif at about 32px with a small white pill CTA; labels are 9px uppercase mono-like tracking over hairline rules. Recent work is a four-up row of square tiles with pill filters. A purpose band splits 'Shape / A better / Future' into huge staggered grey serif words. Light grey footer.

Worth borrowing

Run the agency name as a justified ultra-black wordmark across the full content width as the header itself.
Pair a tall condensed serif for statements with tiny uppercase tracked labels over hairline rules.
Stagger three giant words ('Shape / A better / Future') across a dark band with small body copy tucked into the gaps.