Systemomtics
Botanical wellness brand site. Small-batch, handcrafted, earth-derived products — balms, art pieces, and educational PDFs. The first production deployment of IGRIS.
Overview
Systemomtics is a botanical wellness brand — small-batch, handcrafted, earth-derived. The site sells balms (earth-derived butters, Rosminté & Lavilla Root, botanical ingredients), customizable art pieces ('Wear the Intention'), and free educational PDFs from The L.A.B. The visual language pairs a warm cream palette with editorial serif typography and intentional scroll motion; sections numbered 01–04 carry the reader through Collection → Balms → Art → Free PDFs. Built with Next.js 16, React 19, Tailwind v4, and Framer Motion v12 — the first production deployment of the IGRIS pipeline.
Features
- Editorial typography paired with a warm botanical palette
- Sectioned narrative (Collection · Balms · Art · Free PDFs)
- Customizable art-piece product line ('Wear the Intention')
- Free PDF library — 'Knowledge as a gift' from The L.A.B.
- Subtle scroll-triggered motion via Framer Motion
- Mobile-first with desktop refinement layer
Technologies Used
- Next.js 16 (App Router)
- React 19
- Tailwind CSS v4
- Framer Motion v12
- TypeScript strict
Challenges & Solutions
Challenges
- Positioning a botanical brand as editorial and intentional, not crunchy
- Tuning motion to feel grounded rather than ornamental
Solutions
- Serif display paired with restrained body typography for editorial weight
- Motion easing curves borrowed from print-magazine pacing