Skip to content
Monk BusinessMonk BusinessMonk Business Design System

Logo

The logo files are generated from Lexend SemiBold outlines and the orbital symbol: the O of MONK is the symbol, and the lower leg of the K is a detached teal piece. Use the files from @monk-business/brand or the Logo component; never retype the wordmark or redraw the symbol. Inks are fixed in each file, because images cannot inherit color.

  • Main lockup on Grafite
    Main lockup, on darklogo-on-dark.svg · Use whenever there is room.
  • Main lockup on Gelo
    Main lockup, on lightlogo-on-light.svg · Use whenever there is room.
  • Alternative lockup on Grafite
    Alternative lockup, on darklogo-alt-on-dark.svg · BUSINESS in light weight.
  • Alternative lockup on Gelo
    Alternative lockup, on lightlogo-alt-on-light.svg · BUSINESS in light weight.
  • Stacked lockup on Grafite
    Stacked lockup, on darklogo-stacked-on-dark.svg · Square spaces only: business cards, avatars with text.
  • Stacked lockup on Gelo
    Stacked lockup, on lightlogo-stacked-on-light.svg · Square spaces only: business cards, avatars with text.
  • Symbol on Grafite
    Symbol, on darksymbol-on-dark.svg · Where the name is already visible or space is under 120px wide.
  • Symbol on Gelo
    Symbol, on lightsymbol-on-light.svg · Where the name is already visible or space is under 120px wide.

Which file to use

Section titled “Which file to use”
  • logo-on-dark on bg dark and on photos with a dark area; logo-on-light on light backgrounds.
  • The one-color white or Grafite files (logo-mono-white, logo-mono-graphite) for single-color printing and engraving; logo-mono (currentColor) for inline SVG in code.
  • The main lockup is the horizontal one, with BUSINESS in bold. logo-alt-*, with BUSINESS in light weight, is an approved alternative.
  • Use logo-stacked-* only in square spaces (business cards, social avatars with text).
  • Use the symbol alone (symbol-*, app-icon) where the name is already visible or the space is under 120px wide; below 64px use favicon.

Clear space

Section titled “Clear space”

Keep clear space around the logo equal to the height of the K accent on every side.

Dashed area: the minimum clear space. The small squares measure one K accent height.

Minimum sizes

Section titled “Minimum sizes”
Version Minimum
Horizontal logo 120px wide on screen, 30mm in print
Symbol 24px
Symbol below 64px Use favicon.svg (heavier strokes, solid satellites)

Misuse

Section titled “Misuse”
  • Correct: the original logo on Grafite
    Do: the original file on Grafite, Gelo or white.
  • Incorrect: Don't stretch or distort.
    Don't stretch or distort.
  • Incorrect: Don't rotate.
    Don't rotate.
  • Incorrect: Don't recolor.
    Don't recolor.
  • Incorrect: Don't add shadows, outlines or other effects.
    Don't add shadows, outlines or other effects.
  • Incorrect: Don't place it on colors other than Grafite, Gelo or white.
    Don't place it on colors other than Grafite, Gelo or white.
  • Don’t recolor, stretch, rotate, outline or add effects.
  • Don’t separate the teal K accent from the K.
  • Don’t place the logo on busy images or on colors other than Grafite, Gelo or white.