

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 [#whats-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 [#how-its-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 [#who-its-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.

<Cards>
  <Card title="Installation" href="/docs/get-started/installation">
    Get Cubitt set up in your project.
  </Card>

  <Card title="Components" href="/docs/components">
    Browse the component library.
  </Card>

  <Card title="Composites" href="/docs/composites">
    Browse existing legacy-directory components.
  </Card>
</Cards>
