Derived from what makes sparrk.ph easy to look at, rebuilt on CourtBook's own hue so it does not wear a competitor's colours.
What I took
Sparrk is blue and nothing else — navy for text, mid-blue for actions, pale blue for tints. The eye never has to arbitrate between competing colours. This is the largest single effect, and it is what my Price Board got most wrong with six.
Nunito, at four weights. Hierarchy comes from weight, not size: 16px carries almost everything and 48px appears exactly once on the page.
White, pale tint, navy. Barely any separation between panels — but text contrast stays high. Restful is not the same as low contrast; it is low contrast between surfaces.
What I left behind: their gradient button, the 100px pill on every element including cards, and the `rgba(0,0,0,.2)` shadow, which is heavier than this palette needs. Also their exact blue — more on that in the risks.
Palette
Everything structural is one teal-green family, continuous with the primary already in globals.css rather than a fresh invention. Only two colours sit outside it, and both exist to say something colour must say: money is owed, or somebody did not turn up.
One measured rule: ochre on the tint is 4.1:1 and fails, so state colours sit on the page or a card, never on a tinted fill. Everything else above clears 4.5:1 in both directions, which is what lets --action be a fill and a text colour — the constraint the champagne gold could never satisfy.
The board
The one idea worth carrying over from the loud version: free time is the subject. But here it earns emphasis by being the only filled thing, rather than by being yellow. Taken time recedes instead of getting struck through.
Sport is a 9px dot beside a written label, not a coloured fill. The five hues are desaturated into the same tonal range so a six-court list reads as one object instead of a paint chart — and the label is still doing the identifying, so colour is never alone.
Side by side
₱450 / 30 min
The Quiet Court — one hue, one family, one hairline. Same information, same tap target.
Typography
One family across the whole product, hierarchy from weight. Not Nunito — that is theirs, and its roundness reads a touch juvenile for a front desk. Manrope keeps the softness in the letterforms while holding up in a dense day sheet, and its tabular figures are genuinely good, which the reference and every peso amount depend on.
The reference
A single deep panel, the same value as the body text. It is the artifact a guest shows at a counter, so it gets the contrast — and because nothing else on the page is dark, it needs no size or colour to be found.
Booking reference
CB-B2-9F4KQ
State
Every chip is the same pill on the same surface. A dot carries the hue and the words carry the meaning, so the set reads as one family and the two states that cost somebody money are the only ones with colour in them.
Shape and depth
999px on anything you press or that reports a state; 20px on cards; 12px on small inner blocks. Nothing square, nothing fully round except the brand dot.
0 8px 24px rgba(14,58,51,.08) — tinted with the palette rather than black, and a third the strength of Sparrk's. Used on this card, the board and the reference. Nothing else.
A single #DCE7E4 1px line does all the dividing. No 2px rules, no heavy borders, no dividers inside cards that already have edges.
Honest risks
This is the direction a competent team ships for a booking product, and Sparrk already ships it. PRODUCT.md's positioning claims something a neighbour cannot copy — and looking like the neighbour spends that claim. The mechanism still differentiates; the surface no longer does.
Nothing here will be described to a friend. That is the trade for restful, and it is a real one: the Price Board would have been remembered, for better or worse.
--action is both the brand and the paid state. Elegant, and a risk: if everything good is teal, a paid chip carries less signal. Watch it in the day sheet, where twenty rows may all be teal.
Low surface contrast is restful on a phone in a lobby. Under fluorescent light on a smudged tablet at 7pm, hairlines and a pale tint are the first things to disappear. This wants a real device test before it is committed.
Still open
| Question | Where it stands |
|---|---|
| Which direction | Three now exist: the client's own identity, the Price Board, and this. This one answers "easy on the eyes" most directly; the Price Board is the most distinctive; the first is the most likely to please the hotel. |
| Typeface | Manrope is a recommendation, not a measurement. Worth setting the day sheet in it on a real tablet before committing — that is the surface that will break a face, not the landing page. |
| Dark theme | Still deferred. One ground here, #F6FAF9. |
| Photography | Unchanged from the last decision: surfaces stay typographic, photographs live only in a gallery. This world would hold a photograph comfortably if you ever reversed that. |