twc-022 / A study by Syafril · not client work
A fictional small body-care workshop whose site is the swatch card at its counter: six numbered swatches drawn on one thick card with a pearl-foil edge, a loupe for a close look, a bottle label for each, and a two-sided ritual card to arrange, print or download.
READ THE DESIGN
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
Six swatches drawn on one foil-edged card are the product index; each is a radio, so arrows move the loupe. Sorting runny → firm slides them into place. Nothing is photographed and no swatch promises a result.
The bottle label and the ritual card peek from behind the active card with upright labels; they are ordinary links, next in focus after the wordmark. On a phone they become two strips above the card.
The loupe and the label’s back list only kind, thickness (dots with words), scent and vessel. The composition box stays empty for the owner; every export calls itself a concept, not a care recommendation.
#f4eeec#3a2420#1d5a6e#e2d4cd#c58d72#d3dfe3WHAT IS HERE / WHAT COMES NEXT
Let visitors see the texture before they ask.
This tool includes a working workspace and its own component book. Its controls operate on local state.
Exports are generated in your browser. No account, cloud storage or external service is connected.
Fictional design study. Nacre sells nothing and has no prices, ingredients or claims about skin or health; every product is an original drawing, with no photograph, and exports are local concept cards, not a care recommendation.
Page scope, brand assets, content, handover, hosting, costs and support are discussed in a consultation before work begins. The demo is a reference for that conversation.
Prepare a brief for this directionSee the texture first. At a care counter, testers are swiped onto a card so textures can be compared side by side; online, that card is an honest stand-in for touch: drawn, not photographed, with no promised result. Its parts are the interface: the foil-edged card frames every page, numbered swatches are the product index, a loupe gives the close look, a printed runny → firm scale sorts the card, the cards stacked behind it are the navigation, and a two-sided ritual card is what the visitor takes home.
Card stock, cocoa ink and abalone on a counter-pink ground; clay only inside the drawn swatches and bottles; a 3px pearl-sheen ring inside the card’s edge, without animation or texture. No photograph. Thickness reads as ●○ dots with words, a swatch already on a side is dashed and says so, and the active side is filled and pressed — never colour alone.
Bodoni Moda 500, the high-contrast Didone of perfume and care labels, sets titles, swatch numbers and the wordmark; its italic names the swatches, the “for …” line and the note. DM Sans reads facts, controls and steps.
Wordmark and storage status above the counter; the active card in front, the other two peeking from behind its right edge with upright labels. Below 900px the card fills the width and the other two become strips above it; text and actions come before the large drawings.
Two motions, both after a click and both through transform: sorting slides the swatches to their new places, and turning the label flips it over in 0.4 s. Reduced motion and constrained devices skip both; focus stays on the control that was pressed.
Static bilingual Next.js pages. The ritual card stays in this browser under its own key, validated with Zod on every read; the label number comes from ?n= in the URL. Print (A6, both sides) and TXT exports are made locally. No account, cart, price or server.
The swatches are one radio group (arrows, Home, End); sort order and card sides are pressed buttons; each step’s move and remove buttons are labelled and keep focus with the step; additions and refusals are announced. Thickness, “already on this side” and the active side are given in text as well as shape. Drawings are decorative beside their text; the vessel drawing carries its own description.
Configure a watch drawing and export its SVG.