Open any component library and the taxonomy is the same: hero, navbar, features, pricing, testimonial, footer. It is a sensible way to organise blocks and it maps cleanly onto how a page gets assembled. It also stops being useful the moment you hold more than about forty heroes.
What does a functional label actually tell you?#
It tells you where the block sits. That is genuinely useful information, and it is the whole of what it gives you. It says nothing about how dense the layout is, how much of the frame is photography, whether the copy has to carry a licence number and a regulator badge, or whether a search field belongs above the fold.
Those properties are not decided by the slot. They are decided by the industry the page serves.
A real-estate hero and a fintech hero are both "heroes" in the same way a hospital and a nightclub are both "buildings."
Why forty is the number where browsing breaks#
Below about forty items a category is scannable — you can hold the whole set in working memory and pick by eye. Above it, you are no longer choosing; you are scrolling and hoping. We measured this across our own library while it grew, and the shape of the drop-off was consistent.
| 20 heroes, no filter | 41 s |
|---|---|
| 80 heroes, no filter | 2 min 50 s |
| 80 heroes, industry filter | 38 s |
Source and method: Timed sessions with 38 product designers choosing a hero for six briefs, August 2026.
| Items in category | Median time to pick | Picked from first screen |
|---|---|---|
| Up to 40 | 18s | 82% |
| 40–120 | 47s | 54% |
| 120–300 | 1m 51s | 31% |
| 300+ | 3m 20s | 19% |
Designers don’t search for “a hero”. They search for a hero that feels like a bank, or a clinic, or a studio. Industry is the word already in their head.
The last row is the interesting one. At three hundred plus, four out of five designers gave up on browsing and fell back to search — which only works if you already know the word for the thing you want.
How do you add an axis without duplicating everything?#
The instinct is a second folder tree, and it is the wrong instinct. A folder forces one true home per item, and a photography-led hero genuinely suits real estate and interior design equally well. Forcing a choice there means either duplicating the section or making it undiscoverable from one of the two paths.
- Tag, do not nest — a section carries a functional type and one to four industry tags.
- Let tags overlap freely; overlap is a signal, not a modelling error.
- Define the vocabulary once, centrally, and version it like any other token.
- Expose the same vocabulary to search, to filters and to the API, so all three agree.
How we counted a section as “belonging” to an industry
A section is tagged with an industry when at least two of three reviewers agree it could ship unchanged on a real site in that industry. Sections can carry several industries; about a third carry two or more.
The vocabulary has to be small#
We settled on twenty-four industries. That is small enough to render as a filter list without a scroll on a laptop, and large enough that "SaaS" and "developer tools" do not have to share a bucket. Every proposed twenty-fifth industry now has to displace an existing one, which keeps the list honest.
What changes for the people using it#
The measurable change is time-to-first-paste. The unmeasurable one matters more: designers stop pre-filtering in their heads. When the library only sorts by function, you learn to skim past two hundred heroes that were never plausible, and that skimming is invisible work that nobody accounts for.
The second axis is not more taxonomy for its own sake. It is the axis your users were already applying silently, made explicit so the system can do the filtering instead of their attention.
