

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, 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 [#how-its-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 [#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="Primitives" href="/docs/primitives">
    Browse the base component library.
  </Card>

  <Card title="Composites" href="/docs/composites">
    Explore higher-level component patterns.
  </Card>
</Cards>
