MoyChayDiscovery

Hidden teas.
Real discoveries.

Tea and teaware from our Amsterdam tea house. Follow your curiosity. We’ll help with the names.

Explore the shelves

Touch something that catches your eye.

Explore the collection

  • Deep, dark & mellow

    Deep, dark & mellow

    A smooth, earthy cup with a soft, sweet finish. A place to start with darker tea.

    • Earthy
    • Honeyed
    Choose an option for Deep, dark & mellow

    Lot & product details

    Vietnamese Ancient Tree Shu Puer (2020), 100g

    View original product
  • Toasty & fragrant

    Toasty & fragrant

    Warm, toasted flavours, a little floral fragrance and a lingering sweetness.

    • Toasty
    • Floral
    Choose an option for Toasty & fragrant

    Lot & product details

    Wild Qizhong Oolong from Wuyishan

    View original product

    Tea sold by weight. Display glass not included.

  • A little white brewing bowl

    A little white brewing bowl

    A simple lidded bowl for small, repeated brews. Hold the lid slightly open when pouring.

    Choose an option for A little white brewing bowl

    Lot & product details

    Classic Dehua White Porcelain Gaiwan #95008

    View original product
  • Warm spice, soft sweetness

    Warm spice, soft sweetness

    A toasty tea with a fragrant, spicy edge. For people who enjoy warm, rounded flavours.

    • Toasty
    • Honeyed
    Choose an option for Warm spice, soft sweetness

    Lot & product details

    Lotus Peak Cinnamon Rougui Oolong

    View original product

    Tea sold by weight. Display glass not included.

  • See every brew

    See every brew

    A clear teapot that lets you watch the leaves open and the colour deepen.

    Choose an option for See every brew

    Lot & product details

    Tea kettle, glass #11875, 600 ml

    View original product
  • Light & delicate

    Light & delicate

    An easy way into lighter tea: an airy leaf, a gentle cup and room to notice the details.

    • Fresh
    • Floral
    Choose an option for Light & delicate

    Lot & product details

    Zhenghe Bai Mu Dan

    View original product

    Tea sold by weight. Display glass not included.

  • A few different directions

    A few different directions

    A ready-to-give selection for comparing different teas. A starting point for two curious people.

    Choose an option for A few different directions

    Lot & product details

    Puer Tea Experience Set (Sheng & Shu Selection)

    View original product
  • Flowers & fruit

    Flowers & fruit

    Fragrant and rounded, with a fruity side. Try a little first and follow what you enjoy.

    • Floral
    • Fruity
    Choose an option for Flowers & fruit

    Lot & product details

    Floral–Fruity Rougui Rock Oolong

    View original product

    Tea sold by weight. Display glass not included.

  • A deeper roast

    A deeper roast

    Fuller, toasted flavours with a long finish. Try this when light teas leave you wanting more.

    • Toasty
    Choose an option for A deeper roast

    Lot & product details

    North Star Rock Oolong

    View original product

    Tea sold by weight. Display glass not included.

  • Small cake, big curiosity

    Small cake, big curiosity

    A compact pressed cake. Break off a little and explore the darker side of tea, one brew at a time.

    • Earthy
    Choose an option for Small cake, big curiosity

    Lot & product details

    SHU LONG CHA BING, 50g

    View original product
  • Toasty & rounded

    Toasty & rounded

    A warm, rounded cup to stay with for a while. Start with a small amount and adjust to your taste.

    • Toasty
    • Honeyed
    Choose an option for Toasty & rounded

    Lot & product details

    Golden Buddha Big Red Robe Rock Oolong

    View original product

    Tea sold by weight. Display glass not included.

  • Fresh & fragrant

    Fresh & fragrant

    A fragrant direction to explore. Watch the tightly shaped leaves open as you brew.

    • Floral
    • Fresh
    Choose an option for Fresh & fragrant

    Lot & product details

    Tie Guan Yin Gande Nong Xiang

    View original product

    Tea sold by weight. Display glass not included.

  • Something to share

    Something to share

    A small selection to open together, taste side by side and find a favourite.

    Choose an option for Something to share

    Lot & product details

    Pu-erh Tea Set #4

    View original product
  • Smooth, dark & cocoa-like

    Smooth, dark & cocoa-like

    A silky dark tea with woody notes and a little sweetness. A different route into earthy flavours.

    • Earthy
    Choose an option for Smooth, dark & cocoa-like

    Lot & product details

    BULANG GONG TING SHU CHA (2024)

    View original product
Open the design-system reference

MoyChay DISCOVERY · interactive reference · 0.6

The shop, taken apart.

One set of components, with the states exposed. Explore the interface here; return to the shelves at any time.

One object. Every state.

The same Product component, image and inspection layer used on the shelves.

  • Toasty & fragrant

    Toasty & fragrant

    Warm, toasted flavours, a little floral fragrance and a lingering sweetness.

    • Toasty
    • Floral
    Choose an option for Toasty & fragrant

    Lot & product details

    Wild Qizhong Oolong from Wuyishan

    View original product

    Tea sold by weight. Display glass not included.

Same-image contract

Inspecting never clones, translates or rescales the product. The border and information are an overlay. On phones the information opens in the next full-width grid track after its subject. A following item flows below the description; source order is preserved. The selected image itself is not repositioned. The original summary also provides a visible Close control, with no script required.

Complete shopping behavior

This separate playground demonstrates enhanced sample commerce: feedback, a modal bag and a checkout simulation. The live catalogue uses ordinary links and forms to continue at Moychay while headless purchasing is being configured.

The bag

Add a portion, change its quantity, remove it, or continue through the checkout preview.

Feedback you can test

A failed request preserves the selected amount. On phones the result and View bag action stay beside the purchase button, without a second floating toast.

Bao, above the shop

A photographic guide, outside the grid. The closed phone control is compact. Suggestions mark a few objects; following one closes the conversation, not the guide.

Quiet foundations

White space and real objects carry the experience. A small shared token set keeps the interface consistent.

Canvas--canvas#ffffff
Ink--ink#202b25
Secondary text--muted#59645d
Action / focus--accent#275c49
Rule--rule#e2e6e1
Shelf edge--wood-edge#b18a60

Type

Follow your curiosity.

Toasty & fragrant

A warm, rounded cup with a little sweetness. Familiar words before specialist names.

Original lot name stays one disclosure away.

Display
Georgia · fluid 2.4–4.25 rem
Interface
System sans · 1 rem base
Number style
Tabular prices

Actions & fields

Hints supplement labels; they do not replace them.
Enter an email address, such as name@example.com.

Small clues, in plain language

Use two or three relevant icons with labels on an inspected tea. This is a vocabulary, not a navigation taxonomy.

  • Floral
  • Toasty
  • Earthy
  • Honeyed
  • Fruity
  • Fresh

Space

0.25 · 0.5 · 0.75 · 1 · 1.5 · 2 · 3 rem

Product breathing room lives inside grid tracks, so shelf segments stay continuous.

Targets & focus

At least 44 px for buttons and portion rows. Two-pixel focus outline with a three-pixel offset.

Motion

Only in response to an action. Reduced-motion preferences remove nonessential transitions and spinners.

Layers that can change independently

DocumentHeader, introduction, one product list, footer
CommerceProduct IDs, variants, availability, money
PresentationFriendly copy, sensory cues, media
Layout & sceneryAutomatic grid, repeating plank, circle mask
InteractionInspection, purchase feedback, bag, Bao

The shelf contract

One list, forward CSS Grid placement. Phone items are paired by CSS before any script runs. Every occupied image stage paints the same cached strip artwork. Adjacent fragments join into a continuous ledge. Empty tracks have no plank, and there is no script-measured background to trim.

Only wide, round and round-tall change a product’s span. A tall circle reserves two rows on desktop and becomes a single circular slot beside another item on phones. Its white interior masks the continuous plank.

No row wrappers, ordinary-product coordinates, forced breaks or dense packing. CSS owns both open and closed layouts. The customer enhancement reads no geometry, observes no resize, and writes no shelf coordinates.

The interaction contract

Pointer
Hover previews; click keeps it open.
Keyboard
Enter opens; optional enhancement adds Escape dismissal.
Touch
Tap the object; native details follow it in a full-width grid track on current browsers. Both columns use the same component. A following sibling flows below an open description.
No JavaScript
Descriptions, real portions and product-page handoff remain present. The separate native sample server exercises ordinary POST forms and checkout review; a downloaded file cannot host those endpoints.
Modal bag
Focus stays inside; Escape returns to the opener.
Hover-first baseline, separate enhancements

The default live document does not include this playground, its catalogue JSON, modal panels or simulation controller. Product details, prices and native handoff forms render on the server. Desktop hover is CSS and works before scripts load. Pointer-state synchronisation, pinning and Escape are an optional module, disabled by default. No feature script measures a product, shelf or viewport.

Previous layout repair: 0.4

The previous phone pairing depended on a script-added attribute. That dependency is removed. The no-script layout has the same two columns; desktop increases to four columns at a room width of 56 rem. Ring ledges share the straight shelf baseline. A phone inspector spans the available row, with readable 44 px portion targets. The bag keeps its total and checkout action outside the item scroller. The design reference opens from navigation and remembers browsing position when you return.

Next.js / Vercel Shop integration boundary
Server component
  readCatalogue → adaptProduct → DiscoverySurface

Current read-only purchase renderer
  <form action={product.href} method="get">
    <VariantOptions name="variant" />
    <button>Continue at Moychay</button>
  </form>

Optional module, loaded on intent
  enhanceDiscovery(root)
  → native-state synchronisation, pinning and Escape
  → no geometry reads or layout writes

Reference only
  enhanceReference(root, referenceProducts)
  → sample bag, scenarios, local checkout

Never import reference-data into production commerce.

What each asset actually is

Four images are catalogue-reference cutouts; the other bundled images come from the approved visual concepts. They demonstrate the presentation, not verified replacement product photography. All prices and quantities on this reference are illustrative.

Asset preparation for the live storefront

The live route uses actual Shopify gallery records, not these fixtures. Replace live media only with the actual lot photos or reviewed, source-based glass displays. Keep the item IDs, component markup, alpha transparency and intrinsic image dimensions consistent. That is an asset update, not a redesign.

Reference 0.6 · DOM-first · no live transactions

Sample shopping session

Your bag 0

A little room for discovery.

Take a closer look at something on the shelves. Your choices will appear here.

    Reference flow · no real order

    A few final details

    Only used to demonstrate the form. Not sent or saved.
    How would you like to receive it?
    Sample total€0.00

    Your sample bag

    The interactive sample bag uses JavaScript. The catalogue, portion choices and product links still work without it.

    Open your Moychay bag
    Sample prices · interactive design reference