Open this component in Storybook
The <dsgn-text> component renders body copy inside a <p> element with
typography drawn from the design tokens. Use it for paragraphs, captions, and
supporting copy; use <dsgn-heading> for headings.
Usage
<dsgn-text size="base">This is a paragraph of body text.</dsgn-text>Import the component module in your application entrypoint:
import '@ds-gn/ui/text';Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'base' | 'lg' | 'xl' | 'base' | Font size step. |
| weight | 'normal' | 'medium' | 'semibold' | 'bold' | 'normal' | Font weight. |
| color | 'primary' | 'secondary' | 'tertiary' | 'primary' | Semantic text color. |
| surface | 'light' | 'dark' | 'light' | Semantic token surface to use. |
The default size step is base, not md, and the lightest weight is normal.
There is no align prop — set text alignment on a wrapping element, or use the
alignment prop on <dsgn-heading-block> for a whole section.
Slots
| Slot | Description |
|---|---|
| (default) | Text content. |
Examples
Sizes
<dsgn-text size="sm">Small text</dsgn-text>
<dsgn-text size="base">Base text (default)</dsgn-text>
<dsgn-text size="lg">Large text</dsgn-text>
<dsgn-text size="xl">Extra large text</dsgn-text>Weights
<dsgn-text weight="normal">Normal weight</dsgn-text>
<dsgn-text weight="medium">Medium weight</dsgn-text>
<dsgn-text weight="semibold">Semibold weight</dsgn-text>
<dsgn-text weight="bold">Bold weight</dsgn-text>Secondary supporting copy
<dsgn-text size="sm" color="secondary">
Figure 1: Component architecture overview.
</dsgn-text>Dark surface
<dsgn-text size="lg" surface="dark">
Text rendered on a dark background.
</dsgn-text>Accessibility
The component renders a paragraph, so each <dsgn-text> should hold one
paragraph of copy. color="tertiary" is the lowest-contrast step — reserve it
for supplementary text and keep essential copy at primary or secondary.