Leap Scholar / Design System
Building the Leap Design System
A design system that gave all of Leap's teams one shared set of components and rules, so they could stop rebuilding the same things from scratch.
What changed
Teams stopped rebuilding the same components. Everything moved to one shared library with documented rules.
My decisions
I built from tokens up, so teams could customise what they needed without breaking shared patterns.
Tradeoff
We shipped the most-used components first, rather than trying to document everything before anyone used it.
Shipped
Colour, type, spacing, radius, shadows, logos, buttons, icon buttons, text buttons, and responsive guidance.
Project story
Context
Why we needed a design system.
Leap helps Indian students study abroad. From picking universities to test prep and finances. As the product grew, teams started working independently. The result was duplicate components, mismatched designs, and a lot of rework.
Role
My role.
I ran the system design end to end, working with 3 PMs, 4 designers, and 10 engineers across web, mobile, and QA.
Method
How we structured it.
We used an atomic approach, starting with the smallest building blocks (tokens and atoms), then combining them into components. Similar to how Brad Frost and Alla Kholmatova describe design systems.
Process
From audit to tokens to reusable components.
- 01
Audited what existed across all Leap products and synced with developers, PMs, and marketing on what was missing.
- 02
Studied how Atlassian, IBM, Blade, Loom, and Material Design structure their foundations and documentation.
- 03
Built the foundations in Figma as variables: colour, type, spacing, radius, shadow, and responsive grids.
- 04
Built the component library: buttons, inputs, selectors, cards, tags, tooltips, bottom sheets, and forms.
- 05
Documented how each component and token works, so designers and engineers didn't have to guess.
Live playground
A quick look at the system.
Variables
Reusable design tokens.
Core tokens for color, border, spacing, radius, shadow, and typography.
Color tokens
Background · Text
Background
Text
Border tokens
Stroke colours
Spacing
Scale
Radius
Corner tokens
radius/no-0
0px
radius/xl-12
12px
radius/3xl-24
24px
Shadow
Elevation scale
Subtle lift
Default elevation
Primary hover glow
Neutral large
Typography
Complete type scale tokens
Desktop
14 styles
Heading
H-64
Font Name: Plus Jakarta Sans
Font Size: 64px
Line Height: 96px (Standard)
Letter Spacing: -0.5px
Bold · 700
H-48
Font Name: Plus Jakarta Sans
Font Size: 48px
Line Height: 62px (Standard)
Letter Spacing: -0.5px
Bold · 700
H-40
Font Name: Plus Jakarta Sans
Font Size: 40px
Line Height: 52px (Standard)
Letter Spacing: -0.25px
Bold · 700
H-32
Font Name: Plus Jakarta Sans
Font Size: 32px
Line Height: 42px (Standard)
Letter Spacing: 0px
Bold · 700
H-24
Font Name: Plus Jakarta Sans
Font Size: 24px
Line Height: 32px (Standard)
Letter Spacing: 0px
Bold · 700
H-20
Font Name: Plus Jakarta Sans
Font Size: 20px
Line Height: 26px (Standard)
Letter Spacing: 0px
Bold · 700
Label
L-18
Font Name: Inter
Font Size: 18px
Line Height: 24px (Standard)
Letter Spacing: 0px
Semibold · 600
L-16
Font Name: Inter
Font Size: 16px
Line Height: 20px (Standard)
Letter Spacing: 0px
Semibold · 600
L-14
Font Name: Inter
Font Size: 14px
Line Height: 18px (Standard)
Letter Spacing: 0px
Semibold · 600
L-12
Font Name: Inter
Font Size: 12px
Line Height: 16px (Standard)
Letter Spacing: 0px
Semibold · 600
Body
B-18
Font Name: Inter
Font Size: 18px
Line Height: 28px (Standard)
Letter Spacing: 0px
Regular · 400
B-16
Font Name: Inter
Font Size: 16px
Line Height: 24px (Standard)
Letter Spacing: 0px
Regular · 400
B-14
Font Name: Inter
Font Size: 14px
Line Height: 20px (Standard)
Letter Spacing: 0px
Regular · 400
B-12
Font Name: Inter
Font Size: 12px
Line Height: 18px (Standard)
Letter Spacing: 0px
Regular · 400