Design system

When every screen uses its own button, its own blue and its own spacing, the product ends up looking stitched from scraps and each small change costs three times as much. A design system fixes that by gathering the components and styles in a single shared place, but it does not appear all at once: it is built piece by piece.

This board takes each component from the moment it is noted as needed to the moment it is published and ready for the whole team to use. Seeing it in columns avoids the classic limbo of half made components, neither fully designed nor built, that nobody knows whether they can use.

Each component, from the list to the library

The board moves each piece through four states: to do, in design, in development and published. A card only advances when it is truly ready for the next phase.

To do

The list of what is missing, with the style foundations before the loose pieces.

• List the needed components that do not exist yet
• Define the style tokens, colors, type and spacing
• Set priorities to start with the most used

In design

Shape each piece thinking of all its states, not just the ideal one.

• Design the component with its variants
• Define its states, such as focus, error or disabled
• Review with the team before moving it to development

In development

Turn the design into reusable code and explain how to use it.

• Build the component faithful to the design
• Document its use with clear examples

Published

The piece now lives in the shared library and the team knows they can use it.

• Add to the shared library
• Announce to the team that it is available

How it works in Foco

When you import it, Foco creates the "System" workspace with these columns in the Kanban view. You drag each component from one state to the next as it matures, with drag and drop on desktop and by swiping between columns as tabs on mobile.

In Panorama you see the tasks from all your workspaces at once, each in its own color, so the design system lives alongside the product and everything else without mixing in. On each component you set priority and an assignee so it is clear who owns it and which one goes first.