Autogene Design System - A design system that saves the day, by avoiding 80% of dev efforts
Date
4 months
Service
E-Commerce
Client
Self Study
Project Overview
I don’t just build component libraries; I architect living systems. This project demonstrates my process for building a comprehensive design system from the ground up, specifically optimized for high-performance E-commerce PWAs. By prioritizing semantic tokens, atomic principles, and documentation, I ensure that scalability is a feature, not an afterthought.
This system is recognized for its technical rigor and is currently live on the Figma Community as a resource for global designers.
Problem
Imagine, A large organisation that has a heavy online presence, sometimes struggles with design consistency and efficiency. Without a centralized system, designers rebuild the same components repeatedly, creating inconsistent experiences across products. When design decisions change, teams must manually update hundreds of screens—wasting time and introducing errors, and cascading to excess development efforts.
The core issue? No single source of truth for design decisions leads to fragmented user experiences, inefficient workflows, and difficulty scaling across products.
Solution - Introducing, Autogene!
It provides a complete component library based on Atomic Design principles (atoms → molecules → organisms → templates), enabling teams to build consistent e-commerce experiences rapidly.
Key Features:
Token System — Semantic design tokens that cascade changes across all components
Responsive Grid — 12/8/4-column system optimized for PWAs across mobile, tablet, desktop
Complete Component States — Every component includes default, hover, active, focus, disabled, and error states
E-Commerce Focused — Product cards, filters, cart, checkout patterns designed specifically for shopping experiences
Theme-Ready — Color token architecture supports light/dark modes and brand customization
Impact & Metrics
Metrics captured based on feedback + insights captured from design friends and other designers from the design communities.
Metric | Result | Description |
|---|---|---|
Component Reusability | 75% | Reduction in time spent designing repeated components |
Design Consistency | 40% | Standardized across all product touch points |
Device Breakpoints Covered | 3 | Desktop, Tablet, Mobile |
Research & Discovery
Design System Architecture
Foundation: Color System
Foundation: Typography System
Foundation: Grid System (Desktop)
Component Development: Atomic Design Hierarchy
Built the component library following Atomic Design principles, starting from smallest elements and composing upward.
Level 1: Atoms (Foundational Elements)
Level 2: Molecules (Simple Combinations)
Level 3: Organisms (Complex Components)
Level 4: Templates (Page Structures)
Level 5: Pages (Real Content Instances)
Key Highlights
Why Token-Based Colors?
Semantic tokens allow theme changes without touching components. Updating color/primary changes 1000+ components instantly—enabling brand pivots or dark mode with minimal effort.
Why Manrope (Sans-Serif Typography)?
Better screen readability at small sizes, especially on mobile. Serif fonts lose clarity at typical web text sizes (14-16px).
Why 12/8/4 Column Grid?
12 is divisible by 2, 3, 4, 6—enabling flexible layouts without fractional columns. Simpler grids (8, 4) work better for smaller devices.
Why Exhaustive Component States?
Incomplete states lead to inconsistent developer implementations. If hover state isn't specified, 5 developers create 5 different behaviors.
Reflection #1
Reflection #2
Next Steps
Partner with e-commerce startup to implement in production
Conduct formal accessibility audit (screen readers, keyboard nav, contrast)
Create contribution guidelines for community improvements
Promote on Figma Community and iterate based on user feedback
