Theme Colors & Theme Text

Purpose / Why It Matters

Theme-driven design ensures Hibu One Smart Sites remain consistent and efficient to update. Using the theme:

Keeps colors and typography uniform
Allows site-wide changes through a single update
Reduces manual styling work and long-term maintenance
Prevents inconsistent overrides that lead to rework
Supports accessibility and responsive layout
Ensures system widgets inherit correct styling
Maintains predictable behavior across breakpoints

When colors or text styles are overridden manually on individual widgets, later changes become time-consuming, error-prone, and require element-by-element cleanup.

Theme Colors

What Theme Colors Are

Theme Colors define the global color palette for the site. Designers can configure up to 20 colors, apply them to widgets, and update all connected elements instantly through the theme. Theme Colors appear in Theme → Colors.

How Theme Colors Work

Any widget linked to a theme color updates automatically when the theme color changes.
Designers can create colors manually, enter HEX/RGB values, or generate a palette from the client’s logo.
Colors can be renamed or replaced without breaking their connection.

Theme Color Assignments

Black (B) — Global black / Do Not Change
White (W) — Global white / Do Not Change
Primary Brand (P)
Secondary Brand (S)
Accent Brand (A)
Header Background (W)
Header Text (B)
Footer Background (S)
Footer Text (W)
Navigation Background (P)
Navigation Text (W)
Thin Hero / Recent Reviews Background (S)
Engagement Menu (S)
Review Stars (yellow)
Why Choose Background (S)
Why Choose Text (B)
Why Choose Icon (B)
Button Primary (P)
Button Secondary (S)
Open Slot — Available for template-specific needs

Default Text vs. Paragraph Text

Editor 2.0 distinguishes between two key baseline text types:

Default Text (DFLT)

Applies to text not assigned a heading or paragraph style.
Used by system widgets (e.g., navigation text).
Includes link colors and link interaction states.
Serves as the typography “fallback” for unstyled text.

Paragraph Text (PAR)

The intended styling for content inside the Text Widget.
Should be used for all body copy, descriptions, and readable content.
Provides consistent spacing, readability, and hierarchy.

Why the Difference Matters

Using Paragraph Text for body content ensures consistency and readability, while Default Text maintains styling for system text and general-purpose elements.

Text Behavior and Overrides

How Theme Text Applies

Theme Text updates all elements connected to the theme.
Changes affect both existing content (unless individually overridden) and future widgets.
Heading sizes can adjust globally; heading colors will only update globally if not overridden.

Override Limitations

Manual text overrides—such as recoloring an individual heading widget—break the connection to the theme. This means:

Future theme changes will not update that element.
Restoration requires manually editing each overridden widget.
Overrides should remain rare and intentional.

Guidelines for Using Theme Colors & Text

Use Theme Settings Whenever Possible

Theme Colors and Theme Text should be the foundation for all:

Headings
Paragraph text
Buttons
Icons paired with text
Backgrounds and accents
System widgets

Avoid Manual Widget-Level Overrides

Manual overrides should only be used when a specific design pattern truly requires it. Excessive overrides:

Disrupt global styling
Increase maintenance time
Introduce inconsistencies
Create errors when updates are requested

Document Any Required Overrides

If a designer must override a theme style—color, font, size, or text treatment—they must leave a brief note or assumption explaining why the deviation was necessary.
This supports Amends, QA, and future design continuity.

< Older Post

Newer Post >

Theme Colors & Theme Text