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.