Energy bars can be used as a leader line or as a border to give a more distinct look and feel.

Use the line horizontally or vertically.

Use the energy bar to call out primary messages.

You can crop to 50% for use as a leading border.

You can expand lines by their lengths.

You can adjust the color proportions to balance your design.

Energy bars with dot shapes should only point to the right or up.

Don’t modify the sectional shape. Keep it pill shaped.

Don’t modify the original colors of the line.


Energy bars are fixed height available in 8px and 12px. Energy bars are either horizontal or vertical. They’re never at an angle.


The line width should always be in the multiples of four.

There are two height options available for leader lines.


QuickBooks Accountants


Energy bars are a secondary element used as a content anchor or decorative border. They can be used to draw attention to a particular area, like a headline or on a banner as a border.

Energy bar with a dot should only point upward or to the right.

They may appear vertically or horizontally.

They may appear on only one side of a border on a module.

Energy bar don’ts

Don’t rotate it diagonally.

Don’t apply transparency.

Don’t mix other colors other than the original.

Don’t use the energy bar without a dot.

Don’t scale the line or dot individually.

Don’t separate the dot and line.

Don’t repeat multiple lines in close proximity.


  • Was this Helpful?