Content comes first

Secondary elements are truly secondary. Using visual elements should always complement the content and user experience. They never detract from it.

Visuals are balanced

Putting together different visual elements creates harmony. Layouts are open and never over-crowded. White space creates balance between content and graphic elements.

Animation is complementary

Motion guides interaction and draws focus throughout a user experience. Animation is applied to secondary elements to further enhance the visual experience.

Crop and scale

Energy beams are created by connecting dots in a 45-degree, upward-facing angle. Three beams are layered together to form a single lockup.

Only use the precomposed lockup from this library.

Beams only appear in a 45-degree, upward-facing angle.

Crop

Crop energy beam lockups as needed.

Scale

Scale energy beam lockups as needed. Avoid drastic changes in size.

Color

Color is used to represent specific core offerings and provide each with a unique visual identity.

Use offering-specific colors in the context of that particular offering.

Only use the library of predefined colors provided.

Only use the offering lockups on a white background.

Blending mode

Blending mode is used so energy beams are visually recessed when used on a full-color background.

Only use the neutral/gray variants of the lockup.

Only use the predefined blending modes for the lockup.

Light Variant

 

Examples:

Dark Variant

 

Examples:

Energy beam don’ts

Don’t arrange beams in anything other than a 45-degree, upward-facing angle.

Don’t use uncropped beams.

Don’t deconstruct the energy beam lockup.

Don’t turn the beams in to a pattern.

Don’t scale it so the beam turns into stripes.

Don’t use the offering color as a splash background.

Don’t use blending modes other than the ones provided.

Don’t use colored beams on colored backgrounds.

Don’t change the transparency.

Don’t modify colors within the lockup.

Don’t layer lockups on top of photography.

Don’t use an energy beam as a cropping element.

Examples

  • Was this Helpful?
  •