Specimen playground

A controlled environment for typography, spacing, motion, interaction, visualization, and image treatment. Switch visual languages; the structure stays. The language is not the brand.

01 · Typography

Hierarchy is an argument. Annotation is a second voice.

The diagram is the sentence.

Complex ideas become understandable when structure, sequence, and emphasis are visible — not when they are decorated.

Display
Title
Section
Body
Caption
IBM Plex Mono · labels, data, meta

02 · Spacing

Rhythm is measured. These bars are the token ladder.

micro
small
medium
large
section
display (truncated)

03 · Motion

Two reasons to move: attention, and state. Replay each.

Attention — ease-out, distance

Look here

State — opacity and fill, no bounce

Idle Active

04 · Interaction

Hover reveals. Click discloses. Neither should surprise.

Hover reveal

Setpoint The value a control loop tries to maintain. Hover is a gloss, not a destination.

Progressive disclosure

05 · Visualization

A relationship graph. Hover a node to see its neighborhood.

Neighborhood idle.

06 · Image treatment

Same plate, three roles: bleed, annotate, compare.

Full-bleed crop — the plate is the field.

Annotated — a pointer into structure.

Comparison — shared frame, two states.