Brand

Notes on Content Harmony Brand Guidelines.

Fonts:

We use large, bold Fira Sans for our headings.

We use standard weight Libre Baskerville for our body copy.

Colors:

Our core design style is based around our primary blue (#0a56c7), white canvas, and dark gray text (#222426), all of which are focused on making our typography pop.

We use emojis and photography and screenshots to liven up the colors on top of that.

The Content Harmony logo includes the wordmark, as well as our lotus logo.

Design Objects & Patterns:

We use emojis, not icons:

As you can see in our navigation, we use emojis for punctuation and icon elements throughout our site and our app. 💪

Divider lines

We use our HR line squiggle to divide up page sections. You can call it with <hr> or the CMS blocks.


Tile boxes

We use our tile boxes to create callouts and blocks on the page. See examples below in Editorial Elements.

This is a tile box.

Photography:

Throughout the site we use landscape photography for featured images. The goal is to give a sense of 'harmony' without looking like a yoga studio.

These appear on social media previews and on index pages like www.contentharmony.com/blog/, but they do not appear on the post itself.

Example index page with a variety of featured images.

Approved Examples:

We specifically use clearly shot, natural-looking landscapes, sourced from Unsplash.

We don't mind images with dynamic color range like the purple example below, so long as the photo is clear and doesn't look like an Instagram filter.

Photos We Wouldn't Use:

We avoid non-landscape phography, eg cityscapes, people, and prominent objects.

We also avoid unnatural-looking edits to the photography like high contrast, blur, and other 'filter' types of effects.

One exception to city photography is our case studies, where we may choose to use a skyline from the city that the customer is based in, or a shot from a park or natural setting inside that city.

Editorial Formatting:

Aside from paragraph formatting, we have the following formatted elements available:

Bulleted Lists

  • Bullet 1
  • Bullet 2
  • Bullet 3

Numbered Lists

  1. Number 1
  2. Number 2
  3. Number 3

Expandable Boxes

👉 You can toggle this box.

Go ahead, it's fun. Perfect for inline footnotes, FAQ page sections, and more.

Tile Boxes

We use tile boxes to stand out from the page, and also create tile boxes in columns and similar design elements.

This is a standard tile box.

Tiles can be set to wide as well to break out from the normal body width of inline content.

This is a wider tile box.

Callout Boxes

🍵
We use callout boxes for inline notes, pro tips, calls-to-action, and similar opportunities to break up the body text of a page.

Buttons:

Buttons are used for CTAs, downloading templates, etc.

Ready To Try
Content Harmony?

Get your first 10 briefs for just $10

No trial limits or auto renewals. Just upgrade when you're ready.

Get Started

🎉 Content Harmony Love

Sign up today and learn why SEO & content marketing teams love Content Harmony.