Loading Helios UI…

Typography

The full type scale - 13 styles from Large Title (64px) down to Caption 2 (11px), each in four weights, set in Inter and matching the reference text metrics.

How the system works

Every style is a composite token: one class such as text-body-medium sets font size, line height, letter spacing and weight together. The shared typography stylesheet defines these metrics, so headings, labels and controls use the same scale throughout the website. One token carries every metric into the component.

The naming is text-{family}-{weight}: 13 families × 4 weights. Regular is 400, Medium 500, Semibold 600 and Bold 700. Apply color separately through semantic text tokens, keeping typography and color choices independent.

The source-native React components use these exact styles inside NativeScope. Import the shared stylesheet once, then compose controls and application layouts from the same exports. The original Helios foundation examples remain available separately.

Large Title

64px / 80px

Hero numerals and marketing-scale headings.

The five boxing wizards jump quickly.

text-large-title-regularRegular · 400

The five boxing wizards jump quickly.

text-large-title-mediumMedium · 500

The five boxing wizards jump quickly.

text-large-title-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-large-title-boldBold · 700

Display 1

56px / 72px

Large display headings and major page statements.

The five boxing wizards jump quickly.

text-display-1-regularRegular · 400

The five boxing wizards jump quickly.

text-display-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-1-boldBold · 700

Display 2

48px / 64px

Display headings for section introductions.

The five boxing wizards jump quickly.

text-display-2-regularRegular · 400

The five boxing wizards jump quickly.

text-display-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-2-boldBold · 700

Display 3

40px / 54px

Compact display headings.

The five boxing wizards jump quickly.

text-display-3-regularRegular · 400

The five boxing wizards jump quickly.

text-display-3-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-3-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-3-boldBold · 700

Display 4

32px / 44px

Smaller display headings.

The five boxing wizards jump quickly.

text-display-4-regularRegular · 400

The five boxing wizards jump quickly.

text-display-4-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-4-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-4-boldBold · 700

Title 1

24px / 34px

Main page titles.

The five boxing wizards jump quickly.

text-title-1-regularRegular · 400

The five boxing wizards jump quickly.

text-title-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-1-boldBold · 700

Title 2

20px / 26px

Section titles.

The five boxing wizards jump quickly.

text-title-2-regularRegular · 400

The five boxing wizards jump quickly.

text-title-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-2-boldBold · 700

Title 3

18px / 24px

Compact section titles.

The five boxing wizards jump quickly.

text-title-3-regularRegular · 400

The five boxing wizards jump quickly.

text-title-3-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-3-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-3-boldBold · 700

Headline

16px / 22px

Prominent labels and supporting introductions.

The five boxing wizards jump quickly.

text-headline-regularRegular · 400

The five boxing wizards jump quickly.

text-headline-mediumMedium · 500

The five boxing wizards jump quickly.

text-headline-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-headline-boldBold · 700

Body

14px / 20px

Body copy and control labels.

The five boxing wizards jump quickly.

text-body-regularRegular · 400

The five boxing wizards jump quickly.

text-body-mediumMedium · 500

The five boxing wizards jump quickly.

text-body-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-body-boldBold · 700

Body 2

13px / 18px

Dense body copy and helper text.

The five boxing wizards jump quickly.

text-body-2-regularRegular · 400

The five boxing wizards jump quickly.

text-body-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-body-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-body-2-boldBold · 700

Caption 1

12px / 16px

Captions and compact labels.

The five boxing wizards jump quickly.

text-caption-1-regularRegular · 400

The five boxing wizards jump quickly.

text-caption-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-caption-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-caption-1-boldBold · 700

Caption 2

11px / 15px

The smallest supporting labels.

The five boxing wizards jump quickly.

text-caption-2-regularRegular · 400

The five boxing wizards jump quickly.

text-caption-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-caption-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-caption-2-boldBold · 700