Usage

Our brand font

We use the Adobe font Proxima Nova for almost everything within in-product experiences. This font has been chosen for its exceptional versatility, legibility and accessibility on all device medium, providing a seamless experience throughout all Productboard products.

Regular

Medium

SemiBold

Font stack

We also adopt a font stack that adapts to the operating system it runs on, like macOS, iOS, Windows, Android or Linux distributions.

OS	Font family
macOS and iOS	SF Pro Text, SF Pro Display
Windows	Segoe UI
Android	Roboto
Linux	Default system font

Font scale

We use a type scale system for type hierarchy and to create consistency across our products. Sticking to logical hierarchies ensures that elements in the UI are clear and easily recognisable when scanning the page. For the ideal text colour we recommend using high to medium emphasis for most text on any background.

Title	Size	px value	rem value
Display	XXL	48	3
Page-heading	XL	36	2.25
Heading	L	28	1.75
Sub-heading	M	20	1.25
Title	S	16	1
Body	XS	14	0.875
Caption	XXS	12	0.75

Font weight

Style	Weight	Usage
Heading	Semi-bold	Brand display headlines and page headings
Sub heading	Semi-bold	Page headers and content titles
Strong	Semi-bold and Medium	Emphasis on Body and Caption copy
Default	Medium and Regular	Body copy and caption labels

Line height

Title	px value	rem value
XL	64	4
L	48	3
M	40	2.5
S	28	1.75
XS	24	1.5
XXS	16	1

Polaris type styles are grouped into two categories: heading and body. Each has a default set of variants along with a set of options to allow for flexibility and a wide range of applications within the user interface. They use one scale, so they can be applied to any screen size.

Heading

Heading styles are used to create various levels of hierarchy on the page. These styles range in size and weight, and are used accordingly within the space it occupies. Typcially the larger the style, the more importance it converys to a consumer.

Heading is used for numerals and key information in view, whereas Sub-heading and Title are more for titles in-page and in containers. As the largest text on the screen, use these styles sparingly within a single page.

Body

Body styles are the most used style within our components and blocks of text in various weights. Less important labelling to support body weights uses the Caption size to be deliberately less prominent.

Link

Links are used either inline within body copy or standalone with optional icons. All our links are underline by default regardless of their placement in the interface.

Line length

For long-form, multi-line paragraphs set at our default font size, use a maximum width of 624 to allow for a max of about 95 characters. Otherwise, it can get hard for users to scan and read text.

Best practice

Use the Body font and above in most use cases, especially long-form text. Smaller fonts are ok for less important information, but should be used sparingly. This ensures that content is accessible to all of our customers, including users with low vision.

Stick to our design tokens and use color combinations with a 4.5:1 contrast ratio between foreground and background.

Avoid ALL CAPS in their entirety. Future localisation will not support this for certain languages.

Do's and Don'ts

Do	Don't
✅ Use Nucleus' defined font sizes.	🚫 Use custom font sizes. This could create additional design debt.
✅ Use fonts with the associated line height	🚫 Use typography design tokens from unrelated groups.
✅ Use the default text colour token for all titles. This is Text/Default	🚫 Use any other colour token for titles. This could break our colour contrast accessibility rules.
	🚫 Use uppercase text in any product UI. Sentence case increases readability.