Skip to main content

The visual system / 02

Give each choice a job.

Paper holds the page. Ink carries the words. Deep green marks the places you can act.

Six colors, with different jobs

Headings and the main reading color.

Filled controls with paper-colored text.

Supporting shapes and quiet accents.

A secondary surface for visual studies.

The page background and breathing room.

Descriptions and supporting copy on paper.

Choose a swatch to copy its hex value.

Archivo

Try your own words.

Up to 96 characters. The same family handles the larger heading and smaller reading text.

Display / Archivo

A little room for an idea.

Reading / Archivo

A little room for an idea.

Type and space

Let the content set the pace.

Archivo carries the navigation, headings and body copy on the homepage. Size, weight and spacing separate their roles. A large heading introduces an idea; the smaller text beneath it explains what you can do.

Space separates different ideas. Tighter groups show which controls belong together. You can compare those choices in the website chapter, using a small interactive workbench.

A shared material language

Make an abstract idea visible.

Paper suggests a surface that can change. Glass makes layers visible. Solid green forms give the composition weight.

Three trays of blocks show dense, empty and varied arrangements.
Array storage becomes a study of order and gaps.
Two green frames hold corresponding groups of pale tiles.
Two frames suggest current and work-in-progress states.

The covers are generated visual metaphors. The articles use separate diagrams to explain the technical behavior.

Continue the storyTry the design in the website

Elsewhere on this website

Now try a direction of your own.

a different set of choices, yours