Review Stars

April 15, 2024

Choosing the Right Color for Review Stars

When selecting a color for review stars on a website, it is important to adhere to specific guidelines to ensure visual consistency and effectiveness. The primary color choice for review stars should be variations of yellow, as this is generally the default and most suitable option.

Default Color Choice: Variations of yellow, such as gold, should be used as the default color for review stars. This choice aligns with the common practice of using vibrant and attention-grabbing colors that stand out against most backgrounds, contributing to a cohesive and polished appearance.

Alternative Color Choices: Designers have the option to use variations of blue or green for review stars, but only if these colors are present in the client’s brand palette. If yellow is not an option or if there are specific brand guidelines that include blue or green, these colors can be used. However, blue and green should only be selected if they are part of the client's established brand colors.

Colors to Avoid: To maintain the effectiveness and visibility of review stars, avoid using the following colors:

  • Pale Tones: These can lack sufficient contrast and pose accessibility issues.
  • Colors Close to the Row Background: Such colors may not draw adequate attention to the review stars.

Psychology of Star Colors: Understanding the psychology behind star colors can help in making informed decisions. According to a December 2021 survey by ReviewInc, blue stars were the most trusted, with 28.4% of U.S. consumers preferring them. Blue’s association with security and permanence contributes to its positive perception. Green stars were preferred by 25.8%, while yellow stars were chosen by 25%. Red stars were least favored at 11.6%, and orange stars had an even lower preference at 9.3%.

Men generally trust yellow stars more, whereas women show a preference for red stars. Despite this, yellow, blue, and green remain the most reliable choices for review stars based on overall trust and visibility.

Conclusion:  For review stars, use variations of yellow as the default color to align with common practices and ensure design consistency. Variations of blue and green are acceptable only if they are part of the client’s brand colors. Avoid colors that may be perceived negatively or that lack visibility. Adhering to these guidelines will contribute to a positive online presence and enhance the overall effectiveness of review ratings.

Tips

If you decide to switch from the default yellow color, make sure to update all review-related widgets including:

Reviews Header (transparent and interior hdrs)

Homepage Reviews

Recent Reviews in the interior page right gutter, 

Review Page

Mobile Review

When possible, link the new color to the site's Theme Colors maintain consistency throughout the build and simplify color adjustments for future adjustments.

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 →