Starting from Scratch

Tiffinbox is launching Grocer, a grocery delivery app with no existing screens, no old code and no habits to undo. A clean slate is the easiest place to start a design system, and also the easiest place to overbuild one, because nothing real pushes back on your guesses.

The rule

Foundations first, then the few parts every screen needs; grow only on demand.

Starting from scratch runs in a clear order:

1. Purpose. A short statement of what the system is for, and three or four principles to settle arguments.
2. Foundations. The core tokens: a colour palette with semantic roles, a type scale, a spacing scale, corner radii, shadows and an icon set. Build accessibility in now; checking contrast later costs far more.
3. Core components. The small set that almost every screen needs: button, text field, checkbox, select, card, dialog, a message banner and navigation. Usually around ten.
4. A real screen. Build actual product screens with those parts straight away. They reveal what is missing.
5. Growth. Add each new component when a screen being built needs it, not because it might be needed one day.

The big advantage of starting fresh is consistency from day one, with no old decisions to untangle. The big risk is designing in a vacuum: polishing forty components that no product has asked for, while the ones the product does need arrive late.

The shortcut

No component without a screen. Before adding anything, name the screen that needs it now. If nobody can, it waits.

The shortcut keeps the system honest: every part exists because a real screen asked for it, and the real screens test every part.

Drills

Answer fast — trust the rule.

Remember

• From scratch: foundations first, then the few parts every screen needs, and grow only on demand.
• Shortcut: no component without a screen.
• Trap: designing in a vacuum, polishing parts that no product has asked for.