Practical UI

Design 10x faster with prebuilt components and styles.

Predefined styles for colours, typography, and spacing, plus hundreds of component variants.

Built with Figma's latest features and best practices from 2024.

Customise components quickly and easily with optimised auto layout, variables, properties, and variants.

Designed to be intuitive, accessible, and beautiful.

Every component was crafted with usability in mind, as well as being 100% WCAG 2.1 level AA compliant.

Customisable styles

Use the power of variables to quickly and easily change colour and typography styles to match your brand.

• Colour variables

• Light & dark mode

• Spacing variables

• Typography variables

• Elevation shadows

• 4px layout grids

A simple yet powerful colour system

A concise set of colour variables named and organised based on how they’re used. Easy to learn, but flexible enough to scale for complex design systems.

Light and dark mode

Predefined colour variables allow you to automatically switch between light and dark mode instantly.

Depth done right

Shadows work well to indicate different levels of elevation in light mode, but they’re difficult to see in dark mode. So, progressively lighter background colours are used to help indicate elevation in dark mode.

Intuitive components

Access a vast collection of powerful components designed based on decades of extensive research.

• Hundreds of variants

• Powerful properties

• Best practice design

• Easy to use and customise

• Interaction states for prototyping

• Auto layout enabled

Interaction states

To speed up prototyping, interactive elements change their appearance when they’re interacted with.

Pixel-perfect icons

Use the beautiful, neutral, and open source icon set from Feather or add your own.

• 300+ open source icons

• 2px stroke weight

• 24px x 24px grid

Based on design guidelines from the book

Learn a logic-driven approach to design intuitive, accessible, and beautiful interfaces using quick and practical guidelines.