TILLER BRAND GUIDELINES

This is a 3XL Title

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

This is a button with 18px font

Colors (this is a 2XL title)

#2E86DE Tiller Blue

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

#041E37 Blue-Black

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

#718093 Dark Gray

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

#DCDDE1 Medium Gray

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

#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.

#F27935
CTA Color

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

#6AC75A Success Green

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

#F9C45C Sometimes you need yellow

So here’s some yellow

#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: #F6F5F0

Background surface 2: #EFEFF1

Background surface 2: #FDFDFD

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