Guidelines for Using White and Black with Recent Colors

January 23, 2025

Guidelines for Using White and Black with Recent Colors

When designing a site, it’s essential to make strategic use of theme colors for consistent, quick, and efficient design updates. To maximize the flexibility of your site's color palette, we recommend leveraging the locked Recent Colors pure white (#FFFFFF) and pure black (#000000) for foundational design elements, such as text, backgrounds, icons, and other structural components.

Why Use Recent Colors White and Black?

  • Limited Theme Color Placeholders: Assigning white and black to the default Recent Colors ensures you can save your theme color placeholders for other unique colors in your palette. This approach helps you use your theme colors more effectively.
  • Locked and Persistent: The Recent Colors white and black cannot be deleted or changed. This ensures that these colors remain stable, even if theme colors are reset. By contrast, Saved Colors (non-theme colors) can be overwritten or lost when reset, which is why we advise caution when using them for white or black.

Best Practices for White and Black

  1. Connect Elements to Recent Colors:
    If you are using pure white or pure black, always use the locked Recent Colors white and black for maximum stability. You can either connect these colors directly to site elements or define them as theme colors if needed.

  2. Avoid Using Saved Colors for White and Black:
    Do not assign white or black using Saved Colors, as saved colors can be reset or lost during updates.

  3. Flexibility for Designers:
    Using Recent Colors for white and black does not limit your creativity. You can still assign unique shades or variants of white or black through theme colors if your design requires it.         Remember, your theme color palette is yours to define.


Final Note:

Linking site elements to theme colors streamlines updates and ensures design consistency. A single change in the Theme Colors panel updates all linked elements, saving time and maintaining cohesion. Reserve theme color slots for non-default colors to enhance flexibility. While elements default to white and black, you are not restricted to these; as the designer, you have the final say on your site's color palette. To maintain an easily updatable and visually consistent site, always assign updates—such as button colors—using Theme Colors.

Editor 2.0 - Size and Units

By Hibu Sections • April 9, 2025
In this section, you’ll learn how to control the size of elements using different types of units in Editor 2.0. We’ll break down how viewport width (vw) and height (vh) respond to the browser window, how the auto unit allows containers to resize based on their content, and how min/max values help you keep your elements within practical size limits. Together, these tools give you greater control over how your site adapts across devices—without relying on fixed pixel values.

Editor 2.0 - Flexbox: Columns and Inner Columns

April 9, 2025
Flexbox is the foundation for how columns behave in Editor 2.0. It controls how elements stack, align, and space themselves inside containers, giving you full control over layout across different screen sizes. By adjusting properties like stacking direction, content alignment, and wrap, you can create clean, organized designs that adapt smoothly to any device. These features help prevent layout issues, make better use of space, and simplify how you manage rows and individual elements. Learning how to use Flexbox effectively leads to faster builds and more consistent, responsive websites.

Editor 2.0 - Layouts Elements & Layers Panel

By Hibu Sections • April 9, 2025
Understanding layout elements and the Layers Panel is key to building clean, responsive websites. Layout elements help you control structure—how widgets are grouped, how content stacks, and how different parts of the page respond across breakpoints. The Layers Panel gives you a clear view of that structure, making it easier to manage complex sections, find hidden elements, and keep your layout organized. Together, these tools let you build with more precision, troubleshoot faster, and maintain consistency across the entire site.

Editor 2.0 - Breakpoints

By Hibu Sections • April 8, 2025
Breakpoints are specific screen widths where your website layout shifts to fit different devices, like phones, tablets, and desktops. They’re a key part of responsive design, allowing you to adjust styles so your site looks and works well on any screen. In the editor, you can see how styles behave at each breakpoint, apply universal styles, and override them when needed. You can also preview your site at different screen sizes to make sure everything looks right.
Show More →