Better Practice Brand and Style Guide

Guidelines

  • Strive for professionally playful
  • Follow brand archetype Creator: Authentic, ambitious, non-conformist, entrepreneurial, experimental, maybe a little eccentric -- the Creator wants to manifest something meaningful
  • Follow brand archetype Sage: The Sage archetype is a seeker of knowledge and wisdom and believes that truth will set you free. They do not look to change the world themselves but prefer to empower others to do so by seeking out valuable information and sharing it. They are often life-long learners and thought leaders and make excellent mentors.
  • Be thoughtful about the use of color - a little goes a long way
  • Favor rounded over sharp corners
  • Use bold instead of italics because italics make things harder to read, especially for people with dyslexia

Logo & Wordmark Usage

Vector graphics (.svg file) are best because they can scale without becoming pixelated, but most places where you upload the logo will only support a .png or .jpg.

  • Logo alone - use this in places where the company name Better Practice is already visible (e.g. social media, where Better Practice is the account name)
  • Horizontal wordmark - use this when there is minimal vertical space available (e.g. a banner)
  • Stacked horizontal wordmark - preferred over the horizontal wordmark when vertical space permits
  • Stacked wordmark - use this when a square-shaped space is available and the name Better Practice is not already nearby

Use the black text version on light backgrounds, and the white text version on dark backgrounds. If the background could be dark or light (e.g. in an email, where the user could have their email client in either mode), use the logo alone.

You can access all logo and wordmark versions here, as long as you have appropriate access.

It's worth noting that the text in the wordmarks use a font called Aktiv Grotesk. We don't use this font elsewhere as it was chosen before we had decided on a universal font, and we may want to update the wordmarks in the future to use Montserrat instead.

Colors

  • Primary blue: #2A79F8
  • Secondary purple: #C026D3
  • Accent orange: #FF6933

Light mode

  • Background: #F8F8F8
  • Text: Black

Dark mode

  • Background: #191919
  • Text: White

Better Practice colors work against light and dark backgrounds with WCAG-compliant contrast ratios

Typography

H1: Montserrat ExtraBold (800)

  • Use for main page titles and primary headlines
  • Best for the most important content that needs immediate attention
  • Typically appears only once per page

H2: Montserrat Bold (700)

  • Use for section headings and important subheadings
  • Helps organize content under the main H1 heading
  • Good for dividing longer content into digestible sections

H3: Montserrat Semibold (600)

  • Use for subsection headings and minor headings
  • Great for breaking down content within H2 sections

Copy/prose/paragraphs: Montserrat Regular (400)

  • Use for all body text and general content
  • Perfect for descriptions, explanations, and narrative content
  • Ensures readability for longer blocks of text

Illustrations

We like these vector doodle-style characters because they use organic round shapes and stay scalable at all resolutions

Example of the type of vector illustration we like, as seen on Recaps in Better Together