Screenshot of Vrai

Vrai

www.vrai.com

a lab-grown fine-jewellery house whose homepage is a near-empty white gallery, a single yellow-gold solitaire ring floating in bright caustic light above a quiet centred serif headline, set in a black-on-white system with metal-named gradient tokens (white-gold, yellow-gold, rose-gold, platinum) and slow, refined cubic-bezier transitions.

Retail Jewellery strong

Design tokens

black
white
ink
lightest-grey
lighter-grey
light-grey
grey
dark-grey
teal
yellow-gold
rose-gold
platinum
display
mendesHeadingFont
body
mendesBodyFont (weight 350)
script
scriptMtFont
mono
none

Do / Don't

Reference it for

  • Quiet-luxury restraint: huge whitespace, one product in light, a small centred serif headline, a single understated CTA.
  • A strict black-on-white palette warmed only by metal tones, with metal-gradient tokens (yellow-gold #c8ab6e, rose-gold #ceac8b, platinum #c8c8c8, a white-gold gradient).
  • A humanist body face at a soft 350 weight paired with a heading face and a script accent.
  • Slow, refined CSS-native motion (0.5s cubic-bezier(0.4,0,0.2,1)) instead of any animation library.
  • Product-as-sculpture photography: bright caustic light, the stone floating on white.

Do not copy

  • The VRAI wordmark, the lab-grown / zero-emission positioning and the exact ring photography are brand identity; borrow the gallery treatment, not the assets.
  • mendesBodyFont, mendesHeadingFont and scriptMtFont are bespoke licensed faces; map to a humanist serif/sans plus a tasteful script.
  • The metal-gradient palette is tuned to VRAI's gold and platinum SKUs; re-derive metal tones from the client's actual range.

Signature moves

quiet-luxury gallery hero

a near-empty white gallery floats one product in bright caustic light above a small centred serif headline and a single understated CTA, with huge whitespace.

metal-gradient warmth tokens

a strict black-on-white palette is warmed only by metal-named gradient tokens (yellow-gold #c8ab6e, rose-gold #ceac8b, platinum #c8c8c8, a white-gold gradient).

slow refined CSS-native motion

motion is CSS-native at 0.5s cubic-bezier(0.4,0,0.2,1) (plus a decelerate curve) with no animation library, keeping the gallery feel calm.