Tithe.ly
Style Guide

Welcome to our hub for partner guidelines and assets. We want to make it easy for you to integrate Tithe.ly, while respecting our brand.

Our Logos

The Tithe.ly logo is the flag of our brand system. We designed the logo to make a statement on its own and work well with our product and partner logos.

Product Logos

Tithe.ly now has seven incredible products, each with a unique logo. It is very important to use each logo for the corresponding app.

Color Palette

The Tithe.ly Design color system can help you stay true to a color theme that reflects our brand and style. We use color in meaningful ways in all expressions of our brand. From showing the colorful complexity of teaming up at a high level all the way down to focused, meaningful colors in product, we use color to pinpoint exactly what people need to see.

Primary

Our primary palette uses bright colors to bring a boldness to our brand and is used in logical ways throughout product and marketing to guide the eye and highlight the important parts. We pepper colorful, lighter, secondary palette colors throughout to soften the experience and impart confidence and optimism.

Yank

Used for main typography, outlines, dark backgrounds, sidebars, etc.

226, 38, 15
#181f36
226, 38, 21
#212a4a
226, 38, 32
#314070
226, 38, 51
#67749e
226, 38, 79
#b8c0d9
226, 38, 15, 0.2
#181f36 0.2

Payne

Used for data text, numbers (depending on context), graphs, icons, and fills, etc.

215, 18, 38
#505f73
215, 18, 51
#6b7e99
215, 23, 61
#8699b2
215, 23, 74
#adbacc
215, 19, 88
#dadfe5
215, 18, 38, 0.2
#505f73 0.2

Aquamarine

Used as an accent, on icons, on logo, numbers (depending on context), checkmarks, etc.

155, 62, 60
#5bd9a4
155, 82, 67
#65f0b6
155, 72, 79
#a1f0cf
155, 59, 86
#c5f0de
155, 48, 90
#daf2e8
155, 62, 60, 0.2
#5bd9a4 0.2

Platinum

Used for application backgrounds.

0, 0, 91
#e9e9e9
0, 0, 95
#f1f1f1
0, 0, 97
#f7f7f7
0, 0, 98
#fafafa
0, 0, 91, 0.2
#e9e9e9 0.2
Secondary

Our secondary palette contains a variety of colors to keep things fresh and interesting. We lean on these colors more frequently when brand awareness is high, or on our own properties where we control the surrounding environment. When used in conjunction with our primary palette, these colors makes every moment feel on-brand.

Carolina

Used for buttons, warning messages, confirmation screens, and calls to action.

195, 63, 60
#57b8d9
195, 81, 74
#85d6f2
195, 73, 81
#aae0f2
195, 65, 85
#c2e6f2
195, 48, 90
#daecf2
195, 63, 60, 0.2
#5bb7d6 0.2

Shadow

Used for warnings, error messages and field validation labels.

230, 24, 58
#7982ad
230, 35, 66
#8b95c7
230, 54, 79
#acb6e5
230, 41, 83
#c3c9e5
230, 21, 89
#7982ad 0.2
230, 24, 58, 0.2
#7982ad

Bronze

Define use cases here

25, 83, 66
#f09c60
25, 79, 72
#f0ae7f
25, 73, 78
#f0c1a0
25, 62, 85
#f0d4c0
25, 44, 89
#f0e2d8 0.2
25, 83, 66, 0.2
#212a4a

Siren

Used for buttons, warning messages, confirmation screens, and calls to action.

0,60,60
#d65b5b
0, 60, 70
#e08585
0, 60, 80
#ebadad
0, 60, 85
#efc0c0
0, 60, 90
#f5d6d6 0.2
0, 60, 60, 0.2
#212a4a

Cosmos

Used for application backgrounds.

240, 5, 51
#7c7c88
240, 5, 62
#9a9aa3
240, 8, 77
#bfbfc9
240, 16, 87
#d8d8e3
240, 10, 46, 0.2
#7c7c88 0.2
Typography

Typography is an important part of a design system that brings consistency across experiences and platforms. Good typography rules help present content clearly and efficiently. Matter is life.

Download Fonts
Aa
Matter SemiBold (600)
Matter Regular (400)
Heavy 900
Bold 700
SemiBold 600
Medium 500
Regular 400
Light 300
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Header One
72 / 84
The quick brown fox jumps over the dog.
Header Two
48 / 56
The quick brown fox jumping over the lazy dog.
Header Three
24 / 32
The quick brown fox jumping over the lazy dog.
Header Four
14 / 18
The quick brown fox jumping over the lazy dog.
Paragraph One
20 / 24
“Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading."
Paragraph Two
20 / 24
“Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading."
Paragraph Three
14 / 20
“Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading."
Paragraph One
12 / 20
“Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading."