Skip to content
LeverageHTML Docsby Themeasy

Design & Color

This page shows you where Leverage’s colors and fonts live and how to change them. Leverage is styled with CSS variables (custom properties): a value is defined once and reused everywhere, so changing a single variable can restyle the whole template at once.

Where the design lives

Section titled “Where the design lives”

Colors and typography are defined in assets/css/default.css, on the :root selector so they apply to the entire page:

assets/css/default.css
:root {
--primary-color: #ff6b2c;
--secondary-color: #1a1a1a;
--text-color: #6b6b6b;
--heading-color: #111111;


--body-font: 'Poppins', sans-serif;
--heading-font: 'Poppins', sans-serif;
}
  • Primary#ff6b2c
  • Secondary#1a1a1a
  • Text#6b6b6b
  • Heading#111111

Ready-made theme files

Section titled “Ready-made theme files”

Leverage also includes alternate theme stylesheets you can swap in for an instant new look — for example theme-orange.css. A demo page loads its theme file in the <head> after default.css, so the theme’s colors override the defaults:

in each page's <head>
<link rel="stylesheet" href="assets/css/default.css" />
<!-- swap this line to change the whole palette -->
<link rel="stylesheet" href="assets/css/theme-orange.css" />
Wrapping upA few final notes and how to get in touch.