Your interface stops drifting
Consolidated components mean two pages built a year apart still look like the same product.
Build reusable storefront components for real catalogue states.
We define the visual rules and Figma components used across product, collection and campaign pages. The system includes stock, variant and promotion states so merchandising changes can use consistent patterns.
A few clients we’ve worked with
What we do
Design systems for ecommerce businesses: storefront values, commerce components, merchandising guidance.
What a design system needs to account for.
A product card needs rules for long titles and changing price displays.
Promotion badges and stock messages can compete for attention.
New catalogue types can require states that an initial design did not cover.
What repeated decisions cost you.
Every time a team re-decides a button, a form field or a card, it pays for that decision twice — once in design and once in code. A system is how you stop paying.
Design and code agree
One library, with practical examples of how the parts work together, removes the gap between what was designed and what shipped.
Onboarding is shorter
A new designer or developer has a reference instead of needing someone to explain the unwritten rules.
Design systems scope.
Plan storefront values, commerce components and merchandising guidance as connected parts of the engagement.
Storefront values
Define typography, spacing, colour and image ratios. Make price, product title and purchase information readable across screen sizes.
Commerce components
Build product cards, filters, option controls and cart patterns. Include unavailable items, long names and promotion variants.
Merchandising guidance
Document how collections and campaigns use the components. Define ownership and the process for adding new product patterns.
Selected website projects across our wider practice
All case studies
“What I appreciate most is that the team always communicates openly and stays honest throughout.”
“They delivered what they said they would, on time.”
“They met all our expectations by providing great strategies based on our needs.”
Design systems deliverables.
The agreed design systems scope is documented in the following work products.
- 01
Visual values and layout rules
- 02
Figma component library with states
- 03
Usage examples and contribution guidance
Our process
How we approach design systems.
Audit catalogue patterns
Collect product-card, filter, variant and cart examples across the actual range.
[ 01 ]
Build commerce component states
Define long-title, promotion, unavailable-item and selection variants in Figma.
[ 02 ]
Document merchandising use
Provide composition rules and ownership for introducing new product types or campaign patterns.
[ 03 ]The people who do this work.
No account layer between you and them. These are the Norml specialists this work runs through.
Let's chat
“I've spent 10 years working across development and marketing. I started as a developer, but design, SEO and advertising were already part of the job. That taught me to treat a website as one system: the business, the content, the design and the code have to work together. At Norml, I lead the architecture behind our work and stay involved wherever strategy, design, development and search meet.”
Max TymoshynFounder & Architect
Get startedDesign systems for ecommerce businesses: questions.
Can the system support different product categories?
Yes. Shared components can include approved variants for the information each category requires.
Does a Figma system automatically update the live store?
No. The design library and code implementation need an explicit adoption and maintenance process.