Service Catalog Grid (HTML/CSS)
Best for: an inventory of equal-weight services where the reader needs to scan for ownership, tier and health rather than follow a flow
Avoid when: the services have a hierarchy or a call order → layer-stack.md or request-paths.md; a flat grid throws that information away
Answers: what exists, who owns it, how critical it is, and which ones are not healthy
Data Shape
One card per service, all the same size, in a grid. The card carries four facts and nothing else: name, owning team, tier, health. The tier is a coloured left edge; the health is a chip with words in it.
Key Options
| Option | Effect |
|---|---|
A fixed repeat(4, 1fr) grid with equal cards |
Equal weight is the message; a card that is wider reads as more important |
Tier as a border-left colour |
Tier is ordinal, so it belongs on a continuous edge rather than in a chip |
| Health as a chip with words | Health is not ordinal — "elevated p99" and "index lag 12m" are different problems, and colour alone cannot say which |
| A tinted card background for degraded services | Redundant coding: the card is visibly different before any text is read |
border-style: dashed for retiring services |
A third state that is not a health state, so it must not reuse a health colour |
| A summary tile row above the grid | The count is the first question asked of a catalog |
Pitfalls
- ❌ Ordering cards by importance → ✅ tier already encodes that, and any other order makes the grid impossible to scan for a missing service
- ❌ Colour-only health → ✅ the chip carries words; colour-blind readers and greyscale prints both need them
- ❌ Putting a fourth colour on the card for "team" → ✅ six teams cannot be told apart by hue at this size; the team is a label
- ❌ Letting the grid wrap unevenly at the end → ✅ a catalog with a ragged last row looks incomplete even when it is not; pad the row or pick a column count that divides the count
- ❌ More than about twenty services → ✅ past that it is a table, and a table sorts and filters
Alternatives
| Variant | Use instead |
|---|---|
| The same services by layer and dependency | layer-stack.md |
| The call paths between the tier-0 services | request-paths.md |
| A sortable inventory rather than a figure | A table, or the catalog examples under goal-and-status-reporting |