mars.
storefrontA storefront for a hemp flower brand, sorted into three tiers, with a bag that remembers what you put in it.
In preview. Checkout is not connected yet.
The headache
A new brand needed its shop standing before checkout was connected. The store had to be complete enough to judge, and honest that it cannot take an order yet.
In the way: Checkout is not connected yet.
What I built: The bag and the checkout review are built, and the last step says in plain words that checkout is not connected and nothing is charged.
In the way: An age gate that depends on the catalog loading can fail with it.
What I built: The gate is its own small script on the page, so it still stands if the catalog fails to load.
In the way: A long catalog of similar products is hard to scan.
What I built: Three colour tiers, each on its own tinted stage, and one switch between bag and flower views.
In the way: A shopper who leaves loses their bag.
What I built: The bag is kept on the device, so it is still there on the next visit.
A single-page shop: catalog, product pages, reviews, lab, FAQ, shipping and the legal pages all open without a page reload. The catalog is sorted into black, pink and white tiers, and every product can be looked at as a bag, a bag with the flower, or the flower alone.
Up close
The look, and why
Near-black paper, #0B0B0D, with panels at #141416 and two pinks, #F0509A and #FF6FB0, doing all the pointing. Headings are Syne at its heaviest and the reading type is Manrope. Each tier gets its own tinted stage behind the product, so black, pink and white read as three shelves before a label is read. The age gate is a pixel-art Los Angeles skyline.
What does your website need to do?
Tell me about your business and the project you have in mind.