I · Foundations / 05

Space, shape and depth

The light, the marks and the materials everything else is made of.

Space, shape and depth#

A four-pixel scale, corners that say what a thing is, and warm shadows at dawn that deepen at twilight.

Space--wp-space-1…24

--wp-space-14px

--wp-space-28px

--wp-space-312px

--wp-space-416px

--wp-space-520px

--wp-space-624px

--wp-space-832px

--wp-space-1040px

--wp-space-1248px

--wp-space-1664px

--wp-space-2080px

--wp-space-2496px

Corners--wp-radius-*

xs6px

sm10px

md14px

lg20px

xl28px

pill999px

notchcorner-shape

Use
Pills for things you press, soft corners for things that hold, notches for game objects (where the browser can cut them).

Depth--wp-shadow-1…4

1--wp-shadow-1

2--wp-shadow-2

3--wp-shadow-3

4--wp-shadow-4

Use
1 for cards, 2 on hover, 3 for popovers and menus, 4 for dialogs. One inner highlight, one warm cast.

Layout

Phone< 720pxOne column, sheets from the bottom, tools as icons

Tablet720–1279pxTwo columns; the places move into a menu sheet

Laptop1280–1599pxEvery place in the header; search and the character tighten

Desktop≥ 1600pxEverything spelled out

Use
Content to 1280px with a fluid gutter (16 to 32px); reading columns to 68 characters; components answer to their container, not the window.