Synthetic UI label at exactly eight pixels.
Original screenshot study / local-only instrument
Lantern Desk / measurement surfaces
Fake product content. No customer data. No network requests.
Selected section: Text scale
01 / SMALL UI TEXT
Known-size text samples
Five fixed CSS font sizes with visible measurement rules.
Synthetic UI label at exactly ten pixels.
Synthetic UI label at exactly twelve pixels.
Synthetic UI label at exactly fourteen pixels.
Synthetic UI label at exactly sixteen pixels.
02 / LONG SCROLL
Rows, rulers, and a sticky header
Scroll the bounded frame; the header stays attached to the frame top.
03 / NESTED SCROLL
Outer feed with an inner ledger
Use the two native scroll surfaces independently.
Three checkpoints sit above and below the inner region.
This copy is intentionally longer than one viewport.
Keep scrolling the outer frame after leaving the ledger.
End of bounded nested-scroll fixture.
04 / HORIZONTAL OVERFLOW
Wide synthetic planning board
Scroll left, middle, and right inside the frame without widening the page.
05 / CONTROLLED LAZY LOAD
Observer enabled by an explicit button
No observer exists until the control below is activated.
06 / TRANSIENT STATES
Tooltip and menu, button controlled
Use click, Enter, Space, Arrow keys, and Escape to set the transient states.
Escape closes
Arrow Down opens · Arrow keys move · Escape closes
07 / CONTRAST + ANNOTATIONS
Light/dark surfaces and primary marks
Toggle the board mode; red, yellow, and blue annotation samples stay visible.
Quiet text on a pale surface with a clear border.
Quiet text on a dark surface with a clear border.