Logins
20.5K
+4%
0 · Brief
Make ClassLink's numbers easier to scan, easier for everyone to read, and unmistakably Frost.
Four current screens from Analytics+ and the subscriptions view, a stack of boarding-pass redesigns as inspiration, and the question: what would we change? This page is a working exploration for Chris, not a team artifact. Nothing here is accepted into Frost.
Tokens are read from the UX_tools remote (origin/main at 2f75211). Where the page goes beyond Frost's current type ladder it says so with an outside Frost tag. Fixture data only: school names come from the existing screenshots and every number is invented.
1 · Diagnosis
What the current charts do, and where they lose the reader
The screens are competent. The problems are all about hierarchy and color doing the wrong job.
Analytics+ · School comparison (current) · headline numbers in four unrelated colors; every table cell painted
Subscriptions · Total cost (current) · the banner and the chart never meet; five equal bars when the story is one year
- Color is doing the job size should do. Purple, green, pink and red numerals carry no meaning, so the eye has nothing to rank. Text also wears a data color, which Frost forbids for green and gold and the dataviz rules forbid for every series color.
- Everything is the same weight. Four tiles, four equal numbers, "This month" four times. Nothing leads. The boarding pass has a gate number; this row has no gate number.
- The heat-table paints all 18 cells and gives the reader no legend and no stated maximum. To compare two schools you compare two shades. And the darkest "Total" cell (4h) is shorter than a lighter "Students" cell (3h 52m), so the ramp reads as if it lies. The real fix is a label: "Total" is not a sum here, and the header never says what it is.
- White text sits on the lightest cells. "54m" on the palest blue measures about 1.6:1. The darker cells pass; the light ones fail text contrast.
- The cost view separates the alert from the evidence. "3 subscriptions expiring soon" floats in a banner; the chart below never marks them. The $30K unused-licenses stat is purple because the tile before it was blue.
- Chart chrome is heavy. Wide saturated bars fill their slots, gridlines compete with data, and a value label appears on none of the bars, so the reader guesses 2026 at "about $230K" from the axis.
- Frost itself stops short. It supplies chart colors and a 54px stat-numeral role, but no stat-tile, chart-card or heatmap recipe. All four suite dashboards still use a 24px numeral. This exploration drafts the missing pieces in §8.
2 · Inspiration
What the boarding passes teach
Seven moves show up across the redesigns. Each maps directly onto a data display.
One dominant fact per surface
Thompson's final Delta pass gives the gate number a quarter of the card. Everything else is legible but secondary. Hierarchy comes from size, not color.
one hero number per view, at least twice the size of its neighbors. Frost already has the role (stat numeral 54/800). Use it.
Label above value, the same shape every time
Small tracked label, big numeral, repeated as a rhythm across the band. Once you learn the shape you never re-read a label.
a stat-tile contract: label on top at 11/700, value below, qualifier last. Never icon-tile left, value right, label below.
Ink and white, one accent
The brand panel changes color across the Delta, JetBlue and red variants. The data band stays black on white. Color is identity or the one thing that matters, never a code for values.
numerals in foreground ink. Frost blue for the single fact that matters. Series colors only when series identity is the point, and never on text.
Order by when you need it
Pete Smart's principle: gate before seat, because that is the order you use them. The Air NZ pass turns the trip into a left-to-right strip of stations.
alert first, then what changed, then detail. Time data can be a strip of stations with the current one enlarged.
The route is a sentence
"JFK → SFO" is a story, not two fields. Gentile sets it as the headline and the reader knows the trip before reading a single label.
every chart gets a one-line plain-English annotation that states the finding. "Roosevelt spends the most time, 4h 5m a day."
The stub
The tear-off repeats the headline facts in a compact strip. When the main pass is gone, the stub still tells you where to sit.
a compact summary row that stays visible when the detail scrolls away, and a right-hand stub column on cards that lists the facts behind the headline.
Push the machine data to the edge
Barcodes and record locators shrink and move to the margins. They are still there for the scanner; they stop competing with the human.
axis ticks, IDs, export chrome and date pickers recede to hairlines and 11px. The data is the only loud thing.
3 · Before/after
Headline numbers
Four "this month" figures from Analytics+. The job is to say what happened this month at a glance and lead with one number.
Before · current Analytics+
Time Spent197mThis Month
Digital Resources59This Month
Students & Staff8.3KThis Month
Logins20.5KThis Month
◔
197m
Time Spent
This Month
▭
59
Digital Resources
This Month
☺
8.3K
Students & Staff
This Month
→
20.5K
Logins
This Month
Both current treatments, redrawn. Top: the older colored-numeral row. Bottom: the newer icon-tile row. In both, four equal weights and four decorative colors.
After A · the stat band The Pass
Ink band, label over value, one hero cell in Frost blue, dashed perforations between cells.Time spent per user, this month
197min
+12% vs August · 176 min
Students and staff active
8.3K
−1%
Digital resources used
59
no change
September 2026 · deltas vs AugustDownload CSV
What changed: one qualifier for the whole band instead of four. "Time spent" leads because it is the metric the other three explain. Each delta names its glyph so the direction never rides on color alone. The unit rides inside the numeral, at half size, so "197m" stops reading as "197 meters". Motion: each figure rolls to its value, upward where the metric grew and downward where it fell, settling one digit at a time from the left. "Digital resources" did not change, so it does not move.
After B · quiet tiles Quiet Emphasis
Frost card recipe, foreground numerals, sparklines in the bar tokens, one hero in primary.Time spent per user
197 min
Logins
20.5K
Students and staff active
8.3K
Digital resources used
59
What changed: numerals in ink, one at the ladder's 54px in primary, three at 34px. A twelve-point sparkline in --bar-soft with the current period in --bar gives the number a direction without an axis. Delta color is opt-in per metric (here off), the glyph is mandatory. The icon tiles are gone: an icon next to a labeled number is a second label. Motion: the same roll, with the sparkline drawing in behind it.
Type probe outside Frost
The passes get their voice from condensed grotesks. Frost's ladder sets the stat numeral in Inter 800 with tight tracking. Three candidates at the same 54px, in the current theme:
Inter 800 · Frost ladder
197 min
Barlow Semi Condensed 600 chosen
197 min
Barlow Condensed 600
197 min
Use the "Numeral face" switch in the left rail to apply any of these to the whole page. My read after building: Inter 800 is the safe Frost answer and looks heavy at 54px next to 14px Inter body. Barlow Semi Condensed 600 keeps Frost's humanist feel, saves about 18% width in a band, and is the one I would propose if we add a numeral face. Full Condensed is the boarding pass, and reads as a different product. Chris chose Barlow Semi Condensed 600 on 2026-09-18; it is now the page default.
4 · Before/after
Comparing schools
Average time spent per day, six schools, three measures. The job is to find the high and low schools and read an exact value when you need one. Eighteen cells: precision matters more than pattern.
Before · current heat-table
| Name | Students | Staff | Total |
|---|
Redrawn with the source's shading logic: every cell filled, intensity per column, white text throughout. Hover nothing: there is no legend, no maximum and no tooltip.
After A · inline bar and number Quiet Emphasis
The tables exploration's §6 recipe, extended with a row summary. Recommended for this data.What changed: a bar never travels without its number, the header names the maximum so the bar means something, and a text summary ends every row so nothing rides on the bar alone. Bars are 6px on a --bar-soft track (fill on track measures 3.14:1). Sortable by any column; the annotation restates the sort.
After B · mark the extremes only Quiet Emphasis
Plain numbers; only the column high and low carry a mark.What changed: the quietest possible table. It wins when readers mostly want the exact numbers and only sometimes want the outliers. It loses when they want to see the shape of the whole column, which the bars give for free.
After C · a real heatmap candidate for the open §3 decision
Five validated blue steps, a legend, ink chosen per step, a row summary.What changed: one hue, light to dark, five bins with a legend that says so. The lightest bin recedes toward the card on purpose (near-zero should look like near-nothing). Text switches to white only on the two darkest steps, so every value clears 4.5:1. This is the treatment to reach for at 7×7 and up, where bars stop fitting. At 6×3 it is decoration; A is the better answer.
5 · Before/after
Cost over time, with an alert
Total subscription cost per school year, unused-license cost, and three subscriptions about to expire. The job is to say what this year costs, how that compares, and what needs a decision.
Before · current subscriptions view
$
$229K
Total Cost
This School Year
✕
$30K
Cost of Unused Licenses
This School Year
Total Cost ⓘ
20222023202420252026
After A · hero, meter, emphasis chart Quiet Emphasis
One hero figure, the unused share as a meter, prior years in gray, the alert tied to the bar it is about.Total cost, 2026–27 school year
$229K
Unused licenses
$30K13% of total
Total cost by school year
Download CSV2026 is nearly triple 2025. Four years of steady growth, then a step.
Table view
| School year | Total cost | Change |
|---|---|---|
| 2022 | $40K | — |
| 2023 | $52K | +$12K |
| 2024 | $65K | +$13K |
| 2025 | $78K | +$13K |
| 2026 | $229K | +$151K |
What changed: the hero is the number the page is about, so it is the only colored numeral. Prior years step back to gray and 2026 takes the bar color, with the only direct label. Bars are 24px wide with hairline gridlines. The banner keeps Frost's warning surface, the K3 glyph and role="status", adds the dollar amount so the reader can weigh it, and links to the list. It deliberately has no edge treatment because K4 is still an open decision. The "unused" stat becomes a meter so 13% reads as a share, not a second headline. Delta color here is opt-in and on: on a cost, up is bad. Motion: the bars grow from the baseline left to right, the $229K label lands only once its bar has arrived, and the meter fills to 13%. The hero rolls up, because the cost grew, even though growing is the bad news here: direction reports the number, never the judgment.
After B · the pass card The Pass
Route as a sentence, stub column with the facts behind the headline.Last school year$78K
This school year$229K
Total subscription cost · 2025–26 to 2026–27 · up $151K
Expiring before January
3 subscriptions · needs a renew-or-drop decision
$41K
Unused licenses
13% of total · 412 seats never activated
$30K
New this year
6 subscriptions added since July
$128K
Subscriptions
42
Expiring soon
3
Unused
$30K
Period
2026–27 school year
Download CSV
What changed: no chart. The five-year bar chart was only ever saying "2026 jumped", so the pass card says it as a route: $78K → $229K. The three rows are the reasons behind the jump, each with its amount, and the stub repeats the counts. This is the most opinionated of the after-states and the one most worth a reaction: does a district admin miss the bars?
6 · Concepts
Three directions, one page each
The before/afters above are components. These are the pages they add up to. Each is the Analytics+ overview and the subscriptions view seen through one lens. All three carry the same motion: figures roll in the direction the metric moved, bars grow from the baseline.
Concept 1 · considered
Ink band with a hero, route sentences, stub columns, perforations between facts.The Pass
Time spent per user
197min
+12% vs August
Logins
20.5K
Active users
8.3K
Resources
59
Schools
6
Lowest school2h 34m
Highest school4h 5m
Daily time per user · Jefferson to Roosevelt
Roosevelt Elementary
4h 5m
Lincoln Elementary
4h 0m
Adams High School
3h 24m
District avg
3h 18m
Above avg
3 of 6
Last year$78K
This year$229K
Subscription cost · up $151K
Expiring before January
$41K
Unused licenses
$30K
Subscriptions
42
Expiring
3
Where it shines: a district admin's morning glance. Everything is a fact with a label; nothing needs decoding. Where it strains: trend shape. The Pass has no room for a sparkline or a distribution, so "is this normal?" needs a click. It is a summary layer, not an analysis layer. What it would take in Frost: a stat band recipe (ink band, hero cell, dashed cell dividers), a route component, and the stub column. The ink band is the one new surface.
Concept 2 · chosen
Everything gray except the story. Bars carry numbers. Every chart states its finding in a sentence.Quiet Emphasis
Time spent per user
197 min
Logins
20.5K
Students and staff active
8.3K
Digital resources used
59
Time per grade, today
Grade 3 spent the most, 18 minutes. Grade 4 the least.
Table view
| Grade | Minutes |
|---|---|
| K | 15 |
| 1 | 14 |
| 2 | 11 |
| 3 | 18 |
| 4 | 7 |
Where it shines: it is the same Frost card everyone already knows, so it costs nothing to adopt, and it scales from four tiles to forty rows. It is also the direction that becomes design-system guidance most directly, because every move is a rule: one hero, gray context, bar plus number, one sentence. Where it strains: it is quiet. On a screen with six charts nothing pops, which is the point, but stakeholders used to color may read it as unfinished. What it would take in Frost: a stat-tile recipe, a chart-card recipe, the §6 bar recipe promoted, and the emphasis rule written down.
Concept 3 · considered
Pete Smart's order: what needs a decision, then what changed, then the detail. Time as a strip of stations.Sequence
1 · Needs a decision
Reading platform A
expires Dec 15 · 18% seats used$22K
expires Dec 15 · 18% seats used$22K
Math practice B
expires Dec 31 · 64% seats used$12K
expires Dec 31 · 64% seats used$12K
Assessment C
expires Jan 8 · 11% seats used$7K
expires Jan 8 · 11% seats used$7K
2 · What changed this month
Time per user+12%
Logins+4%
Active users−1%
Unused license cost+$4K
3 · Biggest movers, schools
1
Roosevelt Elementary+31 min per user
4h 5m
2
Kennedy Middle+14 min
2h 42m
3
Jefferson High−9 min
2h 34m
Subscription cost, five school years
the Air NZ strip: stations, current one enlarged22
2022–23
$40K
23
2023–24
$52K
24
2024–25
$65K
25
2025–26
$78K
26
2026–27 · now
$229K
Where it shines: it answers "what do I do?" before "what happened?". The alert stops being a banner and becomes the first section with its own facts. Ranking by change surfaces Roosevelt's jump, which the flat table hides. Where it strains: the strip only works for a handful of ordered periods and cannot show magnitude honestly (the $229K station is the same size as $40K, only the ring says "now"). Past six periods it should be a bar chart again. What it would take in Frost: a page-order rule (decide → changed → detail), a ranked-list recipe, and the station strip as an opt-in for five or fewer periods.
7 · Evidence
Palette findings
Frost ships nine categorical chart colors with no ordering rule and no contrast ledger. I ran them through the dataviz validator (OKLab color-vision simulation, lightness band, chroma floor, contrast). Results, not opinions.
Frost --chart-1..9, light on white
FAIL Lightness band #0E3A66 too dark (L 0.345)
FAIL Chroma floor #0E3A66, #2E9C9C, #788596 read as gray
FAIL CVD separation chart-8 ↔ chart-7 ΔE 5.4 (protan); target ≥ 8
FAIL Normal-vision floor chart-9 ↔ chart-8 ΔE 12.6; floor 15
WARN Contrast vs surface chart-3 2.80:1, chart-7 2.84:1 (below 3:1)
Dark mode fails the same checks (eight of nine outside the lightness band; adjacent pairs at ΔE 6.5 and 11.9). Even the best three-color subset (1, 3, 4) fails all-pairs: blue and violet sit at ΔE 4.6 under deuteranopia.
Candidate single-hue ramps (this exploration)
A sequential ramp for heatmaps and an ordinal ramp for discrete ordered marks, both from Frost's own blues. Light-end contrast is the check most candidates fail: --bar-soft at 1.40:1 cannot start an ordinal ramp.
Sequential, 5 bins (heatmap)
Ordinal, 4 steps (tiers, funnels)
PASS ordinal light #7FB3DE → #4E95CC → #2170B8 → #0A4D7F light end 2.23:1, hue spread 8°
PASS ordinal dark #2E5C80 → #3F82B8 → #5FA8E0 → #8FC8EE light end 2.31:1, hue spread 7°
Two of the four ordinal steps are existing Frost tokens (--cl-blue-500, --cl-blue-700). The sequential ramp's first bin is --cl-blue-tint, allowed to recede because a continuous scale's near-zero may look like near-nothing.
What this means for the rules: the categorical palette is fine for a legend-plus-label chart with two or three series and becomes unreliable past that. The safe default is one hue: --bar for the series that matters and --chart-9 gray for context. That is the Quiet Emphasis concept, arrived at from the numbers.
8 · Decision
What we are carrying forward
Chris chose Quiet Emphasis and Barlow Semi Condensed on 2026-09-18. The Pass and Sequence stay on the page as considered alternatives; two of their moves survive as rules inside Quiet Emphasis.
Chosen direction
Quiet Emphasis
Every chart and table on every dashboard. One hero, gray context, bar plus number, one sentence per chart, a table twin. The quiet tiles in §3 After B are the KPI recipe. Becomes Frost guidance with the least new surface.
Chosen numeral face
Barlow Semi Condensed 600
Stat sizes only, 34px and up: hero figures, stat-tile values, route figures. Inter stays for body, tables, axis ticks and labels. Proportional figures on standalone numbers, tabular in columns. Needs a Frost token (a display numeral face) and a Design.MD §5.1 amendment.
Kept from the other concepts
Two rules, no new surfaces
From Sequence: alerts sit beside their evidence and name the count and amount. From the Pass: label above value, one hero per view. The ink stat band, route sentences, stub columns and station strip are not carried forward.
Candidate rules direction chosen · not yet in Frost
Stat tile
Label above value, 11/700 with .02em tracking in muted ink. Value in foreground ink; exactly one hero per view at 54px in primary. One size per band, set by the widest value. Qualifier once per band, not per tile. Optional delta: signed, vs a named period, glyph mandatory, color opt-in and set by whether up is good. Optional twelve-point sparkline in --bar-soft, current period in --bar.
Fills the gap: "KPI" is a named block in Design.MD §11 with no recipe.
Chart card
Frost card recipe. Title at H1 (20/600), a one-sentence finding in body ink under it, filters in one row above every chart they scope, never inside the card. Every chart ships a table twin behind a "Table view" disclosure. Hover tooltip on every bar and cell; the tooltip never gates a value.
Fills the gap: "Chart card" is a named block in Design.MD §11 with no recipe.
Single-series rule
One series is --bar. Context series (prior periods, other rows) are --chart-9 at 85% opacity (3.2:1 on the card, so the context bars still clear the 3:1 non-text floor). Bars are at most 24px wide, 4px radius on the data end, square at the baseline, with a hairline solid grid. Direct-label the one bar the sentence is about; the axis carries the rest.
Derived from the §7 validator results and the tables exploration's §6.
Inline bar and number
6px track in --bar-soft, fill in --bar, the number at 52px right-aligned tabular beside it. The column header names the maximum. Each row ends in a text summary. A bar never travels without its number.
Promotes
explorations/tables Part 1 §6 unchanged, plus the row summary.Heatmap
Only at 7×7 and larger. One hue, five bins, a legend that says "five bins per column", ink switched to white on the two darkest steps only, a row summary in text. Bins per column unless the columns share a unit and a scale.
A candidate answer to the open §3 matrix decision. Ramp validated in §7.
Categorical series
Up to three series from --chart-1..9, always with a legend and a direct label, since the palette does not pass color-vision separation on its own. Past three: small multiples or fold into "Other". Never a value ramp on nominal categories.
Bounded by the §7 failures; a re-stepped palette would loosen this.
Numeral face decided
Barlow Semi Condensed 600 at the stat sizes only (34px and up), never in body, tables or axis ticks. Inter stays everywhere else. Proportional figures on standalone numbers, tabular in columns. Load weights 500–700 only.
Chris, 2026-09-18. Proposed token:
--font-numeral; ladder change: stat numeral 54/600 in Barlow Semi Condensed, tracking −.01em.Motion
A figure rolls to its value: upward when the metric grew, downward when it fell, still when it did not change. Direction reports the number, never whether the news is good. Digits settle left to right, 880ms plus 130ms per digit, easing hard at the end. Bars grow from the baseline with a 70ms stagger; a direct label appears only after its bar lands. Each element animates once, when it first scrolls into view, and never on a filter change. prefers-reduced-motion renders every final state with no movement at all.
New in this round, 2026-09-18. The roll sets numerals on fixed digit widths, so a rolled figure is slightly wider than the same number set proportionally.
Alert next to evidence
An alert about data appears beside the data: the banner names the count and the amount and links to the list, and the affected mark carries a glyph. Frost's five-severity ladder, K1 pairing, K3 glyphs and K5 roles apply unchanged. No edge treatment until K4 is decided.
Pete Smart's "order by need" applied to alerts.
Still open
- "Total" in the school comparison is not a sum of Students and Staff. What is it? The label should say.
- Should the categorical palette be re-stepped so it passes, or should we write the three-series cap into the rules and move on?
- Where does this go next: a
ds-contributeintake for the stat-tile and chart-card recipes plus the numeral token, or a protoapp pilot on one Analytics+ screen first?
Settled 2026-09-18
- Direction: Quiet Emphasis. The Pass and Sequence are not carried forward as surfaces.
- Numeral face: Barlow Semi Condensed 600 at stat sizes; Inter everywhere else.
9 · Sources
Research behind this page
- Core77, Tyler Thompson's boarding pass re-design pile-on (the Delta series, Gentile and others in this folder).
- Core77, Peter Smart's better boarding pass redesign; NPR, a boarding pass design that's so much better. Source of the "order by when you need it" principle.
- Adam Glynn-Finnegan, Boarding pass redesign (Medium).
- think.design, Dashboard design in 2026: do's and don'ts. Stat-card context layers; status above the fold, trends in the middle, drill-downs below.
- Smashing Magazine, How accessibility standards can empower better chart visual design. 3:1 for marks, 4.5:1 for text, never color alone.
- Highcharts, 10 guidelines for dataviz accessibility; A11Y Collective, checklist for accessible data visualisations.
- Pencil & Paper, Data table design UX patterns; Atlassian, Heatmap: a complete guide (pair a heatmap with its table; label the important cells).
- Internal: UX_tools
Design.MD§4.9, §5.1, §5.3, §9, §11;Frost/design-system/FROST-SUITE-ALIGNMENT.md§D1, §K;Frost/explorations/tables/DECISIONS.mdPart 1 §3 and §6; the dataviz skill's form, mark, interaction and anti-pattern references and its palette validator.