Specimen sheet · in-between

Colour

Blue pencil is for time that has passed or is about to happen. Red pencil is for what is: the key, the current frame. Red never appears on a button.

--paper #F5F3EE · #0E0F11 background

--paper-raised #FAF9F5 · #15161A cards, panels, lab stage

--paper-float #FEFDFA · #1C1D22 tool cards floating over the lab stage

--ink #16161A · #ECEAE4 text, primary strokes

--graphite #8A8880 · #6B6A66 secondary text, grid, axes

--graphite-strong #5E5C56 · #9A9892 secondary text that must pass contrast

--rule #E2DED5 · #1F2024 hairlines, peg-bar lines

--blue-pencil #3D6BFF · #7C9BFF ghosts, paths, rough: what could be

--red-pencil #FF3B1F · #FF5A3C keys, current frame: what is

--glow rgba(255,248,230,0) · rgba(255,248,230,.06) lightbox glow under figures

Type

Display · Geist

02 Timing

Body · Geist Mono

Duration is weight, mood, and importance. A heavy thing takes longer to start and longer to stop.

Numbers · Geist Mono

280ms · cubic-bezier(.2, .8, .2, 1) · 17 fr

Caption

Fig. 2.3 — Ease-out, 12 fr, spacing chart

Figures and marginalia

A figure is a plate: a live diagram with a number and a caption. It breaks out of the text column the way plates do in a book. Notes sit in the right rail, beside the paragraph they explain.

Fig. 0.1 — Ease-out, 12 fr, spacing chart

Motion tokens

Hover a row to play it. Hold Alt over the moving dot to inspect it. Exits run at 0.7× the enter.

--dur-instant 90ms · exit 63ms press states, toggles

--dur-quick 180ms · exit 126ms hovers, small reveals

--dur-base 280ms · exit 196ms panels, cards

--dur-scene 480ms · exit 336ms page and chapter transitions

--ease-out cubic-bezier(0.2, 0.8, 0.2, 1) enter

--ease-in cubic-bezier(0.4, 0, 1, 1) exit (exits are faster: ~0.7× enter)

--ease-inout cubic-bezier(0.65, 0, 0.35, 1) on-screen moves

--ease-reveal cubic-bezier(0.16, 1, 0.3, 1) masked text reveals (expo-out): lines rising out of a mask

spring.snappy response 0.3 · bounce 0 → 474ms direct manipulation

spring.soft response 0.5 · bounce 0.15 → 727ms playful confirmations

Controls

L2 · Curve bench

Curve for --ease-out: