These cards, created according to the Material Design guidelines, are used for social interactions between app users. The upper example includes a title, body text, and author information. The lower example also includes an image.

To maintain consistency throughout the product’s visual identity, cards should follow the same border, shadow, and outline parameters as the other elements in the Style Guide.

The typography system shown here provides enough text styles to organise page content dynamically and hierarchically without becoming overly varied. The selected font is Google’s Noto Sans, ensuring excellent readability.

Large headings use a semi-italic bold style, while medium-sized headings provide additional emphasis and hierarchy.

This menu can be used with or without icons. It is responsive and componentised to maintain a consistent structure throughout the platform. It provides users with multiple options without cluttering the interface, as the options are displayed only after clicking a button, typically a three-dot menu button.

Shadows are also standardised throughout the system. The shadow shown here is used for cards and objects within the main body of the page.

These are the primary icons used throughout the application. Although the selection can be expanded, maintaining a set containing only the essential icons helps keep the system’s visual language consistent, promoting coherence and making navigation easier.

This simple alert pattern was designed to appear at the bottom of the screen after the user performs an action, providing clear and unobtrusive feedback.

This menu can be strategically implemented to provide users with multiple actions or options while keeping the interface clean, as it is only displayed after clicking a specific button. It works particularly well with a three-dot menu button.

Labels are commonly used across different platforms and for various purposes. In the example shown here, we have text, single-selection, multi-selection, search, and date labels.

When prototyped, these components create an interactive experience and can make a significant difference in user engagement and immersion during product testing.

This typography system was designed with specific use cases in mind, with each font size and style serving a particular purpose. A typography system containing only the essential options creates greater fluidity in the design and makes the application more visually consistent.