Branding & Communication Material

Design

Visual Guidelines & Material

Logo

The logo comes in different forms based on where it's used for. Usually we use the 'landscape' variant. For round icons (used on social media for example), the logo's symbol only - without the logotype - can also be used (see below).

'Landscape' Variants

Click on each image to display it in full size.
Image
.svg (vector-based)
Image
.png
Image
.png
Image
.png

'Portrait' Variants

Click on each image to display it in full size.
Image
.svg (vector-based)
Image
.png
Image
.png
Image
.png

Squared 'Portrait' Variants & 'Symbol-only' Variants (.png)

All these variants can be put comfortably inside a circle for use in icons, social media images, etc. Click on each image to display it in full size.
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image

Colors

Main Colors

The following colors are used in the interfaces of the Zoe apps and website.
Primaryrgb(24, 166, 123)
#18a67b
Primary Lightrgb(70, 184, 150)
#46b895
BGrgb(24, 17, 68)
#181144
BG Lightrgb(46, 43, 111)
#2e2b6f
Gray Darkrgb(66, 66, 66)
#424242
Whitergb(255, 255, 255)
#ffffff
Warningrgb(217, 0, 34)
#d90022
Warning Lightrgb(239, 27, 55)
#ef1b37

Secondary Colors

The following colors are used more occasionally on the website.
Pinkrgb(220, 38, 116)
#dc2674
Orangergb(255, 102, 0)
#ff6600
Orange Altrgb(255, 127, 41)
#ff7f29
Green Brightrgb(20, 209, 127)
#14d17f
Grayrgb(99, 99, 99)
#636363
Gray Lightrgb(222, 222, 222)
#dedede
Gray Light +rgb(242, 242, 242)
#f2f2f2

Gradients

Here are some exemples of gradients that can be used as backgrounds or other elements. Note: the 140° gradient angle below is shown as an example.

BG – Primary

CSS Code:
background: linear-gradient
(140deg, #181144, #18a67b)

BG Light – Primary Light

CSS Code:
background: linear-gradient
(140deg, #2e2b6f, #46b895)

Primary – Primary Light

CSS Code:
background: linear-gradient
(140deg, #18a67b, #46b895)

BG – BG Light

CSS Code:
background: linear-gradient
(140deg, #181144, #2e2b6f)

Pink – Orange (custom)

CSS Code:
background: linear-gradient
(140deg, #ed1d71, #ECFFBC)

Purple - Orange Pastel - Yellow Light

CSS Code:
background: linear-gradient
(70deg, #5a1894, rgb(252, 152, 84), #faec8e)

Media

Images, Videos, Podcasts, Articles

Videos

Our videos are available on Zoe's Youtube channel. There you can find a variety of trailers, tutorials, and projects made with Zoe. Most of our content is organized by playlists; click here to see them.

Trailers

Templates (VR App)

Here are a few videos of the official templates available in the Zoe VR app. Click here to view the full playlist.

Images

Products Shots (VR App)

Image
Image
Image

App Screenshots (VR App)

Image
Image
Image
Image
Image
Image
Image

Products Shots (Mobile, beta)

Image
Image
Image
Image
Image

Mobile App Screenshots (Beta)

Image
Image
Image

Zoe for Unity Plugin Screenshots

Image
Image

Podcasts & Presentations

Press Articles