The everyday toolkit.

Good things. Every day.

Arial / Helvetica / sans-serif. A restrained scale, generous spacing and a shared fluid page gutter.

:root {
  --paper: #faf8f3;
  --ink: #173c3c;
  --coral: #c43e28;
  --gap: clamp(24px, 4.5vw, 72px);
}

<a class="primary" href="shop.html">
  Explore the collection ↗
</a>
<button data-open="search">Search products</button>

HTML for one product card. Include assets/css/base.css and assets/css/home.css for styling, plus assets/js/catalog-data.js before assets/js/store.js for quick-add. assets/js/wishlist.js and assets/css/wishlist.css add the save control. Quick-add also requires the shared quick-view and bag dialogs from this page.

<article class="product-card">
  <div class="card-image">
    <a href="product.html?id=canvas">
      <img src="assets/img/sneaker.webp" width="1254" height="1254"
           alt="The Everyday Canvas in Midnight / Ecru" loading="lazy">
    </a>
    <button type="button" data-add="canvas"
            aria-label="Choose options for The Everyday Canvas">+</button>
  </div>
  <div class="card-info">
    <div>
      <h3><a href="product.html?id=canvas">The Everyday Canvas</a></h3>
      <p>Midnight / Ecru</p>
    </div>
    <span>€68</span>
  </div>
</article>

Dialogs close with Escape and restore focus to their opener. The header wishlist uses a dropdown with outside-click and focus-leave dismissal.

−21%

WEAR / MIDNIGHT

The Everyday Canvas

Original price €68Sale price €54

In stock · choose your size

Explore the sneaker ↗

Just landed

CARRY / CARAMEL

The Take-it-all Tote

€48

Ready for your everyday

Meet your new companion ↗

Currently unavailable

HOME / SAGE

The Morning Cup

€24

Good things are worth the wait.

Sold out

Illustrative promotion and stock states. Demo product pages retain their standard prices and availability.

<div class="merch-grid">
  <article class="merch-item"><div class="merch-image"><img src="assets/img/sneaker.webp" alt="Midnight canvas sneakers"><span class="merch-label sale">−21%</span></div><div class="merch-copy"><span class="eyebrow">WEAR / MIDNIGHT</span><h3>The Everyday Canvas</h3><p class="merch-price merch-price-sale"><span class="sr-only">Original price </span><del>€68</del><span class="sr-only">Sale price </span><strong>€54</strong></p><p class="merch-stock">In stock · choose your size</p><a href="product.html?id=canvas">Explore the sneaker ↗</a></div></article>
  <article class="merch-item"><div class="merch-image"><img src="assets/img/tote.webp" alt="Caramel canvas tote"><span class="merch-label">Just landed</span></div><div class="merch-copy"><span class="eyebrow">CARRY / CARAMEL</span><h3>The Take-it-all Tote</h3><p class="merch-price">€48</p><p class="merch-stock">Ready for your everyday</p><a href="product.html?id=tote">Meet your new companion ↗</a></div></article>
  <article class="merch-item"><div class="merch-image"><img src="assets/img/cup.webp" alt="Sage ceramic cup"><span class="merch-label unavailable">Currently unavailable</span></div><div class="merch-copy"><span class="eyebrow">HOME / SAGE</span><h3>The Morning Cup</h3><p class="merch-price">€24</p><p class="merch-stock">Good things are worth the wait.</p><button class="text-button" disabled>Sold out</button></div></article>
</div><p class="kit-caption">Illustrative promotion and stock states. Demo product pages retain their standard prices and availability.</p>

<fieldset class="kit-options"><legend>Size — choose one</legend><label><input type="radio" name="kit-size" value="EU 38"> EU 38</label><label><input type="radio" name="kit-size" value="EU 39" checked> EU 39</label><label><input type="radio" name="kit-size" value="EU 40"> EU 40</label><label><input type="radio" name="kit-size" disabled> EU 43 · sold out</label></fieldset><p><a href="product.html?id=canvas">Try colour, image and price changes →</a></p>

A LITTLE CLOSER

Good things.
Free delivery.

Add €32 more to unlock free standard delivery.

Your bag · €68€10068%

Calculated after discounts. Standard delivery only.

Find your next everyday favorite ↗

YOUR BAG / EXAMPLE

The Everyday Canvas

Midnight / Ecru · EU 39

1 item · €68

Subtotal

€68

Standard delivery

€5

Total Tax included

€73

View your actual bag ↗

<div class="delivery-example"><div class="delivery-milestone"><span class="eyebrow">A LITTLE CLOSER</span><h3>Good things.<br>Free delivery.</h3><p>Add <strong>€32</strong> more to unlock free standard delivery.</p><label class="delivery-label" for="kit-delivery"><span>Your bag · €68</span><span>€100</span></label><progress id="kit-delivery" value="68" max="100">68%</progress><p class="delivery-footnote">Calculated after discounts. Standard delivery only.</p><a href="shop.html">Find your next everyday favorite ↗</a></div><div class="delivery-summary"><span class="eyebrow">YOUR BAG / EXAMPLE</span><div class="delivery-product"><img src="assets/img/sneaker.webp" alt="Midnight canvas sneakers"><div><h3>The Everyday Canvas</h3><p>Midnight / Ecru · EU 39</p><span>1 item · €68</span></div></div><dl class="kit-totals"><div><dt>Subtotal</dt><dd>€68</dd></div><div><dt>Standard delivery</dt><dd>€5</dd></div><div class="delivery-total"><dt>Total <small>Tax included</small></dt><dd>€73</dd></div></dl><a class="primary" href="cart.html">View your actual bag <span>↗</span></a></div></div>

<dl class="kit-totals"><div><dt>Material</dt><dd>Cotton canvas</dd></div><div><dt>Dimensions</dt><dd>38 × 42 cm</dd></div><div><dt>Care</dt><dd>Spot clean gently</dd></div></dl><details class="catalog-disclosure"><summary>Gifting & packaging</summary><p>Example content: present packaging choices and gift-note limits here. Connect fulfillment options in a platform edition.</p></details>

<div class="kit-table"><table><caption>Illustrative everyday bags</caption><thead><tr><th scope="col">Feature</th><th scope="col">Tote</th><th scope="col">Pouch</th></tr></thead><tbody><tr><th scope="row">Price</th><td>€48</td><td>€26</td></tr><tr><th scope="row">Best for</th><td>Daily carry</td><td>Small essentials</td></tr><tr><th scope="row">Explore</th><td><a href="product.html?id=tote">View tote</a></td><td><a href="product.html?id=pouch">View pouch</a></td></tr></tbody></table></div>

<article class="kit-review"><span>Illustrative review · fictional customer</span><p aria-label="4 out of 5 stars">★★★★☆</p><h3>A useful everyday companion.</h3><p>“Room for the daily essentials, with an easy shape to carry.”</p><p>Alex · Example review</p></article><div class="catalog-notice"><strong>No reviews yet</strong><p>Be the first to share your experience. Reviews require a connected review service.</p></div>

THE FINISHING TOUCH

A good thing to give.

Add a personal note to your everyday essential.

Gift wrap · €4Your message (optional, 160 characters) Preview gift options ↗

<form id="kit-gift" class="kit-gift"><div><span class="eyebrow">THE FINISHING TOUCH</span><h3>A good thing to give.</h3><p>Add a personal note to your everyday essential.</p><label class="catalog-choice"><input type="checkbox" name="wrap"> Gift wrap · €4</label><label for="gift-note">Your message <span>(optional, 160 characters)</span></label><textarea id="gift-note" name="note" maxlength="160" rows="3" placeholder="A little something for you…"></textarea><button class="primary" type="submit">Preview gift options ↗</button><p id="gift-status" role="status"></p></div><img src="assets/img/tote.webp" alt="Caramel canvas tote"></form>

YOUR MORNING RITUAL

A slower start.

The Morning Cup €24 The Everyday Bowl €22

Total €46

Add selected to bag ↗

Uses the local demo bag. Items retain their individual prices; no bundle discount is applied.

<form id="kit-bundle"><span class="eyebrow">YOUR MORNING RITUAL</span><h3 class="bundle-title">A slower start.</h3><div class="bundle-grid"><label><img src="assets/img/cup.webp" alt="Sage ceramic cup"><span><input type="checkbox" name="bundle" value="cup" checked> The Morning Cup <strong>€24</strong></span></label><label><img src="assets/img/bowl.webp" alt="Speckled ceramic bowl"><span><input type="checkbox" name="bundle" value="bowl" checked> The Everyday Bowl <strong>€22</strong></span></label></div><div class="bundle-action"><p>Total <strong id="bundle-total" aria-live="polite">€46</strong></p><button class="primary" type="submit">Add selected to bag ↗</button></div><p id="bundle-status" role="status"></p><p class="kit-caption">Uses the local demo bag. Items retain their individual prices; no bundle discount is applied.</p></form>

<form id="kit-stock" class="stock-example"><span class="eyebrow">BACK-IN-STOCK NOTIFICATION</span><h3>Your size. Next time.</h3><p>The Everyday Canvas · Midnight / Ecru · EU 43</p><label for="stock-email">Email address</label><div class="stock-composer"><input id="stock-email" type="email" required autocomplete="off" placeholder="you@example.com"><button class="primary" type="submit">Notify me ↗</button></div><p id="stock-status" role="status"></p><p class="kit-caption">Form preview only. No email is saved or sent, and no notification subscription is created.</p></form>

Wear Easy layers ↗Carry Take it with you ↗Home Small daily rituals ↗

<div class="collection-tiles"><a href="shop.html?category=Wear"><img src="assets/img/overshirt.webp" alt="Slate overshirt"><span>Wear <b>Easy layers ↗</b></span></a><a href="shop.html?category=Carry"><img src="assets/img/tote.webp" alt="Caramel tote"><span>Carry <b>Take it with you ↗</b></span></a><a href="shop.html?category=Home"><img src="assets/img/cup.webp" alt="Sage cup"><span>Home <b>Small daily rituals ↗</b></span></a></div>

<form id="kit-filter" class="filter-example"><label>Collection<select name="category"><option value="All">All essentials</option><option>Wear</option><option>Carry</option><option>Home</option></select></label><label>Maximum price<select name="budget"><option value="100">Up to €100</option><option value="50">Up to €50</option><option value="25">Up to €25</option></select></label><button type="reset" class="text-button">Clear filters</button></form><p id="filter-summary" role="status"></p><div id="kit-filter-results" class="product-grid"></div>

<div id="kit-page-results" class="product-grid"></div><nav class="kit-pagination" aria-label="Example product pagination"><button type="button" data-kit-page="previous">← Previous</button><div><button type="button" data-kit-page="1" aria-current="page">1</button><button type="button" data-kit-page="2">2</button></div><button type="button" data-kit-page="next">Next →</button></nav><p id="kit-page-status" role="status"></p>

<form id="kit-shipping" class="shipping-options"><label><input type="radio" name="shipping" value="5" checked><span><strong>Standard delivery</strong><small>Illustrative estimate · 3–5 working days</small></span><b>€5</b></label><label><input type="radio" name="shipping" value="12"><span><strong>Express delivery</strong><small>Illustrative estimate · 1–2 working days</small></span><b>€12</b></label><div class="shipping-total"><span>Example €68 basket + delivery</span><strong id="kit-shipping-total" role="status">€73</strong></div><p class="kit-caption">Selection updates this example only. Live delivery rates and estimates must come from the commerce platform.</p></form>

<div class="order-example"><span class="eyebrow">EXAMPLE ORDER / VD-1042</span><h3>On its way to you.</h3><ol class="kit-timeline"><li><span aria-hidden="true">✓</span><div><strong>Order confirmed</strong><p>Your everyday essentials are reserved.</p></div></li><li><span aria-hidden="true">✓</span><div><strong>Packed with care</strong><p>Ready for the next part of the journey.</p></div></li><li aria-current="step"><span aria-hidden="true">3</span><div><strong>In transit</strong><p>Your parcel is on its way. Tracking is a demo.</p></div></li><li><span aria-hidden="true">4</span><div><strong>Delivered</strong><p>Still to come.</p></div></li></ol><a class="text-button" href="tracking.html">Explore order tracking ↗</a></div>

<div class="club-example"><div><span class="eyebrow">THE VENDER CLUB</span><h3>Good things.<br>A little closer.</h3><p>Keep your favorites together and make room for what’s next.</p><a class="primary" href="members-club.html">Explore the club ↗</a></div><ul><li><span>01</span><div><strong>Your personal edit</strong><p>Save the pieces you keep coming back to.</p></div></li><li><span>02</span><div><strong>Every order, together</strong><p>A home for purchases and their progress.</p></div></li><li><span>03</span><div><strong>Something to look forward to</strong><p>Discover the next collection.</p></div></li></ul></div><p class="kit-caption">Membership benefits are illustrative; no account or subscription is created by this component.</p>

THE JOURNAL / EVERYDAY LIFE

A bag for the day.
And everything in it.

Small essentials, familiar routines, and a little room for the unexpected.

Read the story ↗

<article class="editorial-example"><img src="assets/img/tote.webp" alt="Everyday canvas tote"><div><span class="eyebrow">THE JOURNAL / EVERYDAY LIFE</span><h3>A bag for the day.<br>And everything in it.</h3><p>Small essentials, familiar routines, and a little room for the unexpected.</p><a href="journal-a-bag-for-the-day.html">Read the story ↗</a></div></article>

<div class="size-reference"><div><span class="eyebrow">FIT NOTES / CANVAS SNEAKER</span><h3>A little guidance.<br>A better fit.</h3><p>Measure heel to toe while standing. Compare your measurement with the example chart.</p><p class="kit-caption">Illustrative measurements only. Replace with verified supplier sizing before release.</p></div><div class="kit-table"><table><caption>Example size guide</caption><thead><tr><th scope="col">EU size</th><th scope="col">Foot length</th></tr></thead><tbody><tr><th scope="row">38</th><td>24 cm</td></tr><tr><th scope="row">39</th><td>24.5 cm</td></tr><tr><th scope="row">40</th><td>25 cm</td></tr><tr><th scope="row">41</th><td>26 cm</td></tr></tbody></table></div></div>

<div class="product-questions"><details open><summary>How does the canvas sneaker fit?</summary><p>Open the size guide on the product page to explore the example measurements. A live store should provide verified fit guidance.</p></details><details><summary>How should I care for it?</summary><p>Gently spot clean the canvas with a damp cloth. These are sample care notes; follow the manufacturer’s instructions for your product.</p></details><details><summary>Can I send this as a gift?</summary><p>The gifting component previews wrap and a personal note. Fulfillment options require a connected store.</p></details><a href="contact.html">Still wondering? Get in touch ↗</a></div>

<div class="rating-example"><div><span class="eyebrow">ILLUSTRATIVE CUSTOMER RATINGS</span><p class="rating-score">4.6<span>/ 5</span></p><p>Based on 20 fictional ratings</p></div><div class="rating-bars"><label>5 stars <meter min="0" max="20" value="14">14 of 20</meter><span>14</span></label><label>4 stars <meter min="0" max="20" value="4">4 of 20</meter><span>4</span></label><label>3 stars <meter min="0" max="20" value="2">2 of 20</meter><span>2</span></label><label>2 stars <meter min="0" max="20" value="0">0 of 20</meter><span>0</span></label><label>1 star <meter min="0" max="20" value="0">0 of 20</meter><span>0</span></label></div></div>

<form id="component-review-form" class="catalog-form"><h3>Write an example review</h3><label for="review-rating">Rating<select id="review-rating" required><option value="">Choose a rating</option><option>5 — Excellent</option><option>4 — Good</option><option>3 — Average</option><option>2 — Fair</option><option>1 — Poor</option></select></label><label for="review-title">Review title<input id="review-title" required maxlength="80" autocomplete="off"></label><label for="review-copy">Your review<textarea id="review-copy" required maxlength="1000" rows="4"></textarea></label><button class="primary" type="submit">Preview review →</button><p id="review-form-status" role="status"></p><p class="kit-caption">Local form demonstration. Nothing is published, saved or sent.</p></form><div id="review-form-preview"></div>

<div class="recent-heading"><p>A sample of previously explored essentials.</p><button type="button" id="kit-clear-recent" class="text-button">Clear example history</button></div><div id="kit-recent-products" class="product-grid"></div><p id="kit-recent-status" role="status"></p><button type="button" id="kit-restore-recent" class="text-button" hidden>Restore example items ↗</button><p class="kit-caption">Example history is held in this page only. This component does not track your browsing.</p>

<form id="kit-gift-card" class="gift-card-example"><div class="gift-card-art"><span>vender</span><p>A little something.<br>Just for you.</p><strong id="gift-card-face">€50</strong><small>GIFT CARD / DESIGN PREVIEW</small></div><div><span class="eyebrow">THE GIFT OF CHOICE</span><h3>Their kind of good thing.</h3><fieldset class="kit-options"><legend>Choose an amount</legend><label><input type="radio" name="amount" value="25"> €25</label><label><input type="radio" name="amount" value="50" checked> €50</label><label><input type="radio" name="amount" value="100"> €100</label></fieldset><p id="gift-card-status" role="status">€50 selected. Preview only; no gift card is issued.</p><p class="kit-caption">A native edition needs gift-card issuance, delivery and redemption supplied by the platform or an integration.</p></div></form>

<form id="kit-coupon" class="coupon-example"><span class="eyebrow">EXAMPLE ORDER / €68 SUBTOTAL</span><h3>Have a welcome code?</h3><label for="kit-coupon-code">Discount code</label><div class="stock-composer"><input id="kit-coupon-code" name="code" autocomplete="off" placeholder="Try WELCOME10" required><button class="primary" type="submit">Apply code ↗</button></div><p id="kit-coupon-status" role="status"></p><dl class="kit-totals"><div><dt>Discount</dt><dd id="kit-coupon-saving">€0.00</dd></div><div><dt>Subtotal after discount</dt><dd id="kit-coupon-total">€68.00</dd></div></dl><button type="button" id="kit-remove-coupon" class="text-button" hidden>Remove discount</button><p class="kit-caption">Isolated example: WELCOME10 takes 10% off €68. Shipping and taxes are not recalculated here. Your actual bag is unchanged.</p></form>

Integration limits and source ownership are documented in CUSTOMIZATION.md and INTEGRATIONS.md alongside these files.