Canon
Canon is Oration's design system. It holds the tokens, components, patterns and templates behind the CRM, the Agents Platform, the Contact Center and Ticketing, and the rules that keep four apps one product.
The name comes from rhetoric. Oratory was taught through five canons, and a canon is also the body of rules a practice agrees to keep. Both meanings apply here.
Graphite ink on a white plane
One indigo, saved for the decision.
Aa
Geist Sans, set small
Dense rows at 13px, reading text at 14px, meta at 12px.
inv_7Q2K9Geist Mono, only for strings a machine wrote
Northwind Freight
Q4 payment run, 212 invoices
Built like a speech#
Classical oratory split the work into five canons. Canon keeps the same order, from deciding what to say to saying it well.
- 1Inventioninventio
Finding what there is to say. Principles, voice and patterns decide what a screen must say before anything is drawn.
- 2Arrangementdispositio
- 3Styleelocutio
Choosing the words and the figures. Tokens for color, type, shape and elevation: graphite ink, one indigo, hairlines.
- 4Memorymemoria
Holding it all in mind. Components remember decisions so nobody has to make them twice.
- 5Deliverypronuntiatio
Performing it for a room. Motion, states, responsiveness and accessibility decide how the interface performs.
What's inside#
Canon follows atomic design. Tokens become atoms, atoms combine into molecules, molecules form organisms, and organisms fill templates.
| Layer | Pages | What it holds |
|---|---|---|
| Foundations | 15 | Tokens, color, type, space, layout, shape, elevation, motion, icons, illustration, theming, accessibility and states. |
| Atoms | 35 | The smallest parts that still mean something on their own: a button, a tag, a field, a dot. |
| Molecules | 73 | A few atoms working as one control: a field with its label and error, a select, a tooltip. |
| Organisms | 44 | A distinct region of a screen with its own job: a dialog, a data grid, the prompt bar. |
| Utilities | 13 | Hooks, providers and libraries with no look of their own that the rest depend on. |
| Patterns | 14 | Recurring problems solved once: states, forms, saving, feedback, navigation, AI and permissions. |
| Templates | 8 | The page shapes every Oration screen is built on, from document pages to canvases. |
Start here#
Designing a screen
Start from the shape of the page, then reach for the components that already solved each part.
Building a screen
Import from @oration/canon, compose with tokens, and give every data component its loading, empty and error states.
Briefing an agent
Point the agent at the brief and the plain-text digest. Both are generated from the same source as these pages.
Four rules to remember#
Canon has more named rules than these, and every page lists the ones that govern it. These four catch most mistakes.
The Quiet Indigo Rule
The One Filled Button Rule
The Hairline-and-Lift Rule
The Label-Beside-Color Rule
The full set lives in Principles.
Where the system stands#
Status and adoption are read from the code on every build, so this is never out of date.
0 of 165 documented components are imported somewhere in the suite today.
- Stable71
- Beta67
- Experimental27
- Deprecated0