How we define "better"

Better is a floor, plus a taste.

A redesign is not "better" because it beats a dated site. It is better when it clears a non-negotiable quality floor and then faithfully executes one of five named taste templates, each distilled from the studios and interactions Quan hand-picked. Pick the template, hit the floor, ship. Miss either, it does not go out.

The floor · hard gates (block ship)

  • Image crispness. Source native width ≥ 2× display width. Zero upscaling. Soft image = fail.
  • Contrast. WCAG AA 4.5:1 on all text. 44px touch targets.
  • Type floor. No rendered text under 14px, ever.
  • Headings measured. One line desktop, first line longest, verified per-line.
  • Slop lint. impeccable exit 0. Zero owner-rule violations. No em dashes.

The taste · execute a template (score)

  • Type / color / grid DNA match the chosen template, not generic premium.
  • Signature moves deployed. Each template carries named interactions from our effects library.
  • Beat the old site on every axis, and never regress on image quality.
  • Low-res client photos do not lower the bar, they pick the template: type-led over photo-led.

Editorial Brut

Oversized kinetic type is the art. Strict grid, near-monochrome, one loud accent. Photos are small and razor-sharp, never the crutch.

scroll · hover the button
Type thatrefuses towhisper.
Type · Syne + Chivo Mono
Big grotesk display
mono for labels + numerals
Palette · ink + acid accent
Signature moves
line-mask revealmagnetic cursormarquee bandstrict 12-col
Named restaurants & venues with a strong wordmark, agencies, any brand where the story carries. Perfect when photos are too low-res for full-bleed.

Cinematic Atmosphere

Full-bleed graded media, moody dark, slow confident motion, one warm accent glow. Demands crisp or video assets, this template is off the table without them.

scroll · move mouse
Napa Valley · Est. 1889
A different kind of evening.
Warm graded imagery, a slow reveal, and a single point of light. Restraint reads as expensive.
Type · Bodoni Moda
High-contrast serif
with italic accents
Palette · espresso + gold glow
Signature moves
image reveal maskparallax depthcursor spotlightslow fade
Fine dining, hospitality, wineries, luxury. The look the first four builds reached for, now with crispness as a hard requirement.

Kinetic Play

Vibrant color, the mouse controls the motion, playful transitions, breaks the grid on purpose. Confidence, not chaos.

MOUSE MOVES
THE WORLD.
springyelasticoff-gridloud
Type · Bricolage Grotesque
Characterful & bold
mixed weights, tight tracking
Palette · vibrant triad
Signature moves
mouse-drives-animationcursor distortiondrag-inertia galleryelastic hover
Character food brands, lifestyle, events, anything young and confident. High personality, needs an owner who wants bold.

Calm Precision

Fintech restraint. Generous whitespace, precise micro-motion, subtle gradient and glass done right, near-monochrome with a refined accent. Trust first.

scroll
Precise. Quiet. Expensive.
99
Lighthouse
150ms
micro-motion
AA+
contrast
Type · Manrope
Clean humanist sans
optional serif accent for warmth
Palette · slate + cool accent
Signature moves
staggered reveal150ms micro-interactionsanimated gradient borderglass restraint
Services that sell trust: dental, med spa, legal, financial, B2B. The med-spa and dental targets in the pipeline live here.

Immersive 3D

An interactive WebGL object is the centerpiece. Cursor and scroll drive the scene. The highest effort and asset cost, reserved for statements. The portfolio globe already lives here.

css-3d preview
WORK
3D
SPIN
DRAG
WebGL
SCENE
→ see it live: the Work globe
Type · Hanken Grotesk + mono
Tech-minimal sans
HUD-style mono readouts
Palette · deep space + plasma cyan
Signature moves
webgl scenehold-to-revealscroll-scrubbed cameraraycast interaction
Monmac's own site, tech and product flagships, one hero moment per brand. Requires three.js and served over https.