Built with Instant

Instant x Shopify – Supplement E-commerce Design & Build

New Lemon Studio

Shopify Supplement E-commerce Design & Build using Instant

(Figma → Instant → Shopify)

1. Goal

To create a minimalist, science-driven supplement brand that bridges clinical credibility with modern lifestyle appeal.
The objective was to design and develop a complete e-commerce experience — one that feels calm, trustworthy, and premium.

2. Design Direction

The brand’s visual language blends clinical precision and natural calm.
With inspiration from Ritual, Seed, and AG1, the brand focus on balance, structure, and quiet confidence.
Creative goals:
Mood: Calm energy, credible simplicity, classy & technological
Palette: White, pine green, soft sage, warm beige
Typography: Manrope for calm functional sophistication
Imagery: Light product photography, minimal studio scenes
Motion: Subtle scroll reveals and hover micro-interactions
The direction set the tone for a digital experience that feels equal parts scientific and human.
Style Guide
Style Guide

3. Design in Figma

The full experience was designed in Figma, with a modular design system to ensure scalability and consistency across pages.
Core sections:
Hero banner with tagline + CTA
Product lineup grid with quick-view cards
Ingredient & benefit storytelling sections
Testimonials + social proof
FAQ & brand story integration
Each page was prototyped to feel editorial yet shoppable — using generous spacing, soft contrast, and responsive grids.
Figma design
Figma design

4. Shopify Development with Instant

The build was executed using Instant, connected to Shopify for a fully editable and performant storefront.
This workflow allowed me to translate Figma layouts directly into responsive, production-ready components.
Development highlights:
Custom cart drawer with smooth transitions
Ingredient and benefit sections built as reusable blocks
Optimized scroll and hover animations via CSS/JS
Shopify-native product setup with subscription support
Responsive design tested across breakpoints
The result is a fully custom Shopify theme that preserves the design precision while remaining easy for the client to maintain.
⚙️ Tools:
Figma · Instant · Shopify · Custom Liquid · JavaScript
Instant Build
Instant Build

5. Summary

SP2 embodies a complete creative-to-code process — uniting design craft with development clarity.
From early direction to final deployment, the goal was to prove that a clean, science-backed aesthetic can deliver both credibility and conversion.
Like this project

Posted Nov 1, 2025

Designed and developed a minimalist, science-driven e-commerce site for SP2 using Figma, Instant, and Shopify.

Website Redesign and Migration – Seal Data Tracking SaaS
Website Redesign and Migration – Seal Data Tracking SaaS
Construct L: Framer Template for Construction Companies
Construct L: Framer Template for Construction Companies
Villa L: Luxury Hotel Framer Template Development
Villa L: Luxury Hotel Framer Template Development
Framer.zone — Directory Website Development
Framer.zone — Directory Website Development

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc