Brand Guide

This treehouse has style.

If you're looking to represent Chaplain Treehouse, please use the following guidelines and brand assets.

If you intend to use this component with Finsweet's Table of Contents attributes follow these steps:
  1. Remove the current class from the content27_link item as Webflows native current state will automatically be applied.
  2. To add interactions which automatically expand and collapse sections in the table of contents select the content27_h-trigger element, add an element trigger and select Mouse click (tap)
  3. For the 1st click select the custom animation Content 27 table of contents [Expand] and for the 2nd click select the custom animation Content 27 table of contents [Collapse].
  4. In the Trigger Settings, deselect all checkboxes other than Desktop and above. This disables the interaction on tablet and below to prevent bugs when scrolling.

Fundamental Visual Assets

Brand identities can be complex but at the most basic level you have three elements: the logo and its variations, color and their use cases, and typography.

Please use the assets below along with their corresponding guidelines.


When possible, the Material Black & White colors should be used. This is generally possible when creating digital assets. If you are unable to do so (for example due to printing restrictions) use a black (#222) and white (#fff).

Where possible, headline and body text should be rendered using the Material Black color (#001e1d).

Chaplain Treehouse places an emphasis on white space for legibility and mental clarity. Do not use the brand colors excessively. Generally it is best for the brand colors to represent 5-10% of any composition unless the brand color is being used as the background in which case it can be a full wash of color (a good example of this is the footer on this website).

Brand Colors

Primary Brand Color
Click here to copy hex code
Secondary Brand Color
Click here to copy hex code

Material Colors

Material White
Click here to copy hex code
Material Black
Click here to copy hex code

Neutral Colors

Neutral Lightest
Click here to copy hex code
Neutral Light
Click here to copy hex code
Neutral Dark
Click here to copy hex code


Typography plays a pivotal role in shaping a brand's identity and communicating its message effectively to its audience. Consistent and thoughtful typography reinforces brand recognition and establishes a cohesive visual language across various platforms.


Chaplain Treehouse uses the Google Font 'Urbanist' for headings, with a weight of 500. Do not use formatting in headings like bolded, underlined or italicized text unless it is grammatically necessary.

The first word in a headline should be capitalized. Periods are used at the end of the headlines. Avoid excessive use of exclamation points or unnecessary punctuation.

Headline Formatting Values
  • Weight: 500 / Medium
  • Line Height: 1.2
  • Font Size:
    • H1: 3.5rem / 56px
    • H2: 3rem / 48px
    • H3: 2.5rem / 40px
    • H4: 2rem / 32px

Body Text

Chaplain Treehouse used the Google Font 'Zilla Slab' for body text. It's classic look, playfulness and easy legibility make it the perfect typeface for this content-full treehouse. Zilla Slab at its default size appears a bit small so the standard body text-size is 1.2rem (≈20px) to ensure text is easy to read.

Body Text Formatting Values
  • Weight:
    • Standard: 400 / Normal
    • Bold: 700 / Bold
  • Line Height: 1.5
  • Font Size:
    • Tiny: 0.8rem / ≈13px
    • Small: 1rem / 16px
    • Standard: 1.2rem / ≈20px
    • Medium: 1.325rem / ≈22px
    • Large: 1.45rem / ≈24px

Preheaders & CTAs