Bean Clarity brand assets

COLOURS
Emerald  #0A6B50   icon tile and brand colour
Ink      #0F1724   wordmark on light backgrounds
White    #FFFFFF   bean, and wordmark on dark or emerald backgrounds
Font     Inter: "bean" in Bold (700), "clarity" in Regular (400), letter spacing -3.5%

WHICH FILE TO USE
logo/horizontal   Main logo. Icon beside the wordmark. Use this by default.
logo/stacked      Icon above the wordmark. For square spaces, posters, packaging.
logo/wordmark     Wordmark on its own, where the icon already appears nearby.
icon              App icon tile and the bean on its own.
favicon           Everything the website head needs, plus site.webmanifest.
social            Default sharing image, profile picture and header banner.
email             Logo for email signatures (white background, shown at 400px wide).
with-background   Every logo on a solid background (white, light grey, ink, emerald), with clear space
                  built in. SVG, PNG and JPG. Use these for Word, PowerPoint, directories, print
                  suppliers and anywhere that does not handle transparency.

COLOUR VERSIONS
colour       Light backgrounds (white, pale grey)
reversed     Dark backgrounds (ink, near black, dark photos)
on-emerald   Emerald backgrounds
mono-ink     One-colour print or where colour is not allowed, light backgrounds
mono-white   One-colour use on any dark or busy background

SVG files scale to any size. PNG files outside with-background have transparent backgrounds, at the width in the file name (stacked PNGs are half that width).

RULES
Keep a clear space around the logo of at least half the icon's height.
Do not recolour any letter, stretch the logo, add effects, or redraw it in another font.
Smallest size: horizontal logo 120px wide on screen, 30mm in print. Below that, use the icon.
In running text the name is written "Bean Clarity".

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