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 and UI-only composed surfaces. 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 around public UI surfaces:

• Components are the default home for Cubitt UI. They can be small controls like buttons and inputs, or composed UI-only surfaces like Files and Chat Elements.
• Composites is a legacy source directory for existing public components that have not been refactored yet, including DataTable, Document, and Form Builder. New components should not be added there.
• Foundations cover the visual language underneath: colour, typography, iconography, and the design tokens that tie it all together.

The intent is that Cubitt owns reusable UI, accessibility, styling, and composition seams. Product data, persistence, permissions, routing, and workflow state should stay with the consuming application.

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.