Visual Identity

Isologos & Isotypes

About SVG inline

The inline SVG option keeps the text selectable using the <text> tag inside it. We highly recommend this version for SEO and accessibility, but you'll need to link the font to Google Fonts. For a better perfomance of your site, only select the characters you will use, in this case: text=Leniolabs

You can include it in the <head> like this:

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:700&amp;text=Leniolabs" rel="stylesheet" type="text/css">

This is the main isologo, use it mainly over white or light backgrounds.

Isotypes

Use isotypes if you need to use the brand as an icon. Red dot version is for offline content, we are using it when the device is in offline mode.

Leniolabs Isotype
Leniolabs Isotype Offline

Alternatives for dark background

These are a second alternative for when you have no control of the background color.

Leniolabs Isotype White
Leniolabs Isotype Offline White

Achromatic versions

These versions are only for restricted color options.

Leniolabs Isologo Black
Leniolabs Isotype Black

Typography

The brand font is Roboto Mono Bold (700).

700 Roboto Mono Bold

Colors

These are the brand colors:

  • #33363c
  • #30aab3
  • #f20353

Usage

Safe area

The brand must be surrounded by a safe area that should be at least 4 times the border width. Currently all files include this margin.

Leniolabs Safe Area
Leniolabs Safe Area grid

Grid & construction

To build the grid we are using the border width as a unit.

Leniolabs Grid
Leniolabs construction

Minimum size

Try to keep the width of the brand at least 100px.

Leniolabs minium size