Branding Guide

Socialroots Branding Deck

For our full branding guide, with brand rational, voice, tone, and more, please see this slide deck. Only the styling guidelines that impact this blog site are kept here.



Our Font on this site is Poppins.


When creating a header, all you need to do is add a # before your header or use the contextual toolbar. You can keep adding up to five # in a row to make the headers smaller.

Heading one

Heading two

Heading three

Heading four

Heading five

When writing a post, the title should be the only Heading one on the page, for SEO clarity. All sections within it should start with Heading two size. If you want an additional 'Heading One', use heading two with all caps. (check with B)

If you paste in a URL, like - it'll automatically be linked up. But if you want to customize your anchor text, you can do that too! Here's a link to our website.


If you want to add a quote, you just need to add a > to the beginning of the line or use the contextual toolbar, and it will put it into the quote format.

The human race is challenged more than ever before to demonstrate our mastery, not over nature but of ourselves.                          

- Rachel Carson

Page and Post Settings

With the Bookmark card you can present links in a much  richer format. If the URL points to a page with right meta information  it can show the page title, excerpt, author, publisher and even a  preview image.

can we activate these?


Before choosing an image, please explore our image library to get a sense of the feeling we want to evoke. Don't feel constrained to pick one of these, but do try to match the color vibrancy, feeling, and quirkiness.

Upload images using the Image card. Hero images require attention to sizing.

add sizing specs from

Please use 2000 × 1215 size images for this main page image. [SEE SIZING RECS, ABOVE?]

Inline images can be displayed in different sizes: normal, full, and wide. They have the option to add captions if needed.

The gallery card allows display of up to 9 images at a  time, all of which are responsively optimized and organized to look  their best no matter how many images you add or remove.




List Types

Unordered list

  • Item number one
  • Item number two
    • Nested item one
    • Nested item two
  • Item number three

Ordered list

  1. Item number one
  2. Item number two
    a. Nested item one
    b. Nested item two
  3. Item number three


Highlighting text can help bring important information immediately to the reader's attention. When creating a highlighting text, all you need to do is add a == before and after your text in a Markdown card.


This theme supports responsive tables that will display a horizontal scroll bar if the screen is too small to display the full content.




Spread the word