melonly logo
Dashboard
Log in

Brand & design

The Melonly identity, and how to use it

A few simple rules keep Melonly recognizable wherever it appears. Use the original artwork, give it space, and let its colors speak for themselves.

Our logo

Use the full wordmark whenever possible. The alternate colorway is available when coral text fits better; use the symbol alone only when Melonly is already clear from context.

Melonly primary wordmark
Primary wordmark
Melonly alternate wordmark with coral lettering
Alternate wordmark

Clear space

Use the pink diamond inside our mark to measure clear space. Leave at least one diamond height between the logo and any text, image, or edge.

One diamond heightMeasure from this piece of the original Melonly mark.
The measurement comes from the artwork itself, so it scales with the logo.
KEEP TEXT AND EDGES OUTSIDE THE OUTER GUIDE
Wordmark: keep one diamond height on every side.
SAME UNIT. SAME SPACE.
Symbol: use the same diamond-height unit.

Do & don’t

Keep the artwork intact. These examples show the simplest ways to get it right and the changes that make it feel less like Melonly.

Keep its proportions

Do Use the supplied artwork.
Don’t Stretch or compress it.

Give it space

Do Leave room around the mark.
COMMUNITY
Don’t Crowd it with nearby text.

Use the right colors

Do Use the original colors on dark.
Don’t Apply new colors or effects.

Color

Mint and coral belong to the identity. Teal is used for actions in the product, with dark surfaces behind them.

Mint
Coral
Teal
Background
Surface
Text

Typography

Open Sans is used for interface and long-form text. Use clear headings and comfortable line spacing so the message stays easy to read.

Brand assets

Choose PNG or SVG for each asset. Keep their proportions and colors intact; use a product mark only when referring to that product. SVGs made from PNG artwork preserve the original pixels.

Melonly wordmarkPrimary identityPNGSVG
Alternate wordmarkAlternate colorwayPNGSVG
Melonly symbolCompact identityPNGSVG
White symbolSingle-color identityPNGSVG
Melonly PlusProduct wordmarkPNGSVG
Melonly CADProduct wordmarkPNGSVG
WatchdogProduct wordmarkPNGSVG
DepartmentsProduct symbolPNGSVG
BundlesProduct wordmarkPNGSVG
MelloBrand characterPNGSVG