Figma design system - Figma UI kit and style variables

Customizable Styles

Utilize the power of variables to quickly and easily change color and typography styles to match your brand.

• Color variables
• Light and dark modes
• Spacing variables
• Typography variables
• Layer shadows
• 4px grid layout

Simple yet Powerful Color System

A compact set of color variables, named and organized by their usage. Easy to learn but flexible enough to scale in complex design systems.

Predefined color variables allow for automatic switching between light and dark modes instantly.

Proper Depth

Shadows work great to indicate various elevation levels in light mode but are hard to distinguish in dark mode. Therefore, gradually lighter backgrounds are used to denote elevation in dark mode.

Intuitive Components

Access a vast collection of powerful components developed through years of research.

• Hundreds of variants
• Powerful properties
• Best practices design
• Ease of use and customization
• Interaction states for prototyping
• Auto layout included

Interaction States

To speed up prototyping, interactive elements change their appearance upon interaction.

Transparent State Layers

Hover and press states are indicated by a transparent overlay placed on interactive elements.

This systematic approach works for all types of components, from buttons to dropdown menus, and doesn't require adding extra color variations to the palette.

Perfectly Crafted Icons

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

• 300+ open-source icons
• 2px stroke width
• 24px x 24px grid

Created with Practical UI

You will be amazed at how quickly and easily you can create almost any website or application you can imagine.

Based on Design Principles from the Book

Explore a logical approach to designing intuitive, accessible, and beautiful interfaces using quick and practical guides.