The styles builder helps you set a cohesive style for all components within your Store Theme app. During the app-building process, the styles builder interprets the styles/style.json file using Tachyons to generate your storefront’s CSS.

Using this builder, you avoid having to customize each component on different pages, as you set a standard style.

An app that uses the styles builder has a folder named /styles in its root directory. The directory structure may vary depending on the specific project settings.

Below is the folder structure of this builder:

The style.json file contains information relevant to styling, such as type scales, spacing, colors, typography, and other style-related settings.

If you are developing a Store Theme with VTEX IO and Store Framework from the Store Theme boilerplate, the styles builder is installed automatically, and the /styles folder is created in the directory root.

To learn more about app development using this builder, see the Defining styles guide.

An app using the styles builder has a folder named /styles in its root directory and the style.json file in it. The directory structure may vary depending on specific project settings.

The basic structure of a /styles folder is composed of the following files, as you can see in the Store Theme app repository:

• Within the style.json file, there is a set of values and configurations to be used to guide styling decisions.
• The css folder contains the CSS files, which, in turn, can be organized into different folders.