Space and density
A seven-step scale for every space. Tied to refinement (few values, always the same) and to the "never convoluted" (room for each thing to be seen on its own).
On this page
The scale
Every space comes from a single scale of seven steps. Nobody picks "about 20 pixels": you pick a step.
- space-1
- 4px
- space-2
- 8px
- space-3
- 16px
- space-4
- 24px
- space-5
- 40px
- space-6
- 64px
- space-7
- 96px
The closer, the more together
What belongs together stays close (icon and word: space-1); different parts stay apart (between sections: space-7). Space says what is a group, not lines and boxes.
Do
ReminderTuesday, 9 amBackupEvery night
Title and detail together; one item far from the next.
Don’t
ReminderTuesday, 9 amBackupEvery night
Everything with the same space: you cannot tell which detail belongs to which title.
No space off the scale
If no step fits, the composition is wrong, not the scale.
Density depends on the screen
Reading pages breathe. Work screens, with tables and forms to scan and act on in bulk, are compact: data-density="compact" on the work area tightens cells and controls and leaves the text alone. Changing density animates: rows shrink, they do not jump.
| Schedule | When |
|---|---|
| Weekly backup | Sunday, 3 am |
| Water the plants | Tuesday, 9 am |
| Monthly report | The 1st, 8 am |
Width and grid
A reading column has a measure
It never goes past the comfortable width (measure-reading, about 70 characters per line).
A grid never grows past the screen
A grid column, by default, does not shrink below its content: a wide table stretches the column and the whole page starts scrolling sideways. Use minmax(0, 1fr) for columns, and let wide content scroll inside its own box.
Do
A comfortable reading column lets the eye return to the start of the next line without getting lost. When the line stretches edge to edge on a wide screen, every return becomes a search, and reading tires before the end of the paragraph.
The column stops at a comfortable measure, even with room to spare.
Don’t
A comfortable reading column lets the eye return to the start of the next line without getting lost. When the line stretches edge to edge on a wide screen, every return becomes a search, and reading tires before the end of the paragraph.
The line stretches as far as the box allows: on a wide screen, the eye gets lost on the way back.
.colunas {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}Do
Schedule · When · Status · Runs · Owner · Last run
Another column
With minmax(0, 1fr), the column respects the box and wide content scrolls inside it.
Don’t
Schedule · When · Status · Runs · Owner · Last run
Another column
With 1fr, the column grows with its content and goes past the dashed edge: on mobile, the whole page scrolls sideways.
This rule came from a real mistake: Feitio’s first showcase scrolled 34px sideways on mobile because of a table.