Patterns

Proven solutions for common problems

Discover reusable design and interaction patterns that help teams build consistent experiences faster.

Banner & SnackbarGraphical elements that are used to convey important information or call-to-action messages to the users.

Design

Development

CardCards are a fundamental UI element, defined as a container that holds a piece of content, functionality and actions about a single subject.

Design

Development

Data entryData entry and forms allow users to provide, modify, and confirm structured information within a product. They are used across simple and complex workflows, and can be presented as dedicated pages, side panels, or dialogs depending on the context.

Design

Development

Cookies / GDPRA cookie banner is a pop-up message that appears on a website or a product that informs users about the use of cookies on the website, including educating about the General Data Protection Regulation (GDPR) which is a set of regulations that went into effect in the EU in 2018. It provides guidelines for the collection, storage, and use of personal data by websites and products. GDPR applies to all organizations processing and holding the personal data of data subjects residing in the European Union, regardless of the company's location.

Design

Development

Empty statesUsed to communicate that there is no data or content currently available in a particular section or screen.

Design

Development

Filtering & sorting pattern illustration

Filtering & sortingFilters allows users to narrow down large datasets by applying them to display only relevant information. This pattern enhances user experience by providing efficient data exploration and organisation capabilities.

Design

Development

Global error pagesGlobal error pages inform users when a requested page or resource cannot be accessed. They provide clear feedback, explain what happened, and help users recover by guiding them to a valid destination or next step.

Design

Development

Log onThe Log in pattern enables users to securely access personalised or restricted areas of a product by verifying their identity. It establishes a trusted session between the user and the system, ensuring data protection and continuity across interactions.

Design

Development

NavigationNavigation defines how users move through the product, understand hierarchy, and access related areas, entities, and content. It establishes structure, orientation, and predictable movement across the system.

Design

Development