Header
Divider Lines

Lines direct focus, define space, and create visual rhythm.

It’s a simple way to separate HP from just any brand. 

Divider Lines

HP takes a structural, yet synergic, approach every time we innovate. Parallelly, lines guide the eye to reveal what’s next.

Use horizontal divider lines to separate content from top to bottom, different sections or ideas, or items in a list, such as product specs.

Divider lines should run edge to edge of the layout or section (with the exception of lists).

Use lines to separate headline-only layouts, lists, quotes, multiple lines of content. Note, not all layers of text need lines. 

  • Headline Only

  • List

  • Quote

  • Multiple lines

Section Spacing

Don’t stress over space. Even when it's limited, you can apply some consistency across all assets.

Avoid intersecting or touching letter loops and descenders (ex: p, g, y, and q) with lines.

You can use color stacking of tints as an alternative to divider lines. If you choose this design route, follow the same rule of line spacing to avoid overlap.

 

Here’s a hack for spacing lines and color stacking:

This example features (p) and (g) as jigs to guide placement.

  1. Measure the height of the (p) descender.
  2. Take half of that length and place it on the top of the loop of the (g).
  3. Where that ends is where you can place the line. 

Lines and Photos

While overlapping happens, avoid crossing the line for these lifestyle and product photo instances. 

Lifestyle

Do

Dont

Minimal overlap is okay over lifestyle layouts.

Don’t place lines directly over faces.

Contrast

Do

Dont

Leverage areas of clear space and high contrast to keep the image in focus.

Don’t lose line visibility from weak contrast or too much going on.

Type

Do

Dont

Try to frame type by using lines strategically.

Don’t leave a line of type hanging by itself.

Product

Do

Dont

Minimal overlap is okay over product photography.

Don’t place lines directly over the majority of the product.

Space

Do

Dont

Apply lines as a tool to guide the eye without overpowering.

Don’t allow lines to take up 50% of the photo.

  • Lifestyle

  • Contrast

  • Type

  • Product

  • Space

Lines and Graphics

Graphics follow much of the same logic with lines.

Only use icons when text and/or an image alone don’t provide enough context.

Keep graphics and divider line weight the same. Leverage the HP icon library and adjust weight to match the divider line.

Just like lines, icons should either be black (over color background) or white (over imagery).

Vertical Lines

While our visual identity revolves around horizontal lines, vertical lines support specific design needs.

Vertical lines serve as a skeleton or wireframe for traditional color-blocked layouts or backgrounds. You can apply them over full-bleed photos or neutral single-color backgrounds.

You can also use vertical lines to separate long, horizontal or scrollable layouts, for instance web pages, editorials, or content-heavy charts.

Do’s and Don’ts

Color

Do

Dont

Only use black or white lines (and match the type).

Don’t use a line color other than black or white (and always match with the type).

Weight

Do

Dont

Keep all lines the same weight for a clean, consistent look.

Don’t assign multiple weights per line or more than one line per section.

Color or Lines

Do

Dont

Separate content using color stacking or lines.

Don’t use both color stacking and lines to separate content.

Edge to Edge

Do

Dont

Take lines to the edges, except for listed sections.

Don’t tack space on the edges (unless it’s a list).

Layout

Do

Dont

End lines at the edges of the layout section.

Don’t cross into faces in photography or go over products.

Orientation

Do

Dont

Integrate horizontal lines for effect (with some vertical exceptions).

Never incorporate diagonal lines (unless it’s a DON’T example like this).

  • Color

  • Weight

  • Color or Lines

  • Edge to Edge

  • Layout

  • Orientation

Footer