Typography

tsx
import {XDSHeading} from '@xds/core';
​
// Heading levels map to semantic tokens: level 1 → --text-heading-1-*
<XDSHeading level={1}>Page Title</XDSHeading>
<XDSHeading level={2}>Section</XDSHeading>
<XDSHeading level={3}>Subsection</XDSHeading>
​
// Display type for hero/marketing headings — level sets the HTML element
<XDSHeading level={1} type="display-1">Hero Title</XDSHeading>
<XDSHeading level={2} type="display-2">$1.2M Revenue</XDSHeading>
​
// Override the accessibility level when visual ≠ document hierarchy
<XDSHeading level={2} accessibilityLevel={3}>
  Sidebar Section
</XDSHeading>

tsx
import {XDSText} from '@xds/core';
​
<XDSText type="body">Body text at the base scale.</XDSText>
<XDSText type="large">Emphasized body text.</XDSText>
<XDSText type="label">Form label</XDSText>
<XDSText type="supporting">Helper text, timestamps, metadata.</XDSText>
<XDSText type="code">{'const x = 1;'}</XDSText>
​
// Display without heading semantics (data callouts, decorative)
<XDSText type="display-2">$1.2M Revenue</XDSText>

tsx
import {defineTheme} from '@xds/core';
​
// Adjust the entire ramp holistically with base and ratio
const editorialTheme = defineTheme({
  name: 'editorial',
  typography: {
    scale: { base: 16, ratio: 1.25 },          // airy / article feel
    body: { family: 'Geist', fallbacks: '-apple-system, sans-serif' },
    heading: { weight: 'bold' },
    code: { family: 'Geist Mono', fallbacks: '"SF Mono", monospace' },
  },
});
​
const denseTheme = defineTheme({
  name: 'dense',
  typography: {
    scale: { base: 12, ratio: 1.125 },          // compact / data-dense UI
  },
});