Text

Token-driven body text with presets for element, size, tone, and weight.

tsx

import { Text } from 'glt-ui';

Tones

Semantic color tones drawn from theme tokens.

Default tone

Secondary tone

Strong tone

Brand tone

tsx

<Text tone="default">Default tone</Text>
<Text tone="secondary">Secondary tone</Text>
<Text tone="strong">Strong tone</Text>
<Text tone="brand">Brand tone</Text>

Sizes

Four size presets from extra-small to large.

Extra small text

Small text

Base text

Large text

tsx

<Text size="xs">Extra small text</Text>
<Text size="sm">Small text</Text>
<Text size="base">Base text</Text>
<Text size="lg">Large text</Text>

Weights

Adjust emphasis with the weight preset.

Normal weight

Medium weight

Semibold weight

tsx

<Text weight="normal">Normal weight</Text>
<Text weight="medium">Medium weight</Text>
<Text weight="semibold">Semibold weight</Text>

Inline element

Render as a span for inline emphasis within a sentence.

inline brand text

tsx

<Text as="span" tone="brand" weight="semibold">
  inline brand text
</Text>

Display scale

Larger display sizes combined with bold weight, alignment, and brand tone.

Guided Latent Tuning

Refine internal representations

Centered supporting line

tsx

<Text size="3xl" weight="bold" tone="brand">
  Guided Latent Tuning
</Text>
<Text size="2xl" weight="bold">
  Refine internal representations
</Text>
<Text size="xl" align="center">
  Centered supporting line
</Text>