# 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).

## 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

**Reminder**Tuesday, 9 am**Backup**Every night

Title and detail together; one item far from the next.

Don’t

**Reminder**Tuesday, 9 am**Backup**Every 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.

```css
.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.