Text styles

Introduction

Text styles are a key part of the design system.

To define Text styles, we have the following principles: 1. Widely used in design. 2. The number of Text styles should be as small as possible.

The font we use is: Inter, other recommended fonts: SF Pro, Roboto, Averta.

Rules of use

Please try to keep the number of Text styles below 16.

90% principle: If the Text styles used in a single product accounts for less than 10%, please do not include it in the design system.

How to use

Text styles can be added, modified and deleted. Modifying them will affect all components and pages, please proceed with caution.

Notes

The fill color from dark to light represents the frequency of use from high to low.

Different products will have different frequency of use, here is the Snow Dashboard UI Kit as a reference.

Font: Inter

48 Semibold

24 Semibold

24 Regular

18 Semibold

18 Regular

14 Semibold

14 Regular

12 Semibold

12 Regular