layout · Normal DOM only

Text

Typography primitive — size × weight × color all driven by --t-font-*. Polymorphic via `as`.

Use Text for any styled string in the UI. Sizes, weights and colors map 1:1 onto Twenty's font tokens. Render as the right semantic tag via `as` (h1, h2, p, span, …) — Text never assumes display:block.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Text } from '@8maverik8/twenty-design';

Examples

Sizes

xxs — The quick brown foxxs — The quick brown foxsm — The quick brown foxmd — The quick brown foxlg — The quick brown foxxl — The quick brown foxxxl — The quick brown fox
tsx
<Text size="xxl" weight="semiBold">…</Text>
<Text size="md">…</Text>
<Text size="xs" color="tertiary">…</Text>

Weights and colors

regularmediumsemiBoldsecondarytertiarydanger
tsx
<Text weight="semiBold">Strong</Text>
<Text color="danger">Error message</Text>

Variants

size
xxsTwenty token --t-font-size-xxs.
xsTwenty token --t-font-size-xs.
smdefaultDefault body size.
mdTwenty token --t-font-size-md.
lgTwenty token --t-font-size-lg.
xlTwenty token --t-font-size-xl.
xxlTwenty token --t-font-size-xxl.
weight
regulardefault400 — body copy.
medium500 — labels, emphasis.
semiBold600 — headings, strong emphasis.
color
primarydefaultDefault text colour.
secondaryQuieter — captions, labels.
tertiaryHint / placeholder level.
lightQuietest readable colour.
invertedFor dark-fill surfaces (Modal overlay, toasts).
danger--t-font-color-danger — error messages.

Guidelines

✓
Use `as="h1"` (etc.) for real headings — keep semantics correct.Document outline drives a11y and SEO; visual size is independent.
✓
Use truncate to elide overflowing labels in narrow containers.Wrapped long names break list alignment; truncation is predictable.
✕
Inline `style={{ fontSize: 14 }}` to get a custom size.Pick a token; if none fits, add a token instead of forking.