QReg5 Design System

Typography

Typography is one of the platform's core components, as it guides and helps users understand and interact with the content. Applying established typographical rules to interface elements allows us to convey the content in a clearer and more effective manner. Simply put, good typography is invisible.

Platform Typefaces

In the platform, Satoshi Variable is used for headings and Inter for general content. Names of the platform typefaces, Satoshi Variable and Inter, are shown with each typeface in white and with a black background

Size and Weight

Size and weight are two important typographical variables that can help emphasise and establish the textual hierarchy. These two variables must be balanced in order to provide the correct expression. A text with a heavier font will always carry a greater emphasis than one with a lighter font, even if the text size is the same.

We mainly use the following weights for content:

  • Regular (450)
  • Semi bold (600)
  • Bold (700)
The three different platform weights, regular, semi bold and bold, are shown with the Inter typeface and with each weight in black with a white background

Text Colour

Text colour should be used with care. The rule of thumb is to keep the colour neutral in tables and body text, and green for primary elements that can be interacted with. Colours should not be used for decorative purposes.

Two examples of green colouring are shown with a white background. First, a green arrow pointing to the left before a green text saying Back and then a green border around a green text saying Save