Back to demoTHIS THEME’S OWN COMPONENT BOOKID

Nacre Rituals / DESIGN & COMPONENTS

Nacre Rituals
Made of its own parts.

See 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.

01 / Palette & type

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.

Card stock#f4eeec
Cocoa ink#3a2420
Abalone#1d5a6e
Counter#e2d4cd
Clay#c58d72
Pearl sheen#d3dfe3

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.

02 / Composition & behavior

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.

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.

03 / Controls, including the edges

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.

Component inventory (scroll to inspect)

  1. 01
    Swatch card: six numbered, drawn swatches and a loupe

    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.

  2. 02
    Sorting by number or runny → firm

    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.

  3. 03
    A bottle label with front and back for every swatch

    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.

  4. 04
    Two-sided ritual card: morning and evening, up to five steps

    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.

  5. 05
    A6 card print and TXT export

    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.

  6. 06
    Own component and state book

    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.

  7. 07
    Local brand personalization

    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.

  8. 08
    Select, tooltip & scroll area

    Keyboard behavior is shared; this theme owns the popup colors, border, radius, type and focus.

  9. 09
    Export & limits

    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.

READ THE DESIGN

Why it is arranged this way.

The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.

Actual desktop capture of the Nacre Rituals demonstration.123
Actual website capture. Follow the numbered notes.
  1. 01

    A swatch card, not a header

    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.

  2. 02

    The cards behind are the navigation

    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.

  3. 03

    Facts are texture, vessel and scent

    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.

04 / Form & feedback contract

A local preparation note. Try an empty submission, correct it, then export your actual input.

10–1,000 characters. Kept in this page.

Your prepared note will appear here.

05 / Actual working components

Activate the full workspace when you want to inspect it. Its interaction code loads on demand.