# Rules

The short list every Atrium screen shown inside COHO must follow. Checked when an app asks for a public listing.

These are required. Everything else in the system is a strong recommendation.

| Rule | Why |
|---|---|
| Load `atrium.css` and put `at-app` on the body | Every app starts from the same neutral base |
| Use the `--at-*` tokens by meaning; do not override them with brand colours | Screens stay readable and consistent, in light and dark mode |
| No external web fonts | Faster screens, no third-party tracking |
| Every input has a visible label | Placeholders disappear and are not read reliably |
| Never rely on colour alone | Status tags and alerts always say what they mean in words |
| Keep the focus outline | Keyboard users need to see where they are |
| One primary button per view | Managers always know the main action |
| Do not disable submit buttons | Let managers press it, then show what to fix. A greyed-out button gives no reason |
| Buttons act, links go | A button does something on this screen; a link goes somewhere else. Screen readers announce them differently |
| Confirm destructive actions | Disconnecting or deleting is never one click |
| No close button of your own in a quick view | COHO draws the frame and its close control |

## What you are free to do

- Add your own small logo or mark beside the page title.
- Use your own illustrations in empty states.
- Build components the system does not cover, from the tokens.