Theme

Borders can help direct attention and communicate state.

Breakpoints allow content to adapt to different viewports responsively.

Colours express brand identity and convey meaning.

Design tokens are used in the place of hard-coded values to allow a scalable and cohesive system.

Fonts establish styles for content such as headlines and paragraphs.

Gradients are a gradual blending from one colour to another, used to fade content and overlay images.

Icons reinforce interactions and can provide additional context through visual cues.

Motion creates movement and narrative in a product.

Outlines provide visual cues about the focus or active states of elements.

Opacity creates translucent interface elements.

Overlays can be decorative or have a functional use like increasing the colour contrast of backgrounds.

Shadows provide visual cues about the distance between layers.

Standardised sizing increases visual consistency.

Space provides content hierarchy, reduces visual clutter and shows relationships between elements.

A collection of foundational design tokens combined into a preset.

A collection of motion attributes combined into a preset to define reusable motion.

A collection of foundational font design tokens combined into a preset to define reusable typography.

Creating a theme enables the brand identity to be managed from a single location across multiple products.

A guide covering how to populate and apply a brand’s theme.

A preselected option that is applied to a component to define its appearance or behaviour.