Illustrative shapes, not a price list

What a first engagement looks like

Console

Five engagements. Every card carries the same five specifications in the same order. Every duration bar runs against sixteen weeks, the longest here, so a bar on one card matches a bar on the next. None of them rescale as you filter. That is what a catalog needs, and it is not the same as being exact.

The engagements

Discovery week

Software

Duration
1 week
Ends in
A scope
Needs a bid
No
You supply
2 half-days

Fixed

Integration build

Software

Duration
10 weeks
Ends in
An interface
Needs a bid
Yes
You supply
An owner

Rate card

Estate handover

IT

Duration
6 weeks
Ends in
Documentation
Needs a bid
No
You supply
Admin access

Fixed

Passive audit

Cyber

Duration
2 weeks
Ends in
Findings
Needs a bid
No
You supply
Nothing

Fixed

Instrumentation fit-out

Hardware

Duration
16 weeks
Ends in
A bench
Needs a bid
Yes
You supply
A survey

Rate card

Side by side

The comparison is the same five specifications, turned ninety degrees. It drops nothing and reorders nothing. A row that moves between two views is a row nobody can compare.

The three selected engagements, compared on five specifications
Specification Discovery week Integration build Passive audit
Duration 1 week 10 weeks 2 weeks
Ends in A scope An interface Findings
Needs a bid No Yes No
You supply 2 half-days An owner Nothing
Priced as Fixed Rate card Fixed

Design notes

Shape of the page
Filters down one side, a shelf of cards beside them, and the comparison underneath rather than in a modal that hides what it compares.
What it leads with
The specification. A photograph would be the product in a stone catalog; here the product is a shape of work, so the drawing is a diagram and the specification carries the weight.
Spacing
One forty-pixel rhythm. The control that selects an engagement, the row in the comparison and the item on the shelf are all the same height.
The one bold decision
Every bar is drawn against the same sixteen weeks, declared once on the shelf and never rescaled. A bar that rescales per card is a chart that lies by looking like a comparison.

Why the rhythm is one number

In the first draft, a specification on a card, the same specification in a comparison row, and the control that selects it were three different sizes. That is what makes two products hard to compare: the eye re-finds the field every time it moves. Catalog puts control, row and shelf item on one forty-pixel rhythm, so it never has to.

What is illustrative here

The engagements and their durations are representative shapes rather than a quotation. Nothing on this page is a price, and the specification that would carry one says how the work is priced instead.