# About the design system

What the Atrium design system is, who it is for, and how it relates to COHO.

The Atrium design system gives every Atrium app the same plain, dependable building blocks for screens shown **inside COHO**: quick views, full app pages and settings. Managers move between COHO and many apps from many developers in a day. When those apps share one set of buttons, forms, tables and messages, managers already know how to use each new one.

> **Why does it not look like COHO?** COHO's own styling is built for COHO's product and is maintained by COHO's developers. Atrium apps need something simpler that any developer, or any AI tool, can apply in minutes, and that sits quietly inside the COHO frame. So this system is deliberately calm: warm greys, one deep blue for actions, the system font and softened corners. It fits in without pretending to be COHO.

## What is in it

| Part | What it gives you |
|---|---|
| `atrium.css` | One stylesheet: tokens and every component class |
| `tokens.json` | The same tokens in W3C design-token format, for design tools |
| Foundations | Colour, typography, spacing, elevation, content and layout rules |
| Components | Twenty-one building blocks, each with anatomy, states, usage and code, and a release status |
| Patterns | Whole screens assembled from the components |
| Rules | The short list every screen must follow |

## How it changes

The system is versioned (this is **v0.1**). New components and fixes are listed on [What's new](../updates/). Class names do not change within a major version, so a screen built today keeps working.

| Status | What it means |
|---|---|
| **Stable** | Ready to build on. Class names and behaviour will not change within this major version. |
| **Beta** | Usable, but may still change after feedback. Check What's new before you ship. |
| **Deprecated** | Still works, but is being replaced. The component page says what to use instead. |