--- title: How to add my brand colors? description: How to add my brand colors? image: https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/logo-Aug-29-2023-10-10-20-3086-AM.png --- [![Nue_Logo](https://documentation.awwaldesign.com/hubfs/Nue_Logo.svg "Nue_Logo")](https://awwaldesign.com/) - Listing pages - [Regular Listing](https://nue.awwaldesign.com) - [Overview Listing](https://nue.awwaldesign.com/overview) - Post pages - [Post page](https://nue.awwaldesign.com/take-your-blog-to-the-next-level-with-awwal-blog-template-an-all-in-one-template-with-stunning-visual-elements) - System Pages - [404 page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=-XaabW5dXXpZ7NVZiAAadw&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FNue%20Blog%2Ftemplates%2FSystem%20Page%2FError%20404%20page.html&updated=1689745430109) - [500 page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=2mxdL-rRILi0jxKr2bHGhg&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FNue%20Blog%2Ftemplates%2FSystem%20Page%2FError%20500%20Page.html&updated=1689745458649) - [Search result page](https://nue.awwaldesign.com/search-result?term=architect&type=BLOG_POST) - [Email backup unsubscribe page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=h2LhnII0-LHFDjkPw0P9kg&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FNue%20Blog%2Ftemplates%2FSystem%20Page%2FEmail%20backup%20unsubscribe%20page.html&updated=1687860124858) - [Email subscriptions preference page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=Lpc_7GI4MeOFjZ-WM8n0Yw&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FNue%20Blog%2Ftemplates%2FSystem%20Page%2FEmail%20Subscription%20preferences%20page.html&updated=1689152541264&) - [Email subscriptions confirmation page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=QEg0j3ucpwLgujwwdpHzeQ&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FNue%20Blog%2Ftemplates%2FSystem%20Page%2FSubscription%20Confirmation%20Page.html&updated=1687865666617&) - [Password prompt page](https://3067823.hubspotpreview-na1.com/_hcms/preview/template/multi?domain=undefined&hs_preview_key=Q4a25aVHZRiCHwmEoHq4xA&portalId=3067823&tc_deviceCategory=undefined&template_file_path=AD-Theme%2FNue%20Blog%2Ftemplates%2FSystem%20Page%2FPassword%20Prompt%20Page.html&updated=1687857269373&) - [Multi purpose LP](https://templates.awwaldesign.com/nue-multipurpose-lp) - [Documentation](https://documentation.awwaldesign.com/nue-blog-theme) Buy Now ## What are you looking for? [Back](https://documentation.awwaldesign.com/nue-blog-theme) # How to add my brand colors? Created By Awwal Design Last Modified on: 1 Oct, 2024 Last Modified on: 27 Aug, 2023 > This section covers very basics of brand color, if you're tying to change the individual element' colors, checkout the detailed Theme Settings documentation.   [> tldr Version](https://documentation.awwaldesign.com/nue-blog-theme/how-to-add-my-brand-colors#tldr) Brand colors are controlled via Theme settings To edit your theme settings, you'll first need to create a blog post or a page with a Awwal Blog theme's template. If you've already done that move to the next step. The Theme settings can be accessed within the content editor by clicking the Theme tab on the left. Then click **Edit theme settings**. ![](https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/image-png-3-Aug-29-2023-10-10-20-8211-AM.png) This is your global theme settings where you can pretty much control everything. ![](https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/image-png-Apr-12-2023-06-06-07-6435-PM-Aug-29-2023-10-10-19-3251-AM.png) > See this article to know what you can else do in the [Theme settings](https://documentation.awwaldesign.com/awwal-blog-theme).   Let's focus on changing the brand colors for now. Open **Global Colors** section ![](https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/image-png-4-1.png) Here you can find all the global colors of your theme, simply add your colors here and and they will be updated throughout your theme on every single page. > Tip: Change your "View on" page to Awwal - Style Guide and you can easily preview all the elements.    ![Style Guide](https://documentation.awwaldesign.com/hs-fs/hubfs/Imported_Blog_Media/Style%20Guide-2.jpg?width=1894&height=932&name=Style%20Guide-2.jpg)   Below you can find the detailed overview of each section so you can get a better idea of which option control what. ###### ![How to add my brand colors_](https://documentation.awwaldesign.com/hs-fs/hubfs/Imported_Blog_Media/How%20to%20add%20my%20brand%20colors_-Aug-29-2023-10-08-24-2131-AM.jpg?width=380&height=1174&name=How%20to%20add%20my%20brand%20colors_-Aug-29-2023-10-08-24-2131-AM.jpg)   ### Detailed Breakdown below   ###### Primary theme color: This variable is for the main brand color (Affects 'Buttons' color, 'Topics' color, 'Links' color) ###### Titles: Pretty self explanatory, affects all titles (H1, H2, H3, H4, H5, H6)   ###### Body Color: Affects all body texts. Example paragraphs, lists. You can overwrite it from the rich text editor if you want to highlight certain part text.   ###### Main Background: Affects the blog's main background. (#FFF is the recommended color)   ###### Backgrounds: This is the color of section backgrounds, example this bar below. ![](https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/image-png-Apr-10-2023-08-21-52-9263-AM.png) Or comment box you see on the post page. ![Comment area](https://documentation.awwaldesign.com/hs-fs/hubfs/Imported_Blog_Media/Comment%20area-2.png?width=486&height=453&name=Comment%20area-2.png) ###### Borders: This controls the all border colors in the theme (Form inputs, card borders, dividers etc.) ###### Dark Elements: This affects the smaller UI elements. It is best to keep it as it is. ###### Primary Accent: This color is used to highlight cerein areas or texts. Example this Content block ![](https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/image-png-Apr-10-2023-10-03-43-4715-AM.png) ###### Secondary Accent: This color is used to highlight certain areas or texts. Example this Content block.   ###### White Elements: This affects the smaller UI elements. It is best to keep it as it is. ###### Gray Elements: This affects the smaller UI elements other sections, It is best to keep it as it is.   --- ### Publishing Once you've made all the changes, simply slick the Publish Assets button right at the top and all your changes will be published. ![](https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/image-png-Apr-11-2023-04-56-54-8234-PM.png)   ---   tldr: - Add your primary color in the theme color. - Add your title colors (Headings) - Add your body color (Paragraphs, lists etc.) ![](https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/image-png-Apr-10-2023-10-21-25-6896-AM.png) And you should be pretty much all set just by updating these three colors. ### Didn’t find what you were looking for? Feel free to reach out and we’ll get back to you! [![awwal-logo-white](https://documentation.awwaldesign.com/hubfs/awwal-logo-white.svg "awwal-logo-white")](https://awwaldesign.com/) Write a brief description of your company or services here. keep it short but make it interesting enough to make user want more. Important Links - Home - Services - About Us - Blog - Contact Us - Get Started [123 456 7890](tel:123%20456%207890) [123 456 7890](tel:123%20456%207890) [123 456 7890](tel:123%20456%207890) Copyright @ 2023. All Right Reserved. Made with love by [Awwal Design](https://awwaldesign.com/) - - - ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Awwal Design", "url" : "https://documentation.awwaldesign.com/nue-blog-theme/author/awwal-design" }, "dateModified" : "2023-08-29T11:16:53.226Z", "datePublished" : "2023-08-27T04:00:00.000Z", "headline" : "How to add my brand colors?", "image" : [ "https://documentation.awwaldesign.com/hubfs/Imported_Blog_Media/logo-Aug-29-2023-10-10-20-3086-AM.png" ], "mainEntityOfPage" : { "@id" : "https://documentation.awwaldesign.com/nue-blog-theme/how-to-add-my-brand-colors", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://documentation.awwaldesign.com/hubfs/awwal-logo-2.svg" }, "name" : "Awwal Design" } } ```