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

Servala Logos

Servala is the VSHN managed services platform.

Color

Horizontal

Stacked

Color

Black

White (Transparent Background)

Horizontal

Stacked

Color (white text)

White

Icon

	Color	Black
Icon

Color

Black

Icon

	White
Icon

White

Icon

Mascot

	Servala	Sir Vala
Mascot

Servala

Sir Vala

Mascot

Servala Color Codes

Servala Purple (primary): #9A63EC
Example
Charcoal (text / dark elements): #333333
Example
Lavender (secondary / soft UI elements): #C4ACE0
Example
Soft Blush (background / light sections): #FCEAFF
Example
Mint Teal (accent / highlights): #64BAAA
Example

Font

The official Servala font is Archivo.

Headers use Archivo Bold with font weight 700.
Body text uses Archivo Regular with font weight 400.

Alternative / compatible font: Montserrat

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

Font

The official Servala font is Archivo.

Headers use Archivo Bold with font weight 700.
Body text uses Archivo Regular with font weight 400.

Alternative / compatible font: Montserrat

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

Project Syn Logos

Project Syn is the VSHN-initiated open source project for configuration management and automation. Find all visual design assets and guidelines on the Project Syn Visual Design page.

SVG

PNG

Wide

Square

Project Syn Color Palette

Primary Dark: #1A1E54
Example
Accent Red: #AB3643
Example
Accent Yellow: #FFBF00
Example
Accent Cyan: #A1E0E9
Example

Full palette: coolors.co/1a1e54-ab3643-ffbf00-a1e0e9

K8up Logos

K8up is the Kubernetes backup operator. Find all visual design assets and guidelines on the K8up Visual Design page.

SVG

PNG

Main

Square

K8up Color Palette

Primary Blue: #1A5CE6
Example
Mauve: #A08794
Example
Dusty Rose: #BB7E8C
Example
Soft Taupe: #C9B6BE
Example
Light Lavender: #D1BECF
Example

Full palette: coolors.co/1a5ce6-a08794-bb7e8c-c9b6be-d1becf

Espejote Logos

Espejote is the Kubernetes object reflection and templating controller.

Color

	SVG
Main
Icon

SVG

Main

Icon

White (Transparent Background)

	SVG
Main
Icon

SVG

Main

Icon

Mascot

	PNG
Mascot

PNG

Mascot

Codey Logos

Codey is the VSHN AI coding assistant.

Color (Dark Background)

SVG

PNG

Logo

Icon

Transparent Background

SVG

PNG

Logo

Grayscale

Icon

Codey Color Palette

Codey Green: #40F8C7
Example
Dark Background: #1A1D21
Example

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)

VSHN 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 @fontsource/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(~@fontsource/montserrat/files/montserrat-latin-400.woff2) format("woff2"),
    url(~@fontsource/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(~@fontsource/montserrat/files/montserrat-latin-400italic.woff2) format("woff2"),
    url(~@fontsource/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(~@fontsource/montserrat/files/montserrat-latin-900.woff2) format("woff2"),
    url(~@fontsource/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(~@fontsource/montserrat/files/montserrat-latin-900italic.woff2) format("woff2"),
    url(~@fontsource/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 an 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