snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-docs/ui/primitives/typography/heading.mdx

@@ -0,0 +1,43 @@
+---
+title: Heading
+description: Render semantic headings with independent visual sizes.
+---
+
+import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';
+import HeadingReference from '/snippets/ui/generated/typography/heading.mdx';
+
+`Heading` renders an `h2` by default. Use `children` for its content, `level` for document structure, and `size` for appearance.
+
+<StoryEmbed
+  storyId="ui-typography-heading--documentation"
+  title="Heading example"
+  height={180}
+/>
+
+## Choose a heading level and size
+
+Choose levels in document order. A smaller visual size does not change the level announced by assistive technology.
+
+```tsx
+import { Heading } from 'twenty-ui/primitives/typography';
+
+export const WorkspaceTitle = () => (
+  <Heading level={1} size="lg">
+    Workspace settings
+  </Heading>
+);
+```
+
+Sizes `xs`, `sm`, `md`, and `lg` use the matching font tokens. Headings have no outer margin; their surrounding layout owns spacing.
+
+## Color and composition
+
+Use `color="secondary"` for less prominent headings. `tertiary` is also available, but its contrast depends on the font size, theme, and background. Check readability when using it.
+
+Native attributes, styles, class names, and refs pass to the heading. Use `render` to compose with a custom element or component; that element is responsible for preserving heading semantics.
+
+For a heading with supporting text or actions, use [Section](/ui/components/section).
+
+## Props
+
+<HeadingReference />

packages/twenty-docs/ui/primitives/typography/text.mdx

@@ -0,0 +1,65 @@
+---
+title: Text
+description: Render text with single-line truncation or a limited number of lines.
+---
+
+import { StoryEmbed } from '/snippets/ui/StoryEmbed.mdx';
+
+import TextReference from '/snippets/ui/generated/typography/text.mdx';
+
+`Text` provides overflow handling. It renders a `div` by default and inherits typography from its surroundings.
+
+<StoryEmbed
+  storyId="ui-typography-text--documentation"
+  title="Text example"
+  height={240}
+/>
+
+## Truncate one line
+
+Give the text a constrained width, then set `truncate` to show an ellipsis when it overflows:
+
+```tsx
+import { Text } from 'twenty-ui/primitives/typography';
+
+export const ContactName = () => (
+  <Text truncate style={{ maxWidth: 160 }}>
+    Alexandra Montgomery
+  </Text>
+);
+```
+
+## Limit the number of lines
+
+Use `lineClamp` with a positive integer. Choose either `truncate` or `lineClamp`; their props are mutually exclusive.
+
+```tsx
+import { Text } from 'twenty-ui/primitives/typography';
+
+export const Summary = () => (
+  <Text lineClamp={2} style={{ maxWidth: 240 }}>
+    Follow up with the customer about their onboarding milestones and upcoming
+    renewal.
+  </Text>
+);
+```
+
+## Choose an element
+
+Use `render` when the text needs another semantic element:
+
+```tsx
+import { Text } from 'twenty-ui/primitives/typography';
+
+export const Description = () => (
+  <Text render={<p />}>Account description</Text>
+);
+```
+
+Truncation affects the visual presentation; it does not shorten the text in the DOM. Provide a way to read the full content when the visible portion is insufficient.
+
+## Props
+
+Native attributes, children, refs, class names, and styles are also accepted.
+
+<TextReference />