Supper
3 of 12 places
The long table at the old print works
8 min from Harbor Station, north exit
01
The proof strip
The evidence row: counted facts with hairline separators, no adjectives anywhere near it.
38Suppers hosted since January
3,412Places filled, counted nightly
8 minFrom Harbor Station, north exit
0Numbers written by hand
Specificity is the luxury signal. Replace one adjective with one number and the page gets more premium with zero CSS changes.
02
Evidence chips and availability chips
Provenance chips say where a fact came from. Availability chips say what is left, in numbers.
Evidence, the provenance chips
Counted from the database
Photographed on site, 14 Aug
Render, not a photograph
Availability, the state chips
3 of 12 places
Full · waitlist open
Open to members
Only the real thing gets the accent border. The live dot may mount only on genuinely live data, one halo per screen, never on hover.
03
The event card
Category, availability, title, one metadata line, then the transit fact. Mostly information, which is why it survives being seen fifty times.
Every field is a real fact. If a card needs a paragraph, the card is a page.
04
The stat row, as tiles
Real figures at display size over tracked micro labels, tabular numerals throughout. They count up once, and hold still under reduced motion.
1,204Members seated
96.4%Arrival rate
38Venues walked
Counted from the database as the page is built, not written by hand.
05
The shadow gallery rail
Depth does the sorting: the active tile lifts, its neighbours settle back and desaturate. A peeking card, an edge fade, and a swipe cue announce the scroll.
Swipe or drag
See all 17 dates
Disclosure beats rendering seventeen.
The fade shows only while content is genuinely off screen. A rail of one never gets dressed up as a scrollable list.
06
The bottom tab bar
Three to five destinations, icon plus label, safe-area padded. The single change that makes a web page feel like an app.
Tonight
Long table · 3 of 12 places
In a real build the bar is position fixed, --tabbar-h is a token, and every scroll container clears it. Here it sits inside the frame so this page keeps one interaction model.
07
The first-run coach overlay
The spotlight cutout: a dimmed scrim with a hole punched over the thing being explained. Shown once, and the copy teaches trust, not buttons.
Tonight
3 tables left
1 of 3
This number is counted, not written
The dates and the places left are counted out of the database as the page is built, not written by hand. When a table fills, this number drops.
1 of 3
This number is counted, not written
The dates and the places left are counted out of the database as the page is built, not written by hand. When a table fills, this number drops. (Static preview: the live overlay needs JavaScript.)
Exactly three steps in a real build. Store the dismissal in localStorage and check it before navigating, so every screenshot run can skip it.
08
The bottom sheet
Detail stays in place: a sheet instead of a navigation round trip. Esc or the backdrop closes it, and focus comes straight back.
Your booking
The long table at the old print works
Sat 13 Sep19:30 to 22:45
2 places950 each
Total tonight1,900
Nothing is charged until the host confirms, usually within the hour.
One commit action, full width, 48px tall, and one line of reassurance under it. Never two action bars.
09
The form row
A tracked label, a 48px input, and one line that says why we ask. Fields that explain themselves get filled in.
Why we ask: your table host texts you only if the venue or the time changes. Never marketing.
10
The anti-slop footnote
The same job, twice. One button begs, the other states.
The reflex
The house answer
The gradient pill is guessable from the category name, which is the definition of slop. The block button is the maximum-contrast object on the page, states the action, and appears once per screen.