DESIGN REFERENCE
Explain the shape
of the work.
Source diagrams and charts have explicit roles. Local examples keep units, legends, reading order, and data alternatives visible.
Public evidence18 Sep 2026Observed sources. Explicit local contracts.
Observed visualizations
| Family | Source | Meaning / boundary |
|---|---|---|
| Context-switch chart and legend | /core-features/focus · C-focus-chart | Public explanatory chart. It illustrates a relationship; no private productivity data was accessed. |
| AI connection / automation diagrams | /core-features/ai · C-demo-automation | Public task and integration compositions; no tool execution or model API called. |
| Developer API feature figures | /developers · C-developer-diagram | Product explanation from public technical story; not an internal architecture diagram. |
| Theme and appearance grid | /pro · C-demo-theme-picker | Visible color/appearance choices in public demonstrations; private theme persistence unverified. |
| Reference shell / object flows | Local original explanatory additions | Regions, ownership and transitions, with equivalent readable text. |
A readable chart contract
Original local chart specimen. Values are synthetic and demonstrate presentation only. For Raycast’s actual context-switch illustration, use the linked frozen source family.
Minutes per day · authored fixture · 18 Sep 2026
60300 min
Legend: red bars = focus duration. Zero is a labeled baseline value, not missing data.
| Day | Minutes |
|---|---|
| Monday | 20 |
| Tuesday | 40 |
| Wednesday | 0 |
| Thursday | 60 |
| Friday | 30 |
| Property | Local rule |
|---|---|
| Scale and units | Zero-based linear scale 0–60 minutes. Each bar’s height=value/max; no truncated axis. |
| Layout | Plot height 180px,24px left scale,16px gap; five equal categories; labels 11px mono. |
| Color | Red gradient follows source accent treatment; text and geometry also encode values. |
| Interaction | Static chart; no pointer-only tooltip or hidden essential value. |
| Missing / error | Null is shown as Not provided in the data table; no fabricated zero. Error retains title, legend and source. |
| Responsive | Bars remain in five columns; labels wrap when needed; data table scrolls inside its region. |
| Accessibility | Figure caption, full text summary and equivalent table; reduced motion is unchanged. |
A connection diagram with a reading order
Choose a taskVisitor / public entry
Read public contextArticle, extension or feature record
Choose a local actionFilter, disclose, compare or copy
Continue deliberatelyStable detail route or official boundary
.chart-column { height: 180px; display: flex; align-items: end; }
.chart-column > div {
width: 100%; min-height: 1px;
background: linear-gradient(#ff7b80, #9b2d3e);
border-radius: 6px 6px 0 0;
}