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.
Scale
Energy bars are fixed height available in 8px and 12px. Energy bars are either horizontal or vertical. They’re never at an angle.
Usage
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
Examples


