Panorama Summit CourtBook · design sample

The Champagne Court

The calm structure you liked, in the client's colour and nothing else of theirs.

What changed, and what didn't

Same mechanism, different hue family

Everything that made the last one restful is untouched: one hue family, one typeface with weight carrying hierarchy, surfaces sitting close together, pills, one soft shadow, hairlines doing all the dividing. Manrope stays. The type ladder stays. The board layout stays.

What changed is the family: champagne and near-black instead of teal. That sounds like a token swap and it is not one, because gold cannot do the job teal was doing. The palette had to be restructured around that, and it is the only interesting thing on this page.

Palette

Gold is identity. Ink is interface

In the teal version one token, --action, was both a fill and a text colour at 5.23:1 either way. Champagne cannot be that token: #BEAD8E on the ground is 2.07:1, so it can never be text on a light surface. Rather than darken it until it stops being their colour, the job splits in two.

Gold fills

The primary button is champagne with near-black text — 8.59:1, and it is the hotel's own button, made legible. Hovering deepens to #B9975B, still 6.87:1.

Ink interfaces

Focus rings, hairline rules, headings and every piece of structure are near-black. The interface reads achromatic; the brand arrives as a fill.

A darker gold speaks

Where gold has to be text — links, eyebrows, the brand line — it is #786D58 at 4.79:1. Same hue, enough weight to read.

Ground
#F8F8F8
Theirs, measured off the site
Paper
#FFFFFF
Cards. 1.06:1 from ground
Wash
#F3EEE2
Free time, quiet fills
Ink
#111111
On ground: 17.78:1
Champagne
#BEAD8E
Fill only. As text: 2.07:1
Gold, spoken
#786D58
Text. 4.79:1
Warm grey
#6E685C
Body. 5.21:1
Green
#2F6B4F
Paid. 5.93:1

Two measured rules fall out. Gold is never text on a light surface — that is the 2.07:1 above. And state colours never sit on the wash: amber on it is 4.34:1 and gold-spoken on it is 4.40:1, both just short, so chips live on paper or ground. Everything else clears 4.5:1 in both directions.

The board

Availability, in champagne

Free time is still the only filled thing. Here the fill is the pale wash and the full champagne is reserved for the action — so the page has a two-step gold hierarchy: pale means available, saturated means press this.

Saturday 23 August Peak rate after 5:00 pm · 30-minute slots
Court 1 Pickleball · indoor ₱450 / 30 min
5:00 5:30 6:00 6:30 7:00 7:30
Court 2 Pickleball · indoor ₱450 / 30 min
5:00 5:30 6:00 6:30 7:00 7:30
Court 3 Badminton ₱380 / 30 min
5:00 5:30 6:00 6:30 7:00 7:30
Court 6 Volleyball · outdoor ₱520 / 30 min
5:00 5:30 6:00 6:30 7:00 7:30
Free Taken Someone is checking out

Sport dots are re-warmed to sit inside this family — olive, plum, terracotta, amber-brown and slate, every one above 4.3:1 on the ground, well past the 3:1 that non-text information needs. The written label still does the identifying.

State

Six states, and no gold in any of them

A deliberate exclusion. Champagne is the identity, so it never carries information — if gold meant paid it would also mean brand, and a clerk scanning twenty rows would be reading the logo instead of the ledger.

Confirmed · paid Reserved · pay at venue Completed Cancelled Expired · unpaid No-show

The reference

The one dark panel

Near-black card, gold hairlines above and below the label, white tabular code. This is the only place the logo's own construction survives at product scale — two rules and wide-tracked caps. The filigree does not appear anywhere; below about 120px it stops being legible, and this system has no room where it would be larger.

Booking reference

CB-B2-9F4KQ

Court 2 · Pickleball · Sat 23 Aug · 6:00–7:30 pm

₱1,350.00 Pay at the venue

Typography

Manrope, unchanged

Old Standard TT is the hotel's display face and it is not here, because you asked for the colour only — and because a high-contrast serif at 80px with −1px tracking is the opposite of the calm this structure earns. One family, hierarchy from weight.

800 · 34px
Six courts, open until ten
700 · 17px
Court 2 · Pickleball · 6:00–7:30 pm
700 · 14px
Panorama Summit
500 · 17px
Your court is held for ten minutes. Pay at the front desk, or send the amount to the venue's GCash code.
700 · tabular
CB-B2-9F4KQ   18:00–19:30   ₱1,350.00

Motion

What survives from Unlumen

Unchanged by the colour, because the constraint is the motion budget, not the palette: motion on public routes only behind LazyMotion, /admin and /clerk CSS-only, every animation checking useReducedMotion().

Keeps

animate-digits on the checkout hold — a running timer is information. reveal with a shorter travel. animated-list for the guest's payment-proof feed, never the day sheet. shimmer-skeleton on the calendar, amplitude held inside the wash.

Goes

glow-button, dia-text-reveal, scramble-text and the .text-gradient utility — all four live only in components/home/hero.tsx. A turning halo and a travelling gradient band cannot coexist with one 6% shadow, and with no accent hue the sweep has nothing to travel between.

One pulse survives in the whole product: the guest's waiting for the front desk dot, where something really is pending on a person. Everything else is static.

Honest risks

What this costs

Clickability is achromatic

Because gold cannot be text, links and interactive labels lean on a muted #786D58 rather than a bright action colour. That is elegant and it is a real usability tax — the "you can press this" signal is quieter than any competitor's. Worth testing with someone who has not seen the product.

Differentiation now rests entirely on colour

The structure is the category's, freely admitted. Champagne is the only thing separating this from the competitor's page. If the hotel ever rebrands, the product has nothing else holding its identity up.

Warm neutrals hide on a bad screen

The hairlines are #DDD2BE at 1.5:1 and card edges #C9BA9C at 1.91:1 — already nudged up from the teal version for exactly this reason. On a smudged tablet under fluorescent light at 7pm they are still the first thing to disappear. Test on the real device before committing.

The hero still gets deleted

Unchanged from the calm version: four shipped components go, plus about thirty lines of globals.css. Choosing calm costs that work regardless of which hue wins.

Still open

Not decided

QuestionWhere it stands
The hotel's display faceOld Standard TT is deliberately absent. If the client wants to recognise itself more, that face on the landing hero only — never in a console — is the smallest change that would do it.
Multi-venueUnsolved here. Champagne is one operator's colour, and the second client inherits it. The Price Board's livery idea — a band per venue inside one grammar — is still the only answer any of these directions has produced.
Dark themeStill deferred. One ground, #F8F8F8.
PhotographyUnchanged: typographic surfaces, photographs in a gallery only.

The directions this one beat

Kept for comparison. Each is a full sample with its own palette, contrast figures and honest risks.