As those are two completly different templates(and not a template pack) I'm recomending to insert your logo in the site settings which can be found here:
- "settings-cog"( on the top-right of the HubSpot Top Nav-bar)
- Marketing
- Website
- Logos
The color sheme can be customized by editing the .css of the template. Normaly there is somewhere in the beginning something like(in my template pack it's around line 340 so search for it )
{% set primaryColor = "#0e395a" %} /* {# Primary Color | Ex. "color: {{ primaryColor }};" #} */
{% set secondaryColor = "#ff365b" %} /* {# Secondary Color | Ex. "color: {{ secondaryColor }};" #} */
{% set borderRadius = "0px" %} /* {# Gray Color | Ex. "color: {{ borderRadius }};" #} */
/* Typography */
{% set baseFontFamily = "'Roboto Condensed', sans-serif" %} /* {# Used on 'Headlines' in 'Base' | Ex. "font-family: {{ baseFontFamily }};" #} */
{% set bodyFontFamily = "'Nunito Sans', sans-serif" %} /* {# Used on 'body' in 'Base' | Ex. "font-family: {{ bodyFontFamily }};" #} */
{% set baseFontSize = "18px" %} /* {# Used on 'body' in 'Base' | Ex. "font-size: {{ baseFontSize }};" #} */
{% set baseLineHeight = "1.7" %} /* {# Used on 'body' in 'Base' | Ex. "line-height: {{ baseLineHeight }};" #} */
If you edit the hex code ("#0e395a") to another hex-code you will change the color of everything where the {{ primaryColor }} tag is used. If you want to find out, which color you have to edit just look it up with the inspector tool of your browser. For Chrome and Firefox it's "CTRL+Shift+i"(CMD+shift+i)