> ## Documentation Index
> Fetch the complete documentation index at: https://content-designer-ux-writing-skill-26.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Templates

> Fillable templates for writing error messages, empty states, and onboarding flows

Use these templates to write consistent, effective UX text for common interface patterns. Each template includes structure, examples, and checklists.

## Available templates

<CardGroup cols={3}>
  <Card title="Error message template" icon="triangle-exclamation" href="#error-message-template">
    Write clear, actionable error messages
  </Card>

  <Card title="Empty state template" icon="inbox" href="#empty-state-template">
    Guide users when content is absent
  </Card>

  <Card title="Onboarding flow template" icon="rocket" href="#onboarding-flow-template">
    Design clear onboarding experiences
  </Card>
</CardGroup>

***

## Error message template

Use this template to write clear, actionable error messages that help users recover.

### Structure

```
[What failed] [Why it might have failed, if known] [What to do next]
```

### Inline error (form validation)

**Format**: Brief, immediate correction guidance

```
[Field requirement or constraint]
```

<Accordion title="Examples">
  * Email must include @
  * Password needs 8+ characters
  * Card number is incomplete
  * Choose a future date
</Accordion>

### Detour error (recoverable problem)

**Format**: Problem + Solution

<CodeGroup>
  ```text Structure theme={null}
  Title: [Action that failed]
  Body: [Brief explanation]. [Recovery instruction].
  Button: [Specific recovery action]
  ```

  ```text Example theme={null}
  Title: Can't save changes
  Body: Check your internet connection and try again.
  Button: Retry
  ```
</CodeGroup>

### Blocking error (system issue)

**Format**: Clear explanation + Timeline + Reassurance

<CodeGroup>
  ```text Structure theme={null}
  Title: [What's unavailable]
  Body: [Why it's unavailable]. [When it will be available]. [Reassurance about user data].
  Button: [Status check or alternative action]
  ```

  ```text Example theme={null}
  Title: Service temporarily unavailable
  Body: We're updating our systems and will be back in about 15 minutes. Your data is safe.
  Button: Check status
  ```
</CodeGroup>

### Error message checklist

Before finalizing an error message, verify:

* **Avoids blame** — No "invalid," "illegal," "wrong," "error"
* **Empathetic tone** — Acknowledge user frustration
* **Specific problem** — Not generic "something went wrong"
* **Clear recovery** — Tell user exactly what to do
* **Front-loaded** — Most important info first
* **Active voice** — "We couldn't save" not "changes could not be saved"
* **Human language** — Not system codes or technical jargon

### Voice variations by context

<AccordionGroup>
  <Accordion title="High-stakes error (payment, security, data loss)">
    **Tone**: Serious, clear, reassuring

    ```
    We couldn't process your payment. Your card wasn't charged. Check your card details and try again.
    ```
  </Accordion>

  <Accordion title="Low-stakes error (optional feature, nice-to-have)">
    **Tone**: Light, helpful, not dramatic

    ```
    Couldn't load preview. Refresh to try again.
    ```
  </Accordion>

  <Accordion title="First-time user error">
    **Tone**: Educational, patient

    ```
    Profile photo must be under 5MB. Try a smaller file or compress your image.
    ```
  </Accordion>
</AccordionGroup>

### Common mistakes

<CardGroup cols={2}>
  <Card title="Don't">
    * "An error occurred"
    * "Invalid email address"
    * "ERR\_CONNECTION\_TIMEOUT"
    * "Upload failed"
    * "Your request could not be processed"
  </Card>

  <Card title="Do">
    * "We couldn't save your changes"
    * "Email must include @"
    * "Connection timed out. Check your internet and try again."
    * "Upload failed. Check your file size and try again."
    * "We couldn't process your request"
  </Card>
</CardGroup>

### Quick fill template

Use this for rapid error message drafting:

<Steps>
  <Step title="Identify what failed">
    What action or operation didn't work?
  </Step>

  <Step title="Determine why (if known)">
    What likely caused the failure?
  </Step>

  <Step title="Specify what user should do">
    What specific action will help them recover?
  </Step>

  <Step title="Write the draft">
    \[What failed]. \[Why, if known]. \[Next action].
  </Step>
</Steps>

**Example:**

* What failed: Couldn't send invite
* Why: Email bounced
* What to do: Check spelling
* **Draft**: "Couldn't send invite. Check the email address and try again."

***

## Empty state template

Use this template to guide users when content is absent and help them take action to populate the space.

### Structure

```
[Title explaining the empty state] [Brief explanation or encouragement] [Clear call to action]
```

### First-use empty state

**Purpose**: Guide new users to populate content\
**Tone**: Inviting, encouraging, clear on benefit

<CodeGroup>
  ```text Structure theme={null}
  Title: [What's empty]
  Body: [Brief benefit of adding content]
  Button: [Specific action to populate]
  ```

  ```text Example theme={null}
  Title: No projects yet
  Body: Create your first project to start organizing work.
  Button: Create project
  ```
</CodeGroup>

### User-cleared empty state

**Purpose**: Confirm completion, positive reinforcement\
**Tone**: Positive, celebratory (appropriately)

<CodeGroup>
  ```text Structure theme={null}
  Title: [Positive completion statement]
  Body: [Optional: What happens next or when new content appears]
  ```

  ```text Example theme={null}
  Title: You're all caught up
  Body: New tasks will appear here when they're assigned to you.
  ```
</CodeGroup>

### Error/no results empty state

**Purpose**: Suggest alternatives when search/filter returns nothing\
**Tone**: Helpful, solution-focused

<CodeGroup>
  ```text Structure theme={null}
  Title: [What wasn't found]
  Body: [Suggestion to modify or alternative action]
  Button: [Alternative action]
  ```

  ```text Example theme={null}
  Title: No results for "vintage cameras"
  Body: Try different keywords or browse all items.
  Button: Browse all items
  ```
</CodeGroup>

### Empty state checklist

Before finalizing an empty state, verify:

* **Clear context** — User knows what's empty and why
* **Actionable** — Provides specific next step
* **Appropriate tone** — Matches emotional context
* **Value-focused** — Shows benefit of taking action
* **Concise** — Brief enough to scan quickly
* **Avoids negativity** — No "nothing here" or "you have no..."

### Content patterns by type

<Tabs>
  <Tab title="First-use">
    **Pattern**: "No \[content] yet. \[Benefit statement]. \[Action]"

    **Examples:**

    * "No contacts yet. Import contacts to start messaging. **Import contacts**"
    * "No favorites saved. Save items to find them quickly later. **Browse items**"
    * "No team members yet. Invite people to collaborate on projects. **Invite team**"
  </Tab>

  <Tab title="User-cleared">
    **Pattern**: "All \[done/complete/caught up]. \[Optional: when more appears]"

    **Examples:**

    * "All tasks complete. New tasks appear when teammates assign them to you."
    * "Inbox zero! You've read all your messages."
    * "You're all set. Check back tomorrow for new recommendations."
  </Tab>

  <Tab title="No results">
    **Pattern**: "No \[content] match \[criteria]. \[Suggestion]. \[Alternative]"

    **Examples:**

    * "No files match your search. Try different keywords or **view all files**."
    * "No events this month. **See upcoming events** or **create an event**."
    * "No team members match these filters. **Clear filters** to see all members."
  </Tab>

  <Tab title="Permission required">
    **Pattern**: "\[Content] isn't available. \[Why]. \[How to get access]"

    **Examples:**

    * "Reports aren't available yet. Upgrade to Premium to access detailed analytics. **View plans**"
    * "This folder is private. Ask the owner to share it with you."
    * "Calendar events are hidden. Enable calendar sync in **settings** to see events."
  </Tab>
</Tabs>

### Voice variations

<AccordionGroup>
  <Accordion title="Professional/B2B product">
    ```
    Title: No documents uploaded
    Body: Upload files to share with your team.
    Button: Upload document
    ```
  </Accordion>

  <Accordion title="Consumer/friendly product">
    ```
    Title: Nothing here yet!
    Body: Start adding favorites to build your collection.
    Button: Find favorites
    ```
  </Accordion>

  <Accordion title="Serious/high-stakes product">
    ```
    Title: No alerts
    Body: Your systems are running normally.
    ```
  </Accordion>
</AccordionGroup>

### Common mistakes

<CardGroup cols={2}>
  <Card title="Don't">
    * "You have no contacts"
    * "Empty"
    * Three different buttons competing
    * Long paragraph explaining the feature
    * "No records found in database"
  </Card>

  <Card title="Do">
    * "No contacts yet"
    * "No contacts yet. Import to get started."
    * One clear next action
    * One sentence benefit, clear button
    * "No projects found"
  </Card>
</CardGroup>

***

## Onboarding flow template

Use this template to design clear, encouraging onboarding experiences that help users succeed quickly.

### Onboarding principles

<CardGroup cols={2}>
  <Card title="Show value early" icon="bolt">
    Help users succeed in their first session
  </Card>

  <Card title="Progressive disclosure" icon="layer-group">
    Don't overwhelm with all features at once
  </Card>

  <Card title="Optional whenever possible" icon="forward">
    Let users skip and explore
  </Card>

  <Card title="Celebrate small wins" icon="trophy">
    Acknowledge each completed step
  </Card>

  <Card title="Be concise" icon="compress">
    Users want to start using the product, not read about it
  </Card>
</CardGroup>

### Core flow structure

<Steps>
  <Step title="Welcome">
    Orient user and set expectations
  </Step>

  <Step title="Setup">
    Collect essential information only
  </Step>

  <Step title="First success">
    Guide user to their first win
  </Step>

  <Step title="Next steps">
    Suggest logical next actions
  </Step>
</Steps>

Each step should answer:

* **Where am I?** (Progress indicator)
* **What do I do here?** (Clear instruction)
* **Why does this matter?** (Benefit to user)
* **Can I skip this?** (Exit option)

### Welcome screen template

**Purpose**: Orient user and set expectations

<CodeGroup>
  ```text Structure theme={null}
  Headline: [Welcome + value proposition]
  Body: [2-3 benefits, bulleted]
  Primary CTA: [Get started action]
  Secondary CTA: [Sign in, if applicable]
  ```

  ```text Example theme={null}
  Headline: Welcome to TaskFlow
  Body:
  • Organize projects with your team
  • Track progress in real time
  • Never miss a deadline

  Primary CTA: Create account
  Secondary CTA: Sign in
  ```
</CodeGroup>

### Account setup template

**Purpose**: Collect essential information only

<CodeGroup>
  ```text Structure theme={null}
  Title: [Action-oriented title]
  Body: [Why this information is needed]
  Fields: [Minimum required fields]
  Primary CTA: [Continue/Next action]
  Secondary CTA: [Skip, if truly optional]
  ```

  ```text Example theme={null}
  Title: Tell us about yourself
  Body: We'll personalize your experience.

  Fields:
  - Name
  - Email
  - Password

  Primary CTA: Continue
  Secondary CTA: I'll do this later
  ```
</CodeGroup>

**Best practices:**

* Only ask for what you absolutely need now
* Explain why each field is required
* Use smart defaults when possible
* Allow skipping optional steps

### Feature introduction template

**Purpose**: Teach one feature at a time through action

<CodeGroup>
  ```text Structure theme={null}
  Title: [Feature name + benefit]
  Body: [Brief explanation, 1-2 sentences]
  Visual: [Screenshot or illustration]
  Primary CTA: [Action to try the feature]
  Secondary CTA: Skip / Next
  Progress: [X of Y steps]
  ```

  ```text Example theme={null}
  Title: Create your first project
  Body: Projects help you organize related tasks and collaborate with your team.

  [Visual: Screenshot of project view]

  Primary CTA: Create project
  Secondary CTA: Skip for now
  Progress: Step 2 of 4
  ```
</CodeGroup>

**Best practices:**

* Show, don't tell (use visuals)
* Let users try immediately
* Keep explanations under 20 words
* Always allow skipping

### Success/completion template

**Purpose**: Celebrate user's first win, encourage next action

<CodeGroup>
  ```text Structure theme={null}
  Title: [Celebratory statement]
  Body: [What they accomplished + what's possible next]
  Primary CTA: [Next natural action]
  Secondary CTA: [Alternative or exit to product]
  ```

  ```text Example theme={null}
  Title: You're all set!
  Body: You created your first project. Ready to invite your team?

  Primary CTA: Invite team members
  Secondary CTA: Explore on my own
  ```
</CodeGroup>

**Best practices:**

* Use exclamation points sparingly (once per flow max)
* Make the celebration feel earned
* Suggest logical next step
* Provide exit to main product

### Onboarding step checklist

For each step in your onboarding flow, verify:

* **Single focus** — One action or concept per step
* **Clear value** — User knows why this matters
* **Actionable** — User knows exactly what to do
* **Skipable** — Optional steps can be skipped
* **Progress visible** — User knows how many steps remain
* **Concise** — Body text under 30 words
* **Appropriate tone** — Encouraging without being patronizing

### Content patterns by step type

<Tabs>
  <Tab title="Welcome/Introduction">
    **Pattern**: "Welcome to \[Product]. \[Do X to achieve Y]."

    **Examples:**

    * "Welcome to Notion. Create beautiful docs, wikis, and projects."
    * "Welcome to Figma. Design, prototype, and collaborate in real time."
  </Tab>

  <Tab title="Permission request">
    **Pattern**: "Enable \[permission] to \[specific benefit]"

    **Examples:**

    * "Enable notifications to stay updated on team activity"
    * "Allow camera access to scan documents instantly"
  </Tab>

  <Tab title="Feature tutorial">
    **Pattern**: "\[Action]. \[Brief benefit]."

    **Examples:**

    * "Add your first task. Stay organized and never miss a deadline."
    * "Create a workspace. Collaborate with your team in one place."
  </Tab>

  <Tab title="Completion">
    **Pattern**: "\[Celebration]! \[What's now possible]. \[Optional: Next step]"

    **Examples:**

    * "You're ready to go! Start creating, or invite teammates to collaborate."
    * "Setup complete! Your workspace is ready for your team."
  </Tab>
</Tabs>

### Tone variations

<AccordionGroup>
  <Accordion title="Professional/B2B">
    ```
    Title: Set up your workspace
    Body: Add team members and create your first project.
    CTA: Continue setup
    ```
  </Accordion>

  <Accordion title="Consumer/casual">
    ```
    Title: Let's get you started!
    Body: This will only take a minute.
    CTA: Let's go
    ```
  </Accordion>

  <Accordion title="Technical/developer">
    ```
    Title: Configure your environment
    Body: Connect your repository to start deploying.
    CTA: Connect repo
    ```
  </Accordion>
</AccordionGroup>

### Multi-screen flow example

<Accordion title="View complete 4-screen flow">
  **Screen 1: Welcome**

  ```
  Welcome to WriteRight

  Write better, faster with AI-powered editing.

  • Fix grammar instantly
  • Improve clarity and tone
  • Write with confidence

  [Get started]
  ```

  **Screen 2: Setup**

  ```
  What brings you to WriteRight? (2 of 4)

  Select all that apply:
  □ Business writing
  □ Creative writing
  □ Student papers
  □ Personal projects

  [Continue] [Skip]
  ```

  **Screen 3: First action**

  ```
  Try it out (3 of 4)

  Paste any text below and watch WriteRight improve it.

  [Text input box]

  [Analyze my writing] [Skip]
  ```

  **Screen 4: Success**

  ```
  Nice work!

  You improved your first piece of writing. Ready to write your next masterpiece?

  [Start writing] [See tips]
  ```
</Accordion>

### Common mistakes

<CardGroup cols={2}>
  <Card title="Don't">
    * Too many steps (10+ screens)
    * Feature dump ("Here are 47 things!")
    * No skip option
    * Passive voice ("Your account has been created")
    * Corporate speak ("Facilitate enhanced productivity")
  </Card>

  <Card title="Do">
    * Focused flow (3-5 steps to first value)
    * Progressive disclosure (one key feature at a time)
    * Respect choice (skip available)
    * Active voice ("You created your account!")
    * Plain language ("Get more done")
  </Card>
</CardGroup>

### Testing your onboarding

Questions to answer:

<AccordionGroup>
  <Accordion title="Can users complete onboarding in under 2 minutes?">
    Time your onboarding flow from start to finish. If it takes longer than 2 minutes, consider removing steps or making more optional.
  </Accordion>

  <Accordion title="Do users achieve something meaningful in their first session?">
    Users should complete at least one core action (create project, send message, upload file) before onboarding ends.
  </Accordion>

  <Accordion title="Can users skip optional steps without confusion?">
    Test that skip buttons work and users aren't penalized for skipping.
  </Accordion>

  <Accordion title="Is the tone encouraging without being condescending?">
    Read your copy out loud. Does it sound patronizing or genuinely helpful?
  </Accordion>

  <Accordion title="Does each screen have a single, clear purpose?">
    Each screen should teach one concept or collect one piece of information.
  </Accordion>
</AccordionGroup>