Insight
Tells you one thing the assistant noticed, with the number behind it.
Examples
Groceries are up this month
+18%vs. 3 month average
Eating out is down
$212vs. $268 last month
Your savings grew again
+$140this month
Action
Groceries are up this month
+18%vs. 3 month averageunsetdefault
Groceries are up this month
+18%vs. averagea string
Usage
When to use it
- Use
- A change in spending, saving or income the person would want to know about.
- Use
- A short feed of findings on a home or summary screen.
- Not for
- The assistant wants to move money now and needs a yes. Use Approval request.
- Not for
- The assistant answering something the person asked. Use Message.
- Not for
- Progress toward a goal. Use Progress.
- Not for
- A record of what the assistant already did. Use Action receipt.
Rules
6 rules
- Must
- Say one finding per Insight, as a plain sentence. Because the title truncates to one line and the single figure can prove only one claim.
- Must
- Make the figure the number that proves the title, and say what it compares against in basis. Because the sparkline is hidden from screen readers, so the figure and basis carry the whole proof.
- Should
- Pass four to twelve points, oldest first; fewer than two draws no line.
- Should
- Offer at most one action, as a few words such as Set a budget.
- Never
- Put an Insight in a Card with buttons; it is a line of reading, not a request. Because a card with a button row reads as a task to clear and buries the one action link.
- Never
- Color the figure green or red; the sentence says which way it went. Because savings up in red or spending up in green tells the person the opposite of the title.
Accessibility
2 checks
- The sparkline is hidden from screen readers; the title and figure say what it shows.
- The action is a real button with its words as the name.
Edge cases
3 edge cases
- Narrow screen
- The title and basis truncate; the figure, the line and the action keep their width.
- Flat data
- Equal points draw a flat line through the middle.
- One point
- No line is drawn; the figure stands alone.
API
6 props
titlestringdefaultrequiredfigurestringdefaultrequiredbasisstringpointsnumber[]defaultrequiredactionstringonAction() => void
Tokens
6 tokens
--fg- #0f0f0d
--fg-3- #6b6a63
--text-sm- 14px
--text-xl- 22px
--text-xs- 12px
--weight-semibold- 600