Colors & brand¶
Flexoraa uses a fixed set of color tokens. Every module's color options point back to these, so setting them here restyles the whole site.
The palette¶
| Token | Swatch | Value | Used for |
|---|---|---|---|
| Primary | #000046 | Main brand color: headers, primary buttons, key accents | |
| Secondary | #1cb5e0 | Supporting color: links, secondary buttons, highlights | |
| Tertiary | #F5C542 | Accent color: occasional highlights and details | |
| Dark | #1A1A3E | Dark surfaces and high-contrast text | |
| Light | #F4F4FF | Light surfaces and text on dark areas | |
| Color 1 | #C084FC | Extra accent (purple) | |
| Color 2 | #0D0D1A | Extra dark surface | |
| Color 3 | #6B7280 | Muted text and borders |
There is also a white transparent token (#FFFFFF at 8% opacity) for soft glassy overlays.
Set your brand colors¶
- Open Theme Settings > Colors.
- Set Primary and Secondary to your brand colors. These also inherit from your HubSpot Brand Settings if configured there.
- Adjust Tertiary and the support colors as needed.
Change once, update everywhere
Because every module references these tokens, changing Primary here updates all primary buttons, links, and accents across the site at once.
How modules use colors¶
Module color fields show your palette by name (for example Primary, Secondary), so a marketer picks a brand color without touching hex codes. Most fields also offer a Custom option for one-off needs.