Brand Guidelines

Identity,
held to one standard.

This page has everything you need to use the Nivolve brand the right way. It covers the logo, the colors, the fonts, and the rules for using them.

Minimum clear space

Leave empty space around the logo on every side. This space should be as tall as the lowercase "n" in the logo. Do not put text, images, or other logos inside that space.

Color

The colors.

We use nine colors, and each one has its own job. Click any color box to copy its code. Some colors work well as text, and some work well only as backgrounds, so check the table below before you use two colors together.

Which colors work together

Text needs enough contrast with its background so people can read it easily. Use this table to see which color pairs are safe to use for text.

ColorOn backgroundContrastResult
navycream13.5:1Body text
cyan-inkcream4.6:1Links only
mutedcream5.2:1Secondary text
fill-blue (#00A3E0)cream2.9:1Fills only, never text
creamnavy-deep14.8:1Body text on dark
aquanavy-deep9.7:1Accent text on dark

Fonts

The fonts.

We use three fonts. One for big titles, one for reading text, and one for labels, data, and code.

Display

Bricolage Grotesque

Aa Bb Nn

Headlines, hero statements, section titles.

300400500600700800
Google Fonts

Body

Manrope

Aa Bb Nn

Paragraphs and long blocks of text on the website.

400500600700800
Google Fonts

Mono

JetBrains Mono

Aa Bb Nn

Small labels, buttons, code, and data.

400500700
Google Fonts
Mega / Heroclamp(2.6rem, 1.2rem + 6.2vw, 6.4rem)
Bricolage Grotesque 600
Website transformation.
H2 / Sectionclamp(1.75rem, 1.05rem + 3vw, 3.3rem)
Bricolage Grotesque 600
The colors, the fonts, and the logo.
Leadclamp(1.1rem, 1rem + .5vw, 1.4rem)
Manrope 500
One simple logo, nine colors, and three fonts. That is the whole system.
Body16px / 1.55
Manrope 400

We want text to be easy to read. Body text is 16px with extra space between lines, so long pages are comfortable to read on any device.

Eyebrow / Mono0.78rem, uppercase, .12em
JetBrains Mono 500
Section Label
<!-- Google Fonts embed --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Manrope:wght@400..800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">

Usage

Do / don't.

The logo works best when it stays exactly as it is. Here are the only changes you can make, and the mistakes to avoid.

Do

Use the SVG file at any size. It will always stay sharp and clear.

Don't

Do not stretch or squash the logo to fit a space. Always resize it evenly.

Do

Use the light version of the logo on dark, plain backgrounds.

Don't

Do not rotate or tilt the logo. It should always sit straight.

Do

Change the logo to one approved brand color only.

Don't

Do not use a color, gradient, or outline that is not one of our brand colors.

Do

Always leave enough empty space around the logo, as shown above.

Don't

Do not place the logo on a busy photo or a background that makes it hard to see.

Questions

Need an asset that isn't here?

connect@nivolve.in
Copied