fbpx

TILLER BRAND GUIDELINES

This is a 3XL Title

This is a page subheading. It’s 28px, 1.3 height, #718093

Colors (this is a 2XL title)

tiller blue
Tiller Blue

Our brand color, used for links, accents, logo. Almost never for backgrounds anymore!

DarkBlue
#041E37 Blue-Black

All titles and most body text is rendered in this color.

gray
#718093 Dark Gray

This is mostly used for sub-headings and meta text.

dcdde1
#DCDDE1 Medium Gray

This is used for sub-headings and (rarely) some backgrounds.

EFEFF1
#EFEFF1 Very Light Gray

This is used for some backgrounds

F6F5F0
Light Background

Preferred background color, as seen in the title above.

FDFDFD
– White

Use for backgrounds and text on dark backgrounds.

ec6628
#F27935
CTA Color

Only use this color to bring people to the pricing page or sign up for Tiller

6AC75A
#6AC75A Success Green

Use for success text and buttons – do not use for CTA buttons

F9C45C
#F9C45C Sometimes you need yellow

So here’s some yellow

EE5253
#EE5253 – Red

Stop

Using Boxes

Padding is 35px all around. Border width is 1px. The radius is 3px, and the border color is #dddddd. Text is 16px, dark gray #718093

These are our three background colors; try to avoid using dark blue or Tiller blue as a background

Background surface 1:

Background surface 2: #EFEFF1

Background surface 2:

Typography

Fonts

Tiller uses the Roboto Font in three weights. We almost never use italics in any weight. It’s a bit boring, but totally functional at all sizes, and works well in spreadsheets. Download Roboto here. This is a P1 sub-headline.

  • Roboto 400 (normal)
  • Roboto 700 (bold)
  • Roboto 500 (medium)

3XL-Large Title

  • Size: 80px
  • Weight: Bold (700)
  • Height: 1.2em
  • Spacing: -.5px
  • Color: #041E37

2XL Title

  • Size: 64px
  • Weight: Bold (700)
  • Height: 1.2em
  • Spacing: -.2px
  • Color: #041E37

XL Title

  • Size: 48px
  • Weight: Bold (700)
  • Height: 1.2em
  • Spacing: -.2px
  • Color: #041E37

Title 1 (H1)

  • Size: 38px
  • Weight: Bold (700)
  • Height: 1.2em
  • Spacing: -.3px
  • Color: #041E37

Title 2 (H2)

  • Size 30px
  • Weight: Bold (700)
  • Height: 1.3em
  • Spacing: -.2px
  • Color: #041E37

Title 3 (H3)

  • Size: 24px
  • Weight: Bold (700)
  • Height: 1.3em
  • Spacing: 0px
  • Color: #041E37

Title 4 (H4)

  • Size: 20px
  • Weight: Bold (700)
  • Height: 1.3em
  • Spacing: 0px
  • Color: #041E37

Paragraph 1

Used as sub-headline paired with H1 and H2, blog excerpts, product details

  • Size: 24px
  • Weight: Normal (400)
  • Height: 1.3em
  • Spacing: 0px
  • Color: #041E37
Paragraph 2 / H5
  • Size: 20px
  • Weight: Normal (400)
  • Height: 1.4em
  • Spacing: 0px
  • Color: #041E37
Paragraph 3 / H6
  • Size: 18px
  • Weight: Normal (400)
  • Height: 1.5em
  • Spacing: 0px
  • Color: #718093

Body

  • Size: 20px
  • Height: 1.5
  • Spacing: 0px
  • Font color: #041E37

Small text

  • Size: 16px
  • Height: 1.5
  • Spacing: 0px
  • Font color: #041E37

Start Your Free Trial

"There isn’t another tool on the market that does what Tiller can do.”
Will Hinton, Google Review October 30, 2023