Page tree
Skip to end of metadata
Go to start of metadata

The Big 7

All of the extensions can run at just 7 different style & size definitions. Of course, there are some permutations within some of those styles, for example, T1 Body Text is used both as a main body style for majority of the text, however that same style & size is used on buttons and in input fields, yet those are visually different overall (buttons of course have a clickable rectangle around text, and input fields are ... well input fields).

Here are all the styles in visual examples, and in context. Note that the colours for some of those will change depending on the usage as some of these are used in many places. For example, T1 Main Body is used as main body text and as text on buttons. Therefore, the actual end colour is dependent on the usage, however, all of the other main parameters stay the same (font size, font weight, etc.)

Of course, there's a possibility we will need some additional styles in the future as new needs arise, but the font definition list should essentially never exceed single digit numbers.

Developers, please note that as stated in Typography System Stack article, the actual font family should be system stack, and colours should be defined as variables not as hard coded hex colours.

H1 – Large Header

Examples of H1 in use, highlighted in yellow:

H2 Medium Header

Examples of H2 in use, highlighted in yellow:

H3 Small Header

Examples of H3 in use, highlighted in yellow:

T1 Main Body Text

Examples of T1 in use, highlighted in yellow:

T2 Italic Body Text

Examples of T2 in use, highlighted in yellow:

T3 Small Body Text

Examples of T3 in use, the message on the right side of the Apply button, highlighted in yellow:

T4 Small Italic Body Text

Examples of T4 in use, highlighted in yellow:

  • No labels