> ## 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.

# Language and Inclusivity

> Clear, inclusive, and user-friendly language helps all users navigate with ease and confidence.

Writing should be simple, direct, and consistent, avoiding jargon and unnecessary complexity. Inclusive language ensures that everyone feels represented and respected, while accessibility considerations make content usable for a diverse audience.

## Language for Best Practices

### Clarity and Simplicity

**Use Plain Language**: Write copy that’s easy to understand on the first read. Avoid complex words and jargon, and focus on simple, everyday language.

**Be Concise**: Keep sentences short and to the point. Ensure each word adds value and there is no unnecessary padding.

#### How to Use

languageandinclusivity-simple-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-simple-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Update your profile.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-simple-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-simple-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Proceed with the process to modify your profile settings.</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

### Use Familiar Terms

**Avoid technical jargon**: Use familiar, everyday terms that resonate with the average user. If a term is necessary, provide simple explanations.

**Consistent terminology**: Stick to consistent terminology across all in-app elements to avoid confusion. Use the same words to describe the same features or actions throughout the app.

#### How to Use

languageandinclusivity-terms-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-terms-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Log in to access your dashboard.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-terms-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-terms-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Authenticate yourself to gain access to your control center.</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

### Positive and Reassuring Tone

**Reinforce confidence**: Use a positive, friendly tone to make users feel in control. Avoid using language that makes them feel uncertain or stressed about the actions they’re taking.

#### How to Use

languageandinclusivity-tone-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-tone-do?file=src/App.tsx)

```tsx lines theme={null}
import { Alert, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="4">
      <Alert
        title="You’ve successfully saved your settings."
        status="success"
        onClose={console.log}
      >
        Please continue to the next section.
      </Alert>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-tone-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-tone-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Alert, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="4">
      <Alert
        title="Settings saved. We hope it worked."
        status="success"
        onClose={console.log}
      />
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Use generic error messages that don’t help the user understand or resolve the issue.

## Inclusivity Best Practices

### Gender-neutral Language

**Avoid gendered pronouns**: Use gender-neutral pronouns like “they” instead of “he” or “she.” This ensures inclusivity and respects the diversity of your users.

**Neutral job titles and descriptions**: Use terms that don’t imply gender. For instance, use "salesperson" instead of "salesman."

#### How to Use

languageandinclusivity-neutral-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-neutral-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Enter your first and last name.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-neutral-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-neutral-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>First name (John), Last name (Smith).</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

Use vague terms like "Click Here" that don’t provide context.

### Accessibility Considerations

**Keep Copy Simple**: Ensure your copy is easy to understand by users with varying cognitive abilities or language proficiency. Use simple sentence structures and avoid long paragraphs.

**Ensure Readability**: Use familiar vocabulary and straightforward instructions. Write at an appropriate reading level, avoiding overly academic or complex phrases.

#### How to Use

languageandinclusivity-accessibility-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-accessibility-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex, Link } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex justifyContent="space-around">
      <Text>
        You can find help <Link>here.</Link>
      </Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-accessibility-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-accessibility-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex, Link } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex justifyContent="space-around">
      <Text>
        Assistance can be located via <Link>this portal</Link>.
      </Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

### Avoid Stereotypes and Bias

**Respect all genders, ages, and abilities**: Be mindful not to include language that reinforces stereotypes about gender, age, race, or abilities.

**Avoid assumptive language**: Refrain from assuming a user’s background, preferences, or level of experience.

### Inclusive Pronouns and Phrasing

**Use "They"**: When referring to a hypothetical user or person, always use "they" as a singular, gender-neutral pronoun. This ensures that you are addressing all genders inclusively.

**Use Inclusive Phrases**: Replace words and phrases that could exclude certain groups with more inclusive alternatives.

#### How to Use

languageandinclusivity-pronouns-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-pronouns-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Each person is responsible for their own tasks.</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-pronouns-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-pronouns-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Each man is responsible for his own tasks.</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

## Disability Language

* In general, refer to the person first and the disability second—*People with disabilities* or *Customers who are deaf or hard-of-hearing*
* Emphasize accessibility over disability—Use *Accessible restroom*, not *Disabled restroom*
* Avoid euphemisms like *physically challenged*, *handi-capable*,or *special needs*

For more, see the [NCDJ Disability Language Style Guide](https://ncdj.org/style-guide/), [APA Style Guidelines on Disability](https://apastyle.apa.org/style-grammar-guidelines/bias-free-language/disability), and the [National Association for the Deaf FAQ](https://www.nad.org/resources/american-sign-language/community-and-culture-frequently-asked-questions/).

#### How to Use

languageandinclusivity-disability-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-disability-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>People with disabilities</Text>
      <Text>People without disabilities</Text>
      <Text>Customers who are deaf or hard-of-hearing</Text>
      <Text>People with limited vision</Text>
      <Text>Person who is blind</Text>
      <Text>Accessibility parking</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-disability-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-disability-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Handicapped people or The disabled</Text>
      <Text>Normal people, Regular people, or Able-bodied people</Text>
      <Text>Hearing impaired customers or Deaf customers</Text>
      <Text>The visually impaired</Text>
      <Text>Blind person or The blind</Text>
      <Text>Handicapped parking</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

## Colors and Screen Navigation

#### How to Use

When possible, avoid overly specific screen location instructions, which can be confusing for those with directional impairment.

languageandinclusivity-color-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-color-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Selected options are highlighted</Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-color-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-color-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>Selected options are highlighted in blue</Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**

#### How to Use

When possible, avoid overly specific screen location instructions, which can be confusing for those with directional impairment.

languageandinclusivity-screen-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-screen-do?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>
        At the bottom of the screen, click <b>Save</b>.
      </Text>
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

languageandinclusivity-screen-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/languageandinclusivity-screen-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text>
        In the bottom right corner of the screen, click <b>Save</b>.
      </Text>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **Don't**


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