Notes on Content Harmony Brand Guidelines.
We use large, bold Fira Sans for our headings.
We use standard weight Libre Baskerville for our body copy.
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. 💪
We use our HR line squiggle to divide up page sections. You can call it with <hr> or the CMS blocks.
We use our tile boxes to create callouts and blocks on the page. See examples below in Editorial Elements.
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.
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.
Aside from paragraph formatting, we have the following formatted elements available:
- Bullet 1
- Bullet 2
- Bullet 3
- Number 1
- Number 2
- Number 3
👉 You can toggle this box.
Go ahead, it's fun. Perfect for inline footnotes, FAQ page sections, and more.
We use tile boxes to stand out from the page, and also create tile boxes in columns and similar design elements.
Tiles can be set to wide as well to break out from the normal body width of inline content.
Buttons are used for CTAs, downloading templates, etc.