Decorative blurred circle background
Decorative blurred circle background

OptMsg Brand Kit

Complete guidelines for correctly representing the OptMsg brand — logos, colors, typography, and usage rules.

Logo Overview

The OptMsg logo consists of an envelope icon shaped like the letter “M” with an integrated checkmark, paired with the wordmark OptMsg set in Figtree. OptMsg has four primary logo configurations, each available in three color treatments.

Color Variations Summary

Blue M + Orange Checkmark

Use on white or transparent backgrounds. Primary full-color combination.

M: #1A5CE0  ·  Checkmark: #F2571F

White M + Orange Checkmark

Use on Blue Gradient, flat Blue (#1A5CE0), and dark or transparent backgrounds.

Black M + Black Checkmark

Use on transparent backgrounds for B&W use cases: single-color print, embossing, engraving.

Official Brand Colors

Our palette is anchored by a bold blue and an energetic orange — communicating trust, security, and confidence. Use only the approved combinations below in all brand materials.

Primary Colors

Orange

Secondary — Checkmark, CTAs, Accents

HEX: #f2571f

RGB: 242, 87, 31

CMYK: 0, 64, 87, 5

Blue Flat

Accent — M Logo, UI Elements, Links

HEX: #1a5ce0

RGB: 26, 92, 224

CMYK: 88, 59, 0, 12

Blue Gradient — Website & Hero Backgrounds
#163195
Start · RGB 22, 49, 149
#0E1D63
End · RGB 14, 29, 99
Supporting Colors

White

Backgrounds, text on dark

HEX: #ffffff

Black

B&W applications

HEX: #000000

Light Gray

Subtle backgrounds

HEX: #f5f5f5

Dark Gray

Body text

HEX: #333333

Logo System

2. OptMsg Only — Wordmark

Aspect Ratio: ~14:1 (Horizontal)

Use Cases: Text-only contexts, loading states, simplified headers

3. M With OptMsg To The Right — Horizontal Primary

Aspect Ratio: ~3:1

Use Cases: Website headers, email signatures, horizontal layouts, letterheads

4. M With OptMsg On The Bottom — Vertical Stacked

Aspect Ratio: ~1:1

Use Cases: Vertical layouts, narrow sidebars, mobile headers, badges, merchandise

Primary Typefaces

OptMsg uses two typefaces. Figtree is our display, logo, and heading font. Noto Sans is our body and UI font. The tagline “Your Inbox. Your Rules.” is always set in Noto Sans Regular.

Figtree
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Figtree
Usage: Logo, headlines, titles, headers, emphasis text
Weights: 400 · 500 · 600 · 700 · 800 · 900
Google Fonts ↗
Noto Sans
Noto Sans body text set here. Clean, highly legible, works for longer reading experiences across all devices.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Noto Sans
Usage: Body copy, UI text, captions, supporting content, taglines
Weights: 400 · 500 · 600 · 700
Google Fonts ↗
Typography Scale
Element Typeface Size Weight Usage
H1Figtree36–48ptBold (700)Hero headlines, page titles
H2Figtree24–32ptBold (700)Section headlines
H3Figtree18–22ptSemiBold (600)Subsection headlines
BodyNoto Sans14–16ptRegular (400)Main content
SmallNoto Sans12–13ptRegular (400)Captions, footnotes

Typography Guidelines

Line height: 1.6–1.7× body, 1.1–1.2× headings

Maximum line length: 60–80 characters

Paragraph spacing: 16–24px between paragraphs

Tagline: Noto Sans Regular at 75–80% of wordmark size

Clear Space Requirements

Always keep a minimum breathing room around the logo equal to the height of the “M” icon on all sides. No text, images, or borders should enter this protected zone.

x
x
Icon Mark Base
x
x

Icon Mark

Clear space = X (M icon height) on all sides.

x
x
Wordmark Base
x
x

Wordmark

Clear space = X on all sides of the bounding box.

x
x
Horizontal Base
x
x

Horizontal

Clear space applies to the full horizontal lockup.

x
x
Vertical Stacked Base
x
x

Vertical Stacked

Clear space wraps the entire stacked configuration.

Can text touch the logo?

NO — No text may enter the safe zone under any circumstances.

Can borders touch the logo?

NO — No borders, edges, or frames may intrude on the clear space.

Applies at minimum sizes?

YES — Clear space rules apply at every size, even the smallest usage.

Logo Don’ts

These are absolute rules. Always use the official logo files — never recreate, modify, or reinterpret the logo in any way.

Don’t
Distorted Logo

Never distort

Don’t stretch or change aspect ratio structures.

Don’t
Recolored Logo

Never recolor

Use only approved color combinations directly.

Don’t
Rotated Logo

Never rotate

Logo must always be level and upright.

Don’t
Logo with Effects

Never add effects

No shadows, glows, or bevels.

Don’t
Busy Background Logo

Never use on busy or patterned backgrounds

Avoid placing the logo on complex grids, textures, or low-contrast graphics.

Don’t
Low Contrast Logo

Never use against low-contrast backgrounds

Ensure clear readability limits against corporate backgrounds.

Most Important Rule

Never recreate — Always use the official logo files provided in this brand kit. Do not attempt to redraw, trace, or approximate the logo in any design tool.

Brand Name & Trademark Usage

Brand Name
OptMsg

Pronounced: opt-message

Tagline
Your Inbox. Your Rules.

Always set in Noto Sans Regular

⚠️ Proper Capitalization — Always write “OptMsg” exactly as shown

Correct: OptMsg  |  Incorrect: optmsg, Optmsg, opt-msg, OptM, OPTMSG

Scroll to Top