---
title: "Instrument direction"
description: "Instrument: Trustworthy, dense, data-first. Cool slate neutrals, a chart-grade blue, tabular everything."
canonical: https://void-design.vercel.app/directions/instrument
lastModified: 2026-09-16
---

# Instrument

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

direction 03/06 · light + dark · IBM Plex Sans · IBM Plex Mono · radius 0.375rem

Everything below the page header is rendered in Instrument: its fonts, radius, motion and palette, with a switch between its light and dark schemes.

## Type

Display IBM Plex Sans 600, text IBM Plex Sans, mono IBM Plex Mono (SIL OFL 1.1). The scale is closed: text-display-lg, text-display-sm, text-2xl, text-md, text-sm, label-mono, font-mono.

## 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.

| Token | Light | Dark |
| --- | --- | --- |
| --bg | oklch(99% 0.002 255) | oklch(16.5% 0.006 255) |
| --bg-subtle | oklch(97.4% 0.004 255) | oklch(19% 0.007 255) |
| --surface | oklch(100% 0 0) | oklch(20% 0.008 255) |
| --surface-raised | oklch(100% 0 0) | oklch(23.5% 0.009 255) |
| --surface-hover | oklch(95.2% 0.006 255) | oklch(25.5% 0.01 255) |
| --surface-active | oklch(92.6% 0.009 255) | oklch(28.5% 0.011 255) |
| --line | oklch(25% 0.02 255 / 0.12) | oklch(90% 0.02 255 / 0.1) |
| --line-subtle | oklch(25% 0.02 255 / 0.07) | oklch(90% 0.02 255 / 0.06) |
| --line-strong | oklch(25% 0.02 255 / 0.22) | oklch(90% 0.02 255 / 0.18) |
| --line-focus | oklch(55% 0.17 255) | oklch(70% 0.13 255) |
| --fg | oklch(22% 0.015 255) | oklch(95% 0.005 255) |
| --fg-muted | oklch(46% 0.018 255) | oklch(78.5% 0.012 255) |
| --fg-subtle | oklch(54% 0.018 255) | oklch(62.5% 0.014 255) |
| --fg-faint | oklch(64% 0.018 255) | oklch(50.5% 0.014 255) |
| --fg-on-brand | oklch(100% 0 0) | oklch(100% 0 0) |
| --brand | oklch(53% 0.17 255) | oklch(55% 0.17 255) |
| --brand-hover | oklch(49% 0.16 255) | oklch(51% 0.16 255) |
| --brand-subtle | oklch(95.5% 0.02 255) | oklch(26% 0.055 255) |
| --brand-line | oklch(80% 0.08 255) | oklch(45% 0.11 255) |
| --brand-text | oklch(49% 0.15 255) | oklch(80% 0.102 255) |
| --success | oklch(49% 0.11 155) | oklch(79% 0.13 155) |
| --success-subtle | oklch(95.5% 0.035 155) | oklch(25% 0.045 155) |
| --warning | oklch(52% 0.11 70) | oklch(83% 0.12 80) |
| --warning-subtle | oklch(96% 0.042 85) | oklch(26% 0.045 75) |
| --danger | oklch(51% 0.18 25) | oklch(79% 0.121 25) |
| --danger-subtle | oklch(95.5% 0.022 25) | oklch(26% 0.06 25) |
| --grain-opacity | 0 | 0 |

## Depth, radius, motion

Elevation shadow-1, shadow-2, shadow-3. Radius knob 0.375rem: rounded-sm, rounded-lg, rounded-xl, rounded-2xl. Motion 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:** marketing landing pages, big-type storytelling
- **Token file:** `packages/tokens/css/directions/instrument.css`

## 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

```css
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/instrument.css";
```

```ts
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" });
```