Design

Instrument

Dark-first editorial brutalism — cinematic near-black canvas, electric chartreuse punctuation, Instrument Serif and Sans at architectural scale

Color Palette15 tokens

background#070708

surface#111112

surface-elevated#1a1a1b

ink#e8e8e9

ink-muted#9a9a9b

primary#d4e840

on-primary#070708

primary-container#2a2e07

on-surface#c5c5c6

border#1e1e1f

border-light#0f0f10

focus-ring#d4e840

text-hover#ffffff

shadow-soft#000000

gradient-fade#e8e8e9

Buttons

TypographyGoogle Font

Instrument Serif

display-hero

The quick brown fox

480px · 400 · -24px

display

The quick brown fox

78px · 400 · -1.56px

heading-section

The quick brown fox

60px · 400 · -1.8px

heading-sub

The quick brown fox

44px · 400 · -1.32px

heading-medium

The quick brown fox

36px · 400 · -0.54px

IconsLucide

Set: Lucide · brand-matched

Formfocus ring

you@company.com

Password

••••••••

Card · Shapes

Instrument

Dark-first editorial brutalism — cinematic near-black canvas, electric chartreuse punctuation, Instrument Serif and Sans…

Design

none

pill

Elevation

RING

CARD

ELEVATED

Controls

Off

✓Checked

Unchecked

Selected

Option

Alerts

Heads up — a new version of the design system is available.

Saved. Your changes are live across all surfaces.

Some tokens are missing a contrast-safe pairing.

Couldn’t reach the server. Retry in a moment.

Badges

SolidSoftOutlineNewv2.0

FAQ

Instrument

Dark-first editorial brutalism — cinematic near-black canvas, electric chartreuse punctuation, Instrument Serif and Sans at architectural scale

How does it integrate with my stack?

Is there a free tier?

Tabs

OverviewActivitySettings

DayWeekMonth

Stats

48.2k

Active users

+12.4%

$12.8k

MRR

+3.1%

99.9%

Uptime

−0.02%

Table

Member	Plan	Status
AQAvery Quinn	Pro	Active
JLJordan Lee	Team	Pending
SRSam Rivera	Free	Active

Avatars

AQJLSR+5

Avery Quinn

Online · Owner

Slider · Progress

Volume62%

Storage used78%

Tooltip · Popover

Brand-styled tooltipHover target

Navigation bar

Banner

Pricing

Pro

$24 /mo

Unlimited projects
Priority support
Custom domains

Stepper

CartDetails3Payment4Review

Breadcrumb

HomeDesignInstrument

Toast

Changes savedUndo

You have 3 new updates

Activity

Avery created a new project

2h ago

Jordan left a comment

5h ago

Sam shipped v2.0

1d ago

Notifications

AQAvery Quinn invited you to Instrument.

2 minutes ago

JLJordan Lee approved your design tokens.

1 hour ago

SRSam Rivera mentioned you in a thread.

Yesterday

Code

theme.ts

// Instrument tokens
export const theme = {
  primary: "#d4e840",
  radius: "24px",
}

Calendar

March 2026

SMTWTFS28291234567891011121314151617181920212223242526272829303112

No resultsTry adjusting your filters or search for something else.

Pagination

‹123…12›

Brand moment

Instrument's website announces itself with one of the most committed typographic gestures in agency web design: the word "INSTRUMENT" in Instrument Serif at 480px, nearly touching…

Instrument · Design