Starting from an Existing Product

The Tiffinbox customer app has 180 screens built over five years by a dozen designers. You cannot pause the company for a year to rebuild it. Most design systems are born this way: out of a product that already exists, already earns money and already has a mess worth cleaning up.

The rule

Don't invent; distil: collect what exists, merge it, then replace it piece by piece.

The route has four steps.

1. Collect. Audit what is already there: every button, colour, font size, icon and message, with counts and locations. (Section 4 shows how.)
2. Merge. For each kind of thing, pick or refine the best version and fold the near-duplicates into it. Eleven greys become five; fourteen button styles become three variants.
3. Name. Turn the merged values into tokens and the merged pieces into components with clear names and options.
4. Replace. Swap old parts for system parts gradually. A good habit: whenever a team touches a screen for other work, it moves that screen onto Thali. Track adoption so you can see progress.

This route has strong advantages. The system grows out of real needs, so nothing is built in a vacuum. Solutions that already work are kept. And teams recognise their own work in the result, which makes adopting it much easier.

Its risks are real too. You may preserve a bad old decision just because it was common. And a migration across 180 screens takes months, so for a while old and new live side by side. Plan for that rather than pretending it will be quick.

The shortcut

Most used, most broken first. For each kind of element, multiply how widely it is used by how inconsistent it is. Start where both are high.

Drills

Answer fast — trust the rule.

Remember

• From an existing product: collect, merge, name, then replace piece by piece.
• Shortcut: most used and most broken first.
• Trap: keeping a bad decision because it is common, or expecting the migration to be quick.