# patterns.konigi.com > Pattern libraries for user interfaces. Every entry is a named design pattern with a > problem statement, trade-offs, a pre-ship checklist, and—where they exist—dated > screenshots of shipping products hot-spotted to the pattern they demonstrate. The model: a **library** is a set of patterns for one kind of interface, and it declares its own groups. A **pattern** is a recurring solution to a recurring problem. A **product** is a shipping application. A **capture** is one dated screenshot of one product, hot-spotted to the patterns it shows. Patterns are the canonical pages; product and domain pages are generated indexes and are shared across libraries. Every pattern page has a markdown twin at `//.md`. Prefer those. Currently 109 patterns across 2 libraries, 32 products, 39 captures. ## AI Assistant Patterns Patterns for chat assistants and the AI surfaces built into products people already use. Index: https://patterns.konigi.com/ai-assistants ### Input and invocation Everything between an empty screen and a sent request: what to ask, how to say it, what to attach, and how much effort to spend. - [Attachment tray](https://patterns.konigi.com/ai-assistants/attachment-tray.md): The viewer adds a file to the question and needs to see what the model will actually read. Also called: file drop, upload chip, context attachment. - [Command menu](https://patterns.konigi.com/ai-assistants/command-menu.md): Power users need to name a tool, a file or a person without describing it in a sentence. Also called: slash commands, at-mentions, prompt shortcuts. - [Composer](https://patterns.konigi.com/ai-assistants/composer.md): One box has to take a word, a page, a file and a keyboard shortcut without growing into the whole screen. Also called: prompt box, input bar, message box. - [First-run state](https://patterns.konigi.com/ai-assistants/first-run-state.md): The most common screen in the product is an empty box, and it has to teach without running a tour. Also called: empty chat, onboarding state, zero state. - [Mode switch](https://patterns.konigi.com/ai-assistants/mode-switch.md): The same question wants a fast answer some days and a researched one others. Also called: search toggle, think harder, deep research. - [Model picker](https://patterns.konigi.com/ai-assistants/model-picker.md): Several models sit behind one box, and the difference between them stays invisible until the answer arrives. Also called: model switcher, engine selector. - [Prompt starters](https://patterns.konigi.com/ai-assistants/prompt-starters.md): An empty box tells a first-time viewer nothing about what the thing can do. Also called: suggested prompts, example questions, conversation starters. ### Turn and response The unit of exchange and what happens to it: arriving, being interrupted, being run again, being acted on. - [Edit and resend](https://patterns.konigi.com/ai-assistants/edit-and-resend.md): The question was badly worded, and asking again pushes the bad exchange down the transcript instead of replacing it. Also called: edit prompt, revise question, fork from here. - [Message turn](https://patterns.konigi.com/ai-assistants/message-turn.md): Two voices alternate down one column, and the reader has to know at a glance which one is speaking. Also called: chat bubble, turn, message pair. - [Regenerate](https://patterns.konigi.com/ai-assistants/regenerate.md): The answer is wrong or flat, and the only obvious recourse is retyping the question. Also called: try again, retry response, alternate response. - [Response actions](https://patterns.konigi.com/ai-assistants/response-actions.md): Copying, rating, sharing and rerunning all attach to one message, and none of them can dominate it. Also called: message toolbar, copy and rate, feedback row. - [Stop generation](https://patterns.konigi.com/ai-assistants/stop-generation.md): The answer went wrong in its first sentence and the viewer has to sit through the other four hundred words. Also called: interrupt, halt, cancel response. - [Streaming response](https://patterns.konigi.com/ai-assistants/streaming-response.md): A model takes ten seconds to finish a thought, and ten seconds of spinner reads as broken. Also called: token streaming, progressive rendering, typewriter effect. ### Output shape When the answer is a thing rather than a reply, and a transcript is the wrong container for it. - [Artifact panel](https://patterns.konigi.com/ai-assistants/artifact-panel.md): The answer is a document or a program, and a chat transcript is the wrong container for either. Also called: canvas, side-by-side output, preview pane. - [Code block actions](https://patterns.konigi.com/ai-assistants/code-block-actions.md): Generated code gets read in one place and used in another. Also called: copy button, run snippet, apply to file. - [Response collapse](https://patterns.konigi.com/ai-assistants/response-collapse.md): One answer runs to eight screens and buries every other turn in the conversation. Also called: long answer fold, show more, truncated response. - [Structured output](https://patterns.konigi.com/ai-assistants/structured-output.md): The answer is a comparison, and prose is the worst available shape for one. Also called: generated table, comparison grid, formatted answer. ### Grounding and disclosure Where an answer came from and what the system did to produce it, which is how a reader decides whether to believe it. - [Citation chip](https://patterns.konigi.com/ai-assistants/citation-chip.md): A well-sourced paragraph and a fabricated one read identically until the viewer can see where each claim came from. Also called: source badge, inline citation, footnote marker. - [Knowledge cutoff notice](https://patterns.konigi.com/ai-assistants/knowledge-cutoff-notice.md): The answer is stated in the present tense about a world the model last saw a year ago. Also called: training date, staleness warning, may be outdated. - [Reasoning disclosure](https://patterns.konigi.com/ai-assistants/reasoning-disclosure.md): The model worked for thirty seconds and the viewer wants to know whether it understood the question. Also called: thinking, chain of thought, show work. - [Source list](https://patterns.konigi.com/ai-assistants/source-list.md): The answer drew on eight pages, and the viewer needs to judge those pages before trusting it. Also called: references panel, sources rail, retrieved documents. - [Tool call trace](https://patterns.konigi.com/ai-assistants/tool-call-trace.md): The assistant did something in the world, and the viewer only sees the sentence describing it afterwards. Also called: function call, action log, ran a search. ### Memory and context What the assistant carries between turns, what it can see, and how much of that fits. - [Context meter](https://patterns.konigi.com/ai-assistants/context-meter.md): A long conversation quietly stops remembering its own beginning. Also called: context window indicator, token budget, conversation length. - [Conversation history](https://patterns.konigi.com/ai-assistants/conversation-history.md): The useful exchange was three days ago and the viewer remembers one word from it. Also called: thread list, chat sidebar, recents. - [Custom instructions](https://patterns.konigi.com/ai-assistants/custom-instructions.md): The same correction gets retyped at the start of every conversation. Also called: system prompt, preferences, style guide. - [Memory chip](https://patterns.konigi.com/ai-assistants/memory-chip.md): The assistant knows something about the viewer that the viewer never agreed to in this conversation. Also called: remembered, saved detail, persistent context. - [Scoped context](https://patterns.konigi.com/ai-assistants/scoped-context.md): The assistant sits inside a product full of data and the viewer cannot tell how much of it is in scope. Also called: context pills, working set, what it can see. ### In-product assistance Patterns that only exist inside a product built for something else, where the work is already on screen. - [AI entry point](https://patterns.konigi.com/ai-assistants/ai-entry-point.md): The feature has to be findable inside a product people already know, without retraining them on it. Also called: sparkle button, magic icon, assist affordance. - [Assistant sidebar](https://patterns.konigi.com/ai-assistants/assistant-sidebar.md): The conversation has to sit next to the work without covering the work up. Also called: AI panel, chat drawer, side rail assistant. - [Ghost text](https://patterns.konigi.com/ai-assistants/ghost-text.md): A suggestion has to be readable in place and obviously not yet real. Also called: inline completion, autosuggest, grey text. - [Inline assist](https://patterns.konigi.com/ai-assistants/inline-assist.md): The viewer wants one paragraph changed and does not want to leave the document to ask for it. Also called: select to edit, rewrite selection, contextual AI. - [Suggestion diff](https://patterns.konigi.com/ai-assistants/suggestion-diff.md): The model rewrote a paragraph and the viewer has to see exactly what changed before agreeing to it. Also called: accept or reject, tracked change, proposed edit. ### Limits and failure The edges: what it will not do, what it has run out of, and what happens when it breaks. - [Generation error](https://patterns.konigi.com/ai-assistants/generation-error.md): The stream died halfway and left a half-written paragraph on the screen. Also called: failed response, retry state, network interruption. - [Refusal](https://patterns.konigi.com/ai-assistants/refusal.md): The assistant will not do the thing, and the viewer needs to know whether to rephrase or give up. Also called: declined response, safe completion, guardrail message. - [Usage meter](https://patterns.konigi.com/ai-assistants/usage-meter.md): The viewer is spending a finite resource they cannot see until it runs out. Also called: rate limit, message quota, plan ceiling. ## Dashboard Patterns Patterns for the widgets, layouts and interactions dashboards are built from. Index: https://patterns.konigi.com/dashboards Taxonomy: Bach et al., Dashboard Design Patterns (IEEE VIS 2023), https://dashboarddesignpatterns.github.io/patterns.html ### Data information What a widget shows: a single value, a derived value, a detail, a filtered subset. - [Delta indicator](https://patterns.konigi.com/dashboards/delta-indicator.md): A number means nothing until the viewer knows which way it moved and by how much. Also called: change badge, trend arrow, vs-previous. (4 captures) - [KPI tile](https://patterns.konigi.com/dashboards/kpi-tile.md): A person needs to know the current value of one number, and whether it's fine, before they look at anything else. Also called: stat card, big number, BAN, metric card, scorecard tile, stat panel. (3 captures) - [Percentile summary](https://patterns.konigi.com/dashboards/percentile-summary.md): An average hides the slow requests users actually feel; the viewer needs the tail. Also called: p50/p95/p99, latency percentiles, tail latency. (1 capture) - [Ranked list](https://patterns.konigi.com/dashboards/ranked-list.md): The viewer needs to know which few items dominate, not the distribution of all of them. Also called: top-N, leaderboard, toplist. (4 captures) - [Ratio and rate](https://patterns.konigi.com/dashboards/ratio-and-rate.md): A raw count misleads; the viewer needs it normalized by a denominator they understand. Also called: percent-of, per-unit, normalized metric. (7 captures) - [Sparkline](https://patterns.konigi.com/dashboards/sparkline.md): The viewer needs the shape of the recent past next to the number, without the cost of a full chart. Also called: inline trend, micro-chart, word-sized graphic. (4 captures) - [Target and progress](https://patterns.konigi.com/dashboards/target-and-progress.md): The number only matters relative to a goal, and the viewer needs to see distance to it. Also called: bullet graph, goal bar, quota bar. (2 captures) ### Meta information Everything around the data: titles, legends, sources, and how old the numbers are. - [Annotation](https://patterns.konigi.com/dashboards/annotation.md): A change in the line has a cause, and the viewer shouldn't have to go find it elsewhere. Also called: event marker, deploy marker, note on chart. (2 captures) - [Data source badge](https://patterns.konigi.com/dashboards/data-source-badge.md): The viewer needs to know where a panel's data comes from and whether that source is healthy. Also called: provenance, connector health. (2 captures) - [Explain this metric](https://patterns.konigi.com/dashboards/explain-this-metric.md): Two people read the same tile and mean different things by it. Also called: definition tooltip, metric glossary. (2 captures) - [Freshness indicator](https://patterns.konigi.com/dashboards/freshness-indicator.md): The viewer is about to act on a number and doesn't know how old it is. Also called: last updated, stale-data warning, live pulse. (4 captures) - [Legend and series toggle](https://patterns.konigi.com/dashboards/legend-and-series-toggle.md): Too many series on one chart; the viewer needs to isolate the ones that matter without leaving the chart. Also called: toggleable legend, multi-toggle KPI header. (3 captures) - [Time-range picker](https://patterns.konigi.com/dashboards/time-range-picker.md): Every question about a metric starts with 'over what window', and the control has to be fast for the common windows. Also called: date range, relative time, quick ranges. (4 captures) ### Visual representation Chart types and the non-chart encodings products invent when charts don't fit. - [Anomaly band](https://patterns.konigi.com/dashboards/anomaly-band.md): A metric is moving, and the person watching it can't tell whether the movement is normal for this hour on this weekday or the start of an incident. Also called: expected range, forecast band, confidence ribbon, seasonal baseline, anomaly detection overlay. (1 capture) - [Bed map and track board](https://patterns.konigi.com/dashboards/bed-map.md): Clinical staff need every patient's state and location in one board, ordered by urgency. Also called: census board, ED whiteboard, patient tracking board. - [Calendar heatmap](https://patterns.konigi.com/dashboards/calendar-heatmap.md): Daily activity over a year, read for streaks and gaps. Also called: contribution graph, punch card, day grid. (2 captures) - [Cohort grid](https://patterns.konigi.com/dashboards/cohort-grid.md): Retention differs by when people arrived; the viewer needs cohorts side by side over time. Also called: retention grid, triangle chart, cohort table. (1 capture) - [Data table](https://patterns.konigi.com/dashboards/data-table.md): The viewer needs exact values for many items and wants to sort and scan them. Also called: metrics table, sortable grid. (5 captures) - [Funnel](https://patterns.konigi.com/dashboards/funnel.md): People move through steps and the viewer needs to see where they leave. Also called: conversion funnel, step drop-off. (1 capture) - [Gauge and dial](https://patterns.konigi.com/dashboards/gauge.md): One value against a range, read at a glance. Few and NN/g both argue against it; this entry says when it survives that critique. Also called: radial gauge, speedometer, dial. (4 captures) - [Geo map with markers](https://patterns.konigi.com/dashboards/geo-map.md): The items have locations and their state is best read spatially. Also called: map panel, choropleth, geospatial view. (3 captures) - [Heatmap](https://patterns.konigi.com/dashboards/heatmap.md): Thousands of events per second can't be drawn as points; the viewer needs density. Also called: density heatmap, latency heatmap, BubbleUp. (2 captures) - [Histogram and distribution](https://patterns.konigi.com/dashboards/histogram.md): The viewer needs the shape of a population, not a summary statistic of it. Also called: distribution chart, bucketed bar. (2 captures) - [Host map](https://patterns.konigi.com/dashboards/host-map.md): Hundreds of hosts; the viewer needs to spot the hot ones without a table of hundreds of rows. Also called: hexagon map, fleet grid, infrastructure map. (1 capture) - [Log tail](https://patterns.konigi.com/dashboards/log-tail.md): Something is happening now and the viewer needs to watch the raw events as they arrive. Also called: live tail, log stream. (1 capture) - [Order book and depth](https://patterns.konigi.com/dashboards/order-book.md): A trader needs to see supply and demand at every price right now. Also called: market depth, level 2, DOM. (1 capture) - [Process mimic](https://patterns.konigi.com/dashboards/process-mimic.md): An operator needs live values drawn on the physical layout of the plant. Also called: mimic diagram, P&ID display, SCADA schematic. (1 capture) - [Sankey and path](https://patterns.konigi.com/dashboards/sankey-and-path.md): Quantity flows from sources to destinations and the viewer needs to see the split. Also called: flow diagram, user path, alluvial. (1 capture) - [Service map](https://patterns.konigi.com/dashboards/service-map.md): The viewer needs to know what depends on what, and which edge is unhealthy. Also called: dependency graph, topology view, service graph. (1 capture) - [Small multiples](https://patterns.konigi.com/dashboards/small-multiples.md): Many series would tangle on one chart; the viewer needs them on identical axes side by side. Also called: trellis, faceted charts, panel series. (3 captures) - [Stacked composition](https://patterns.konigi.com/dashboards/stacked-composition.md): A total is made of parts, and the viewer needs both the total and the mix over time. Also called: stacked area, stacked bar, part-to-whole. (3 captures) - [Status history](https://patterns.konigi.com/dashboards/status-history.md): The viewer needs to see when something was up, down, or degraded, over days, in one row. Also called: state timeline, uptime bar, availability strip. (1 capture) - [Threshold line and region](https://patterns.konigi.com/dashboards/threshold-line.md): A flat metric has a line it must not cross, and the chart should show where that line is. Also called: SLO line, alert threshold, alarm limit. (2 captures) - [Time series](https://patterns.konigi.com/dashboards/time-series.md): The viewer needs to see how a value changed over time and spot the moment it changed. Also called: line chart, area chart, trend chart. (5 captures) - [Trace waterfall](https://patterns.konigi.com/dashboards/trace-waterfall.md): One request touched twenty services and the viewer needs to see where the time went. Also called: span waterfall, distributed trace, flame chart. (1 capture) ### Interaction Exploration, navigation, and personalization. What happens when the viewer touches it. - [Compare periods](https://patterns.konigi.com/dashboards/compare-periods.md): Today's line means nothing without last week's line under it. Also called: period over period, year over year, time shift. (3 captures) - [Cross-filter](https://patterns.konigi.com/dashboards/cross-filter.md): Selecting something in one panel should narrow every other panel to it. Also called: brushing and linking, click to filter, coordinated views. (2 captures) - [Drill-down](https://patterns.konigi.com/dashboards/drill-down.md): The overview shows that something is wrong; the viewer needs to get to what, in one click. Also called: click through, expand to detail, navigate to scope. (2 captures) - [Hover detail](https://patterns.konigi.com/dashboards/hover-detail.md): The chart shows shape; the viewer needs the exact value at one moment without leaving it. Also called: tooltip, crosshair, shared crosshair. (1 capture) - [Saved view](https://patterns.konigi.com/dashboards/saved-view.md): The team re-selects the same five filters every morning. Also called: bookmark, saved search, personal dashboard. - [Search across panels](https://patterns.konigi.com/dashboards/search-across-panels.md): The dashboard has sixty panels and the viewer knows the name of the one they want. Also called: global search, find a metric, command palette. (4 captures) - [Template variable](https://patterns.konigi.com/dashboards/template-variable.md): One dashboard layout is right for fifty services, forty hosts, or three environments, and nobody should build it fifty times. Also called: dashboard variable, global filter, environment switcher, scoped dashboard, parameterized dashboard. (1 capture) - [Zoom and pan on time](https://patterns.konigi.com/dashboards/zoom-and-pan.md): The interesting thing is ten minutes wide on a seven-day chart. Also called: drag to zoom, range brush, time navigation. (1 capture) ### Screenspace How a dashboard handles more content than screen: overflow, detail on demand, multipage. - [Collapsible row](https://patterns.konigi.com/dashboards/collapsible-row.md): The dashboard grew to sixty panels and the viewer needs the top twelve most of the time. Also called: panel group, section accordion. (1 capture) - [Detail on demand](https://patterns.konigi.com/dashboards/detail-on-demand.md): A small panel needs to become a big one for a moment. Also called: expand panel, full-screen panel, side panel. (2 captures) - [Mobile adaptation](https://patterns.konigi.com/dashboards/mobile-adaptation.md): The on-call engineer is looking at this on a phone at 3 a.m. Also called: stacked cards, swipe between panels. (1 capture) - [Multi-page dashboard](https://patterns.konigi.com/dashboards/multi-page-dashboard.md): One page can't hold it and the sections have different audiences. Also called: tabs, sub-dashboards, dashboard set. (2 captures) - [Panel grid](https://patterns.konigi.com/dashboards/panel-grid.md): Many independent panels need to share one screen without fighting for it. Also called: widget grid, tile layout, dashboard canvas. (2 captures) - [Wallboard mode](https://patterns.konigi.com/dashboards/wallboard-mode.md): The dashboard is on a wall, ten feet away, with no mouse. Also called: kiosk mode, TV mode, rotation. (1 capture) ### Structure How dashboards relate to each other and how a viewer moves between them. - [Overview then detail](https://patterns.konigi.com/dashboards/overview-then-detail.md): The viewer needs to start wide and end narrow without losing their place. Also called: landing overview, hierarchical navigation, fleet-to-node. (4 captures) - [Semantic grouping](https://patterns.konigi.com/dashboards/semantic-grouping.md): Panels belong together by meaning, and the layout should say so. Also called: grouped by service, grouped by team. (3 captures) - [Sidebar and canvas](https://patterns.konigi.com/dashboards/sidebar-and-canvas.md): Navigation between many dashboards needs to be persistent without stealing the canvas. Also called: nav rail plus dashboard, tree plus summary. (3 captures) - [Tabs as genres](https://patterns.konigi.com/dashboards/tabs-as-genres.md): The same data serves different questions and each deserves its own page. Also called: Overview / Content / Audience / Revenue. (3 captures) ### Page layout Where panels go on the page and what the arrangement says. - [Dense small-multiple layout](https://patterns.konigi.com/dashboards/dense-small-multiple-layout.md): An expert wants everything on one screen and will trade legibility for it. Also called: Node Exporter style, wall of charts. (1 capture) - [Header KPI strip](https://patterns.konigi.com/dashboards/header-kpi-strip.md): The first row of the page has to answer 'is it okay' before the rest asks 'why'. Also called: top-row summary, hero metrics, summary row. (10 captures) - [Resizable card grid](https://patterns.konigi.com/dashboards/resizable-card-grid.md): Different viewers care about different numbers and want to arrange them. Also called: draggable widgets, customizable layout. (2 captures) - [Single-column narrative](https://patterns.konigi.com/dashboards/single-column-narrative.md): A non-expert needs one obvious reading order and no configuration. Also called: one-screen dashboard, Plausible style. (1 capture) - [Two-pane list and detail](https://patterns.konigi.com/dashboards/two-pane-list-detail.md): The viewer works through a queue and needs the list and the item at once. Also called: issue list plus detail, master-detail. (1 capture) ### Color Semantic color, data color, and the discipline of leaving normal uncolored. - [Categorical series palette](https://patterns.konigi.com/dashboards/categorical-series-palette.md): Twelve services on one chart need twelve colors a person can tell apart. Also called: series colors, qualitative palette. (4 captures) - [Dark-first data palette](https://patterns.konigi.com/dashboards/dark-first-data-palette.md): Ops dashboards live on dark screens all night and the chart colors have to survive it. Also called: dark mode charts, NOC palette. (3 captures) - [Grayscale with alerts](https://patterns.konigi.com/dashboards/grayscale-with-alerts.md): If everything is colored, nothing is; normal should be gray. Also called: ISA-101, muted-until-abnormal, high-performance HMI. (3 captures) - [Red/green direction coloring](https://patterns.konigi.com/dashboards/red-green-direction.md): Finance readers expect up-green and down-red, and a fifth of them can't tell the two apart. Also called: tick coloring, gain/loss color. (1 capture) - [Semantic status color](https://patterns.konigi.com/dashboards/semantic-status-color.md): State has to be readable before the number is. Also called: good/warn/critical, severity scale, RAG. (11 captures) - [Sequential and diverging scales](https://patterns.konigi.com/dashboards/sequential-and-diverging-scales.md): Magnitude and direction need encoding in color, and the wrong ramp lies. Also called: heat scale, color ramp. (9 captures) ### Product mechanics The things a product designer builds around the charts so the thing ships. - [Alert rule attached to panel](https://patterns.konigi.com/dashboards/alert-rule.md): The chart shows the line to watch; the viewer wants to be told when it's crossed. Also called: threshold alert, monitor from chart. (1 capture) - [Auto-insight](https://patterns.konigi.com/dashboards/auto-insight.md): The viewer didn't look at the right chart, and the product should tell them what it noticed. Also called: generated narrative, watchdog, anomaly feed. - [Comment and annotate](https://patterns.konigi.com/dashboards/comment-and-annotate.md): Two people are looking at the same spike and need to talk about it in place. Also called: collaborative notes, panel comments. - [Dashboard builder](https://patterns.konigi.com/dashboards/dashboard-builder.md): The person who needs the dashboard has to be able to make it. Also called: add panel, edit mode, layout editor. (5 captures) - [Empty state](https://patterns.konigi.com/dashboards/empty-state.md): There's nothing to show, and the page has to say why and what to do. Also called: no data yet, no results, zero state. (2 captures) - [Error and stale state](https://patterns.konigi.com/dashboards/error-and-stale-state.md): One panel's query failed and the viewer must not mistake it for a zero. Also called: data source down, partial data, degraded panel. (2 captures) - [Filter bar](https://patterns.konigi.com/dashboards/filter-bar.md): The viewer needs to narrow a large set by several attributes and see what's applied. Also called: facet bar, query bar, filter chips. (6 captures) - [Loading and skeleton state](https://patterns.konigi.com/dashboards/loading-state.md): Forty panels are querying and the page shouldn't look broken for two seconds. Also called: skeleton, shimmer, placeholder panel. (1 capture) - [Metric targets](https://patterns.konigi.com/dashboards/metric-targets.md): The viewer wants the dashboard to know what 'good' is. Also called: set a goal, target line. (1 capture) - [Share and embed](https://patterns.konigi.com/dashboards/share-and-embed.md): The dashboard has to leave the tool and keep meaning something. Also called: public link, snapshot, iframe embed, scheduled export. (2 captures) ## Products Shared across libraries. Genre lives on the capture, not the product. - [Amplitude](https://patterns.konigi.com/products/amplitude): Builds the page around the question rather than the chart: funnels, retention grids and cohort comparisons are first-class objects, not panel types. Access: trial. Domains: product-analytics. - [Bloomberg Terminal](https://patterns.konigi.com/products/bloomberg-terminal): The densest display in the collection and the one with the most trained audience. Worth studying precisely because none of its choices would survive a usability test. Access: screenshots-only. Domains: banking-treasury, crypto-trading. - [Canvas](https://patterns.konigi.com/products/canvas): Progress and attainment read by a teacher about named students, where a red cell is about a person in the room rather than a server. Access: trial. Domains: education. - [Cloudflare Radar](https://patterns.konigi.com/products/cloudflare-radar): A public dashboard with no account, no filters worth the name, and an audience of journalists. Designed for people who will read one number and leave. Access: live-public. Domains: security, infra-finops. - [Coinbase](https://patterns.konigi.com/products/coinbase): Consumer framing over a market display: the same order book and depth chart the professional products carry, deliberately buried a level down. Access: trial. Domains: crypto-trading, fintech-consumer. - [Datadog](https://patterns.konigi.com/products/datadog): Everything on one surface, which makes it the best place to see what a page looks like when the product refuses to choose between metrics, logs, traces and cost. Access: trial. Domains: observability-software, infra-finops, security. - [Epic](https://patterns.konigi.com/products/epic): The reference for the emergency department track board: every bed present whether occupied or not, read by a dozen roles who each need a different column. Access: screenshots-only. Domains: healthcare. - [Flexport](https://patterns.konigi.com/products/flexport): Freight in transit as a map and an exception list rather than a chart, because the question is which shipment is late, not what the average is. Access: screenshots-only. Domains: logistics. - [GitHub](https://patterns.konigi.com/products/github): The contribution graph is the calendar heatmap every other product copied, and its five-step bucketing is the deliberate trade that made it legible. Access: live-public. Domains: admin-devtools, devops-ci. - [Grafana](https://patterns.konigi.com/products/grafana): The reference implementation for panel grids, template variables, and stat panels; most other tools are defined by how they differ from it. Access: live-public. Domains: observability-software, infra-finops, iot-energy. - [Home Assistant](https://patterns.konigi.com/products/home-assistant): A card grid people genuinely rearrange, on a wall tablet, which is where resizable layouts either work or quietly stop describing the house. Access: live-public. Domains: iot-energy. - [Honeycomb](https://patterns.konigi.com/products/honeycomb): Query-first; heatmaps and BubbleUp replace the dashboard-of-panels model with draw-a-region cross-filtering. Access: live-public. Domains: observability-software. - [HubSpot](https://patterns.konigi.com/products/hubspot): Pipeline by stage with a forecast on the same page, which is a dashboard carrying a projection and an actual in the same visual language. Access: trial. Domains: crm-sales. - [Ignition](https://patterns.konigi.com/products/ignition): A public SCADA demo running live simulated plant data, with a runtime toggle between simple and photorealistic pump and pipe rendering—the ISA-101 argument as a setting. Access: live-public. Domains: iot-energy. - [Kibana](https://patterns.konigi.com/products/kibana): Query-first rather than panel-first: the search bar is the primary control and the charts are downstream of it, which inverts Grafana's arrangement. Access: live-public. Domains: observability-software, security. - [Kraken Pro](https://patterns.konigi.com/products/kraken): The full order book and depth ladder are public with no account, which makes it the only display here updating several times a second that anyone can go and watch. Access: live-public. Domains: crypto-trading, fintech-consumer. - [LangSmith](https://patterns.konigi.com/products/langsmith): A trace waterfall for model calls, where the interesting span is usually the one waiting and the cost sits on the same axis as the latency. Access: trial. Domains: ai-llm-ops. - [Linear](https://patterns.konigi.com/products/linear): Almost no chrome and no configuration. A board where the layout is the data model, and the closest thing here to a dashboard with an editorial voice. Access: trial. Domains: project-management. - [Mixpanel](https://patterns.konigi.com/products/mixpanel): Board of saved reports rather than a designed page, which is what product analytics tends to become once more than one team is asking questions. Access: trial. Domains: product-analytics. - [Netdata](https://patterns.konigi.com/products/netdata): Per-second charts, hundreds per node, with a per-chart anomaly ribbon instead of a band on the series. Access: live-public. Domains: infra-finops, observability-software. - [PagerDuty](https://patterns.konigi.com/products/pagerduty): A queue rather than a chart. Two-pane list and detail with keyboard traversal, because the task is working through incidents rather than looking at them. Access: trial. Domains: support, observability-software. - [Plausible Analytics](https://patterns.konigi.com/products/plausible): One column, top to bottom, where the metric row doubles as the chart's control. The clearest working argument that a dashboard can have exactly one interaction. Access: live-public. Domains: product-analytics, seo-geo. - [Retool](https://patterns.konigi.com/products/retool): A builder aimed at people making internal tools, so it shows what a dashboard looks like when the person assembling it is the person who will use it. Access: trial. Domains: admin-devtools, embedded-analytics. - [Sentry](https://patterns.konigi.com/products/sentry): Issue-centric rather than metric-centric; the two-pane list-and-detail structure with sparklines inline on every row. Access: sandbox. Domains: observability-software. - [Shopify](https://patterns.konigi.com/products/shopify): Retail's weekly rhythm drawn against a comparison period by default, which is the only honest way to show a business with a Monday and a Black Friday. Access: trial. Domains: ecommerce. - [Stripe](https://patterns.konigi.com/products/stripe): The reference for a financial admin surface: dense tables with in-cell state, and a home page that is a small strip of numbers above a very long list. Access: trial. Domains: fintech-consumer, ecommerce, embedded-analytics. - [Tableau Public](https://patterns.konigi.com/products/tableau-public): Thousands of dashboards made by people who are not designers, published without a review step. The best available sample of what the pattern language looks like in the wild. Access: live-public. Domains: embedded-analytics, product-analytics. - [Vercel](https://patterns.konigi.com/products/vercel): Deploy state, build logs and edge metrics in one console, with a log tail that has to stay readable while it moves. Access: trial. Domains: devops-ci, admin-devtools. - [VTS](https://patterns.konigi.com/products/vts): Occupancy and leasing pipeline over a horizon measured in years, which is the far end of the cadence range this collection covers. Access: screenshots-only. Domains: real-estate. - [Workday](https://patterns.konigi.com/products/workday): Headcount and attrition about identifiable people, which is the case where suppressing small numbers is a design requirement rather than a nicety. Access: screenshots-only. Domains: hr-people. - [YouTube Studio](https://patterns.konigi.com/products/youtube-studio): Analytics for an audience of one, about their own work, where the comparison that matters is against their own previous upload rather than against a benchmark. Access: trial. Domains: creator-media. - [Zendesk](https://patterns.konigi.com/products/zendesk): Queue depth and wait time for the people clearing the queue, with the same numbers again for the manager, on the same data and a different page. Access: trial. Domains: support. ## Facets Domains are shared across every library. Domains with content: - [Admin and devtools](https://patterns.konigi.com/domains/admin-devtools) - [AI and LLM ops](https://patterns.konigi.com/domains/ai-llm-ops) - [Banking and treasury](https://patterns.konigi.com/domains/banking-treasury) - [Creator and media](https://patterns.konigi.com/domains/creator-media) - [CRM and sales](https://patterns.konigi.com/domains/crm-sales) - [Crypto and trading](https://patterns.konigi.com/domains/crypto-trading) - [DevOps and CI](https://patterns.konigi.com/domains/devops-ci) - [Ecommerce](https://patterns.konigi.com/domains/ecommerce) - [Education](https://patterns.konigi.com/domains/education) - [Embedded analytics](https://patterns.konigi.com/domains/embedded-analytics) - [Consumer fintech](https://patterns.konigi.com/domains/fintech-consumer) - [Healthcare](https://patterns.konigi.com/domains/healthcare) - [HR and people](https://patterns.konigi.com/domains/hr-people) - [Infrastructure and FinOps](https://patterns.konigi.com/domains/infra-finops) - [IoT and energy](https://patterns.konigi.com/domains/iot-energy) - [Logistics](https://patterns.konigi.com/domains/logistics) - [Observability](https://patterns.konigi.com/domains/observability-software) - [Product analytics](https://patterns.konigi.com/domains/product-analytics) - [Project management](https://patterns.konigi.com/domains/project-management) - [Real estate](https://patterns.konigi.com/domains/real-estate) - [Security](https://patterns.konigi.com/domains/security) - [SEO and GEO](https://patterns.konigi.com/domains/seo-geo) - [Support](https://patterns.konigi.com/domains/support) Dashboards genres with content: - [Operational](https://patterns.konigi.com/dashboards/genres/operational) - [Tactical](https://patterns.konigi.com/dashboards/genres/tactical) - [Analytical](https://patterns.konigi.com/dashboards/genres/analytical) - [Personal](https://patterns.konigi.com/dashboards/genres/personal) - [Public](https://patterns.konigi.com/dashboards/genres/public) - [Wallboard](https://patterns.konigi.com/dashboards/genres/wallboard) ## Terms Screenshots are reproduced for commentary and criticism. Product names and marks belong to their owners. When citing an entry, link the canonical pattern URL and name the capture date; the captions are specific to the product version captured.