Configure brand colours in the HTML Experience with Experience Builder

experience builder experience builder summary your html experience can be styled with your brand colours in this article, you learn how to change the brand colours in the experience folder in the experience builder, by overwriting the existing ones in the colors css and the custom css afterwards, you will create a preview version and merge the changes to make them available in your app preconditions the following brand colours are necessary to ensure a harmonic colour matching primary brand colour (hex code) secondary brand colour (hex code) background colour (standard is white) in order to guarantee a harmonic design, use the same colours as in the native app areas how to guide 1\ go to experience builder, choose your app from the list and click on it 2\ click on 'pull from preview' 3\ click on 'default' 4\ click on 'storefront' 5\ click on 'assets' 6\ click on 'colors css' 7\ go to html body, to the line ' colorbrand ' and overwrite the hex colour with your brand colour, e g #ed9b64 for orange 8\ go to html body, to the line ' colorbrandsecondary ' and overwrite the hex colour with your secondary brand colour, e g #08546d for petrol 9\ go to html body, to the line ' colorlinktext' and overwrite the hex colour with your desired link text colour, e g the same as the secondary brand colour #08546d for petrol 10\ click on 'custom css' 11\ scroll down to ' root ' next to ' header bg ' overwrite the hex code with your desired background colour for the header in the app e g your secondary colour '#08546d' for petrol 12\ next to ' tab nav bg ' overwrite the hex code with your desired background colour for the tab navigation in the app e g your secondary colour '#08546d' for petrol 13\ next to ' tab nav fg active ' overwrite the hex code with your desired foreground colour for the tab navigation (when active) in the app e g your brand colour '#ed9b64' for orange 14\ next to ' footer bg ' overwrite the hex code with your desired foreground colour for the footer in the app e g your secondary colour '#08546d' for petrol 15\ click on the second symbol on the right below the burger menu to open the preview 16\ check your changes in the preview 17\ click on the burger menu 18\ click on 'update dynamic resources' in the dropdown 19\ name your changes in the input field, e g 'configured brand colours' 20\ click on 'merge all files to preview' you have successfully configured the brand colours in the experience html in your app, merged the changes and updated the dynamic resources you can test the result in the preview and push them live if they look fine, to make them visible in your live app