Experiments/Craft lab
Experiment / demo
Nested corners, a press that can change its mind, stacked height, a ring that follows the shape, and a line of about sixty-five characters. All five studies update in the browser. Nothing is stored.
01 / Study
inner 24 = max(0, outer 36 − padding 12)
The inner corner follows the outer corner. Same center, smaller arc. When padding is larger than the outer radius, the inner corner becomes square.
02 / Study
Scale down while pressed. Leave before release to cancel.
The control shrinks to 97% for as long as the pointer stays on it. If the pointer leaves, the press ends and nothing is committed.
Idle. Press, then release to confirm.
03 / Study
Height 12. 4 stacked layers.
Several faint layers read as one real shadow. A single hard drop looks like a filter. Raise the card and watch the stack spread.
0 0 0 1px rgb(0 0 0 / 0.08) 0 2px 4px rgb(0 0 0 / 0.18) 0 5px 11px rgb(0 0 0 / 0.12) 0 11px 25px rgb(0 0 0 / 0.08)
04 / Study
ring radius 24 = shape 20 + offset 4
The ring follows the same corner as the control, not a rectangle. Tab to the control, or turn the ring on.
05 / Study
First line 0 characters. Short of the 65-character measure.
Size, leading, and column width move together. A comfortable line holds about sixty-five characters.
A line of text is easiest to read when it holds about sixty-five characters. Size, leading, and column width all move that count. Watch the first line as you turn the knobs.