A system named after its own history, rebuilt around what things do.

A decade of acquisitions has to eventually look like one company.

upGrad started in 2015 as a single online higher education product. It is now one of Asia's largest integrated skilling companies, with more than 9 verticals under one entity: upGrad, KnowledgeHut, Centum Learning, upGrad Enterprise, Talentedge, upGrad Abroad, upGrad Campus, GATE Academy, Internshala and most recently Unacademy. Around 6,800 people work there.

FY26 gross revenue was reported at 219 million dollars, EBITDA rose more than eightfold, and losses halved for the third consecutive year. That is the moment this project existed in: a company consolidating, and needing one face rather than nine.

The system was not broken. It was named after its own history.

The existing system was built six to seven years ago, for a company that sold one kind of product to one kind of learner. Since then the surface has multiplied and the use cases moved past what the system could answer. Designers were making the same decisions again, individually, because the system had no position on them.

I audited the library directly and counted where every token came from.

There was no research budget, and that changed what the work could claim.

No user study ran for this. What was real was the file itself and the team's repeated experience of it. I audited the existing library, counting tokens and tracing where each one came from, alongside a running list of moments where the system had no answer.

The limit of that evidence is that it describes the designers' problem, not the learner's. So the goals were set where the evidence actually reached: consistency, speed, and whether a designer who was not in the room could use the system without asking anyone.

We traded a preference for a guarantee.

Three typefaces were on the table. Circular was the aesthetic favourite. It is also commercially licensed, which means every designer needs a paid seat and a manual install before they can open a file correctly. Across this many verticals that is not a small friction. It is the mechanism by which a system quietly stops being used.

A free geometric sans is correct and forgettable.

DM Sans alone would have been safe. The brief asked for freshness. So the system carries a second face: Fraunces, SemiBold Italic, permitted only at Heading 1 through Heading 3. Character in one controlled place instead of a new identity everywhere.

The brand itself could not move. The instruction was that users should not feel a lot of change, so the red stayed exactly where it was and the mark was untouched. The ramp was built around the existing colour, which is why brand red sits at red 300 rather than at the tidy midpoint of the scale. Everything that changed was structural.

Name tokens by role, not by origin.

The old system named tokens after where they came from. The new one names them after what they do. This is what stops the next acquisition from leaving another prefix behind.

Every semantic row carries the primitive it resolves to.

Four layers, not two: primitives, semantics, and then a separate primitive and semantic pair for data visualisation. The alias column is the argument of the system made visible. A designer reads the role and sees the source in the same line.

Interaction states belong to the system, not to whoever builds the component.

Ten tokens covering default, hover and pressed across three button types, plus disabled. Most systems leave these to the person building the component, which is how three different hover reds end up in one product.

A scale small enough that people stop looking styles up.

Sixteen core styles and five for data visualisation. The core scale runs on percentage line heights. The data visualisation scale runs on fixed pixel line heights, because percentage leading does not hold alignment against a chart axis.

The phone stopped being a derivative of the desktop.

The old system defined a single scale anchored at 1440 and up. The new one defines two base frames, each with its own column structure.

The homepage shipped on it, reviewed by the founder.

The system and the homepage adaptation were done in one month. The new upGrad homepage is live, built entirely on the new foundations, and the founder was directly involved in the design review calls. That is the closest thing this project has to a real adoption test: the system met the highest level of scrutiny in the company and shipped anyway. Other pages are being rebuilt on it now.

I documented the system by hand, and the documentation drifted first.

The tokens themselves are bound variables and they behave correctly. The reference tables that explain them are typed text. Inside the first cycle they already drifted: the primitive ramp and the button tokens now disagree about which red is red 500.

Next cycle the documentation gets bound to the same variables it describes, so the reference generates itself instead of being retyped. The old system did not fail from bad decisions. It failed from seven years of nobody owning the next one, which is why the cadence was set at launch: core fixed, components and refinements once a year, deliberately.

The new upGrad homepage, live and built on the system.

Every red on this page is surface-brand. Every button moves through the three states defined once in the token layer. The hero carries Fraunces at Heading 1 Accent, which is the one place the system permits it, and it is doing exactly the job it was designed for: character in a controlled position, on top of a foundation anyone can install for free.

Captured from the live site. Drag or scroll the strip.