Design system, step 4: shape

Corners, lines, the focus ring and the quote. Every figure printed here is measured from what the browser painted.

  1. 1. Colour
  2. 2. Type
  3. 3. Spacing
  4. 4. Shape
  5. 5. Buttons, links, forms
  6. 6. The written system

One shape, the square

The only curve on a page is the disc in the logo, so the logo is never echoed and never competes. A square corner also reads as paper, which suits a firm whose work is documents. Below are the same photograph, tile and buttons at three corners, so the choice can be judged by eye.

Kept. Square,

Hands with a red pen beside a Beck Legal folder on a meeting table

What happens when I buy a property

Guide, PDF. If you are buying

Refused. The framework's stock corner,

What happens when I buy a property

Guide, PDF. If you are buying

Refused. The soft panel,

What happens when I buy a property

Guide, PDF. If you are buying

  • Every corner is square: photographs, tiles, buttons, fields and the quote.
  • Nothing casts a shadow. Depth is carried by a change of ground or by a line.
  • The logo's disc is the only curve, and nothing on a page repeats it.

One weight of line, at three strengths

A hairline separates. An edge says something can be pressed or typed into, so it has to be seen. A mark in Tan, at twice the weight, picks out the quote and the run of a sequence. The focus ring is ink on every ground, because red is kept for the action.

White

Hairline, separates
Edge, marks a control
Mark, picks out

Sand

Hairline, separates
Edge, marks a control
Mark, picks out

Blush

Hairline, separates
Edge, marks a control
Mark, picks out
  • A hairline is decoration and carries no meaning alone, so it is free to be faint.
  • An edge and the focus ring carry meaning, so each holds 3 to 1 or better against every ground.
  • The ring on this page is held on so it can be seen. Press Tab to see it as a visitor does.

The quote is quiet, and lifts where it has room

The framework styles every quote it finds. Its stock quote has a red line, a grey ground and a rounded corner, which breaks three rules this system has already made. The quote set in the dashboard is quiet: the sans at the size of a standfirst, a Tan mark and no ground. Where the box it sits in is wide, the same quote takes the serif. Every quote below is the same bare markup with no class on it.

Refused. The framework's stock quote Its own figures, before any setting is changed.

Her advice and ability to be so thorough was very reassuring when making such a big decision.

Stacey Burke, on buying a house
Kept. In one column of two

Her advice and ability to be so thorough was very reassuring when making such a big decision.

Stacey Burke, on buying a house
Kept. In the full width of a section

Her advice and ability to be so thorough was very reassuring when making such a big decision.

Stacey Burke, on buying a house
Kept. In a column of running copy

The contract and the vendor statement are read before you sign, and the risks are explained to you. Planning restrictions, owners corporation rules and any covenant on the land are checked.

Her advice and ability to be so thorough was very reassuring when making such a big decision.

Stacey Burke, on buying a house

Settlement happens online. The balance is paid, the title moves into the buyer's name and the agent releases the keys.

What goes into the dashboard

Each line is a real setting in Automatic CSS 4.0.1 and the value to enter. The mark is not a token of its own. It is the framework's border, at twice its weight, in Tan, written where it is used. The rule that lifts the quote is an Etch style, and its source is etch-styles.css.

Components, 01/10/2026

The style guide as built. Every value printed is what the browser computed.

Pages

Design system