Universal Design System

The Universal Design System is a set of components for Figma and the web that can be assembled into an interface of any complexity, from a subscription form to a stock exchange terminal. It grew out of the book “The Designer’s Guide to the Buttons” and became its practical sequel.

Types, styles and states

The main rule of UDS is to never mix three independent dimensions of a component. The type defines the meaning of the action, the style defines its visual appearance, and the state shows what is happening with the component right now.

Thanks to this approach, which design systems often violate, any combination makes sense. To present the combinations in a convenient and compact form, UDS uses tables, or matrices, with styles and sizes listed horizontally, and types and states vertically.

Components in UDS are built on a universal set of types, styles and states. As a result, component matrices look the same or almost the same. The components themselves include a number of implementations often missing elsewhere but common in modern interfaces, such as outlined checkboxes and radio buttons or filled text fields.

Sizes

Most components come in three sizes: small, medium and large, defined by height as 28, 36 and 44 pixels, which is the most popular solution.

Component sizes are consistent with each other: a button, an input field and a toggle of the same size sit in one row without adjusting paddings. This sets the system apart from, for example, Google Material Design, where input fields are taller than buttons.

The Universal Design System uses optical compensation: for example, a button without an icon gets a larger padding to balance its heavy label.

Colors and tokens

The Universal Design System is built on tokens for the colors and sizes of all components. The color palette is defined for blue, gray and red shades.

Color tokens are organized into three levels: the palette stores values, semantics describe purpose and state, and component tokens define specific usage. For example, a button background refers to the semantic blue, which is linked to the Blue/600 shade.

Size tokens are simpler: the name combines a property and a size, for example Height/Medium. Shared values help align the height, corner radii and paddings of different components. Colors are managed through a hierarchy of references, sizes through a common scale; together they make the system consistent.

The design system supports a dark theme. The color palette is defined separately for light and dark appearance, and components switch to the selected mode automatically.

Icons

The Universal Design System comes with Lucide icons, which are free for any purpose, including commercial use. All icons are vector-based and let you adjust the stroke width right in Figma. The collection contains about 1,500 icons.

Mobile version

UDS supports both desktop and mobile interfaces. Every component comes in a larger size for phones. The design system also includes components that support gestures, such as mobile lists.

Form templates

The design system includes a set of components for laying out forms. Form fields use a horizontal layout as the most efficient use of screen space. A similar approach is used in interfaces by Apple, Microsoft and many other major vendors.

Web components

The Universal Design System is built with Web Components and is available in a GitHub repository. The code is written without artificial intelligence, compact and easy to read. Its architecture lets you override properties with the ::part selector, change colors and sizes, and use your own icons and fonts.

Free for everyone

The design system is distributed under the CC BY license, and its code under the MIT license. This means you can use UDS for free for any purpose, including commercial use.