Design system · squish.labs · Specimen

A materials lab, not a toy shop

squish.labs uses one small system I call Specimen. The lab reads like a measuring bench: hairline rules, square corners, mono labels and a 16px grid, with a single signal pink for whatever is being measured. Presses invert instantly and nothing bounces, so the only soft thing on screen is the toy.

Themes: Darkroom (default) and Bench (light)
Type: Martian Mono for display and data; Hanken Grotesk for reading
Accent: One signal colour, used only for what's measured or chosen
Built as: CSS custom properties in the lab's single page

Open squish.labs ↗

Principles

Measure, don't decorate

Every line has a job: frames, rules and ticks are the instruments around the specimen. Rules are 1px, corners are square (2px on controls), and there are no shadows on the interface.

One signal

Pink marks the value being read, the option chosen and the live sample. Everything else stays in ink and greys, so the eye goes where the measurement is.

Exact motion

Controls answer in 80 to 140 ms with a sharp ease and never bounce. Softness belongs to the toy and the landing jelly, which makes the material feel softer by contrast.

Colour tokens

Two themes share one set of names, so a component never names a colour directly. The light theme deepens the signal to keep it readable on white.

Darkroom · default

Surface#111315

Raised#1a1d20

Grid#1f2427

Line#2c3236

Rule#6f777d

Muted#9ba2a8

Ink#eceee9

Signal#ff5c9a

Caution#ffd23f

Agar#2c4a45

Plinth#2a1640

Bench · light

Surface#f2f2ee

Raised#ffffff

Grid#e1e3de

Line#d3d6d1

Rule#767c82

Muted#565c62

Ink#15171a

Signal#c8195f

Agar#bfd8d2

Hand-off from the portfolio · the jelly

Entry fluid#ff5c9a

Fluid deep#801441

Fluid light#ffcbdf

Ground#111315

Type and grid

Martian Mono carries the wordmark, numbers and labels, so readings line up like an instrument's. Hanken Grotesk sets anything meant to be read as a sentence. The stage sits on a 16px measuring grid.

Kicker · 12/16 · 600 · uppercase · +0.08em

squish.labs

Body · Hanken Grotesk 15/22. Squishy toys for a species that automated everything except calming down.

Hint · 13.5/20 · muted. Press and hold to squish; drag to turn the stage.

Role	Face	Size / weight
Wordmark, title	Martian Mono	`clamp(32px, 3.6vw, 52px)` · 600 · −0.03em
Labels, buttons	Hanken Grotesk	12/16 · 600 · uppercase · +0.08em
Values, readouts	Martian Mono	13–16px · 500 · tabular figures · signal
Figure labels	Martian Mono	11px · 500 · uppercase · +0.12em · muted
Body	Hanken Grotesk	15/22 · 400

Components

A short list, all built from the same rules: 1px borders, square corners and labels in caps. A press inverts to ink instantly; the chosen state is framed in signal.

Buttons · rest, chosen, pressed

Poke itUltraToss it

Segmented choice · finish

PowderGlossClearPearl

Toy picker · numbered sample slots

Fluffy monsterBao bunMochi

Measuring slider

Softness65%

Pokes: 128
Volume: 0.97

Toast · one log line

Shell re-coated

Figure frame and Start key · the landing

Start

Motion

Token	Value	Used for
`--dur-tick`	80 ms	A press inverting
`--dur-step`	140 ms	States, the Start key appearing
`--ease-exact`	`cubic-bezier(.2, 0, 0, 1)`	All interface motion: fast in, no overshoot
Frame growth	1000 ms · `cubic-bezier(.65, 0, .35, 1)`	The landing frame becoming the stage's border
Entry pull-back	1.7 s, even in log scale	The screen-filling jelly zooming out to the blob
Reduced motion	A still landing and simple fades	Everything above

Phones and touch

On a phone the stage takes the whole screen after Start. The grid and the plinth step aside so the toy alone fills the frame. Controls open from a menu button as a drawer on the right, the notes wait in a sheet under the frame, pulled up from the chevron, and a full-screen button clears everything but the toy. Tablets keep the desktop layout.

The stage

Menu: the controls

Swipe up: the notes

Gesture	What it does
One finger on the toy	Press, squish, hold to squeeze
One finger elsewhere	Pan the view (it stays near the toy)
Pinch	Zoom in or out
Two-finger twist	Rotate the stage
Two fingers up or down	Tilt toward or away from the 3D side view
Double tap	Zoom in
Two-finger tap	Zoom out
Full-screen button	Only the toy, edge to edge; tap again to come back
Mouse	Drag to orbit, wheel to zoom

Back

squish.labs brief

Read the brief →