Typography

• Typography is for text writing including title, subtitle, text and paragraph.
• This component makes it easy to apply a default set of font weights, sizes and colors in your application.

Examples

Typography.Title

There are 2 typefaces: neutral and playful:

• neutral supports 6 levels of a Title: h1, h2, h3, h4, h5, h6
• playful supports 5 levels of a Title: h1, h2, h3, h4, h5

Neutral typeface

Heading 01: This is for special headings on full page splash screens.

Heading 02: This is for main headings on screens.

Heading 03: This is for secondary or scaled headings on screens.

Heading 04: This is for smaller layout headings.

Heading 05: This style should be used for section headings.

Heading 06: This style should be used for section headings or subheadings, complimentry to headings-02.

Playful typeface

Heading 01: This is for main headings on pillar header.

Heading 02: This is for main headings on pillar header.

Heading 03: This is for main headings on pillar header.

Heading 04: This is for main headings on pillar header.

Heading 05: This is for main headings on pillar header.

Typography.Body

There are 2 typefaces: neutral and playful:

• neutral: Body, Body Bold, Body small and Body small bold
• playful Body and Body Bold

Neutral typeface

Body

This style is the standard for body copy. It should be used for long paragraphs with four lines or more. It is always left-aligned.

Body Bold

This style is used for expressive body copy. It should only be used to compliment body-01, for CTAs or in-line links.

Body Small

This style is for secondary body copy. It should be used to subordinately to body-01. It is always left-aligned.

Body Small Bold

The style is for secondary body copy. It should be used to compliment body-03 and subordnately to body-01.

Playful typeface

Body

This style is the standard for body copy. It should be used for long paragraphs with four lines or more. It is always left-aligned.

Body Bold

This style is the bold for body copy. It should be used for long paragraphs with four lines or more. It is always left-aligned.

Typography.Caption

This is a multipurpose type style that can be used for tertiary information. It can also be used for explanatory helper text that appears below a input field within a component. It should not be used for body copy.

This is regular caption

This is bold caption

This is subdued caption

This is primary caption

This is success caption

This is info caption

This is warning caption

This is danger caption

This is archived caption

This is inverted caption in colored background

Typography.Label

This is a multipurpose type style that can be used for chips, labels and captions. It should not be used for body copy.

This is regular label

This is bold label

This is subdued label

This is primary label

This is success label

This is info label

This is warning label

This is danger label

This is archived label

This is inverted label in colored background

Intents

All Typography components come with 11 intents: body, subdued, primary, secondary, success, info, warning, danger, inverted, archived and disabled.

This is body intent

This is subdued intent

This is primary intent

This is secondary intent

This is success intent

This is info intent

This is warning intent

This is danger intent

This is inverted intent

This is archived intent

This is disabled intent

Props

Typography.Title

	Prop	Required	Default	Type
	children	required		ReactNode
	intent		body	"warning" | "success" | "info" | "primary" | "danger" | "archived" | "secondary" | "disabled" | "body" | "subdued" | "inverted"
	level		h1	"h1" | "h2" | "h3" | "h4" | "h5" | "h6"
	style			StyleProp<TextStyle>
	testID			string
	typeface		neutral	"neutral" | "playful"

Typography.Body

	Prop	Required	Default	Type
	children	required		ReactNode
	intent		body	"warning" | "success" | "info" | "primary" | "danger" | "archived" | "secondary" | "disabled" | "body" | "subdued" | "inverted"
	style			StyleProp<TextStyle>
	testID			string
	typeface		neutral	"neutral" | "playful"
	variant		regular	"small" | "regular" | "regular-bold" | "small-bold"

Typography.Caption

	Prop	Required	Default	Type
	children	required		ReactNode
	fontWeight		regular	"regular" | "semi-bold"
	intent		body	"warning" | "success" | "info" | "primary" | "danger" | "archived" | "secondary" | "disabled" | "body" | "subdued" | "inverted"
	style			StyleProp<TextStyle>
	testID			string

Typography.Label

	Prop	Required	Default	Type
	children	required		ReactNode
	intent		body	"warning" | "success" | "info" | "primary" | "danger" | "archived" | "secondary" | "disabled" | "body" | "subdued" | "inverted"
	style			StyleProp<TextStyle>
	testID			string