Type in Product

<dt-text kind="headline|body|label|code" size="{size}" {{props}}>...</dt-text>

<el class="d-text-{category}--{size}">...</el>

<dt-stack gap="200">
  <dt-stack gap="100" class="d-jc-space-between">
    <dt-stack>
      <dt-text as="h2" kind="headline" :size="500" strength="medium" density="200" class="d-fs-400">
        Katie Rodriguez
      </dt-text>
      <dt-stack direction="row" gap="75">
        <dt-text tone="positive">
          Available
        </dt-text>
        <dt-text>•</dt-text>
        <dt-text tone="tertiary">
          Working from coffee shop
        </dt-text>
      </dt-stack>
    </dt-stack>
    <dt-stack gap="25">
      <dt-text kind="body" :size="300" density="200" strength="semibold" tone="tertiary">
        Chief Customer Success Officer
      </dt-text>
      <dt-text kind="body" :size="200" density="200">
        <dt-text strength="semibold">
          6:19 am
        </dt-text> local time
      </dt-text>
    </dt-stack>
  </dt-stack>
  <dt-stack gap="100" direction="row" class="d-jc-space-between">
    <dt-button class="d-fl1" kind="muted" importance="outlined">
      <template #startIcon="{ iconSize }">
        <dt-icon-phone :size="iconSize" />
      </template>
      Call
    </dt-button>
    <dt-button class="d-fl1" kind="muted" importance="outlined">
      <template #startIcon="{ iconSize }">
        <dt-icon-quick-reply :size="iconSize" />
      </template>
      Message
    </dt-button>
    <dt-button class="d-fl1" kind="muted" importance="outlined">
      <template #startIcon="{ iconSize }">
        <dt-icon-video :size="iconSize" />
      </template>
      Meet
    </dt-button>
  </dt-stack>
</dt-stack>

<dt-stack gap="200">
  <dt-stack>
    <dt-text as="h2" kind="headline" :size="600">AI that works for you</dt-text>
    <dt-text kind="body" :size="400">Support customers, drive sales, and collaborate with your team—all in one, beautiful AI-powered app.</dt-text>
  </dt-stack>
  <dt-stack direction="row" gap="200" align="start">
    <dt-stack>
      <dt-text as="h3" kind="headline" :size="500">AI Contact Center</dt-text>
      <dt-text as="p" kind="body" :size="300">The world’s most advanced customer engagement platform</dt-text>
    </dt-stack>
    <dt-stack>
      <dt-text as="h3" kind="headline" :size="500">AI Voice</dt-text>
      <dt-text as="p" kind="body" :size="300">Say hello to the world’s smartest business phone</dt-text>
    </dt-stack>
    <dt-stack>
      <dt-text as="h3" kind="headline" :size="500">AI Meetings</dt-text>
      <dt-text as="p" kind="body" :size="300">AI-powered video meetings with built-in transcriptions</dt-text>
    </dt-stack>
  </dt-stack>
</dt-stack>