Form

A single contact form, specified at six widths. It is also the clearest case of drift in the whole kit — the component is built on the legacy system throughout, down to a different typeface.

Anatomy

A 64 px padded block — 32 px at the smallest width — containing a heading pair, four inputs in two rows, a message field and a footer.

Input box

73 px tall overall: a 20 px label, a 40 px field with a thin stroke and 4 px radius, and a 13 px helper line beneath carrying an icon and message.

The helper line is always present in the library, reading “Couldn’t Find” on every field. That is placeholder text, not a default state — the space is reserved so validation messages do not shift the layout.

Message field

128 px tall, no border, sitting on the tinted panel fill. It is the only field in the system with no stroke.

Get in touch

We’d be delighted to hear from you.

Full Name

Country

Phone number

E-mail address

100% Privacy Guaranteed

Fig. 3Form-Contact us at 1320 px. Live — the fields work and the layout stacks below 768 px.

Validation state

The helper line is where a field’s error appears. Reserving it in the resting state is the right call — the alternative pushes every row below it down the moment a message appears.

E-mail address Couldn’t Find

Fig. 4The reserved helper line carrying an error.

Responsive behaviour

Six widths. The two-column field grid holds down to 720 px, then collapses to one column — and the submit button goes full width at the same point.

The block padding drops from 64 px to 32 px only at the narrowest width, which means a 540 px form still gives up 128 px to padding.

Width	Block padding	Field columns	Field width	Submit
1320	64	2	588	76 px
1140	64	2	498	76 px
960	64	2	408	76 px
720	64	2	288	76 px
540	64	1	412	full width
326	32	1	262	full width

Fig. 5The message field stays 128 px tall at every width.

Markup

Every field takes a real <label> bound by for, with correct type and autocomplete values. The message field takes a visually hidden label — a placeholder is not a label.

<div class="rx-form__field">
  <label class="rx-form__label" for="f-email">E-mail address</label>
  <input class="rx-form__input" id="f-email" type="email" autocomplete="email">
  <span class="rx-form__help" id="f-email-help"></span>
</div>

<!-- On error -->
<input … aria-invalid="true" aria-describedby="f-email-help">
<span class="rx-form__help" id="f-email-help">Couldn't Find</span>

Three requirements are carried by the markup rather than the visual design: the association between a field and its error message (aria-describedby), the invalid state (aria-invalid), and a real label on the message field. All three are mandatory.