Design System — Bluelearn
Built a robust, scalable design system using Atomic Design methodology for India's largest student community.
Overview
Bluelearn is India's largest community of students with over 100k members, focused on helping students from Tier 2/3 colleges break free from traditional boundaries and find like-minded people to upskill.
I worked alongside Vinit Sarode to build a design system from the ground up that could scale with the product.
The approach
We used Atomic Design methodology with three levels:
- Atoms — Basic design elements with comprehensive style documentation (colors, typography, spacing, radii, shadows)
- Molecules — Combined atomic components (input groups, card headers, nav items)
- Organisms — Complex composite components (forms, cards, navigation bars)
We intentionally excluded Templates and Pages layers — the product was early-stage and needed room for experimentation.
Tools
- Figma — Component library, documentation, handoff
- Miro — Workshop sessions, information architecture
- Notion — Documentation, decision logs
- Nativebase — Component library reference for dev parity
File organization
We started with one massive Figma file. It crashed constantly — RAM issues, loading times, merge conflicts.
We restructured into a three-tier hierarchy:
- Level 1: Departmental divisions
- Level 2: Feature-based files (solved the single-file performance problem)
- Level 3: Pages within each file
Key learnings
The biggest win was adding descriptions to component documentation. Developers could reference usage notes directly in Figma instead of guessing. This eliminated a class of implementation bugs that came from misinterpreting component behavior.
When we needed to change the primary color, we changed one token and 200-300+ screens updated automatically. That's the power of building from atoms up.
The real lesson
A design system is a product. It needs users, feedback loops, versioning, and maintenance. If you treat it as a side project, it will die as a side project.