Skip to content
Sketch FG Sketch FG Docs

Branding

The brand surface covers the logo, social cards and marketing material. It shares one palette, one type ramp and one mascot with the application UI.

Brand at a glance

Section titled “Brand at a glance”
  • Name — Sketch FG (informally, Sketch Family Gutters)
  • Mascot — a blue water-drop character wearing a white construction hard hat, carrying a clipboard
  • Wordmark — Sketch FG in title case, set in the platform’s primary system UI font (SF Pro / Roboto): bold 700 for headlines, regular 400 for body
  • Tone — friendly, professional, field-tested. The mascot grins; the copy is direct

The Sketch FG mascot

Logo system

Section titled “Logo system”

Treat the mascot as a circular mark. Every variant below is a crop of the same artwork.

Square mascot

Section titled “Square mascot”

This is the mark used for the site header, the favicon family and any tight square slot. It is the only variant whose helmet carries the Sketch FG wordmark.

Sketch FG square mascot
sketch-fg-icon-square.png — 1024 × 1024
Sketch FG square mascot at 512 pixels
sketch-fg-icon-square-512.png — 512 × 512

Horizontal lockup

Section titled “Horizontal lockup”

Mascot left, wordmark right. Use where the product name needs to stand on its own.

Horizontal lockup on a light background
sketch-fg-logo-horizontal-light.png
Horizontal lockup on a dark background
sketch-fg-logo-horizontal-dark.png
Horizontal lockup on the accent background
sketch-fg-logo-horizontal-accent.png

Editorial mascots

Section titled “Editorial mascots”

Half-body and full-body cuts for hero art and marketing surfaces.

Half-body mascot waving
sketch-fg-mascot-waving.png

Pill variants

Section titled “Pill variants”

The logo-primary, logo-light, logo-dark and logo-on-accent variants carry the mascot above a SKETCH FG pill.

Sketch FG logo with the SKETCH FG pill
sketch-fg-logo-primary.png
Sketch FG logo on the accent background
sketch-fg-logo-on-accent.png

Clear space

Section titled “Clear space”

Provide clear space around the mark equal to at least the radius of the mascot’s head on every side. Do not crop the bottom SKETCH FG pill, and never stretch the logo non-uniformly.

Don’ts

Section titled “Don’ts”
  • Don’t rotate the logo
  • Don’t recolour the mascot — the blue is fixed
  • Don’t set the wordmark in all caps, italics, or a different font
  • Don’t place the logo on a busy background without enough clear space
  • Don’t separate the mascot from the SKETCH FG pill in the pill variants
Section titled “Related”