Style guide x design system

Oi, Flavia, tudo bem?

A diferença entre Style Guide e Design System pode ser um pouco confusa no começo, mas vou tentar explicar.

Style Guide: Um Style Guide é um documento que mostra as regras visuais e de estilo para um projeto. Ele inclui coisas como cores, fontes, espaçamentos, ícones e outros elementos visuais. A ideia é garantir que todo o projeto tenha uma aparência uniforme. Pense nele como um guia que ajuda a manter o visual do projeto consistente.

Design System: Um Design System vai além do Style Guide. Ele inclui não só as regras visuais, mas também componentes reutilizáveis, padrões de design e até código. É uma coleção de padrões, componentes e diretrizes que ajudam a criar produtos digitais de forma consistente e eficiente. Ele cobre tanto a parte visual quanto a funcional, facilitando o trabalho conjunto de designers e desenvolvedores.

Para entender melhor:

• Style Guide: "Estas são as cores e fontes que usamos."
• Design System: "Estas são as cores e fontes que usamos, e aqui estão os componentes de botão, formulários e o código CSS/HTML para usá-los."

Espero ter ajudado e bons estudos!