Brand Typography

For more on typography, check out Typography

Typography Embellishment

A Purple-100 highlight can be added behind purple-700 text to emphasize text inline

Text Style Brand-P Apple System font (SF Pro Text) 16px Regular

A purple-300 hand-drawn line can be added beneath H1 text to emphasize text in headline copy

Brand-H1 (Poppins Medium)

Hand Lettering

We use one of two custom hand-lettered fonts as part of our brand. CIO-Caps and CIO-Standard. These fonts are never to be used as the primary font. They should be used sparingly as an accessory to either Roboto or Poppins. With few exceptions, it is safe to assume that these will either be styled in ink-900 or purple-700 against a contrasting background.

Currently, you will find these fonts used on the Marketing Site as metrics or on our instagram account

Marketing site metrics

Customer.io Instagram Account

CIO-Caps

Download CIO-Caps

The uppercase and lowercase variations of CIO-Caps are slightly diffrerent and can be intercganged to create more variety.

CIO-Standard

Download CIO-Standard

CIO-Standard

Sentence case preferred

When formatting headlines, we don't have an established system but we are leaning in the direction of using sentence case rather than title case.

Never use Purple-500 for text!