Background Colors

Beyond the brand palette, Nexgen gives each section its own background-color variable. This lets you alternate light and dark bands down a page — or match a section to your brand — without writing new CSS. See Colors first if you haven’t set up the base palette yet.

Section background variables

Each section reads a dedicated variable, named for the section it controls:

assets/css/default.css

:root {
--section-1-bg-color: #ffffff;
--section-2-bg-color: #f8f9ff;
--section-3-bg-color: #1d2144;
--section-4-bg-color: #090e34;
/* …one per section… */
}

Change a section’s variable and only that section’s background updates. Because the values are just CSS colors, you can use hex, rgb(), or even reference another variable such as var(--primary-color).

Keep text readable

When you switch a section to a dark background, make sure the text and icons inside it use a light color so they stay legible. Nexgen’s demo pages are a good reference for which text color pairs with each background.

Next: ButtonsStyle your calls to action with the button classes.