Please refer to the Digital Foundations ↗ documentation for guidelines for accessibility information relating to form fields, including 'form fields with labels ↗' and 'placeholder text ↗'. In addition to those guidelines, the following also apply to form elements in Rivendell:

General Guidelines

  • Inputs and checkboxes have a border-radius of 2px.
  • Inputs, selects and textareas have a 12px left & right padding.
  • Inputs, selects and textareas have a 1px border.
  • Inputs, selects and textareas are 42px height (44px including border).
  • There is 10px margin between a label and input.
  • Labels are Aperçu-Medium, with a font-size and line-height of 14px.
  • Inputs are Aperçu-Light, with a font-size of 16px.

Guidelines on Color

  • Normal state border-color is $gray40.
  • Focus state border-color is $yellow50.
  • Disabled state border-color is $gray40.
  • Error state border-color is $red50.
  • Label color is $black50.
  • Placeholder text color is $gray50.
  • Inputs with a value text color is $black50.
  • Disabled state label, value/placeholder and hint text color are all $gray40.


Hint text

A optional message under an input. It comes in three states: An instruction, a warning, and disabled. A simple line of text with special instruction (e.g. "Required for security purposes", or "Password must be over 8 characters"). See a spec for a hint message.

  • Hint text should use Copy 4 text style.
  • An instruction hint text color is $gray50.
  • An error hint text color is $red50.
  • A hint text color for a disabled form input is $gray40.
  • 5px margin separating hint text from input above it.


For accessibility, it's important to distinguish errors by more than just a change of color. Errors should always be explained using a warning hint message, in addition to the input border color changing to $red50.

Margin Between Form Elements

The default margin between form elements is 20px (see above).

Spec for form inputs

results matching ""

    No results matching ""