Typography

Elicit emotions and convey specific messages to the users

Usage

Typography is defined as the science of style, appearance, and structure of fonts that aim to provide convenience and aesthetics to the reader. Effective typography depends not only on the content but also on the presentation visual of the typography itself, starting from the font type, font size and line height. Check out the guideline for more detail description.

Texts

import { Paragraph, SizableText, Text } from '@legion-crossplatform/ui';

export default () => (
  <>
    <Text>Text</Text>
    <SizableText>Sizable Text</SizableText>
    <Paragraph>Paragraph</Paragraph>
  </>
)

Common usage : Description, Paragraph, Button, Text Field, Tabs, etc

import { Text } from '@legion-crossplatform/ui';

export function Text = () => {
    return (
        <Text>Text</Text>
    )
}

Headings

Common usage : Hero section, Title content or component, Subtitle of title

Preview	Props Name	Font Size	Line Height
Heading 1	heading1	44sp	53dp
Heading 2	heading2	32sp	40dp
Heading 3	heading3	23sp	35dp
Heading 4	heading4	20sp	32dp
Heading 5	heading5	15sp	27dp
Heading 6	heading6	13sp	24dp

import { H1, H2, H3, H4, H5, H6, YStack } from '@legion-crossplatform/ui'

export function HeadingsDemo() {
  return (
    <YStack alignSelf="center">
      <H1>Heading 1</H1>
      <H2>Heading 2</H2>
      <H3>Heading 3</H3>
      <H4>Heading 4</H4>