Brand Guidelines
Intro
This document outlines all the elements comprising the Sylvera brand, including the logo, colour palette, typography, grid, as well as their correct usage.
Use this document as a guide to maintain consistency while producing assets, as well as the foundational rules on which you can build on top.
To incentivize investment in real climate action
Press Pack
Access the product shots, founder headshots, and business description in the link below. For more information please contact Sylvera team.
Download packThe Sylvera logo is comprised of two elements: the Logomark (the icon) and the Logotype.
The Logomark is a minimal geometric symbol that depicts our planet, and its transition from a high emitting state towards a greener, net zero future.
The Logotype is a custom edit of the typeface Geograph Medium by Klim Type Foundry. This typeface should be used exclusively for the Sylvera Logotype, as well as any future Sylvera sub-brands. This ensures consistency while scaling the brand architecture.
Clearspace
It is essential to allow enough clearspace around the logo. The diagram shows how the minimum spacing was determined.
Logo Usage
Below are some guidelines on how not to use the logo, and ideas for how to use it.
Do not rotate the logo.
Do not stretch the logo.
Do not crop the logo.
Do not apply any effects directly on the logo (ex. drop shadow).
Do not edit individual elements of the logo.
Do not use colours not approved for logo use.
Sub-brands
When creating subbrands, we recommend using the Logotype font (Geograph by Klim Type Foundry) in a Regular weight in lowercase, adjacent to the vertical logo lockup, and highlighted in one of the brand colours.
Partnership Lockups
When pairing the Sylvera logo with a partnering logo, we recommend adding a thin 1px vertical line between the two logos.
Colour palette
Back to the table of contents
The Sylvera colour palette is composed of a set of neutral, brand, primary, secondary, and data colours.
Neutrals
HEX #FBFAF7
RGB 251, 250, 247
CMYK 0, 0, 0, 0
HEX #FBFAF7
RGB 247, 245, 239
CMYK 1, 1, 4, 0
HEX #EFEDE3
RGB 239, 237, 227
CMYK 6, 4, 10, 0
HEX #01311D
RGB 1, 49, 29
CMYK 85, 50, 82, 67
PSM 3308C
Logo Only
HEX #3ACB5A
RGB 58, 203, 90
CMYK 68, 0, 87, 0
PMS 360C
Primary
The primary brand colours are Lime and Neon Blue. They can both be used against Off-White and Forest.
HEX #BFF102
RGB 191, 241, 2
CMYK 30, 0, 100, 0
PMS 382C
HEX #605CFF
RGB 96, 92, 255
CMYK 72, 62, 0, 0
PMS 2725C
Secondary
A range of secondary colours to be used occassionaly across the brand.
HEX #CEA2FA
RGB 206, 162, 250
CMYK 23, 40, 0, 0
PMS 264C
HEX #FCE491
RGB 252, 228, 145
CMYK 2, 7, 52, 0
PMS 7401C
HEX #48BCFD
RGB 72, 188, 253
CMYK 57, 10, 0, 0
PMS 292C
HEX #052185
RGB 5, 33, 133
CMYK 100, 94, 16, 8
PMS 287C
HEX #73043C
RGB 154, 4, 60
CMYK 38, 100, 53, 37
PMS 491 C
Data Colours
HEX #F20C59
RGB 242, 12, 89
HEX #FF8B47
RGB 255, 139, 71
HEX #FFB914
RGB 255, 185, 20
HEX #FFE32A
RGB 255, 227, 42
HEX #3ACB5A
RGB 58, 203, 90
HEX #0F7435
RGB 15, 116, 53
Data Colours
Colour balance in product
Typography
Back to the table of contents
At the core of the Sylvera identity is the clear and simple typography. The main display font in Sylvera identity is Aeroport, it's type family is consistent with the shapes present in the Sylvera logomark. Secondary typeface is Maison Neue, it's used as a body font and as well as a caption font.
Display Typeface
The Sylvera display font is Aeroport family by Brownfox Type Foundry. Taking inspiration from both German geometric sans serifs and Swiss neogrotesques, the type family is consistent with the shapes present in the Sylvera logomark: the circle (ex. 'e', 'o', 'c') and the abrupt linear cut (ex. 'k','M','S').
Aeroport Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Aeroport Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Body Typeface
The Sylvera body font is Maison Neue by Milieu Grotesque. This slightly condensed, optically balanced workhorse is used throughout the identity for paragraph text, long-format text, and for product.
Maison Neue Book
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Maison Neue Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Maison Neue Demi
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Caption Typeface
The Sylvera caption font is Maison Neue Mono, it's primary use for caption, tags and labels.
Maison Neue Book
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Typography Scale
Examples
Web-safe fonts
Some tools don't support custom fonts, such as Aeroport and Maison Neue. In such cases, use the Web-safe alternatives for both fonts.
Aeroport -> Poppins
Maison Neue -> Manrope
Aeroport Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Poppins Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Maison Neue Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Manrope Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Graphic Elements
Back to the table of contents
This set of shapes have been inspired by different methods of projecting maps on a flat surface.
Shape 1
(Lambert Equal Area Conic)
Shape 2
(Lagrange)
Shape 3
(Canters)
Shape 4
(Laskowski Tri-Optimal)
Shape 5
(McBryde-Thomas)
Shape example uses
Blogpost thumbnail
Blogpost Thumbnail
Graphs and app snapshots examples
The icons have been created using a 24px grid, with a 2px safe space border. Recommended colours to be used for icons: Forest, Lime, Mauve, Off-White-1.
Web Grids
Web Grids
For digital and print uses, we use a longitude/latitude grid system. Instead of using 360 divisions, we use a simplified 12 divisions.
Step 1
Divide the document size in 12 vertical and horizontal lines.
Step 2
Select 1 horizontal, and 1 vertical line, and delete the rest.
Step 3
Position the content in the remaining space, with at least 1REM padding for text, icons, logos.
Photography
Back to the table of contents
Few examples of brand photography & uses. For people, office photography, we recommend including a natural backdrop, or indoor plants.
Industrial photography
Aerial Photography
Maps
Lime
Hex #BFF102
RGB 191, 241, 2
Mauve
Hex #C
RGB 206, 162, 250
Red
Hex #B60943
RGB 182, 9, 67
