Spacing & density

Options

How dense the whole app is, how tight the rows of a table are, and the corners that say what each thing is.

Scale

The whole of envUI comes in two scales. Compact makes every control, text, corner and space a step smaller at once, so a dense tool stays in proportion. An app uses one scale throughout.

Compact suits desktop tools people work in all day: it is the default with a mouse or trackpad.
Comfortable has room to breathe: it is the default on touch, and a choice for websites.
Choose Comfortable or Compact under Scale in the Display menu to see one on this site; System follows the pointer.

Tighter rows

Tables, lists and trees can pack their rows closer on their own, in either scale. Only the space in each row changes; the text keeps its size.

Tighter rows suit scanning many records at once.
Regular rows suit reading row by row.

Corners say what a thing is

The roundness of a corner tells you what you are looking at: a surface that holds things, a part inside it, something to act on, or a person.

Behaviour

Big enough for a finger

On a touchscreen, controls and rows grow to a size a finger can hit, in either scale. With a mouse, they keep the size of their scale.

Tall things keep sensible corners

A button one line tall has round ends. When its label wraps, the same corners make a rounded rectangle instead of a stretched pill. A field is a rounded rectangle already, and keeps its corners as it fills with people.

Rules

envUI spaces things by how closely they belong: close inside a group, further apart between groups, and furthest between sections. You never pick a distance; you say what belongs together.

Components bring their own padding

The space inside a button, a field or a card is part of the component, so it looks the same wherever it goes. What a screen arranges is the space between things.

Things line up

Fields, menus, toggles and buttons of one size are exactly as tall as each other, so a toolbar or a form row lines up without any adjusting. Small fields are for toolbars, with their label hidden, as TextField's sizes say.

Small, medium and large

Controls come in three sizes, and the controls of one size line up.

Medium is the default.
Small suits a table row or a dense toolbar.

Words to use

Ask an agent for space, density and shape in these words; envUI turns each into the right amount of space, the right size or the right corner, so the result matches the rest of the app.

More room between these: Moves two things or two sections further apart, to the next larger step.
Group these closer: Pulls things that belong together into one tight group, such as a title and its line.
Separate sections: Gives unrelated parts of a page the widest space, instead of a line between them.
Line these up: Gives controls in one row the same size, so their tops and bottoms meet.
A small button: One of the three control sizes, small, medium or large; medium is the default.
Compact: Makes the whole app denser, on touch too: smaller controls, text, corners and space.
Comfortable: Gives the whole app more room, with a mouse too, such as for a website.
Follow the device: Makes the app dense with a mouse or trackpad and roomy under a finger.
Tighter rows: Makes the rows of a table or list shorter, while their text stays the same size.
On a surface: Puts content on a pane or card with the soft corners of a surface.
Fully rounded: Gives an action round ends; a tall one keeps the same corners rather than a pill.