Visor Brand & Design Guidelines
🎨

Visor Brand & Design Guidelines

icon
Updated June 21, 2023
  • Tokens
  • Colors
  • Digital
  • Pantone
  • Logos
  • Logo Usage
  • Typography
  • Textures & animations
  • Backgrounds
  • Nodes, arcs, and grids
  • Semantic colors
  • Text Lighting

Tokens

Colors

Digital

Colors.pdf1824.2KB
image

Pantone

Visor brand blue: Pantone 2382 C (https://www.pantone.com/color-finder/2382-C)

Visor brand green: Pantone 7479 C (https://www.pantone.com/color-finder/7479-C)

Logos

image
image
blue---has-logotype---horizontal.png24.6KB
blue---has-logotype---horizontal.svg2.9KB
blue---has-logotype---horizontal.pdf5.7KB
white---has-logotype---horizontal.png22.2KB
white---has-logotype---horizontal.svg2.9KB
white---has-logotype---horizontal.pdf5.7KB
image
image
blue-monochrome---has-logotype---horizontal.png24.3KB
blue-monochrome---has-logotype---horizontal.svg3.2KB
blue-monochrome---has-logotype---horizontal.pdf5.5KB
white-monochrome---has-logotype---horizontal.png21.9KB
white-monochrome---has-logotype---horizontal.svg3.2KB
white-monochrome---has-logotype---horizontal.pdf5.5KB
image
image
blue---has-logotype---vertical.png8.2KB
blue---has-logotype---vertical.svg2.9KB
blue---has-logotype---vertical.pdf5.5KB
white---has-logotype---vertical.png7.6KB
white---has-logotype---vertical.svg2.9KB
white---has-logotype---vertical.pdf5.5KB
image
blue-monochrome---has-logotype---vertical.png8.2KB
blue-monochrome---has-logotype---vertical.svg3.2KB
blue-monochrome---has-logotype---vertical.pdf5.4KB
image
white-monochrome---has-logotype---vertical.png7.4KB
white-monochrome---has-logotype---vertical.svg3.2KB
white-monochrome---has-logotype---vertical.pdf5.4KB
image
blue.png3.3KB
blue.svg0.3KB
blue.pdf1.9KB
image
white.png3.3KB
white.svg0.3KB
white.pdf1.9KB
image
blue-monochrome.png3.2KB
monochrome-blue.svg0.6KB
monochrome-blue.pdf1.8KB
image
white-monochrome.png3.1KB
monochrome-white.svg0.6KB
monochrome-white.pdf1.8KB

Logo Usage

Logo.pdf938.7KB
image

Typography

Lato Font.zip649.6KB
Typography Reference.pdf805.1KB
image

Textures & animations

Backgrounds

Backgrounds are primarily white / light. Simple circular shapes are used to add playfulness to page and container backgrounds.

image
image
image

Nodes, arcs, and grids

Visor has the world’s most deeply connected integrations. As such, we use visual artifacts like nodes, arcs, and grids to reflect our core value proposition. These shapes can also be used in animations to help reflect the motion of data / information.

image
image
image

Semantic colors

Colors are also used to focus targeted sets of information to customers / users.

image

Text Lighting

Text takes on several states to mimic a light up effect, helping to indicate focus.

image
icon
The above design aesthetic (dark background, wavy textures, glow/shadow on the text) is legacy, but using colors in animation to provide focus on specific text is still a valid tool to use.