Skip to content
NexgenHTML Docsby Themeasy

Design & Color

Nexgen is styled with CSS variables (also called custom properties). A value is defined once, in a single place, and then reused everywhere it’s needed — so changing one variable can restyle the entire template at once.

Where the design lives

Section titled “Where the design lives”

Colors and typography are defined in assets/css/default.css. Variables are declared on the :root selector, which makes them available to every element on the page:

assets/css/default.css
:root {
--primary-color: #4a6cf7;
--secondary-color: #1d2144;
--text-color: #637381;
--heading-color: #1d2144;


--body-font: 'Inter', sans-serif;
--heading-font: 'Inter', sans-serif;
}

Customize each part

Section titled “Customize each part”

Colors

Set your brand’s primary, secondary and text colors.

Edit colors →

Background Colors

Give each section its own background with --section-* variables.

Set backgrounds →

Icons

Use Simple Line Icons and Font Awesome throughout.

Use icons →