Colors & brand¶
Global settings
Flexoraa uses a fixed set of color tokens. Every module's color option points back to these, so setting them here restyles the whole site.
The palette¶
#1830A9#029CF5#5B80F4#131516#F7F7FA#FFFFFF#000000#FFFFFF 8%| Token | Value | Editable | Used for |
|---|---|---|---|
| Primary | #1830A9 | Yes | Headers, primary buttons, key accents |
| Secondary | #029CF5 | Yes | Links, secondary buttons, highlights |
| Tertiary | #5B80F4 | Yes | Occasional highlights and details |
| Dark | #131516 | Yes | Dark surfaces and high-contrast text |
| Light | #F7F7FA | Yes | Light surfaces and text on dark areas |
| White transparent | #FFFFFF at 8% | Yes | Soft glassy overlays |
| White | #FFFFFF | No | A true white surface, independent of the brand palette |
| Black | #000000 | No | A true black surface, independent of the brand palette |
Six of these are yours to set in Theme Settings › Colors. White and Black are fixed values: they are offered wherever you pick a background so you can reach a pure white or pure black surface without spending a brand slot on it.
Set your brand colors¶
- Open theme settings
Go to Theme Settings › Colors. - Set Primary and Secondary
These are your two brand colors. If HubSpot Brand Settings are configured, Flexoraa inherits from them on first install. - Adjust the support colors
Tertiary is for accents, and White transparent is the tint used for glassy overlays. Leave them alone unless a design calls for it. - Publish the change
Theme setting changes go live on publish and apply across every page at once.
Change once, update everywhere
Because every module references these tokens, changing Primary updates all primary buttons, links and accents across the site in one move.
Setting colors in HubSpot Brand Settings¶
Flexoraa can pull your Primary and Secondary colors straight from HubSpot's own Brand Settings the first time the theme is installed. If you'd rather set your brand colors there, here's where to find them.
- In the HubSpot navigation, click the three dots at the end of the left sidebar.
- Click Marketing, scroll down a little, and click Brand.
- This opens the Brand Identity page. Scroll down to the Colors section.
- Click Add to add a color, or click an existing swatch to edit it.
- Enter the color's hex value (or pick it from the color picker) and give it a name.
- Click Save.
This only affects new installs
Flexoraa reads these colors once, when the theme is first installed on the portal. After that, Theme Settings › Colors is the source of truth, so changing Brand Settings later won't move colors you've already set there. Update Primary and Secondary directly in Theme Settings instead.
How modules use colors¶
Module color fields show your palette by name (Primary, Secondary and so on), so a marketer picks a brand color without touching a hex code. Most fields also offer a Custom option for one-off needs.
Every background picker in the theme now offers the same list in the same order:
Default · Primary · Secondary · Tertiary · Light · Dark · White · Black · White transparent · Custom color · Custom gradient
That covers Section background settings › Color, the Card UI settings › Background on cards, and the blog post Tag background. Default leaves the surface to the section's color scheme rather than painting anything.
Dark backgrounds need a dark scheme
Picking Dark or Black does not flip the text color. Set the module's Color scheme to Dark alongside it, or you get dark text on a dark surface.