Max width tokens
Used to set the maximum width of elements and containers in a page layout.
| Token | Value | Description |
|---|---|---|
| bodyText | 42em | Used for setting an optimal line length for readability in body text. This helps the users attention flow easily from one line to the next, making reading more natural and comfortable. |
| container | 80rem | Used for setting the max-width of the page container. |
Form fields
The width of a form field should indicate the amount of information expected to be entered into the field. The size of the form field acts as a visual constraint for the end user.
As an example, form fields for postcodes should have a smaller width than fields for emails.
| Token | Value |
|---|---|
| xs | 5rem |
| sm | 8rem |
| md | 13rem |
| lg | 18rem |
| xl | 24rem |