Treehouse Design Guide

aka 'how to be consistent in the space treehouse'

Colors

Greens are for the main pages. Blues are for project pages.

Soft Void

Hex: #101214
site background

White Light

Hex: #FFFFFF
main text color

Light Life

Hex: #e7f7d2
alt body text

Vibrant Leaf

Hex: #c2e892
header & hover text

Dark Ocean

Hex: #0b1b2b
key text backgrounds

Soft Sea

Hex: #81b2e3
header & hover text

Dirty Cyan

Hex: #1f3a54
table hover & borders

Neutral Gray

Hex: #1c2126
table backgrounds

Fonts

Itim

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Calibri

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Source Code Pro

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Sphinx of black quartz, judge my vow.

Font Alternates:

Itim alternates to Gill Sans, Calibri, Trebuchet then sans-serif.

Calibri alternates to Trebuchet then sans-serif.

Source Code Pro alternates to Lucida Grande then monospace.

Text Styling

The H1 and H2 headers are always present in the header image at the top of the page. The sign off at the bottom of the page is always in the H3 heading.

H1 - Main Page Headings

H2 - Main Page Subheadings

  • Font-wight: 400 (regular)
  • Font-size: 30px
  • Font-family: Calibri
  • Color options: #FFFFFF
  • Alignment: Center

H3 - In Article Headings

  • Font-wight: 400 (regular)
  • Font-size: 30px
  • Font-family: Itim
  • Color options: #81b2e3 or #c2e892
  • Alignment: center or left with indent

P - Paragraph Text

  • Font-wight: 400 (regular)
  • Font-size: 16px
  • Font-family: Source Code Pro
  • Color options: #FFFFFF
  • Alignment: Left

I hope your day is peaceful <3