A working inventory of actions, data displays, system states, navigation, and reading patterns. Every specimen uses the same canonical CSS shipped with the skill.
Actions communicate priority through treatment and placement. One primary action should anchor each decision region.
Primary, secondary, quiet, destructive
Use a single primary action per decision region. Destructive styling signals consequence, not importance.
<button class="art-button art-button--primary">Publish report</button>
<button class="art-button art-button--secondary">Save draft</button>Available, busy, disabled
Busy controls preserve their label and expose state. Disabled controls should be paired with nearby context.
Labels remain visible, help appears before failure, and validation explains how to recover.
Text, select, textarea, checkbox
Visible to everyone with access.
State the decision, owner, and next checkpoint.
Specific, local, actionable
Enter a complete email address, such as finance@example.com.
Visible criteria and obvious reset
Metrics carry periods and comparisons. Tables align quantities. Charts explain the finding instead of decorating the page.
Consistent anatomy and comparison
Aligned quantities and responsive overflow
5 accounts in view
| Account | Owner | Status | ARR | Adoption |
|---|---|---|---|---|
| Atlas Paper Co. | Maya Chen | On track | $1.42m | 88% |
| Northwind Office | Jon Bell | At risk | $960k | 61% |
| Summit Supply | Ana Ortiz | On track | $820k | 79% |
| Beacon Stationery | Dev Malik | Blocked | $610k | 42% |
| Pioneer Print | Leah Ford | Draft | $370k | — |
Inline SVG, units, labels, nearby interpretation
Share of invited accounts completing the first order
Finding: Guided setup moved activation above target in week ten; the improvement held for the following two cohorts.
Status is expressed with text and color. Callouts are reserved for notices, exceptions, approvals, and required actions.
Semantic marker, neutral perimeter
Text remains meaningful without color
Meeting the agreed plan
Needs intervention soon
Cannot progress today
Not yet evaluated
Loading, empty, partial-data, and error states are part of the interface—not implementation leftovers.
Switch between realistic system conditions
Adjust the filters or return to all active accounts.
The source returned an unexpected response. Your saved filters and annotations are intact.
Presentation navigation stays collapsed until requested, supports direct slide access, and returns focus after every choice.
Open the counter, inspect titles, jump directly
Long-form artifacts use measured lines, explicit hierarchy, pull quotes, and margin context instead of shrinking everything into cards.
Prose, quotation, caption, margin context
Customers arrived ready to place an order. Most abandoned the experience while translating familiar procurement language into unfamiliar portal settings.
“I knew what I needed to buy. I did not know which account structure the portal expected me to choose.”
The most effective intervention removed that decision from the first session. Guided setup improved completion without reducing order quality or increasing support volume.
Finding synthesized from 50 interviews, 112 support tickets, and the Q3 activation funnel.