Building a design system for one
You do not need a team to have a design system. You need twelve components and a page that explains them.
John Doe - - 1 min read
Design systems have a reputation for being a big-company thing: a team, a tool, a roadmap. For small products that is backwards. A small product needs a small system more than a large one does, because there is nobody to keep things consistent by hand.
What a system for one looks like
- Twelve components. Button, input, select, checkbox, radio, textarea, card, table, modal, toast, tabs, empty state. That covers most of any product. Add the thirteenth when you have used the same pattern three times.
- One page of tokens. Colours, type sizes, spacing, radius. Custom properties in CSS, nothing fancier.
- One page of writing. How each component is used and, more importantly, when it is not.
What it is not
A Figma library, a Storybook, a package. Those are fine later. At the start they are maintenance you cannot afford.
The test
If a new engineer can build a reasonable settings page on day one without asking you anything, the system is working. The Fieldnote team passed that test in 2023 and still passes it; the system has grown to about forty components in three years, which is about the right pace.
