Insight

Tells you one thing the assistant noticed, with the number behind it.

Examples

Spending up

Groceries are up this month

+18%vs. 3 month average

Two findings

Eating out is down

$212vs. $268 last month

Your savings grew again

+$140this month

Action

  • Groceries are up this month

    +18%vs. 3 month average

    unsetdefault

  • Groceries are up this month

    +18%vs. average

    a 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
title
string default required
figure
string default required
basis
string
points
number[] default required
action
string
onAction
() => void

Tokens

6 tokens
--fg
#0f0f0d
--fg-3
#6b6a63
--text-sm
14px
--text-xl
22px
--text-xs
12px
--weight-semibold
600

Install

For your coding agent

GitHub

Please star me pookie

141

A new design system every week

Leave your email before you copy the prompt.