Section

Web design

These pieces stay with the visible page. One sets type size, line length, and the gap around an action before a palette is opened. The other draws every condition of a control, including focus, failure, and an empty screen.

Read the measures first. The control piece assumes the opening line already fits the phone and the booking target already has its own gap. A palette that arrives before those measures will be reopened once the paragraph has to clear contrast.

How the two plates share one booking control

Start with the phone on the layout plate. The opening line is the name of the action, held at arm’s length in portrait, with the browser chrome still on the screen. If that line wraps, do not quietly shrink the type until you have asked whether the words are the action or a greeting. “Book Thursday at 6 for returning visitors” can be the line. “Welcome to the studio” can fit the same width and still be the wrong line. Fit and meaning are separate checks, and this band treats them as separate.

The paragraph under the line is the explanation: who it is for, how long it takes, what to bring. This publication keeps one of those lines near 60 to 75 characters on a wide screen. That range is a habit so the next page starts from a written number, not a figure copied out of a specification. Past that length the eye hunts for the start of the next line, and an explanation is the paragraph a person actually reads through. The opening line is judged by a different rule because it is often large text.

The ring on the same plate is the gap around the booking control. The control is drawn larger than the minimum pointer target, and the nearest text link stays outside the ring. A target that only passes because a 24-pixel circle can be centered on it, while the control itself is smaller and crowded, is not the drawing this plate is for. The circle is space the two targets do not share.

Open the control plate only after those three measures exist. The row shows ready, hover, focus, pressed, disabled, and failure as one set. Disabled is a reason written beside the control, not a dimmer. Failure has words. The empty day, with no sessions and an action that adds one, is a further drawing. It is not the same picture as a list of private rows, and it is not a locked room where nothing can be added.

Color waits. A palette chosen first has to be reopened when the explanatory paragraph, which is ordinary text, fails its contrast bar, or when the booking control no longer separates from the quiet links. Do the measures in black on white. The page can already be used. Darken whatever fails after the palette arrives. The control piece assumes the opening line already fits and the gap is already drawn. Reading that piece first means reopening the layout plate anyway.