Step 1)

In your HubSpot account, Go to Marketing > Files and Templates > Design Tools



Step 2)

Search and find the stylesheet applied to your blog template in your folders and open it. It should be 'under Coded Files folder (e.g. Awwal_minimal_blog_template.css)

Step 3)


At the top of the stylesheet, we've added several variables to make things a little bit easier. Just change the color code here, It will be updated all over the template. You can control the color of most elements from here, below is the breakout of variables.




Let's break down which variable does what...


  • theme_color: This variable is for the main brand color (Affects 'Buttons' color, 'Topics' color, 'Links' color)
  • dark_color: Affects Buttons hover over color
  • light_color: Affects light backgrounds


  • heading_color: Pretty self explanatory, affects all titles (H1, H2, H3, H4, H5, H6)
  • text_color: Affects paragraphs
  • light_text_color: Affects low key texts


  • link_color: Affects color of links
  • link_hover_color: Affects the color that shows up when you hover over your links 


  • header_background_color: Affects header's main background
  • header_links_color: Affects header's nav menu links
  • header_links_hover_color: Affects header's nav menu links's hover color


  • footer_text_color:  Affects all text within footer (Not including nav menu links)
  • footer_background_color: Affects footer's main background
  • footer_links_color: Affects footer's nav menu links
  • footer_links_hover_color: Affects footer's nav menu links's hover color


  • main_background_color: Affects the blog's main background. (#FFF is the recommended color)


Step 4)

Publish changes and you're done.