How to Build a Design System in a Weekend for Small Teams
1. Start with the minimum set
For small teams, the starting point is to gather repeated design decisions in one place.
- Design tokens: Define shared values for colors, spacing, border radius, font sizes, and more.
- Typography and spacing scale: Set the sizes and weights for headings, body text, and labels, along with spacing rules for the screen.
- Keep spacing to a limited set of values such as 4·8·16·24·32·48·64px to reduce choices.
- Core components: Apply the same standard first to frequently used buttons, forms, and cards.
2. Connect with CSS variables
Gather values in `tokens.css` and make components reference them.
- Primitive tokens define actual values such as `--blue-500`.
- Role-based tokens set the intended use such as `--color-primary` and reference primitive tokens.
- Separating the two lets you respond to adding dark mode by changing the role-based mapping.
- Start with CSS files at first, and consider extending tools when you need to distribute tokens across multiple platforms.
3. Build in the order of buttons → forms → cards
Carry the criteria set earlier into the next components.
- Buttons: Organize the default, hover, focus, disabled, and loading states, and set the standards for color, spacing, corners, and focus indicators.
- Forms: Apply the same criteria to input fields, labels, errors, and help text to make the input experience consistent.
- Cards: Create containers that hold buttons and forms, and define the rules for background color and shadows.
4. Finish the weekend work with a reference page
If you create `design-system.html` that loads the actual CSS, the implementation result becomes documentation.
- Saturday: In the morning, define tokens and the scale, and in the afternoon, implement button states.
- Sunday: In the morning, forms, and in the afternoon, cards and the reference page.
- Show color swatches, actual-size text, spacing scales, and component states in one place.
- Use the reference page as a basis for checking and reusing the values already decided when creating the next screen.
