Unisys Design System

The file is laid out the way people use it. Foundations first, then components, then the dashboard parts, then finished screens. Each page opens with the same header: the page name on the left, the Unisys mark on the right, and a green rule across the top.

The colors live in two variable collections. Primitives hold the raw values: a twelve-step ramp for the Unisys green and twelve more for gray, status and accent colors, plus spacing, radius and type sizes. There are 323 of them.

Tokens sit on top and say what a color is for, like Text/Title Color or Border/Border. Each one points at a primitive in light mode and a different primitive in dark mode. Components only use tokens, so switching a screen to dark is one mode change and nothing has to be redrawn. There are 155 tokens.

Everything is set in Tomato Grotesk, the Unisys brand face. The scale runs from Display 2xl at 72px down to Text xs at 12px, and every size comes in Regular, Medium, Semibold and Bold. That makes 44 text styles, each with its line height and rem value written next to it so engineering doesn't have to measure anything.

Spacing runs on a 4px base, from 2px up to 384px. Corners have nine named steps, from none through 8px for cards and inputs to full for pills and avatars. Depth is seven shadow styles plus four focus rings, one each for default, brand, error and success.

The icon set is a single outline style on a 24px grid, covering navigation, actions, files, communication and commerce. Country flags and brand marks sit on their own pages next to it.

Every component shows its states laid out in rows: default, hover, focused and disabled. Buttons come in a filled and an outlined style, with and without leading and trailing icons, for 64 variants. Alerts come in success, warning, error and hint, each with and without a "Learn more" link.

The second half of the file puts the system to work. There are seven dashboards (analytics, e-commerce, marketing, CRM, stocks, SaaS and logistics), each in a desktop and a mobile layout, plus AI tools, calendar, tables, forms, chat, email and sign-in screens. Every one exists in light and dark, built from the same components with the dark mode applied.

Every dashboard on a phone

On mobile the sidebar folds into a menu button and the cards stack into one column. Charts keep their legend and scroll sideways rather than squeezing the data.

A system only saves time if people trust that the parts already do the right thing. Putting every color behind a named token, and every component behind those tokens, means a designer picking up a new screen starts from finished parts in both modes, and an engineer reading a spec sees a name instead of a hex value.

It's the same idea I used on the OCE guidelines at IQVIA, with better tools. There it was named color tokens and a labelled type scale. Here the names are live variables in Figma, and a change to a ramp shows up everywhere at once.