Puremart | Grocery App Design System & Style Guide

Puremart Design System is a comprehensive mobile design system for a grocery delivery app, built end-to-end using the Atomic Design methodology, from atoms (colors, typography, icons, spacing tokens) to molecules (buttons, inputs, chips) to organisms (product cards, navigation bars, bottom sheets, order tracking).

The system covers a full style guide with primary, secondary, neutral, surface, and accent palettes; a typography scale of 11 text styles built on Plus Jakarta Sans; the Lucide open source icon set scaled across three sizes; a 4-column responsive grid for 390×844px screens; spacing and radius tokens; and four shadow elevations differentiating top bars, components, modals, and navigation.

Every interactive component is documented across all its states; default, focused, filled, success, error, disabled, pressed and includes specialized patterns such as OTP fields, search autocomplete with dropdowns, multi-step checkout steppers, sticky total bars, address selectors, and filter sheets. The result is a scalable, maintainable foundation built to support a complete grocery app experience: browsing, cart management, multi-address checkout, filtering, and end-to-end order tracking.