Logos | Skribly UI

DownloadsLink to the section Downloads

Each zip holds the nine SVG files of a product, the same nine as PNG with the mark about 330 pixels high, and its favicon set. The SVG files need no font: the name is drawn as outlines.

All products (zip)

Layouts and versionsLink to the section Layouts and versions

Use the horizontal layout where there is room for the name, the stacked layout in a square space, and the mark alone where the name is written nearby or space is short. Use the light version on light backgrounds, the dark version on dark ones and the one colour version where only one ink is possible, such as an engraving or a fax.

Product

Mark, LightSVG

Mark, DarkSVG

Mark, One colourSVG

Horizontal, LightSVG

Horizontal, DarkSVG

Horizontal, One colourSVG

Stacked, LightSVG

Stacked, DarkSVG

Stacked, One colourSVG

Clear spaceLink to the section Clear space

Keep a clear space of half the accent block on every side: 10 units of the 64 unit grid, about a sixth of the height of the mark. No text, edge or other logo enters it. Every file already carries this space as its margin, so place the file as it is.

The mark with its clear space drawn as a dashed frame half an accent block away from each side

Minimum sizesLink to the section Minimum sizes

Below these heights of the mark the glyph or the name stops reading. At 16 pixels only the colour tells the products apart, so the mark alone is used there only as a favicon.

Mark alone: 24 px high on screen, 16 px only as a favicon.
Horizontal: the mark 24 px high, so the name has a cap height of about 12 px.
Stacked: the mark 32 px high, so the name has a cap height of about 11 px.

Do and don’tLink to the section Do and don’t

Do. Use the files as they are, on a plain background of the version they were made for.

Don’t. Stretch, squeeze or rotate the mark: the blocks lose their proportions.

Do. Use the colour of the product the mark belongs to, from its token.

Don’t. Recolour the mark outside the tokens, or give one product the colour of another.

Do. Put the mark on a page colour or a quiet brand pattern.

Don’t. Put the mark on a busy photo or pattern, or add shadows, outlines or glows.

Favicons and app iconsLink to the section Favicons and app icons

Every product has a favicon set: an SVG favicon that follows the light or dark setting of the system, a 32 pixel PNG on a paper tile, a 180 pixel Apple touch icon, and maskable icons of 192 and 512 pixels that keep the mark inside the centre circle every launcher shape leaves visible, named in a web manifest. A site links its set from the library and never draws its own.

html

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />

js

import favicon from '@skribly/ui/site/favicons/docs/favicon.svg?url&no-inline'
import appleIcon from '@skribly/ui/site/favicons/docs/apple-touch-icon.png?url&no-inline'