A stove, a mug, and a design system

            ^^^^^         ^^^               ^^^^^  ^^^^^^^^    ^^^^^^     ^   ^  ^  ^  ^        
          _/     \_     _/   \    _        /     \/        \  /      \___/ \_/ \/ \/ \/ \_/\__  
    _   _/         \_/\/      \  / \/\    /                 \/                                \_
___/ \_/                       \/     \__/                                                      

My camp kitchen is a canister stove, a 750ml titanium pot, a long spoon, and a mug that nests inside the pot. That is it. It boils water, cooks noodles, makes coffee, and fits in a space the size of a grapefruit.

It took me years to get there. Earlier versions had a frying pan, two pots, a spice kit, and a collapsible bowl I used exactly once.

Nesting is the feature

The magic is not that each piece is good. It is that each piece fits inside the next. The mug fits the pot, the stove fits the mug, the fuel fits beside it. Nothing rattles.

Good design systems nest the same way. Tokens fit inside primitives, primitives fit inside components, components fit inside patterns. When a new component does not nest (it brings its own spacing scale, its own grays) the whole kit starts to rattle.

One pot, many meals

A single pot forces you to think in combinations instead of special cases. You do not need a coffee pot and a soup pot. You need one pot and a plan.

The best component libraries I have used had very few components, each with a small set of well-chosen variants. The worst had a component for every screen: PrimaryButtonLarge, PrimaryButtonLargeWithIcon, SettingsPageButton.

Rules I took home

• If a piece only gets used once a season, it stays home.
• If two pieces do the same job, keep the lighter one.
• If something does not nest, it needs a very good reason to exist.

My pack is lighter for it, and so is every UI kit I have touched since.