Estrutura de pastas #

Completa #

📂styles
┣ 📂tokens
┃ ┣ 📂brands
┃ ┃ ┣ 📂default
┃ ┃ ┃ ┣ 📜borders.scss
┃ ┃ ┃ ┣ 📜fonts.scss
┃ ┃ ┃ ┣ 📜spacings.scss
┃ ┃ ┃ ┣ 📜layouts.scss
┃ ┃ ┃ ┗ 📜others.scss
┃ ┃ ┃ ┣ 📁components
┃ ┃ ┃ ┣ 📂themes
┃ ┃ ┃ ┃ ┣ 📂default
┃ ┃ ┃ ┃ ┃ ┣ 📜main.scss
┃ ┃ ┃ ┃ ┃ ┣ 📜dark.scss
┃ ┃ ┃ ┃ ┃ ┗ 📜light.scss
┃ ┣ 📂components
┃ ┣ 📂global
┣ 📂tools
┣ 📂snippets
┣ 📂utils
┣ 📂global
┣ 📂components
┣ 📂pages

Sem temas #

Caso tenha apenas os temas dark e light

📂styles
┣ 📂tokens
┃ ┣ 📂brands
┃ ┃ ┣ 📂default
┃ ┃ ┃ ┣ 📜borders.scss
┃ ┃ ┃ ┣ 📜fonts.scss
┃ ┃ ┃ ┣ 📜spacings.scss
┃ ┃ ┃ ┣ 📜layouts.scss
┃ ┃ ┃ ┣ 📜others.scss
┃ ┃ ┃ ┣ 📁components
┃ ┃ ┃ ┗ 📂colors
┃ ┃ ┃ ┃ ┣ 📜main.scss
┃ ┃ ┃ ┃ ┣ 📜dark.scss
┃ ┃ ┃ ┃ ┗ 📜light.scss
┃ ┣ 📂components
┃ ┣ 📂global
┣ 📂tools
┣ 📂snippets
┣ 📂utils
┣ 📂global
┣ 📂components
┣ 📂pages

Sem marcas #

Caso os tokens não sejam utilizados por mais de uma marca

📂styles
┣ 📂tokens
┃ ┣ 📜borders.scss
┃ ┣ 📜fonts.scss
┃ ┣ 📜spacings.scss
┃ ┣ 📜layouts.scss
┃ ┣ 📜others.scss
┃ ┣ 📂themes
┃ ┃ ┣ 📂default
┃ ┃ ┃ ┣ 📜main.scss
┃ ┃ ┃ ┣ 📜dark.scss
┃ ┃ ┃ ┗ 📜light.scss
┃ ┣ 📂components
┣ 📂tools
┣ 📂snippets
┣ 📂utils
┣ 📂global
┣ 📂components
┣ 📂pages

Sem marcas e temas #

Caso os tokens não sejam utilizados por mais de uma marca e tenham apenas os temas dark e light

📂styles
┣ 📂tokens
┃ ┣ 📜borders.scss
┃ ┣ 📜fonts.scss
┃ ┣ 📜spacings.scss
┃ ┣ 📜layouts.scss
┃ ┣ 📜others.scss
┃ ┣ 📂colors
┃ ┃ ┣ 📜main.scss
┃ ┃ ┣ 📜dark.scss
┃ ┃ ┗ 📜light.scss
┃ ┣ 📂components
┣ 📂tools
┣ 📂snippets
┣ 📂utils
┣ 📂global
┣ 📂components
┣ 📂pages

Frameworks #

Estrutura mais comum em frameworks modernos

📂styles
┣ 📂tokens
┣ 📂tools
┣ 📂snippets
┣ 📂utils
┣ 📂global

Mais pastas #

Estrutura que tem arquivos mais específicos agrupados por pastas.

📂styles
┣ 📂tokens
┣ ┣ 📂borders
┃ ┣ ┣ 📜widths.scss
┃ ┣ ┣ 📜colors.scss
┃ ┣ ┣ 📜radius.scss
┃ ┣ ┣ 📜styles.scss
┣ ┣ 📂fonts
┃ ┣ ┣ 📜size.scss
┃ ┣ ┣ 📜family.scss
┃ ┣ ┣ 📜weight.scss
┃ ┣ ┣ 📜lines.scss