> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Create a clear typographic hierarchy that organizes content and guides people through the experience.

## Usage guidelines

Follow Anvil2 guidance on casing, alignment, and color/contrast. Use AI Kit tokens consistently across all typography to maintain a cohesive type system.

***

## Type ramp

Use AI Kit tokens consistently across all typography to maintain a cohesive type system. Headline styles should follow the same sizing and font-weight conventions established in Anvil2 to ensure consistency across experiences.

ai-kit-typography-type-ramp

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-typography-type-ramp?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";

const cell = {
  padding: "12px 16px",
  textAlign: "left" as const,
  verticalAlign: "middle" as const,
};
const headerCell = {
  ...cell,
  fontSize: 12,
  fontWeight: 600,
  textTransform: "uppercase" as const,
  letterSpacing: "0.04em",
};
const rowBorder = { borderBottom: "1px solid #e5e7eb" };

function App() {
  return (
    <table style={{ width: "100%", borderCollapse: "collapse" }}>
      <thead>
        <tr style={rowBorder}>
          <th style={headerCell}>Name</th>
          <th style={headerCell}>Weight</th>
          <th style={headerCell}>Size/Line-height</th>
          <th style={headerCell}>Spacing/Rem</th>
        </tr>
      </thead>
      <tbody>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text variant="headline" el="h3" size="hero" text="Headline/Hero" />
          </td>
          <td style={cell}>bold (700)</td>
          <td style={cell}>32px/40px</td>
          <td style={cell}>-0.24% / -0.0048rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text
              variant="headline"
              el="h3"
              size="major"
              text="Headline/Major"
            />
          </td>
          <td style={cell}>bold (700)</td>
          <td style={cell}>24px/30px</td>
          <td style={cell}>-0.12% / -0.0018rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text
              variant="headline"
              el="h3"
              size="substantial"
              text="Headline/Substantial"
            />
          </td>
          <td style={cell}>bold (700)</td>
          <td style={cell}>20px/25px</td>
          <td style={cell}>-0.05% / -0.0006rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text
              variant="headline"
              el="h3"
              size="regular"
              text="Headline/Regular"
            />
          </td>
          <td style={cell}>bold (700)</td>
          <td style={cell}>16px/20px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text size="featured" inline text="Body/featured" />
          </td>
          <td style={cell}>regular (400)</td>
          <td style={cell}>20px/27px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text
              size="featured"
              inline
              text={<strong>Body/featured/emphasis</strong>}
            />
          </td>
          <td style={cell}>semi bold (600)</td>
          <td style={cell}>20px/27px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text size="regular" inline text="Body/regular" />
          </td>
          <td style={cell}>regular (400)</td>
          <td style={cell}>16px/24px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text
              size="regular"
              inline
              text={<strong>Body/regular/emphasis</strong>}
            />
          </td>
          <td style={cell}>semi bold (600)</td>
          <td style={cell}>16px/24px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text size="fine" inline text="Body/fine" />
          </td>
          <td style={cell}>regular (400)</td>
          <td style={cell}>14px/21px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text
              size="fine"
              inline
              text={<strong>Body/fine/emphasis</strong>}
            />
          </td>
          <td style={cell}>semi bold (600)</td>
          <td style={cell}>14px/21px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text size="fine" inline text="Caption" />
          </td>
          <td style={cell}>regular (400)</td>
          <td style={cell}>12px/18px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text size="fine" inline text={<strong>Caption/emphasis</strong>} />
          </td>
          <td style={cell}>semi bold (600)</td>
          <td style={cell}>12px/18px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
        <tr style={rowBorder}>
          <td style={cell}>
            <Text variant="eyebrow" text="Eyebrow" />
          </td>
          <td style={cell}>bold (700)</td>
          <td style={cell}>10px/15px</td>
          <td style={cell}>0% / 0rem</td>
        </tr>
      </tbody>
    </table>
  );
}

export default App;
```

## Type pairing guidance

Pair each headline level with its matching body size to keep hierarchy consistent across the product: a bigger headline earns a bigger supporting line, a smaller one stays compact.

ai-kit-typography-type-pairing

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-typography-type-pairing?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";

const column = {
  display: "flex" as const,
  flexDirection: "column" as const,
  gap: primitive.size["800"],
};

const stack = {
  display: "flex" as const,
  flexDirection: "column" as const,
  gap: primitive.size["200"],
};

const divider = {
  height: primitive.size["25"],
  backgroundColor: primitive.color.neutral["300"],
  border: "none" as const,
  margin: 0,
};

function App() {
  return (
    <div style={column}>
      <div style={stack}>
        <Text
          variant="headline"
          el="h3"
          size="major"
          text="Heading/body text"
        />
        <Text size="fine" text="Extra-Large 32px → Body Large 18px" />
        <Text
          variant="headline"
          el="h2"
          size="hero"
          text="Section title here"
        />
        <Text
          size="featured"
          text="Supporting body text that explains the section in a sentence or two."
        />
      </div>
      <div style={stack}>
        <Text size="fine" text="Large 24px → Body Base 16px" />
        <Text
          variant="headline"
          el="h3"
          size="major"
          text="Section title here"
        />
        <Text
          size="regular"
          text="Supporting body text that explains the section in a sentence or two."
        />
      </div>
      <hr style={divider} />
      <div style={stack}>
        <Text size="fine" text="Medium 20px → Body Small 14px" />
        <Text
          variant="headline"
          el="h3"
          size="substantial"
          text="Section title here"
        />
        <Text
          size="compact"
          text="Supporting body text that explains the section in a sentence or two."
        />
      </div>
      <div style={stack}>
        <Text size="fine" text="Small 16px → Caption 12px" />
        <Text
          variant="headline"
          el="h4"
          size="regular"
          text="Section title here"
        />
      </div>
    </div>
  );
}

export default App;
```

ai-kit-typography-type-pairing-title-subtitle-body

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-typography-type-pairing-title-subtitle-body?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";
import { primitive } from "@servicetitan/anvil2-ai-kit/tokens";

const column = {
  display: "flex" as const,
  flexDirection: "column" as const,
  gap: primitive.size["800"],
};

const stack = {
  display: "flex" as const,
  flexDirection: "column" as const,
  gap: primitive.size["200"],
};

function App() {
  return (
    <div style={column}>
      <Text
        variant="headline"
        el="h3"
        size="major"
        text="Title/subtitle/body text"
      />
      <div style={stack}>
        <Text size="fine" text="32 / 18 / 14px" />
        <Text
          variant="headline"
          el="h2"
          size="hero"
          text="Section title here"
        />
        <Text
          size="regular"
          text="Supporting body text that explains the section in a sentence or two."
        />
        <Text
          size="compact"
          text="Supporting body text that explains the section in a sentence or two."
        />
      </div>
      <div style={stack}>
        <Text size="fine" text="24 / 16 / 12px" />
        <Text
          variant="headline"
          el="h3"
          size="major"
          text="Section title here"
        />
        <Text
          size="regular"
          text="Supporting body text that explains the section in a sentence or two."
        />
        <Text
          size="fine"
          text="Supporting body text that explains the section in a sentence or two."
        />
      </div>
    </div>
  );
}

export default App;
```

ai-kit-typography-type-pairing-eyebrow-value-caption

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/ai-kit-typography-type-pairing-eyebrow-value-caption?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2-ai-kit";
import { primitive, semantic } from "@servicetitan/anvil2-ai-kit/tokens";

const row = {
  display: "flex" as const,
  flexDirection: "row" as const,
  gap: primitive.size["800"],
  alignItems: "stretch" as const,
};

const column = {
  display: "flex" as const,
  flexDirection: "column" as const,
  gap: primitive.size["800"],
  flex: 1,
  minWidth: 0,
};

const stack = {
  display: "flex" as const,
  flexDirection: "column" as const,
  gap: primitive.size["200"],
};

const recipeLabel = {
  color: semantic.foreground.color.subtle,
};

const divider = {
  width: primitive.size["25"],
  alignSelf: "stretch" as const,
  backgroundColor: primitive.color.neutral["300"],
  flexShrink: 0,
};

function App() {
  return (
    <div style={row}>
      <div style={column}>
        <Text variant="headline" el="h3" size="major" text="Eyebrow/value" />
        <div style={row}>
          <div style={stack}>
            <div style={recipeLabel}>
              <Text size="fine" text="Smaller, denser UI" />
            </div>
            <Text variant="eyebrow" text="Total jobs" />
            <Text variant="headline" el="h3" size="major" text="4,821" />
          </div>
          <div style={stack}>
            <div style={recipeLabel}>
              <Text size="fine" text="Big dashboard numbers" />
            </div>
            <Text variant="eyebrow" text="Total jobs" />
            <Text variant="headline" el="h2" size="hero" text="4,821" />
          </div>
        </div>
      </div>
      <div style={divider} />
      <div style={column}>
        <Text
          variant="headline"
          el="h3"
          size="major"
          text="Eyebrow/value/caption"
        />
        <div style={row}>
          <div style={stack}>
            <div style={recipeLabel}>
              <Text size="fine" text="Smaller, denser UI" />
            </div>
            <Text variant="eyebrow" text="Total jobs" />
            <Text variant="headline" el="h3" size="major" text="4,821" />
            <Text size="fine" text="12% vs last period" />
          </div>
          <div style={stack}>
            <div style={recipeLabel}>
              <Text size="fine" text="Big dashboard numbers" />
            </div>
            <Text variant="eyebrow" text="Total jobs" />
            <Text variant="headline" el="h2" size="hero" text="4,821" />
            <Text size="fine" text="12% vs last period" />
          </div>
        </div>
      </div>
      <div style={divider} />
      <div style={column}>
        <Text variant="headline" el="h3" size="major" text="Empty state" />
        <div style={stack}>
          <Text
            variant="headline"
            el="h4"
            size="regular"
            text="No data available"
          />
          <Text
            size="fine"
            text="Try adjusting your filters or date range to see results"
          />
        </div>
      </div>
    </div>
  );
}

export default App;
```

## Do's and don'ts

ai-kit-typography-do-casing

**Do**
Use clearly differentiated heading sizes to establish a strong visual hierarchy and make content easy to scan.

ai-kit-typography-dont-casing

**Don’t**
Don't use similar font sizes across heading levels. Keep a noticeable size difference so the hierarchy stays clear.

ai-kit-typography-do-explore-new-ideas

**Do**
Use a headline for the title and body text for supporting copy so the hierarchy stays clear.

ai-kit-typography-dont-explore-new-ideas

**Don’t**
Don't set supporting copy in the same headline size as the title. Keep headline and body as separate styles.

### Casing

Use title case for headlines and titles, and sentence case for body copy. Rely on [A2 Typography rules](https://anvil.servicetitan.com/docs/foundations/typography.md) for casing.

### Alignment

Left-align body copy and headlines by default. Center only for short, standalone copy (empty states, single-line confirmations, modal titles). Right-align only for RTL locales or short supporting notes next to a left-aligned label — never a full paragraph. Baseline-align label/value pairs within a row or card.

### Color and contrast

Standard text must meet a 4.5:1 contrast ratio against its background. Large text (18.5px+ bold, or 24px+ regular) must meet 3:1. Check secondary/tertiary grays against both white and dark surfaces before shipping — lighter grays used below 12px are the highest-risk combination.

### Weight matrix

Sofia Pro: Bold (700) only, across all headline sizes (Extra-Large, Large, Medium, Small; page title remains Sofia Bold). Inter: Regular (body copy), Semibold (600) for emphasis and bold body text, Bold (700) for Eyebrow and table headers only. Medium (500) is used only for Button labels.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.