Beck Legal design system: buttons, links and forms

Two buttons, and one of them is red

The action is the one thing a page asks for. The quiet button is everything else that is pressed. Both are tall enough for a thumb, and both say what will happen in the visitor's words.

The action

Make an enquiry

The quiet button

Download the guide

One red button on a screen. If two things matter, one of them is quiet.
A label starts with what the visitor does: make, download, call, book. Never submit, never click here.
A button is never shown switched off. If something is missing, the form says what.
One size. A button does not shrink to fit and does not grow to shout.

Every state, on every ground

At rest, touched by a pointer, and in focus from the keyboard. A touched button darkens, so the white label gains contrast and never loses it. The states are held on here so they can be judged side by side.

White

The action, at restMake an enquiry TouchedMake an enquiry In focusMake an enquiry

The quiet button, at restDownload the guide TouchedDownload the guide In focusDownload the guide

Sand

The action, at restMake an enquiry TouchedMake an enquiry In focusMake an enquiry

The quiet button, at restDownload the guide TouchedDownload the guide In focusDownload the guide

Blush

The action, at restMake an enquiry TouchedMake an enquiry In focusMake an enquiry

The quiet button, at restDownload the guide TouchedDownload the guide In focusDownload the guide

A link is ink until it is touched

A link is underlined, so it is never told apart by colour alone. It turns red under a pointer, which is the only other place red appears. The words of a link say where it goes.

In a sentence

Read what happens when I buy a property before you sign.

A telephone number

Bendigo 03 5445 3333
Swan Hill 03 5032 4809

A number is a link, so a thumb can call it. The figures are set at one width each, so two numbers line up.

Inside a heading

What happens when I buy a property

A link inside a heading keeps the heading's face, size and weight, and keeps its underline.

The enquiry form

One column, one question on a line, the label above its field. A field is as tall as a button. The edge of a field is strong enough to be seen, because a field that cannot be found cannot be filled in. Fields are white on every ground.

Your name

Phone A conveyancer will call you on this number.

Email, if you would like a copy of your enquiry

What do you need help with?

Tell us what is happening A few lines is enough. Leave out anything you would rather say on the phone.

Which office is nearer to you?

Bendigo

Swan Hill

Send me the guide to buying a property

Measured on the form

A label sits above its field and stays there. A placeholder is an example, never the question.
Most fields are needed, so the few that are not say so in the label. No asterisks.
A field that needs fixing says why, in words, under the field. The edge turns a deep red that is not the action's red.
A ticked box and a chosen option are ink. Red stays with the action.
The option buttons stay round, because a square one reads as a tick box. It is the one curve besides the logo.

What goes into the dashboard

Each line is a real setting in Automatic CSS 4.0.1 and the value to enter. Only the form settings that differ from the framework's stock are listed. Two things are Etch styles, because the dashboard cannot hold them, and their source is etch-styles.css: the quiet button on a tinted ground, and the lighter weight of an option under a question.