Colors, fonts, spacing, typography and other visual elements can be changed without modifying the content of posts and pages.
The visual appearance of the site can be customized by editing the CSS files in the assets/css folder:
assets/css/
├── tokens.css
├── reset.css
├── base.css
├── objects.css
├── components.css
├── utilities.css
├── critical.css
├── global.css
└── build/
├── critical.css
└── global.css
The main CSS files have different purposes:
tokens.css— Defines the site's design tokens, such as colors, fonts, spacing and border radius values.reset.css— Resets default browser styles to provide a consistent starting point.base.css— Defines the basic styles for HTML elements such as body, headings, paragraphs, links and images.objects.css— Contains reusable layout patterns such as wrappers, grids, flows and frames.components.css— Contains styles for specific site components such as the header, navigation, posts, footer and forms.utilities.css— Contains small utility classes for specific, reusable styling needs.critical.css— Defines the CSS needed for the initial rendering of the site.global.css— Defines the main CSS bundle used by the site.
Do not edit the 'build' folder
The assets/css/build folder contains CSS files generated automatically from the source CSS files when running the build process.
Do not edit manually the files inside this folder, because the changes may be overwritten as soon as the CSS is built.