Design artifact / Terminal Ledger

A documentation system that behaves like a terminal.

Dark graphite, hairline rules, tabular numbers, and one signal color. The design system is the source of truth for the docs site and the six UX/UI artifacts produced for this project.

01 / Color

Tokens

Canvas

#0A0C0B

Page background

Surface

#111412

Cards, panels

Surface 2

#171B18

Hover, code chrome

Line

#262C28

Hairline borders

Ink

#EEF3EF

Primary text

Muted

#98A29C

Secondary text

Signal

#C9F45A

Accent, live state

Info

#7CC8FF

Informational

Warn

#FFC46B

Warning

Danger

#FF7A7A

Destructive

02 / Type

Instrument Sans + JetBrains Mono

DisplayThe book is open.44 / 48-0.05em

H1The book is open.36 / 40-0.035em

H2The book is open.28 / 34-0.025em

H3The book is open.20 / 28-0.012em

BodyThe book is open.16 / 270

SmallThe book is open.13 / 200

LabelThe book is open.11 / 140.14em

CodeThe book is open.13 / 220

03 / Controls

Buttons and badges

NeutralLiveDocs v1.0GETPOSTWSCtrlK

04 / Callouts

Notes with a signal

Note

A neutral note for context.

Careful

A warning for behavior that can cost money.

Good to know

A positive confirmation.

05 / Code

Code blocks and tables

code

const book = await nx.info.l2Book({
  coin: "BTC-PERP",
  nSigFigs: 5,
});

console.log(book.levels[0][0]);

Field	Type	Description
`coin`	string	Market name
`nSigFigs`	int	Price aggregation
`levels`	array	Bids and asks

06 / States

Interaction rules

Hover

Surface lift + border shift. Never move layout.

Focus

2px signal outline with a 3px offset. Always visible.

Active

1px translate, no scale. The UI is a tool, not a toy.

Skeleton with the same dimensions as the final content.

Empty

One sentence of direction and one action.

Error

What happened, why, and the next step.