Typography
These are the default type styles you’ll need when designing most interfaces in Gusto’s product.
- Tokens refer to typographic presets that include font size, line height, letter spacing and font weight
- Larger tokens refer to a larger font size
- The last two digits of a token refer to font weight
- Tokens ending in
00
use “book”—our normal weight - Tokens ending in
25
use “medium”—the boldest weight we use
- Tokens ending in
Accessibility alert
Text should use salt-800
(or darker) to meet our accessibility standards for contrast ratios.
Token | Preview | Specs | Usage |
---|---|---|---|
Headings | |||
725 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 32px/3.2rem Line height: 40px/4rem Letter spacing: 0 Weight: Medium | Page/Header titlesDialog titles |
625 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 24px/2.4rem Line height: 32px/3.2rem Letter spacing: 0 Weight: Medium | Section titlesRadioCard titles |
525 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 20px/2rem Line height: 28px/2.8rem Letter spacing: 1%/.01rem Weight: Medium | Card titlesDrawer titles |
425 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 18px/1.8rem Line height: 24px/2.4rem Letter spacing: 1%/.01rem Weight: Medium | Alert /Toast titlesPanel titles |
Paragraph | |||
325 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 16px/1.6rem Line height: 24px/2.4rem Letter spacing: 2%/.02rem Weight: Medium | LabelsButton (large/medium) textLink titles |
300 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 16px/1.6rem Line height: 24px/2.4rem Letter spacing: 2%/.02rem Weight: Book | Default font sizep textInput textDescriptive text |
Byline | |||
225 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 14px/1.4rem Line height: 20px/2rem Letter spacing: 2%/.02rem Weight: Medium | Button (small) textactive Tabs |
200 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 14px/1.4rem Line height: 20px/2rem Letter spacing: 2%/.02rem Weight: Book | Helper text Validation text Tab labelsBreadcrumbs |
Small | |||
125 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 12px/1.2rem Line height: 16px/1.6rem Letter spacing: 2%/.02rem Weight: Medium | Tag text |
100 | The All-In-One People Platform for Payroll, Benefits, HR | Size: 12px/1.2rem Line height: 16px/1.6rem Letter spacing: 2%/.02rem Weight: Book | small Footer text |
Gusto’s product uses G Centra as the primary font. G Centra is a contemporary sans-serif that’s accessible and unpretentious. It’s ideal for longer text and product experiences. We use G Centra Book for normal text and G Centra Medium for headings and call outs. Moonstone Book is our script font used for signatures.
When people come together, they’re capable of incredible things.
Gusto is the one place modern employers can go to onboard, pay, insure, and support their hardworking teams. With our smart technology and friendly service, we make the lives of working people a little bit easier.
Reference the Gusto Brand Kitfor details.