Brand Guide
This treehouse has style.
If you're looking to represent Chaplain Treehouse, please use the following guidelines and brand assets.
- Remove the current class from the content27_link item as Webflows native current state will automatically be applied.
- 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)
- 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].
- 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.
Logo
The Chaplain Treehouse is a logo/wordmark combination. The full color two-toned logo should be used where possible.
In some cases, it may be necessary for the logo to appear on a dark background. In those situations, the 'sticker' logo should be used. This is the color logo that has a white border around it. This is also the logo that should be used in email signatures and applications that have automatic light/dark modes as it will ensure that the logo is always legible
If you are unsure, it is safest to use a fully black or fully white version of the logo depending on where it is being used. This can also be a good idea if being placed in a location where the surrounding elements are very colorful so as to not conflict with a broader design system.
If you have any questions about how to use the logo in your particular context, feel free to shoot us a message at help@chaplaintreehouse.com.
Colors
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
Material Colors
Neutral Colors
Typography
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.
Headlines
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