Interview frequency: …
Short answer
A Style Guide defines the visual identity (colors and fonts), a Component Library provides reusable coded elements, and a Design System is the complete system combining guidance, components, rules, standards, and governance.
Explanation
A Style Guide documents the visual presentation of a brand. A Component Library is code (such as React components or a Figma file) containing ready-made elements like buttons and fields. A Design System is "the product that serves other products": it includes coded components, Design Tokens, accessibility guidelines, Tone of Voice, and governance and contribution practices for designers and developers.
Common mistakes
- Treating a Figma file with a set of buttons and colors as a complete Design System.
- Building a coded component library without documenting how to use its components and their interaction rules.