Introduction

Cubitt is the design system behind Tilt. It provides a shared library of components, icons, and design foundations that power every interface across the platform.

Rather than each team building their own buttons, forms, and layouts from scratch, Cubitt gives everyone a common starting point — one that's already been designed, tested, and refined to work together.

What's in the box

Cubitt is made up of a few key packages:

• Components — A library of UI building blocks, from simple primitives like buttons and inputs to complex composites like data tables, chat interfaces, and form builders. These are the pieces you assemble to create interfaces.
• Icons — A comprehensive icon set designed specifically for Tilt, available in outline and fill variants across multiple categories.
• Tokens — The design decisions (colours, spacing, typography, radii) encoded as variables, so everything stays visually consistent without manual alignment.

How it's structured

Components in Cubitt are organised into layers:

• Primitives are the smallest reusable pieces — buttons, badges, tooltips, inputs. They don't make assumptions about where they'll be used.
• Composites combine primitives into higher-level patterns — a chat interface, a document viewer, a form builder. They solve specific product problems.
• Foundations cover the visual language underneath — colour, typography, iconography, and the design tokens that tie it all together.

This layering means you can work at whatever level makes sense. Need a quick button? Grab the primitive. Building a full feature? Start with a composite and customise from there.

Who it's for

Cubitt is used by designers and engineers working on Tilt. If you're building UI for the platform, this is where you start. The docs cover installation, usage patterns, and the full API for every component — so you can find what you need and get moving.