Tokens
Components read only --ao-* tokens. In the admin each token points at a Payload variable, so our pages and Payload's own screens change together.
Icons
One set, 24 grid, 1.5 stroke, currentColor. An icon never stands alone: a word or an aria-label goes with it.
Page header, tabs, section card
The header says what the page is for, in one help line, and holds the page's actions. Tabs are links: each one is a page with its own address.
Story by Asha · Ferry crossing, 1962
Read the story, then publish it or return it to the member. Visitors see a published story within one minute.
The story
Waiting for reviewWaiting for review for 2 days. Visitors do not see it.
- Member
- Asha5 stories
- Recording
- Ferry crossing, 196212 stories
- Project
- River Voices
- Time range
- 1:02–1:35
- Told on
- rivervoices.example.org/ferry Open on the site
- Topics
- FerryHornAdd a concept to River Voices
“My father worked the ferry. The horn meant the last boat.”
Lifecycle states, stats, empty state
Each state has one colour, one icon and one word, on every surface. The colour says whose move it is.
Today
What needs you now. Counts can be 30 seconds late.
No stories wait for review
The last story came in 3 days ago. To get more stories, put a recording on another page of your site.
Add a widget to a siteRelationship chips
A chip names a related thing, links to it and counts what hangs on it. It answers “what is this connected to?” without a search.
Add a widget to a site: steps, select, copy field
Add a widget to a site
Choose a recording and a site. Then paste the snippet into the page.
- Done: Recording
- Done: Site
- Snippet
The widget plays this recording and shows its stories.
Paste these two lines into the page. A page needs the first line one time only. Members come back only to rivervoices.example.org.
Form fields and dropdowns
Label above, help below the label, error below the field. A placeholder is never the label.
Colour picker field
Swatch, hex text and a live contrast readout against the colour it sits on. Empty means the default.
Play button, played part, links. Text on it uses “Text on the accent colour”.
Buttons
One filled button per view: the next step. Danger is an outline until the dialog that confirms it.
Dialog and toast
Publish this story?
Visitors see it like this, within one minute:
We mail Asha that it is published.
Published. Visitors see it within one minute.
We could not publish the story. Try again.
List rows with meta
The whole row opens the thing. Chips inside it stay their own links.
- My father worked the ferry. The horn meant the last boat.
2 days
- Reply: I heard the same horn from the bank.
1 day
- The ferry at the north landing.
5 hours
- K7QM…
- P2XD…
- Published by Mira
- Returned to the member by Mira
Phone form layout (Annotate page)
One column, 16px text in fields, 44px targets, the main action in a bar that stays on screen.
Tell a story
Widget default tokens
The defaults of <annoudio-player> (CONTRACT §3.1). They stay light, because the widget follows the host page; a project sets the dark set below in its Theme tab.