Maria Angelika Agutaya · case study Matchmaking Manila, 2026

A luxury matchmaking site that never raises its voice

ProjectMatchmaking Manila, a concept site for a high-end matchmaking service My partArt direction, design, and build Statuslive · concept, at a Vercel demo URL CopyQuoted verbatim from the client's existing site

The problem: signal expense and trust without one loud element. No bright button, no urgency, no stock warmth.

What I built: a film reel. Full-bleed stills cut past each other on scroll, an ember trails the cursor, one locked palette holds throughout.

The result: a live concept with zero accent buttons and zero prices, where atmosphere does the persuading.

The palette arrived locked, five hexes, no negotiation

The client's team approved an official palette before design began: champagne gold, cherry black, blood, dark cherry, silver. With the rules that silver is text-only and gold stays near five percent of any surface, most of every screen has to be image and shadow. That scarcity became the design.

Where the direction came from

The visual brief was the client's own Pinterest board: dark cherry velvet, candlelight, gold, pearls, champagne coupes. The concept translates that board literally. The stills are velvet, candles, pearls, and coupes photographed in near-darkness, and the interface is only what the palette rules permit on top of them: gold keylines, gold small caps, silver supporting text. All on-page copy is quoted verbatim from the client's existing site, so the concept only had to argue about form.

Locked palette: #dec89d #530601 #570a02 #6a0b11 #d7d7d7
Usage rules: Silver as text only; gold held to roughly 5% of the surface
Type: Newsreader for display, IBM Plex Sans for interface

Eight directions died before this one

Eight rejected explorations proved that describing directions in words was the bottleneck. The fix: three static, full-viewport comps, each a finished first screen, picked by eye in a single round.

8 → 3 → 1rejected directions, then three comps, then one decision in one round.

Typographic monument

The name and claim carried entirely by scale and serif weight.

Film still

Chosen. A cinematic frame with a title card, built out below as the full concept.

Couture invitation

A formal card layout, engraved rules and centered small caps.

Why comps settled what conversation could not

Eight directions argued in prose and mood references all stalled the same way. The three comps were built as static full-viewport screens, close enough to final that choosing one meant choosing everything, composition, type scale, and restraint level at once. The comparison page remains part of the project at /comps.html, and the method is now how I run direction disputes: fewer words, more finished frames.

Decision one

The page is a film reel, and the scroll is the edit

Every section is a full-bleed still. Each one is sticky, so the next scrolls over it like a cut in a reel: gold serif title-cards sit bottom-left, framed small-caps slates bottom-right.

Mid-scroll on the concept site: the candle still is cut off partway as the next full-bleed still, a woman in a red gown at a window over the city, slides up over it — A cut, mid-scroll. The incoming still slides over the last one, so moving down the page reads as an edit.

A still of an antique gold mirror and taper candles, with the title card Your matchmaker is Coach Vee and her credentials in small caps beneath — The title-card grammar: one serif line per frame, credentials in small caps below it.

The headline glint, and the bug that guards it

Headlines carry a subtle gold glint via background-clip on the text. The build's hard-won rule: a clipped headline must never be split into per-word spans, because animating the individual word spans silently breaks the clip and the glint dies. Line animation happens at the block level instead, and the constraint is documented in the project so a future edit does not reintroduce it.

Decision two

The accent button was cut

Every luxury-site instinct says place a gold button. The more expensive move is to trust the atmosphere: no accent-colored call to action exists anywhere. The ask survives as a quiet framed slate, small caps in the palette's own gold, and progression replaces persuasion.

The hero still at desktop: roses and pearls in candlelight, the headline The science-backed Filipina matchmaker who understands what foreign men seek, and a thin-framed Book A Consultation slate at bottom right — The only ask on the first screen: a keyline frame and small caps, no fill, no accent color.

Measured contrast (WCAG 2.1)
Pair	Ratio	Grade
Site: gold text on cherry black	9.22:1	AAA
Site: silver text on cherry black	10.46:1	AAA
This page: headings on paper	14.09:1	AAA
This page: body ink on paper	12.12:1	AAA
This page: links on paper	11.78:1	AAA
This page: captions on paper	5.53:1	AA

Restraint that happens to pass

The locked palette turned out to be an accessibility asset. Champagne gold on cherry black and silver on cherry black, the two pairs the client's rules force onto every frame, both clear the AAA threshold of 7:1 for normal text. Restraint and legibility asked for the same thing here: light text, dark ground, nothing in between.

Decision three

No prices, anywhere

Every price mention was removed from the concept. Tiers appear as three text slips on a single velvet still, closing with one line: Investment discussed at your consultation.

The hero still on a 390-pixel phone: roses and pearls, the verbatim headline, and the framed Book A Consultation slate, all holding the same composition as desktop — The reel at 390px. Same grammar, one column.

The tiers still on mobile: Your path to lasting love over dark velvet, with the Essential and Elite tiers as small text slips, six months standard engagement and twelve months high priority — Tiers as text slips on velvet: a name and a duration, nothing more.

Why a number would break the room

A price is the loudest element a page can carry; it converts a private consultation into a checkout. Naming the tiers and their durations while routing the number itself to the consultation keeps the page inside the service's own manner: discretion first, specifics in person. And the slate stays honest about what it offers: it books a conversation.

Decision four

One warm detail: the ember cursor

With buttons and color mostly off the table, the site's single flourish is an ember that trails the cursor over a fine candlelight grain, with a candle-flicker vignette breathing at the frame's edge. It is kept deliberately, the one place the interface admits it is alive.

A testimonial still: two pairs of hands intertwined across a dinner table, an engagement ring catching the light, with the client quote in gold serif at lower left — The testimonial frame. Grain, vignette, and the ember are the only things the interface adds to the photograph.

Why one, and only one

A restrained page with zero signs of life reads as unfinished rather than expensive. The ember is small, warm, and matches the candlelight already in every still, so it registers as part of the photography. Adding a second flourish anywhere would start an arms race with the first, which is why the count stays at one.

Where it stands

A live concept, not a shipped client engagement. What the build holds:

accent-colored call-to-action buttons anywhere

prices on the page; tiers close at the consultation line

locked hexes, the entire color vocabulary

~5%

gold surface budget per the client's usage rule

3 → 1

static comps to one direction, picked in one round

AAA

both palette-forced text pairs, 9.22:1 and 10.46:1

The honest caveat

This is a concept demo. It runs live at a Vercel demo URL, its copy is quoted from the client's existing site, and the direction and palette were approved through the client's assistant, but it is not a commissioned production build and no engagement outcome is claimed. What it demonstrates is the craft position: that a dark, restrained, nearly buttonless page can carry a persuasive argument, and that the client's locked constraints did the design a favor.

What working on it taught me

Discretion on the web is mostly about what you refuse to add. The other lesson was procedural: after eight argued-and-rejected directions, three finished frames settled it in one round. I run direction disputes on finished frames now.

Maria Angelika AgutayaWorkflow Engineer · mariaangelika.com · Concept designed and built, 2026