Rounds 1 and 2 asked what looks good. This one asks what educators already know how to read.
The premise of the pattern library is that teachers and administrators carry two largely separate visual vocabularies, built from different daily software. Designing for "educators" as one audience is where most edtech data UI goes wrong. Every pattern below is built in Frost and tagged with the segment that actually knows it.
Judgment calls: built as a self-contained page in Frost tokens like rounds 1 and 2, not the Next.js stack the build queue assumes, because the deliverable here is an exploration rather than an app. All data is machine-generated from a fixed word list and matches no roster. No photographs of children appear anywhere on this page, including in the roster pattern, and §2 says why.
Foundation
Four things every pattern below depends on: the band tokens, the direction of each metric, the school calendar, and print.
Band tokens, two palettes
Four ordered bands in DIBELS vocabulary, which districts already use and which is less stigmatizing than naming a child red. Switch the palette in the rail; every band on this page follows.
Each band carries a distinct shape as well as a color and a word: square, circle, ring, diamond. §6 shows why that is mandatory in the blues as well as in the stoplight. Ink is picked per fill by luminance rather than set once per palette: measuring found white text on the mid band at 3.09:1 in stoplight and 3.23:1 in blues, both under AA at 12px, so band 2 takes dark ink in both.
Metric direction
The classic trap: one color logic applied across a mixed set of metrics. Up is good for achievement and bad for absenteeism. Direction is a property of the metric, declared once, never inferred from the number.
School calendar, not arbitrary dates
Screeners run BOY, MOY, EOY. Grades run MP1 to MP4. "Last 30 days" is meaningless in July, and a date picker without school presets says the product was not built for schools.
Round 2 reached the same conclusion from a different direction and built a year ribbon. This adds the screener vocabulary round 2 did not have.
Print is a real output
Teachers print for conferences. Admins print for board meetings and for staff who will not log in. This page has a real print stylesheet targeting landscape letter: the rail drops out, the gradebook unfreezes and unclips, cards avoid page breaks, and table views expand.
Try Cmd + P. Neither round 1 nor round 2 had one, which by this library's standard made both half-built.
Patterns teachers read fluently
Dense, gridded, and legend-bearing. These users live in spreadsheets, and a display that apologizes for its density reads as a toy.
1 · The gradebook grid the master pattern
Everything else gets interpreted through this. Any matrix you build will be read as a gradebook whether you intend it or not.
Frozen header row and frozen first column, both non-negotiable; teachers work wide tables on small screens. Sortable by any column, click a header. Every cell carries a number as well as a fill, so the band is never color-alone.
The 200-student case
Past roughly 60 rows the frozen header earns its keep and the summary column becomes the only thing most teachers read. At 200 the grid needs virtualization and a jump-to-letter control, and the honest answer is that the gradebook stops being a scanning surface and becomes a search surface.
Failure mode built in deliberately: the "Q3" column is all dashes, because that assignment was never scored. It renders as a dashed outline rather than a zero. A zero would say every child failed it.
4 · The stacked proportion bar most transferable
Washington Middle has the largest share below benchmark, 38% across two bands. Read as "how much of my class is where", without training.
Segments under about 5% are unreadable and unclickable, so every segment gets a minimum width and any segment too small for its label pushes the label above the bar instead of clipping it. Consistent left-to-right band order across instances matters more than the exact colors.
Table view
| Section | Well below | Below | At | Above | Total |
|---|
5 · Aimline and trendline
Eight probes. The trendline is above the aimline, so the intervention is working.
The vertical rule at week 4 is a phase change, labeled. Without that label the chart quietly claims the whole rise came from one cause.
5b · The honest-minimum guard
The same student, three probes in. No trendline is drawn.
6 · Item analysis grid
Question 4 is the one to reteach — 29% correct. The column read comes first here, the opposite of the gradebook.
Teachers want to reteach from this view, so each question header has to be one click from its actual text and its standard. Without that link the grid can only score; it cannot support reteaching.
7 · Roster highest-sensitivity surface
Teachers find students by face faster than by name. This version deliberately has no faces.
The two hatched cards are the genuine empty state: enrolled, no photo on file. They read as pending rather than broken.
8 · Norm-referenced score anatomy the biggest misread
The gloss sits next to the number, not in a tooltip. Percentile read as percent correct is the single most common misread in K-12 data and it happens at every level, administrators included.
3 · The tier pyramid legend only
Nearly every district has seen this exact graphic. It exists to explain the MTSS model, and it carries almost no data.
Kept static on purpose. Making the pyramid interactive or data-driven usually confuses more than it helps, because the 80/15/5 proportions are the goal state, not the measurement. If a district is 55/25/20, drawing that as a pyramid reads as a broken graphic rather than as a finding. Use it as a legend or a nav affordance and put the real numbers in the stacked bar above.
Patterns administrators read fluently
Fewer figures, larger, decomposable. Admins distrust a number they cannot break apart, and they read their own state's accountability grammar fluently while finding every other state's opaque.
9 · Three accountability treatments, one school highest-value artifact
Washington Middle, the same underlying data, rendered in three state grammars. The question this makes concrete: which one are we borrowing when we score anything?
Worth noticing in the California grid: its highest performance color is blue, not green, and its lowest is red. The most design-forward and most widely copied accountability system in the country already declined to make green the top of the scale. That is worth carrying into the palette question in §6.
10 · ABC early-warning indicators
Attendance, Behavior, Course performance, plus a composite tier. Admins expect to act from this screen, not just read it.
Bulk actions are deliberately absent from this mock. This is a list of children, and a "select all, assign intervention" control needs friction proportional to what it does.
11 · Disaggregation with suppression the board-deck table
The equity view. n-size suppression is expected, not optional. Move the threshold and watch rows disappear.
Where this earns or loses trust: a table without suppression reads as either naive or non-compliant, and it erodes confidence in everything else the product says. The threshold belongs in the legend, on the face of the table, every time. Notice also that raising the threshold to 30 suppresses most of the groups the table exists to make visible — that tension is the real subject of the display, and it should be arguable rather than hidden.
13 · Utilization and adoption funnel closest to ClassLink
The drop from activated to active is where the money goes. The stage totals are context. 3,430 licensed seats went unused in the last 30 days.
Per-school breakdown
| School | Licensed | Provisioned | Activated | Active 30d | Unused $ |
|---|
The gaps carry the emphasis, the stage totals recede. That is the inversion of how this chart is usually drawn, and it is the whole reason the pattern exists: this is a budget display as much as a usage one.
12 · The drill-down hierarchy the interaction model
More important than any single chart. Admins distrust a number they cannot decompose. Click through and watch the layout hold its shape.
The same stacked bar renders at every level: district, school, grade, section. Layout that changes shape between levels breaks the mental model. The last hop is different on purpose.
Crossing into identifiable data changes the frame, not just the permissions. At the student level the panel gains a border, a labeled bar, and a different background, so a user glancing at a shared screen knows immediately that what is showing is no longer aggregate. That is a display decision, not an access-control one.
The misreads
Not forbidden, but each needs scaffolding, a plain-language gloss, or a fallback. The misread column is the useful part: it tells you what the reader will conclude if you ship it bare.
| Display | Familiarity | The misread |
|---|
Scatter
Box plot
Stacked bar
Same dataset three ways. This trio is cheap to build and makes a good research stimulus: put it in front of a teacher and ask what they see for thirty seconds before explaining anything.
Growth versus achievement
The single most important nuance in K-12 data, and the entire premise of California's two-axis grid.
A student or a school can be high-growth and low-achievement at the same time. Any display that shows only one will be assumed to show the other. Riverside is the case that matters: lowest achievement in the district, highest growth. A one-axis dashboard calls it a failing school.
Percentile versus percent
Never abbreviate a percentile to a bare number with a percent sign.
Reads as 62% correct. It is not.
Higher than 62 of 100 students in this grade.
Where ClassLink already stands in this map
The library is a map of expectations. Four of its entries describe products we already ship, which means we are being read against these conventions whether or not we chose them.
We are pattern 13
The utilization funnel names ClassLink Analytics in its own "known from" list. Round 1's cost view was a crude version of it: totals loud, drop-off invisible, and no definition of active anywhere on screen. The funnel in §3 is what that screen should have been.
We are pattern 12
Analytics+ already runs district to school to user. What it does not do is hold its layout shape across levels or mark the crossing into identifiable data. The second of those is a FERPA-adjacent display decision we have not made.
The accountability warning is aimed at us
The library names "a provisioning health score" as its example of borrowing accountability grammar for something low-stakes. Any letter grade, star rating or red-amber-green we put on a school's ClassLink usage will be read as a judgment of the school.
Frost's alert ladder is a stoplight
Our five-severity ladder is exactly the vocabulary the library says is contested. That is correct for system state, where red genuinely means broken. It is a different question for student and school performance, where red means a child. The two uses should not share a palette.
Round 2's calendar work is validated
Round 2 built a school-year ribbon and argued that no-school days must be blank rather than zero. The library independently says the same thing and adds the screener vocabulary, BOY / MOY / EOY, that round 2 did not have.
Round 2's density verdict was half right
Round 2 built the dense table to argue against Quiet Emphasis, concluded generous wins, and shelved it. That conclusion holds for administrators and is wrong for teachers. The row-density tokens should ship, and the default should follow the audience of the screen.
The band palette question, measured
The library says stoplight banding "fails for color-vision deficiency unless paired with shape, label, or position" and asks us to treat the palette as a stakeholder question. Both palettes went through the color-vision validator. The result is sharper than the library's own claim, and it changes what the stakeholder question actually is.
Stoplight
Three tunings were tried, widening both hue and lightness. Every one lands red against green between ΔE 4.3 and 4.7 under deuteranopia. That is not a palette that needs adjusting; it is the definitional problem with red and green, sitting on the two bands that carry the most meaning.
Sequential blues
Blue is the better palette but it is not a free pass. Two adjacent blue steps are also hard to tell apart when lifted out of order, which is exactly what a teacher does when comparing one cell to another across a grid.
What to carry forward
Two things to build, one question to take to stakeholders, and one correction to a decision we already made.
The utilization funnel
We already ship this pattern badly. Drop-off loudest, totals quiet, and the definition of active on the face of the component. It is the shortest path from this page to a real screen.
Suppression, everywhere
Any view that can be cut by student group needs n-size suppression with the threshold in the legend. This is the cheapest credibility we can buy and its absence is actively expensive.
The band palette
Accessibility no longer decides it, because shape and label are mandatory either way. Ask districts about stigma, and carry the measured red-green tiebreaker into the room.
Candidate rules not accepted · for discussion
Bands carry three channels
Every performance band renders as fill plus a distinct shape plus a word. All three channels, every time. This holds in both palettes, because §6 shows no four-band palette separates on color alone.
Status palette and performance palette are different palettes
Frost's severity ladder means a system is broken. A performance band means a child is behind. They must not share tokens, because the second is contested in a way the first is not, and a district that wants blues for students still wants red for a failed sync.
Direction is declared per metric
Every colored value names whether higher is better. Each metric declares its own. Absenteeism up is bad, growth up is good, and one color logic across both produces confident misreads.
Any matrix reads as a gradebook
If rows are not students, say so loudly in the header and the empty state. Freeze the header row and the first column in every matrix, at every width.
Suppress below n, state the threshold
Cells below the reporting minimum render as a dash and never as a number or a zero. The threshold appears in the legend on the face of the table, and the count of suppressed groups is visible.
Identifiable looks different from aggregate
Crossing from aggregate into individual student data changes the frame: a border, a labeled bar, a different ground. A user glancing at a shared screen should know without reading.
Two densities, not one compromise
Teacher surfaces default to the compact row; administrator surfaces default to the generous one. The row-density tokens ship, and the default follows the audience of the screen rather than a global setting.
A trendline needs six points
Below the minimum, suppress the line and say why inline. The same guard applies to any fitted line, any projection and any "on pace to" figure.
Open questions
- Does Analytics+ mark the crossing into identifiable student data today, and if not, who owns that decision?
- What is ClassLink's definition of "active", and is it the same one in the product, the renewal deck and the contract?
- Do we put any rating grammar on schools at all? The library's warning says decide rather than drift.
- Which teacher-facing surfaces do we actually own? Most of this section's patterns assume a gradebook we do not ship.
- Carried from earlier rounds and still open: what "Total" means in the school comparison, and whether to re-step the categorical palette.
Behind this page
- The brief: K-12 Data Display Pattern Library, Chris Stevens, 2026-09-19, saved into the project alongside this page. Every pattern number here refers to its numbering.
- California School Dashboard — caschooldashboard.org — the five-by-five status against change grid, five colors, blue highest.
- TXschools.gov — A–F letter grades composed from Student Achievement, School Progress and Closing the Gaps.
- Ohio School Report Cards — reportcard.education.ohio.gov — 1–5 stars in half-star increments across six components.
- Band vocabulary follows DIBELS and acadience benchmark language. Screener conventions reference i-Ready, NWEA MAP and Star; gradebook conventions reference PowerSchool, Infinite Campus, Skyward, Canvas and Google Classroom.
- Internal: Frost tokens from the UX_tools remote at
2f75211; the diverging ramp and school-year ribbon from round 2; the stat and chart recipes from round 1; the color-vision validator from the dataviz reference.
All student names, scores, attendance and school figures on this page are machine-generated from a fixed word list with a seeded generator. They describe no real student, section or school.