# Atrium design system > Plain, neutral CSS tokens and components (atrium.css) for COHO Atrium app screens shown inside COHO. Use only at-* classes and --at-* tokens. Load https://docs.coho.life/atrium-design/atrium.css and put class="at-app" on the body. Full text in one file: https://docs.coho.life/atrium-design/llms-full.txt ## About - [About the design system](https://docs.coho.life/atrium-design/about/overview.md): What the Atrium design system is, who it is for, and how it relates to COHO. - [Principles](https://docs.coho.life/atrium-design/about/principles.md): The four ideas behind every decision in the system. - [Rules](https://docs.coho.life/atrium-design/about/rules.md): The short list every Atrium screen shown inside COHO must follow. Checked when an app asks for a public listing. - [Accessibility](https://docs.coho.life/atrium-design/about/accessibility.md): What every Atrium screen must get right for keyboard, screen reader and low-vision users. - [Using it with AI](https://docs.coho.life/atrium-design/about/for-ai.md): Hand the whole design system to an AI coding tool in one step. - [What's new](https://docs.coho.life/atrium-design/about/updates.md): Changes to the design system, newest first. ## Foundations - [Colour](https://docs.coho.life/atrium-design/foundations/colour.md): Colours are named by their job. Pick the role that matches what you mean, and the right colour follows, in light and dark mode. - [Elevation](https://docs.coho.life/atrium-design/foundations/elevation.md): Four surface levels, each paired with its shadow, so depth means the same thing on every screen. - [Typography](https://docs.coho.life/atrium-design/foundations/typography.md): The system font, five sizes and three weights. - [Spacing and shape](https://docs.coho.life/atrium-design/foundations/spacing.md): An eight-step spacing scale and three corner radii. - [Layout in COHO](https://docs.coho.life/atrium-design/foundations/layout.md): Where your screens appear inside COHO, and how wide they can be. - [Content](https://docs.coho.life/atrium-design/foundations/content.md): How Atrium screens talk to managers: tone for each moment, the words to use, and how to write dates and money. ## Components - [Button](https://docs.coho.life/atrium-design/components/button.md): Buttons do things. Links go places. - [Checkbox](https://docs.coho.life/atrium-design/components/checkbox.md): Turn one option on or off, or pick several from a list. - [Date input](https://docs.coho.life/atrium-design/components/date-input.md): A date, using the browser date picker. - [Field: label, hint and error](https://docs.coho.life/atrium-design/components/field.md): Every form control sits in a field: label, optional hint, the control, and an error when it is wrong. - [Radio](https://docs.coho.life/atrium-design/components/radio.md): Pick exactly one option from a short list. - [Select](https://docs.coho.life/atrium-design/components/select.md): Choose one option from a list of more than about five. - [Text input](https://docs.coho.life/atrium-design/components/text-input.md): A single line of text, with its label above. - [Textarea](https://docs.coho.life/atrium-design/components/textarea.md): Several lines of text. - [AI content](https://docs.coho.life/atrium-design/components/ai-content.md): Marks text an AI drafted, so managers know to check it before it is used. - [Empty state](https://docs.coho.life/atrium-design/components/empty-state.md): What to show when there is nothing to show yet. - [Inline alert](https://docs.coho.life/atrium-design/components/alert.md): A message about the whole page or a section: information, success, a warning or an error. - [Spinner and skeleton](https://docs.coho.life/atrium-design/components/loading.md): Show that something is loading. - [Status tag](https://docs.coho.life/atrium-design/components/tag.md): A short status label: Paid, Overdue, Draft. - [Summary list](https://docs.coho.life/atrium-design/components/summary-list.md): Key and value pairs for one record, such as a property or tenancy. - [Table](https://docs.coho.life/atrium-design/components/table.md): Rows of data the user compares or scans. - [Card](https://docs.coho.life/atrium-design/components/card.md): A bordered box that groups related content, such as one tenancy or one setting group. - [Page header](https://docs.coho.life/atrium-design/components/page-header.md): The top of every app screen: the page title, an optional subtitle and the main action. - [Stack and inline](https://docs.coho.life/atrium-design/components/layout.md): Two layout helpers that space things consistently: stack (vertical) and inline (horizontal, wrapping). - [Pagination](https://docs.coho.life/atrium-design/components/pagination.md): Move through a long list a page at a time. - [Tabs](https://docs.coho.life/atrium-design/components/tabs.md): Switch between views of the same thing. - [Dialog and confirm](https://docs.coho.life/atrium-design/components/dialog.md): Ask the user to confirm before something that cannot be undone. ## Patterns - [Settings page](https://docs.coho.life/atrium-design/patterns/settings.md): A page where a manager configures the app. - [List and detail](https://docs.coho.life/atrium-design/patterns/list-detail.md): A table of records, and a detail view for one of them. - [Form submit and validation](https://docs.coho.life/atrium-design/patterns/form-validation.md): Check fields when the form is submitted, then show what to fix. - [AI moments](https://docs.coho.life/atrium-design/patterns/ai-moments.md): How an app shows AI at work, and hands its output to a manager to check.