Layout and type

Structure comes from frames; rhythm comes from a 4-pixel grid; type comes from a small ladder.

Layout

The frame is the one container: free placement for hand-placed composition, stack for rows and columns, grid for column layouts. Gaps and padding land on the 4-pixel grid. Grids collapse to one column on narrow screens by themselves.

Type

Text sizes are a ladder of words (small, body, heading) or an exact pixel number when you want one. Weight says what kind of line it is: 400 for body, 500 for the news, 600 for emphasis. Numbers that update stay width-stable so nothing jitters.

The system owns the states

Hover, focus, empty, and error states render themselves, the same everywhere: hover is one quiet surface step, focus is the ring, an empty data view is quiet words, an error is the plain mark in place. None of these are properties to manage.