General specs

Description

This section contains general information that applies to most components.

Components are:

• Reusable blocks for building user interfaces.
• Framework agnostic.
• Combined in different patterns.

Each component page includes guidelines on design and usage. Some pages include information on content, interaction, accessibility, and motion.

Component sizes

Components are available in different sizes, allowing designers to tailor experiences for different:

• User types
• Product objectives
• Devices

The size of a component is determined by a combination of font size and minimum padding.

• The final width of a component can fluctuate depending on content, and sometimes the context.
• In general, the height is stable for the same component size.

The following examples show a text input and button component.

S size

M size

L size

Sizes in practice

In general, components are designed to work together at the same size. Try to use the same size for all components involved in the same experience.

Using smaller sizes:

• Increases the density
• Drives efficiency
• Risks overwhelming a user with too much information.

Using larger sizes:

• Reduces the density
• Creates more breathing space
• Facilitates a dominant call-to-action

Component states

States are visual indicators used to communicate a component’s interaction status.

• Default: The initial resting state of a component, usually meaning it is ready to be interacted with.
• Focus: The component is currently selected or highlighted and is ready to be interacted with, typically via keyboard or mouse. The state is lost when the user navigates away, often called 'on blur'.
• Hover: The user has placed the mouse pointer over an interactive component without clicking or dragging.
• Active: The component is currently being interacted with. Sometimes called 'pressed'. Not usually persistent.
• Selected: The component is currently chosen or marked. Often accompanied by a visible indicator like a checkbox. Usually persistent.
• Dragging: The component is being dragged by the user.
• Drag over: used in File input.
• Processing: The component is activated but the ongoing process is not yet completed.
• Read-only: The component is not interactive. It can be selected, in focus, and read by screen readers.
• Disabled*: The component interaction is temporarily unavailable or inappropriate for the current context. It cannot be in focus.
• Error: The component has encountered an issue or failed validation which requires user attention to continue.
• Caution: The component has encountered an issue which requires user attention, but user progress is not blocked. Only available in Dropdown, Text Input, and Tab.

Some component states can exist simultaneously. Focus can exist with all other states, except Disabled.

Action component state examples

Default

Focus

Hover

Active

Disabled

Active disabled

Processing

Input components

Default

Focus

Hover

Disabled

Read-only

Error

Caution

Link components

Default

Hover

Focus

Semantic color

Use color to visually convey meaning, helping users quickly understand status, feedback, or priority across components like pills, messages, progress trackers, and labels.

Color meanings

• Red — Represents negative states such as errors, failures, or blocked items.
• Orange — Represents caution or warning states that require attention but are not critical.
• Green — Represents positive states such as success, completion, or approval.
• Blue — Represents informational states, such as “in progress” or “default.”
• Gray — Represents inactive, disabled, or neutral states with no specific sentiment.
• Purple — Represents important or high-priority information that requires emphasis.

Best Practices

• Apply colors consistently across all components and patterns.
• Always pair color with text or icons to ensure accessibility and clarity.
• Never rely on color alone to convey meaning, use supporting labels or symbols.
• Ensure sufficient contrast between text and background colors for legibility.
• Reserve semantic colors for meaningful states, not decorative purposes.
• Test your color system for color vision accessibility (e.g., with contrast checkers or simulators).

Label set

Although this is an optional element, most input fields require a label set which includes:

• Label. The text-based element used to identify an input field. It provides a clear, concise description of the corresponding field's purpose.
• Hint text. A string of text to help the user complete the input field. It contains context, supplementary information, or instructions to guide the user.

Good labels and hint text enhance a form's usability, improve accessibility, and result in a more effective and satisfying user experience. Learn more about writing good labels and hint text in the Content Style Guide

Mandatory field

Optional field

Inline label

Placeholder text

Placeholder text refers to a string of characters that appear within an input field in its default state.

• It provides a hint or guidance to users about the required input format or content.
• It offers context without taking up space outside the input area.

Best practices

If there is a specific requirement to use placeholder text, it should be:

• Used sparingly. To avoid cluttering the interface and overwhelming users, placeholder text should be used sparingly.
• Additional, not essential. Placeholder text can be used if it does not provide critical information but instead provides a small amount of additional context for users.
• Visible "on blur." Blur is the opposite of focus. On blur occurs when a user moves focus away from an input field, typically by clicking on another field or tabbing to the next one. Placeholder text should be visible when the field is empty and blurred. It should disappear when the field is focused and the user starts typing.

Numeric data capture

When capturing numeric data such as dates, currency amounts, and sort codes, make the input field strictly numeric (numbers only) and do not require the user to include formatting such as periods, commas, and hyphens.

When the user has entered the data, format it in the background, then display a separate, read-only preview of the formatted data using the typography component.

Sort code entry example

Timestamp

A timestamp displays a specific date and time associated with an event or action. It's used in components such as Bubble, Chart, and Note to:

• Help users quickly understand when something happened. For example: when an invoice was created, or when a database was last updated.
• Provide a temporal record that can be traced and referred to in an audit situation.

Timestamp examples

Timestamp format

• Use the 24‑hour time format unless a specific locale requires a different format (am/pm)
• Do not include separators such as commas or words like “at”
• Use the specific date format of the current locale

When displaying timestamps:

"As you type" functionality

"As you type" means the system responds immediately and dynamically to user input while the user is still typing, without requiring them to press Enter or submit a form.

It should be avoided because:

• It can cause issues with copy/paste, leading to unexpected results.
• It may confuse users, especially those who are less tech-savvy or unfamiliar with the behavior.
• Users who rely on screen readers or cannot see the screen may unintentionally add extra characters or spaces because they are not aware that a character was automatically inserted.