Peregrine · Design System

Hierarchy System

The shared recipe behind the Lineup v5 round view — four rules that make any Peregrine screen scannable without shouting. Apply them anywhere a screen feels flat or noisy.

Rule 01

Three type roles, never mixed

Each family has exactly one job. If a piece of text could belong to two roles, it's in the wrong role.

JetBrains Mono · meta labels only
The Lineup · 1/6    0 Coin    Reasoning…

Eyebrows, counters, statuses, choice letters, subtags. Small, tracked-out, uppercase. Mono says "this is the machinery" — it never carries content.

Inter · scannable content
Which choice best states the main idea of the text?

Passages, prompts, choices, buttons — anything the player reads under time pressure. Sans carries every word that has to be parsed fast.

Playfair Display · voice moments
Innocents give a straight read. Cons try to trick you.

The game speaking in its own voice: framing lines, verdicts, screen titles. Serif is the con-artist register — used sparingly so it stays theatrical.

Rule 02

One accent: amber

Amber is the only color that isn't ink or cream. It marks the single thing that matters right now — an active state, a live status, a payoff. Two accents on one screen means neither is one.

--amber · b8925a
Active chip, coin count, streaming cursor
--amber-dim · 8a6b3d
Quiet meta on cream: letters, eyebrows
--amber-bright · c89961
Payoff on ink: the Target call, verdict stamps

Everything that isn't the one thing stays on the ink ladder below. If a screen needs a second color to explain itself, the hierarchy failed earlier.

Rule 03

Contrast ladder, not size ladder

Three inks, one size. Color carries hierarchy so type sizes stay calm and the screen doesn't turn into a poster.

Primary — the thing being decided--ink · 1a1512
Supporting — context you consult--ink-dim · 4a4238
Ambient — machinery you can ignore--ink-faint · 8a8272

Demoting something? Step it down the ladder before you shrink it. A collapsed case drops from ink to ink-dim; it doesn't drop from 16px to 11px.

Rule 04

Letter-gutter choice scan

Answer choices are the most re-read element in every game. A mono letter in a fixed gutter plus sans body gives the eye a rail to run down — no re-finding "where was C?"

Before · flat serif list
A. Crows are among the most intelligent birds in the world.
B. One studied flock of crows could recognize particular human faces, though the researchers stop short of generalizing.
C. Crows everywhere can remember and react to the specific humans who threaten their nests.
D. Crows caw in alarm whenever a human approaches their nests.
After · gutter + sans
ACrows are among the most intelligent birds in the world.
BOne studied flock of crows could recognize particular human faces, though the researchers stop short of generalizing.
CCrows everywhere can remember and react to the specific humans who threaten their nests.
DCrows caw in alarm whenever a human approaches their nests.

The serif list reads as prose — every re-scan starts from the top. The gutter version reads as a column of addresses: letters align, cards separate, and the amber-dim letters stay quiet until you need them.