Style Guide
Search…
Typography - Native
Typography provides legible and consistent UI across the Handy Design system.

Handy Font

Handy's typography system uses different type weights and sizes of the Circular font (available for download below). The systems enables content on pages to be clearly structured and easy to digest.
Circular.zip
343KB
Binary
Circular Font

Typography System

Header 1 (a-text-h1)

Header 1 styling is used for important content headers on main pages. Can be used on the home page.
1
font-weight: bold
2
font-size: 26px
3
font-color: text-black
Copied!

Header 2 (a-text-h2)

Header 2 styling is used headers for pages. Can be found in m-header-primary.
1
font-weight: bold
2
font-size: 24px
3
font-color: text-black
Copied!

Header 3 (a-text-h3)

Header 3 styling is used as titles on pages. Can be found in general content pages, m-half_sheet, m-modal
1
font-weight: bold
2
font-size: 20px
3
font-color: text-black
Copied!

Header 4 (a-text-h4)

Header 4 styling is used on cards, tabs, reviews, and product marketing titles on pages.
1
font-weight: bold
2
font-size: 16px
3
font-color: text-black
Copied!

Subheader (a-text-subheader)

Styling used in subheader (header-subheader) or section headers.
1
font-weight: medium
2
font-size: 16px
3
font-color: text-black
Copied!

Avatar (a-text-avatar)

Styling used in default customer avatars on the pro app. Variations: a-text-avatar-slate-dark
1
font-weight: book
2
font-size: 24px
3
4
Usage - regular avatars and m-card-messages-unread:
5
font-color: text-black
6
7
Usage - m-card-message-read
8
font-color: slate-dark
Copied!

Button CTA (a-text-button)

Button CTA styling is used on major CTAs (m-button-primary, m-button-secondary) Variations: a-text-button-white, a-text-button-blue-medium
1
font-weight: book
2
font-size: 20px
3
4
Primary CTAs (a-text-button-white)
5
font-color: white
6
7
Secondary CTA(a-text-button-blue-medium)
8
font-color: blue-medium
Copied!

Paragraph (a-text-paragraph)

Paragraph styling is used for body copy on pages. Can be found in a-picker, m-review. m-list, m-text_field, m-message, m-half_sheet, m-modal, m-banner, m-prod-marketing. Paragraph styles can be different colors depending on context. Variations: a-text-paragraph-blue-medium, a-text-paragraph-slate-dark, a-text-paragraph-slate-medium-dark, a-text-paragraph-white
1
font-weight: book
2
font-size: 16px
3
4
Links (a-button-link):
5
font-color: blue-medium
6
7
Body Copy (m-half_sheet, m-modal, m-banner, m-prod-marketing, m-text_field):
8
font-color: text-black, slate-dark
9
line-height: 1.5
10
11
Read Message (m-card-message-read):
12
font-color: slate-medium-dark
13
14
Banners (m-banner):
15
font-color: white
Copied!

Tertiary (a-text-tert)

Tertiary styling used for metadata (m-metadata) in cards Variations: a-text-tert-slate-dark, a-text-tert-green-medium
1
font-weight: book
2
font-size: 14px
3
font-color: slate-dark, text-black, green-medium,
Copied!

Subtitle 1 (a-text-subtitle-1)

Subtitle 1 styling is used for minor details like when a messages is sent (m-card-message)
1
font-weight: medium
2
font-size: 12px
3
font-color: text-black
Copied!

Subtitle 2 (a-text-subtitle-2)

Subtitle 2 styling is used read messages (m-card-message-read)
1
font-weight: book
2
font-size: 12px
3
font-color: slate-medium-dark
Copied!

Label (a-text-label)

Label styling is used in engaged text fields (m-text_field-filled) or the navigation bar Variations: a-text-label-slate-dark, a-text-label-slate-medium-dark, a-text-label-blue-medium
1
font-weight: book
2
font-size: 10px
3
4
Text Field (m-text_field-filled):
5
font-color: slate-dark
6
7
Navigation - Inactive State (m-nav):
8
font-color: slate-medium-dark
9
10
Navigation - Active State (m-nav):
11
font-color: blue-medium
Copied!