Style Guide
Search
K

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.
font-weight: bold
font-size: 26px
font-color: text-black

Header 2 (a-text-h2)

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

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
font-weight: bold
font-size: 20px
font-color: text-black

Header 4 (a-text-h4)

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

Subheader (a-text-subheader)

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

Avatar (a-text-avatar)

Styling used in default customer avatars on the pro app. Variations: a-text-avatar-slate-dark
font-weight: book
font-size: 24px
Usage - regular avatars and m-card-messages-unread:
font-color: text-black
Usage - m-card-message-read
font-color: slate-dark

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
font-weight: book
font-size: 20px
Primary CTAs (a-text-button-white)
font-color: white
Secondary CTA(a-text-button-blue-medium)
font-color: blue-medium

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
font-weight: book
font-size: 16px
Links (a-button-link):
font-color: blue-medium
Body Copy (m-half_sheet, m-modal, m-banner, m-prod-marketing, m-text_field):
font-color: text-black, slate-dark
line-height: 1.5
Read Message (m-card-message-read):
font-color: slate-medium-dark
Banners (m-banner):
font-color: white

Tertiary (a-text-tert)

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

Subtitle 1 (a-text-subtitle-1)

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

Subtitle 2 (a-text-subtitle-2)

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

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
font-weight: book
font-size: 10px
Text Field (m-text_field-filled):
font-color: slate-dark
Navigation - Inactive State (m-nav):
font-color: slate-medium-dark
Navigation - Active State (m-nav):
font-color: blue-medium