---
name: cno-ui
description: Build or restyle pages, components and prototypes in the Canada's National Observer (CNO) look. Use for any new CNO admin screen or mock-up, or when asked to match nationalobserver.com styling. Provides the design tokens, component specs, a starter page and a checker.
---

# CNO UI

Builds pages and prototypes in the CNO look: black chrome, white content, ProximaNova with Noto Serif article text, pill buttons, one orange call to action.

Tokens were extracted from the saved nationalobserver.com pages. Source of truth: `/admin/system/`.

## Workflow

1. **Read** `rules.md` first, then `design-tokens.md`. Read `components.md` for any component you will use.
2. **Plan** the page in terms of existing components (shell, title and rule, buttons, links, card, table, chips, footer). If something is missing, pick the nearest token; do not invent values.
3. **Start from** `starter.html` or link `tokens.css` and `fonts.css` and build from `components.md`.
4. **Use tokens only.** Write `var(--color-accent)`, not `#fe3b1f`.
5. **Use made-up data.**
6. **Check** your work: `python3 check.py <your files>`. Fix every finding, or say why one is intentional.
7. **Hand over** the files and say which components you used and anything you were unsure of.

## Notes

- Fonts: `fonts.css` expects the woff2 files at `../fonts/`. They are the site's own web fonts; use them only for CNO work.
- Noto Serif files are not bundled; the stack falls back to Georgia.