Our typography guidelines allow us to provide content and components that are legible, understandable, and visually appealing to our users. Typography is shaped and composed by different attributes, such as sizing, color and styling.
The only fonts approved for usage are those from the Roboto family, by Google:
Each of these fonts supports colors and weight variations that can be used to emphasise words or sentences, and generate more dynamic content.
These styles can be applied to most category scales except from buttons and labels. This refers to special variations that might combine color, weight, font style and/or text decoration properties.
https://invis.io/5QWXOAVR2YB#/414275396_Styling
Our design system includes a wide range of scale categories to support both product and marketing content. The units used for font size, letter spacing and line height might change depending on the platform, but are all based in a 16-unit system.
<aside> 🔶 Note: 1 rem = 16px / 16sp / 16pt
</aside>
Default colors can be applied to all category scale and typeface variations. Each token has a specific usage that is noted in the table below.
https://invis.io/ZMWT1R1WD3Y#/413036062_Grays
Accent colors can be applied to almost any scale except for buttons and labels. They are used mostly when referring to trends or scores related to KPIs. Please note that each KPI might have different thresholds for these color variations.