--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/colour-and-branding' title: 'Use your brand colours | DXPR' author: name: docs-sync url: 'https://dxpr.com/users/docs-sync' date: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Apply your brand colours to sections, text and buttons with theme swatches and colour classes' tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Use your brand colours' description: 'Apply your brand colours to sections, text and buttons with theme swatches and colour classes' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-23T14:31:17+0000' dateModified: '2026-10-23T14:31:17+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/colour-and-branding' articleSection: 'Design guides' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/design/colour-and-branding' description: 'Apply your brand colours to sections, text and buttons with theme swatches and colour classes' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Style your elements](/hc/documentation/learn-dxpr-builder/element-settings) /[Design guides](/hc/documentation/learn-dxpr-builder/design/overview) # Use your brand colours. Apply your brand colours to sections, text and buttons with theme swatches and colour classes Learn DXPR BuilderBuild pagesStyle your elementsDesign guides ## In this guide Related guides - [Hover effects](/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Card styles](/hc/documentation/learn-dxpr-builder/design/card-styles) - [Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css) Apply your brand colours to sections, text and buttons so every page looks like it belongs to the same site. Every colour field in DXPR Builder shows your theme's palette as swatches, so you pick brand colours instead of guessing codes. The example gives a section your primary brand colour with white text. The video follows the steps below: it colours a section with your brand swatch and makes its text white. ## Before you start - Your brand colours live in the theme. With DXPR Theme, set them under **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), in the **Colors** panel. - DXPR Builder shows the first ten different colours of that palette as swatches. ## Colour a section 1. Hover the section, open **More** and choose **Settings**. 2. Open the **Style** panel. 3. Click the colour button of **Background**. The colour picker opens with your swatches. 4. Click your primary brand swatch. 5. Click the colour button of **Font color** and pick white. 6. Click **Save**. The paragraph text turns white; headings keep the theme's heading colour. 7. To make a heading white too, open the **Settings** of its **Text** element, pick white for **Font color** in its **Style** panel and click **Save**. ## What you see The section fills with your brand colour, and its paragraph text and heading turn white. The same swatches appear in every colour field. That includes the **Style** and **Hover style** panels, and the **Start color** and **End color** of a section's **Gradient** background. To use a colour outside the palette, type its code in the picker's text field, for example `#2196F3`. Move the opacity slider for a see-through colour. **Clear** removes the colour. ## Keep colours linked to the theme A swatch copies the colour's code into the element. If you change the theme palette later, that element keeps the old colour. To make an element follow the palette, use a colour class instead. Open the element's **Settings** and pick a chip under **HTML classes**: | Chip | What it does | |---|---| | **Primary background**, **Secondary background** and others | Bootstrap colours from your theme | | **Primary text color**, **Secondary text color** and others | Bootstrap text colours from your theme | | **Background color: DXPR Theme primary** | The DXPR Theme **Primary** colour, with its matching text colour | | **Text color: DXPR Theme accent1** | The DXPR Theme **Secondary** colour for text | The **DXPR Theme** chips appear only when DXPR Theme is enabled. ## Colour fields per element | Where | What it colours | |---|---| | **Style** panel: **Font color**, **Border color**, **Background** | The element itself | | **Hover style** panel: the same fields | The element while the pointer is on it | | **Button**: **Type** | A ready-made button colour scheme | | **Card**: **Type** | The background and text of the whole card | | **Alert**: **Type** | **Success**, **Info**, **Warning** or **Danger** | | **Section**: **Background effects** > **Gradient** | A blend of two colours | ## Readable colour - Keep enough contrast between text and background. WCAG 2.1 Level AA asks for at least 4.5 to 1 for normal text. - Do not use colour alone to carry meaning; pair it with a label or an icon. - Alternate section backgrounds, such as white, light grey and your brand colour, to give long pages a rhythm. ## If you don't see your colours - **The colour picker shows no swatches.** Your site's default theme provides no colour palette. Type your colour codes, or use a theme with a palette, such as DXPR Theme. - **An element keeps its old colour after you change the theme palette.** A swatch stores a fixed colour code. Pick the new swatch, or switch to a colour chip under **HTML classes**, which follows the palette. - **Background or Font color has no effect on a card.** A card **Type** other than **Default** sets its colours with theme classes that win. Set **Type** to **Default** first. ## What's next? - [Make elements react on hover](/hc/documentation/learn-dxpr-builder/design/hover-effects): change colours when visitors point at an element. - [Style your cards](/hc/documentation/learn-dxpr-builder/design/card-styles): apply your colours to cards. - [Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css): set brand rules that the panels do not cover.