Logo

The final mark: wordmark on the glass top bar, app icon, check.Open on its own ↗

Logo versions

Every version of the mark, the ground it belongs on, clear space, minimum sizes and the don'ts.Open on its own ↗

Guidelines and props

Logo versions: every version of the HeyGoal mark, the ground each one belongs on, clear space, minimum sizes and the don'ts. The SVG files are in the Logo asset group.

Which version, where

Ground	Wordmark	Symbol
Light theme, white, paper	`heygoal-wordmark-color-light.svg`	`heygoal-symbol-color-light.svg`
Dark theme, navy	`heygoal-wordmark-color-dark.svg`	`heygoal-symbol-color-dark.svg`
Brand blue, photos	`heygoal-wordmark-white.svg`	`heygoal-symbol-white.svg`
One-color print	`heygoal-wordmark-navy.svg`	`heygoal-symbol-navy.svg`
Black-only print	`heygoal-wordmark-black.svg`	`heygoal-symbol-black.svg`

The wordmark is the primary logo. Use the symbol alone only where the name is already on screen or the space is square: app icon, favicon, avatar, loading state.
App icon: heygoal-app-icon-filled.svg is the default (home screen, favicon, PWA); heygoal-app-icon-outline.svg is for white app-store and light print contexts.

Clear space and size

Clear space: x on every side, where x is the height of the check's foot (about 24% of the logo's height).
Minimum: wordmark 20 px tall; symbol 16 px. Below 20 px tall, use the symbol.
In the app: 24 px on the desktop bar (logo-height-bar), 20 px on the phone bar, 52 px on the front door, 16 px favicon.

Don't

Put the full-color logo on brand blue — the check disappears. Use white.
Recolor the check. It's always brand blue (#0080ff), never the user accent.
Stretch or squash it. Scale by height only.
Add shadows, outlines, glows or gradients, or rebuild the letters in another typeface.

Brand color

--brand is the logo blue. Top bar, front door, favicon, PDF stamp only.Open on its own ↗