Design Language and UI Kits

Cover the logo on a Tiffinbox screen and show it to a regular customer. Most can still tell whose app it is: the warm orange, the soft rounded corners, the cheerful food illustrations, the short friendly sentences. That recognisable character is the design language. The files designers use to draw it quickly are the UI kit.

The rule

Design language is the look and the sound; the UI kit is its drawing set.

A design language is the consistent visual and verbal character of a product. It covers:

• Colour: which colours, and how much of each.
• Typography: typefaces, sizes and weights.
• Shape: corner radius, borders, shadows.
• Space: the rhythm of gaps and margins.
• Imagery and icons: illustration style, photo style, icon style.
• Motion: how quickly and how softly things move.
• Voice: how the product speaks.

Tiffinbox's language is warm orange, 12 px rounded corners, flat illustrations, quick and gentle motion, and a friendly, direct voice. The language is expressed through the system's principles, tokens and guidelines.

A UI kit is a set of ready-made interface elements inside a design tool, such as a shared library of components that designers drag into their mock-ups. It speeds up design work enormously. But a UI kit is a picture of the product: nothing in it runs. On its own it is not a design system, and it is not the component library either.

The kit and the code library must mirror each other: the same names, the same options, the same tokens. When they drift, designers draw screens that engineers cannot build as drawn.

The shortcut

Remember three verbs: feel, draw, build. The design language is how it feels. The UI kit is what designers draw with. The component library is what engineers build with. One product, three forms, one set of names.

The trap is drift: the kit shows a pill-shaped button while the code has 8 px corners. Using the same tokens on both sides, and reviewing kit and code changes together, keeps them in step.

Drills

Answer fast — trust the rule.

Remember

• The design language is how the product looks and sounds; the UI kit is the drawing set that expresses it.
• Shortcut: feel, draw, build. Language, kit, library: one product in three forms with one set of names.
• Trap: a kit and a code library that drift apart.