Components

Charts

Charts in Peri are evidence inside a card, never free-floating dashboards. They use the green data family exclusively — orange is not a data color — and every chart is followed by an interpretation sentence.

Recovery bars, live

Recovery Capacity

−12% weekly

You've been accumulating recovery strain this week. Consider reducing intensity and prioritizing 2 recovery-focused days.

The chart family

Type	Form	Used in
Bar	rounded-cap vertical bars · --chart-primary recent / --chart-light context	Recovery capacity (Figma Home)
Line + dot bar	sparkline + dotted distribution	Energy tracker (Figma Graphs)
Dial pair	two gauges side by side	Dial graphs (Figma Home)
Pie	distribution on --chart-tint	Figma Graphs section
Trend tiles	↑/↓/→ + label squares	RecentTrendsCard, overview stats

Energy

Sleep

Mood

Trend tiles — the smallest chart in the system

Rules

Three laws govern every chart: it lives inside a card; it is followed by an interpretation sentence; and it draws only from the green data family (--chart-primary, --chart-light, --chart-tint, emphasis #057E45). Red/green deltas are captions, not series colors.

·Pair every chart with a takeaway sentence
·Use --chart-light for context and --chart-primary for the period in focus
·Keep value axes implicit — the interpretation carries the meaning

Don't

·Use orange in a data series — orange means interaction
·Ship a chart as the only content of a card
·Add gridlines, legends, or axis chrome the sentence makes redundant

Accessibility

—Every chart needs a text equivalent — the mandatory interpretation sentence largely provides it; add role="img" + aria-label with the headline number.
—Trend direction always pairs an arrow with text or an sr-only word.