Court booking · design sample
The direction
A court is drawn, not decorated. Its lines are hairlines with jobs — they bound the play area, divide the service boxes, and mark where a ball is in or out. Your logo is built from exactly that vocabulary: two full-width rules, gold ornament, wide-tracked caps between them. So the identity and the product already share a grammar, and this direction commits to it. Every rule on every screen measures something.
What it refuses: the engraved-stationery treatment — foil, flourish, and cream paper standing in for luxury. That is the first thing anyone would ship from a hotel brief, it is also where the filigree would end up as wallpaper, and it has nothing to say about a 30-minute slot on Court 2.
Palette
The champagne gold is the identity, and it is the one thing on the site that fails accessibility as used: their buttons run white on gold at 2.2:1. Turned around, near-black on that same gold is 8.59:1. So gold carries surfaces and near-black carries the words on them — the rule your existing citron accent already follows. A darkened gold takes over wherever gold has to be the text.
One ground, and no second one. body is #F8F8F8, measured off the live site, and white sits on top of it as cards and panels — exactly the relationship the hotel uses. This page carries no dark palette on purpose: Panorama Summit has never specified a dark identity, and a specimen that invents one is showing you a colour the brand does not own. Whether the product keeps its dark theme is a live decision, noted at the end.
Gold cannot say paid. A booking's state is money and consequence, so it gets its own warm-harmonised set that never competes with the brand — and every chip carries its word, because colour is never the only encoding.
The current citron and amber sit on top of the gold and muddy it. These hold their identity beside champagne instead of fighting it, and each rides as a keylined chip with a solid mark — never a full fill.
Typography
Both are the hotel's own faces, already in use on their site. Old Standard TT carries every heading; Archivo carries everything a person has to read quickly or read aloud. The logo's H O T E L becomes the label style across the whole product.
The signature
This is the one artifact the product exists to produce, and the only screen a guest shows to another human being. It takes the logo's construction literally: gold hairlines above and below, tracked caps, the name of the thing between them. Tabular figures because it gets read aloud at a counter and copied off a cracked screen.
Booking reference
CB-B2-9F4KQ
Present this at the front desk
The measured grid
Every line here means something. Thirty-minute divisions are hairlines, the hour is weighted, courts are enumerated units each bounded by a keyline. Nothing is a decorative lattice — which is also the fix for the tiled line-field currently sitting in globals.css, flagged by the detector.
A held slot is hatched rather than greyed, because a hold is temporary and a closure is not — and a slot taken while you are looking at it changes on the slot, not in a toast somewhere else.
Depth
Your codebase has no shadow classes at all; the hotel's site leans on a soft gold-tinted lift. Both are right, in different rooms. One lift token, gold-tinted, for guest surfaces; the desk stays borders and tonal steps, which is why it reads under queue pressure and prints correctly.
Guest surface · one lift, and it moves
Tonight, Court 2
Two 45-minute slots, indoor, lights included.
₱1,350.00
0 14px 24px rgba(190,173,142,.28) — hover the card and the button.
Tilt @unlumen-ui/tilt · pull primitives-effects-magnetic · total count-up
Front desk · no shadow, ever
Rows share one keyline. Density beats decoration here.
No Unlumen here — /clerk is Tier 0, CSS only
Pay by QR
The guest sends money from their own app to the hotel's own account. Nothing here moves the booking: the court stays unpaid until someone at the desk looks at the evidence and presses Confirm. The design has to say that plainly, and it must never hide the counter.
Amount to send
₱1,350.00
The masked account number is the guest's only defence against a swapped QR sticker, so it is given the same weight as the amount — not tucked into small print.
The form puts itself away and the state arrives where the change happened. This is the one place a push feed belongs: the guest is watching one booking and waiting on a person.
Feed @unlumen-ui/animated-list · waiting dot adapted from glowing-badge
Borrowed motion
The registry is wired in components.json, so these install as editable source with npx shadcn add. Every one below is free and needs no new dependency beyond motion, which is already in package.json. What matters more than the list is the boundary: your own decision log puts motion on public routes only, behind LazyMotion, and leaves /admin and /clerk CSS-only.
| Registry item | Where it goes | Why this one |
|---|---|---|
| primitives‑animate‑scroll‑progress | Public pages, top rule | A hairline that measures how far you have read. The direction's whole thesis, applied to the page itself — and it is the only ornament that earns a fixed position. |
| tilt | Venue and offer cards | The bare wrapper, not tilt-card — that one ships its own badge and radial shine, which would fight this identity. Four degrees, paired with the gold lift. |
| primitives‑effects‑magnetic | The primary action only | Six pixels of pull on Reserve. Tactility without noise, and one control per screen gets it. The styled magnetic-button is skipped for the same reason as above. |
| count‑up | Checkout total | The peso total springs to value as the summary lands. Guard it: money must be readable at rest, so the final figure is in the DOM and the animation is decoration over it. |
| animated‑list | Guest status page — not the day sheet | It looks made for the desk's arrivals feed, and that is exactly where it must not go: /clerk is Tier 0. On the guest's own booking, where one person watches one thing, it is right. |
| shimmer‑skeleton | Calendar loading rows | The availability grid takes a moment against a hosted database. A shimmer on the graticule's own divisions beats a spinner, and you already have the keyframe. |
Three you already adapted stay, re-tinted: glow becomes gold turning through deep gold, which is far quieter than teal through citron and better for this brand; glowing-badge becomes the waiting-for-the-desk dot above; scramble-text keeps its place. Every one of these checks useReducedMotion(), and the sample you are reading collapses all of it under prefers-reduced-motion.
Where the discipline came from
The concept roll dealt six foreign worlds against this direction. One held its ground on product clarity and stays a live alternate; five lost, and each one gave up a discipline this direction was missing before it was presented.
Photography
Correcting myself first: my opening pass read this site as flat white and gold, because I sampled background colours and never looked at background images. There are fourteen. The hero is a full-bleed portrait panel, rooms are photo cards, the footer is a photograph under a near-black wash. Gold and near-black are the frame; the photographs are what the frame is for.
CourtBook cannot work that way, and this is the decision: every surface is typographic, and photographs live in exactly one place. Not because photographs are unwelcome, but because these ones are not commissioned. Owners upload them through the admin at any brightness, any aspect, sometimes not at all. A layout that leans on a photograph is a layout that is only as good as the worst upload — and on a platform, you inherit the worst upload.
So no hero image, no photographic section grounds, no text over pictures anywhere. The photographs become evidence, gathered in a gallery, where mixed quality is expected and harmless. Three things fall out of that, and two of them are free: the portrait-crop problem disappears, the admin needs no image editor, and the venue page's first paint carries no large image at all — which on a ₱-per-megabyte mobile connection in Davao is not a minor detail.
Panorama Summit Hotel · Davao City
The hero, with nothing to loadInformation does the work a photograph would have done, and the court lines are ruled to the panel — the direction's own material at hero scale. This composition is identical for a venue with forty photographs and a venue with none.
Photographs sit below the availability calendar in one labelled band, cropped to a single 4:3 cell so a landscape phone shot and a portrait one arrive the same size. No text is ever set over them. The attribution is explicit, because it manages the expectation: these are the venue's own pictures, not ours.
Photographs · 9
Supplied by the venue
Mixed exposure, containedThe blown-out one and the night one sit beside each other without either damaging a layout, because neither is holding anything up. In a grid, uneven photography reads as a real place. Behind a headline, it reads as a broken page.
Nothing moves. The band is simply absent — no empty state, no placeholder, no apology — because the page never promised a photograph. That is the whole argument for this option in one sentence.
The first and second client get an identical standard of page, whatever they upload. No venue is punished for having a bad camera, and no page can be broken by a file the operator chose. First paint carries no image at all.
A guest coming from panoramasummithotel.com leaves a photograph-led world and lands in a typographic one. The identity carries — same gold, same faces, same rules — but the register drops. That is the trade, and it is a real one.
Gallery stand-ins drawn on canvas — the CSP blocks remote images, and I have not downloaded the hotel's photography. The photographic-hero version is kept in this artifact's version history as photo-frame-added.
Honest risks
Champagne is low-chroma. It cannot shout, so the primary action leans on shape, size and position rather than colour — and a busy day sheet has to earn hierarchy from the grid, not from a bright button.
The hotel's buttons are 0px; the product is 16px everywhere. This sample sits at 0–1px. That single decision re-touches every component in the codebase.
CourtBook is positioned as multi-venue with a vendor super-admin. Wearing one operator's identity everywhere is right for this deployment and wrong for the second client. Worth deciding now, not at signature.
Its hairlines thin out below about 18px and on dark grounds. It stays a display face here; anything a clerk reads fast is Archivo.
Not decided yet
| Question | Why it is open |
|---|---|
| Logo placement | You have two lockups: a 562×90 horizontal strip in public/brand and the square stacked mark with the filigree. The horizontal one belongs in the app header; the square one wants a first-run or receipt position where it has room. The filigree does not survive below about 120px wide. |
| Whether there is a dark theme at all | Deferred, deliberately. This specimen now commits to the one ground the brand actually has — an earlier version invented a near-black palette to satisfy theme-switching, which put colours in front of you that Panorama Summit never specified. Note the product currently supports both: every token in globals.css is authored through light-dark(), so keeping a dark theme is nearly free and dropping it removes half of every colour declaration. Gold does read well on near-black (8.5:1), and a front desk under fluorescent light at 7pm is a light-mode room. Not decided here. |
| Where the filigree lives | It is the most distinctive thing in the mark and the easiest thing to overuse. This sample spends it once, in the header. A second place — the printed receipt — is defensible; a third is wallpaper. |
| Photography | Decided — typographic surfaces, gallery-only photographs. No image carries a layout anywhere in the product. This closes two questions that were open an hour ago: nobody has to crop, and the admin needs no image editor. It leaves one open, below. |
| The arrival gap | A guest crossing over from the hotel's photograph-led site meets a typographic page. The identity carries but the register drops, and the venue hero is now the only thing defending that moment. If it ever feels thin in front of a real client, the honest fix is to make the hero more committed — not to quietly reintroduce a hero image. |