HTML Templates •
Last updated: January 21, 2026

Brandflow Theme Customization

Brandflow HTML Site Template

Table of Contents

Brandflow relies on Tailwind CSS v4’s @theme configuration for a centralized design system.

Brand Colors

Brandflow uses a specific Gold and Dark color scheme. You can change this globally in assets/css/custom.css.

Find the @theme block:

   --color-goldenrod-800: #EABA3F; /* Primary Accent */
   --color-dark-600: #17171A;      /* Primary Background */
   --color-gray-600: #A3A3A3;      /* Body Text */

Change these hex codes to match your brand identity. For example, replacing #EABA3F with a blue hex code will update buttons, links, and accents across the entire site.

Typography

Brandflow loads DM Sans and Work Sans from Google Fonts.

To switch fonts:

  1. Update the <link> tag in the <head> of your HTML files.
  2. In assets/css/custom.css, update the font families if you are defining custom utilities, or simply rely on Tailwind’s font stack.

Container Width

Brandflow uses a custom responsive container. Adjust the max-width in assets/css/custom.css under @utility container if you need a wider or narrower layout.

Animation Settings

Brandflow uses AOS (Animate On Scroll).

  • Duration: data-aos-duration="1000" (1 second).
  • Effect: data-aos="fade-up".

Edit these attributes directly in the HTML tags to speed up, slow down, or change the animation style.