Typography - Native
Typography provides legible and consistent UI across the Handy Design system.
Last updated
Typography provides legible and consistent UI across the Handy Design system.
Last updated
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.
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.
Header 2 styling is used headers for pages. Can be found in m-header-primary.
Header 3 styling is used as titles on pages. Can be found in general content pages, m-half_sheet, m-modal
Header 4 styling is used on cards, tabs, reviews, and product marketing titles on pages.
Styling used in subheader (header-subheader) or section headers.
Styling used in default customer avatars on the pro app. Variations: a-text-avatar-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
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
Tertiary styling used for metadata (m-metadata) in cards Variations: a-text-tert-slate-dark, a-text-tert-green-medium
Subtitle 1 styling is used for minor details like when a messages is sent (m-card-message)
Subtitle 2 styling is used read messages (m-card-message-read)
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
