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