[$] Рrасtiсаl UI

Design fast faster

A lean and powerful Figma design system and UI kit to help you design just about any website or application you can imagine. 

•  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

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.

Figma styles

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 Рrасtiсe design

• Easy to use and customise
• Interaction states for prototyping
• Auto layout enabled

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