Ronald Prata Joias
From the window to the till, in low light.
A prospecting package for a real jeweller, made without a commission: visual identity, website, a commercial proposal as a PDF and a demo CRM. The direction, "Penumbra", is window-dressing technique (a dark ground and one light source per piece), and the site shortens the path to purchase: a pre-filtered catalogue, a wholesale page of its own and WhatsApp always in reach.
- Identity, website and demo CRM
- Website · Identity · Demo CRM · Concept
Context
What was live
- In Fortaleza since 2007: certified 925 silver, 18k and 10k gold, retail and wholesale
- 37k followers already in place
- Wholesale with its own terms: 40% off from 15 pieces up
- The catalogue lived inside social media
Challenge
The shop already had an audience; what was missing was the stretch between looking and buying.
In retail and wholesale since 2007, with 37k followers. But from what could be seen outside, the catalogue lived inside social media. The piece proposes that stretch: a shop window, a catalogue, a wholesale page and a demo CRM for orders.
Research
- The shop's public Facebook page and its catalogue, read before any screen was drawn.
- The facts the shop itself publishes: founding year, metals, certification and wholesale terms.
- Whatever only the shop would know went into the site as [CONFIRMAR] ("to confirm") instead of being made up.
Decisions
Low light as window-dressing technique
- That is how a street jeweller lights a display: a dominant dark ground and one light source per piece.
- One piece on screen at a time, a lot of emptiness around it, a serif with italic on one word per block.
- Less product fits on each screen: every piece gets the whole frame.
- Light does the work a gradient would have done.
The 3D ring that left the hero
- Torus geometry is not a ring: it is a metallic doughnut.
- The first version ran Three.js: a torus in MeshPhysicalMaterial, PMREM with RoomEnvironment and a sine-clamped rotation, so the ring never turned edge-on and read as a flat 2D sheet.
- It worked. And it was cut anyway, technical work and all.
- Retouched, cut-out photography in place of the technical toy.
A grid of rules, not of cards
- That is what separates a drawn layout from an assembled one.
- A line-coloured background behind the grid gap: the division shows up as a 1px thread.
- With no rounded corner and no shadow, separation rests on the thread alone.
- Services and locations divided by 1px threads.
A short path to the purchase
- Every click between the category and the product is a click lost.
- Categories open the catalogue already filtered, wholesale gets its own page with the terms (40% off from 15 pieces up) stated plainly, and WhatsApp floats on every page.
- The site doesn't close the sale: that still happens in the WhatsApp conversation.
- The path to purchase never leaves the screen.
Demonstration
First state of the hero. The silver piece, alone in the frame. 
One piece per screen. Light does the work a gradient would have done. 
An asymmetric bento: one category takes twice the room, and WhatsApp floats in the corner. 
A page of the proposal. Where real photos were missing, the preview itself says it is illustrative.
An unsolicited prospecting concept. This is not the official website of Ronald Prata Joias.
Interactions
- The hero alternates two states, silver and gold, always with a single piece in frame.
Implementation
- Visual QA with Playwright: scroll position and timing under control to check scroll-triggered animation across six breakpoints.
- Image cut-outs with rembg.
- The demo CRM is a Next.js hub, separate from the site.
What was built
- The "Penumbra" identity, with a brand manual
- A site whose catalogue opens already filtered by category
- A wholesale page with the terms stated plainly
- A demo CRM: a hub for orders and customers
- An illustrated commercial proposal, as a PDF
- Fields marked [CONFIRMAR] ("to confirm") wherever only the shop would know the answer
Technology
- rembg
- HTML
- CSS
- JavaScript
- Next.js
- Playwright
Outcome
An unsolicited concept. The package (proposal, website and demo CRM) was made as a prospecting piece and is not the shop's official website.
4
pieces in the package: identity, website, PDF proposal and demo CRM
3
visual directions I tested; two thrown out entirely
6
breakpoints checked by script in every QA round
Learnings
- Working is not the bar: the WebGL ring worked, and retouched photography won anyway.
- Of the three directions, I threw out two entirely; the one that stayed only passed after reopening colour, typography, layout and visual richness, not just the hero.
- Scroll-triggered animation only breaks at the wrong viewport, and a human eye does not sweep six breakpoints per round.
