Skip to content

Direction 03 / 06

Instrument.

Trustworthy, dense, data-first. Cool slate neutrals, a chart-grade blue, tabular everything.

light + darkIBM Plex Sans · IBM Plex Monoradius 0.375remupdated 16 Sept 2026

Everything inside this frame is rendered in Instrument: its fonts, radius, motion and palette.

Scheme

Example · Ledgerline

Revenue · last 30 days

Every metric, reconciled to the cent.

Ledgerline ties dashboards back to source transactions, so finance and product argue about decisions, not numbers.

Connect a data sourceSee a sample report

Ledgerline

SELECT sum(amount) FROM ledger

readybrand↵

Type

Display IBM Plex Sans 600, text IBM Plex Sans, mono IBM Plex Mono. SIL OFL 1.1.

text-display-lg

Aa Bb 0123

text-display-sm

Measure twice, ship once

text-2xl

Section heading at reading size

text-md

Body copy runs at sixteen pixels with a comfortable measure and pretty wrapping.

text-sm

Interface text: buttons, navigation, table cells.

label-mono

Label · 11px · tracked

font-mono

const lcp = 1180; // ms

Palette

Semantic tokens in OKLCH, a separate scale per scheme. Contrast gate: 66 checks passed, 0 failed.

tightest: dark --fg on --surface-hover 13.63:1 Lc94

light

bg #fbfcfd

Surfaces

  • bg99% 0.002 255
  • bg-subtle97.4% 0.004 255
  • surface100% 0 0
  • surface-raised100% 0 0
  • surface-hover95.2% 0.006 255

Text

  • fg22% 0.015 255
  • fg-muted46% 0.018 255
  • fg-subtle54% 0.018 255

Lines

  • line-subtle25% 0.02 255 / 0.07
  • line25% 0.02 255 / 0.12
  • line-strong25% 0.02 255 / 0.22
  • line-focus55% 0.17 255

Brand

  • brand53% 0.17 255
  • brand-hover49% 0.16 255
  • brand-subtle95.5% 0.02 255
  • brand-line80% 0.08 255
  • brand-text49% 0.15 255

Status

  • success49% 0.11 155
  • warning52% 0.11 70
  • danger51% 0.18 25

dark

bg #0d0e11

Surfaces

  • bg16.5% 0.006 255
  • bg-subtle19% 0.007 255
  • surface20% 0.008 255
  • surface-raised23.5% 0.009 255
  • surface-hover25.5% 0.01 255

Text

  • fg95% 0.005 255
  • fg-muted78.5% 0.012 255
  • fg-subtle62.5% 0.014 255

Lines

  • line-subtle90% 0.02 255 / 0.06
  • line90% 0.02 255 / 0.1
  • line-strong90% 0.02 255 / 0.18
  • line-focus70% 0.13 255

Brand

  • brand55% 0.17 255
  • brand-hover51% 0.16 255
  • brand-subtle26% 0.055 255
  • brand-line45% 0.11 255
  • brand-text80% 0.102 255

Status

  • success79% 0.13 155
  • warning83% 0.12 80
  • danger79% 0.121 25

Depth, radius, motion

Elevation

shadow-1
shadow-2
shadow-3

Radius · knob 0.375rem

sm
lg
xl
2xl

Motion · hover to play

cubic-bezier(0.23, 1, 0.32, 1)

fast 100ms · base 150ms

slow 200ms · slower 300ms

When to use it

Use for
analytics, admin, finance, ops consoles, internal tools, docs for data products
Avoid for
marketing landing pages, big-type storytelling
Signature
13-14px UI, 36px table rows, sticky header on bg-subtle, right-aligned tabular-nums slashed-zero numbers; delta chips (text-success on bg-success-subtle); panels separated by border-line-subtle, shadows only on floating layers (shadow-2/3); filters in the URL.
Don't
hero-size type, decorative gradients, a second accent in chrome (chart palette is separate).

Install

One import after the base, plus the fonts. Every component keeps working.

packages/tokens/css/directions/instrument.css
css
/* src/app/globals.css */
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/instrument.css";
ts
// src/app/layout.tsx
import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
const sans = IBM_Plex_Sans({ subsets: ["latin"], variable: "--font-plex-sans", display: "swap" });
const mono = IBM_Plex_Mono({ subsets: ["latin"], weight: ["400", "500"], variable: "--font-plex-mono", display: "swap" });

All directions · View as Markdown