Typography - Native
Typography provides legible and consistent UI across the Handy Design system.
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
1. Header 1 (a-text-h1)
2. Header 2 (a-text-h2)
3. Header 3 (a-text-h3)
4. Header 4 (a-text-h4)
5. Subheader (a-text-subheader)
6. Avatar (a-text-avatar)
7. Button CTA (a-text-button)
8. Paragraph (a-text-paragraph)
9. Tertiary (a-text-tert)
10. Subtitle 1 (a-text-subtitle-1)
11. Subtitle 2 (a-text-subtitle-2)
12. Label (a-text-label)
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 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 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 styling is used on cards, tabs, reviews, and product marketing titles on pages.
font-weight: bold
font-size: 16px
font-color: text-black
Styling used in subheader (header-subheader) or section headers.
font-weight: medium
font-size: 16px
font-color: text-black
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 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 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 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 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 styling is used read messages (m-card-message-read)
font-weight: book
font-size: 12px
font-color: slate-medium-dark
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
Last modified 3yr ago