Which header would open the page?
Decision: Pending
ClassLink · Frost · Data viz sketches
Heroes & KPI headers
Three ways to open a page with the numbers that matter, in the Frost v.03 type roles.
- Category
- Heroes & KPI headers · 9 in the audit
- Representative
- Analytics+ Login Summary
- Sketches
- 10
- Data
- Mock, from screenshots
- Status
- Draft · For feedback
- Updated
- 2026-10-20
00 · Representative
Analytics+ Login Summary
- What shipsA dark-blue hero card (670,219) beside two lighter cards, then charts.
- What worksOne number leads and the others support it.
- What to improve"Monday" is a word styled like a number, no card shows change or trend, and each card has its own accent color.
Sketch A · Sparklines
Hero with context
Logins
670,219
This Month
Up 5% vs September
Unique Users
36,978
This Month · Up 3%
Peak Day
Monday
21% of this month's logins
Why
The number alone says how much; the strip beside it says whether that is normal.
Spec
- Hero 54/600 Barlow, brand blue, change note = success badge, icon + label
- Strip 12 months: peak dark, now mid
- Support cards in the same row, 34/600 Barlow ink-900; "Monday" 20/700
- One hero per view
Principle
Sparklines: word-sized graphics
Sketch B · Words + numbers
A sentence hero
670,219 logins from 36,978 people this month, about 18 each, busiest on Mondays.
Share of this month's logins by weekday
Why
People read a sentence faster than a row of labels, and the numbers sit in it.
Spec
- Sentence 20/700 carries four facts, key words ink-900
- Hero 54/600 Barlow for the lead number only
- Strip proves "busiest on Mondays"
- Reads aloud as a headline
Principle
Integrate words, numbers and graphics
Sketch C · Comparison
Change at a glance
Logins
670,219
This Month
vs SeptemberUp 5%
vs last yearUp 14%
Unique Users
36,978
This Month
vs SeptemberUp 3%
vs last yearUp 6%
Peak Day
Monday
21% of logins
vs an even weekUp 47%
vs SeptemberUp 1%
Why
The question after "how many" is "compared with what", so the comparison is the picture.
Spec
- Cards in one centered row; first has the hero
- Bars compare with last month and last year
- Change = status badge, icon + label (success, warning)
- Peak Day compares with an even week
Principle
Show comparisons
Sketch D · Explore · Sparklines
Hero on a wave
Unique Users
36,978
1 person = 4,000 · Up 3%
Peak Day
Monday
21%% of this month's logins
Why
The number sits on its own history; the peak is pinned and the cards below use people, not bars.
Spec
- Hero 54/600 Barlow over a gradient wave
- People glyphs: 1 = 4,000 users
- One centered row of three cards
- Wave draws once
Principle
Integrate words, numbers and graphics
Sketch E · Explore · Comparison
The week in bubbles
670,219 logins this month, most of them on Mondays.
Bubble area = share of this month's logins
Why
Seven bubbles say "busy early in the week" before a single label is read.
Spec
- Bubble area = share of logins
- Monday darkest, label inside
- Sentence hero above
- Bounce in, left to right
Principle
Show comparisons
Sketch F · Explore · Sparklines
Mountain skyline
Logins
670,219
This Month
Up 5% vs September
Unique Users
36,978
This Month · Up 3%
Peak Day
Monday
21% of this month's logins
Logins by MonthPeak height = logins
Why
The year is a mountain range, so the tallest peak, March, is the one you remember.
Spec
- Hero 54/600 Barlow in the first card
- Peak height = logins, flagged
- Change = success badge
- Peaks rise once, in order
Principle
Integrate words, numbers and graphics
Sketch G · Explore · Comparison
Chevron change
Logins
670,219
This Month
vs SeptemberUp 5%
vs last yearUp 14%
Unique Users
36,978
This Month
vs SeptemberUp 3%
vs last yearUp 6%
Peak Day
Monday
21% of logins
vs an even weekUp 47%
vs SeptemberUp 1%
1 chevron = 2 percentage points
Why
Change is a direction, so it is drawn as arrows you can count, with the percent in a badge.
Spec
- 1 chevron = 2 points, last one half-strength
- Hero 54/600, then 34/600
- Badge = icon + label
- Chevrons bounce in
Principle
Show comparisons
Sketch H · Explore · Words + numbers
Odometer
Logins
670,219
This Month
Up 5% vs September
Unique Users
36,978
This Month · Up 3%
Peak Day
Monday
21% of this month's logins
Why
The hero number rolls in like an odometer: one tile per digit, so it feels counted, not just shown.
Spec
- Hero 54/600 Barlow, one tile per digit
- Digits roll in once, left to right
- Change = success badge
- Support cards in an equal row
Principle
Integrate words, numbers and graphics
Sketch I · Explore · Sparklines
Story with inline graphics
670,219 logins from 36,978 people this month, up 5% on September, busiest on Mondays.
Up 5% vs September
Inline graphics: people = who, wave = 12 months, columns = weekday share (Monday highlighted)
Why
A sentence carries the finding, and tiny graphics sit inside it exactly where the words need proof.
Spec
- Hero 54/600 then 20/700 sentence
- Inline: people, 12-month wave, weekday columns
- Badge = icon + label
- Reads aloud as a headline
Principle
Word-sized graphics
Sketch J · Explore · Words + numbers
Chat insights
Logins this month
670,219
Up 5% vs September
Busiest day is Monday, 21% of logins
36,978 people signed in, about 18 times each
Why
Three short messages say the three things a busy parent or teacher needs, each with its own picture.
Spec
- Hero in the first message
- One fact per bubble, one graphic each
- Messages slide in once
- Friendly, not a table
Principle
Integrate words, numbers and graphics
Rules in every sketch
One system
- Color
- Role hue · blue for quantity · status inks
- Status
- Icon + label badge, no dots, from the Frost status spec
- Type
- Frost v.03 roles: Inter, Barlow numerals 34+
- Form
- No donuts, pies or rings
- Motion
- Once, when fully in view
- KPI cards
- One horizontal, centered row
Feedback
Which one, and why?
Is a sentence hero too editorial for admins?
Decision: Pending