Brand Guide

This is the official brand guide for VSHN.

VSHN Logos

Our logo looks like an eye because VSHN is pronounced like "vision". The black parts on both sides are a reference to the angle brackets of HTML code, and the circle in the middle represents the earth.

Color

SVG

PNG (White background)

PNG (Transparent background)

Main

Square

No Text

Square, no text

White (Transparent Background)

SVG

PNG

Main

Square

No Text

Square no text

Download all logos in a single zip file: vshn_logos.zip.

APPUiO Logos

APPUiO - expert hosting for expert software engineers

SVG

PNG

Main

APPUiO by VSHN

Mascot

Our mascot is called VSHNbot and it likes to automate things.

Color

	File
Normal
Animated (GIF)
Animated Wide (GIF)

File

Normal

Animated (GIF)

Animated Wide (GIF)

White

	File
Normal
Animated (GIF)
Animated Wide (GIF)

File

Normal

Animated (GIF)

Animated Wide (GIF)

Color Codes

Onyx (logo): rgb(68, 68, 68) or #444444.
Example
Steel Blue (logo): rgb(64, 129, 203) or #4081CB
Example
Rich Black (titles, main text, background): rgb(0, 13, 26) or #000D1A
Example
Amber (buttons, illustrations): rgb(255, 191, 0) or #FFBF00
Example
Capri (links, illustrations, indicators): rgb(76, 195, 255) or #4CC3FF
Example

Font

The official VSHN font is Montserrat, designed by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, and Jacques Le Bailly.

Headers use Montserrat Bold with font weight 900.
Body text uses Montserrat Regular with font weight 400.

CSS

Include the Montserrat font in your projects using this command:

$ npm install typeface-montserrat

Make it available to your stylesheets as follows:

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src:
    local("Montserrat Regular"),
    local("Montserrat-Regular"),
    url(~typeface-montserrat/files/montserrat-latin-400.woff2) format("woff2"),
    url(~typeface-montserrat/files/montserrat-latin-400.woff) format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 400;
  src:
    local("Montserrat Italic"),
    local("Montserrat-Italic"),
    url(~typeface-montserrat/files/montserrat-latin-400italic.woff2) format("woff2"),
    url(~typeface-montserrat/files/montserrat-latin-400italic.woff) format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  src:
    local("Montserrat Bold"),
    local("Montserrat-Bold"),
    url(~typeface-montserrat/files/montserrat-latin-900.woff2) format("woff2"),
    url(~typeface-montserrat/files/montserrat-latin-900.woff) format("woff");
}

@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 900;
  src:
    local("Montserrat Bold Italic"),
    local("Montserrat-BoldItalic"),
    url(~typeface-montserrat/files/montserrat-latin-900italic.woff2) format("woff2"),
    url(~typeface-montserrat/files/montserrat-latin-900italic.woff) format("woff");
}

Desktop Wallpapers

You can find an assortment of wallpapers for your desktop in our Nextcloud under this direct link.

Virtual Backgrounds for Zoom

You can find and assortment of virtual Zoom backgrounds in our Nextcloud under this direct link.

Company Description

VSHN - The DevOps Company

VSHN automates the operation of applications in the cloud or on-premise, so that you as a software developer can have peace of mind and build your awesome application. VSHN is the Ops in DevOps.

Also see: www.vshn.ch/en/about/ and handbook.vshn.ch/values.html