Start with repeated decisions
Look for colors, spacing values, buttons, cards, and headings that appear in more than one place. Turn only those recurring choices into shared tokens or components.
A short list of clear rules is easier to keep consistent than a large catalog of one-off variants.
Name tokens by purpose
Use names such as surface, text-muted, border, and accent. Purpose-based names make it possible to tune a theme without searching every component for a raw color.
Keep spacing and type scales small enough that the options feel intentional.
Keep the system close to the code
Document a few examples next to the components that use them. Check the patterns at narrow and wide screen sizes, and include keyboard focus and disabled states.
Let real pages reveal what needs to be added. The system should make everyday updates simpler.
