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

# Look & Feel

> It's important to visualize your data consistently to create clear and effective charts. This guide provides the main rules to help you design consistent, accessible, and legible data stories.

## A Quick Guide

| Palette Type                                   | Use When                                                                                                                                                                                                                | Best for Chart Types                                                                                    |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| Monochrome <Badge color="blue">default</Badge> | <ul><li>Visualizing data with a natural order or progression</li><li>Showing increasing or decreasing values (e.g. volume, intensity, time)</li></ul>                                                                   | <ul><li>Bar charts</li><li>Grouped bar charts</li><li>Stacked bar charts</li><li>Donut charts</li></ul> |
| Pattern                                        | <ul><li>Used as the second visual variable in charts with four variables and under.</li></ul>                                                                                                                           | <ul><li>Bar charts</li><li>Grouped bar charts</li><li>Stacked bar charts</li><li>Donut charts</li></ul> |
| Categorical Palette                            | <ul><li>Displaying 5+ distinct values</li></ul>                                                                                                                                                                         | <ul><li>Data visualizations with over 5+ variables</li></ul>                                            |
| Semantic (Status)                              | <ul><li>Showing deviation from a central point (e.g. baseline, average, or target)</li><li>Semantic colors showing positive, negative, and neutral</li><li>Emphasizing both direction and magnitude of change</li></ul> | <ul><li>Bar charts</li></ul>                                                                            |

## Color Palette

Utilize this monochrome palette in this specific order for charts with 4
variables or less.

<Frame caption="Data Visualization Color Palette, Light & Dark mode">
  <img src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/data-viz-color-palette.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=986d914bb0279ebfdfdd405329bfff9d" alt="default, dark, pattern, and outline for the blue palette" width="1300" height="1428" data-path="images/docs/web/data-visualization/introduction/data-viz-color-palette.png" />
</Frame>

## Variable Ordering

<table>
  <tr>
    <td className="pr-2"><strong>1 Variable</strong></td>
    <td className="pr-2"><strong>2 Variables</strong></td>
    <td className="pr-2"><strong>3 Variables</strong></td>
    <td className="pr-2"><strong>4 Variables</strong></td>
    <td className="pr-2"><strong>5+ Variables</strong></td>
  </tr>

  <tr>
    <td className="pr-2">If your chart has <strong>one</strong> variable, start with the default hue in the palette.</td>
    <td className="pr-2">If your chart has <strong>two</strong> variables, use the default and dark blue.</td>
    <td className="pr-2">If your chart has <strong>three</strong> variables, add the diagonal pattern.</td>
    <td className="pr-2">If your chart has <strong>four</strong> variables, add the lightest blue with a stroke.</td>
    <td className="pr-2">For <strong>five +</strong> variables, see our extended color palette.</td>
  </tr>

  <tr>
    <td className="pr-2">
      <img src="https://mintcdn.com/servicetitan/xuNyaefLU8rAWiT_/images/docs/web/data-visualization/introduction/1-variable-light.png?fit=max&auto=format&n=xuNyaefLU8rAWiT_&q=85&s=3578af7a0c5765cf0700ec92344a2f93" alt="1 variable, blue palette" className="block dark:hidden" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/1-variable-light.png" />

      <img src="https://mintcdn.com/servicetitan/xuNyaefLU8rAWiT_/images/docs/web/data-visualization/introduction/1-variable-dark.png?fit=max&auto=format&n=xuNyaefLU8rAWiT_&q=85&s=7387e2c1ccc1a8b000a63c4511bd6d57" alt="1 variable, blue palette" className="hidden dark:block" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/1-variable-dark.png" />
    </td>

    <td className="pr-2">
      <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/2-variables-light.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=ced539ea631eceba3e085dbb8c45b97e" alt="2 variables, blue palette" className="block dark:hidden" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/2-variables-light.png" />

      <img src="https://mintcdn.com/servicetitan/xuNyaefLU8rAWiT_/images/docs/web/data-visualization/introduction/2-variables-dark.png?fit=max&auto=format&n=xuNyaefLU8rAWiT_&q=85&s=525cc152456a82ed49afa0fe1a23dbe7" alt="2 variables, blue palette" className="hidden dark:block" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/2-variables-dark.png" />
    </td>

    <td className="pr-2">
      <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/3-variables-light.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=ac35215bbd10537983f95ca463ad9f6b" alt="3 variables, blue palette" className="block dark:hidden" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/3-variables-light.png" />

      <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/3-variables-dark.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=3b378b5527d6757dbb1ef8be9757645b" alt="3 variables, blue palette" className="hidden dark:block" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/3-variables-dark.png" />
    </td>

    <td className="pr-2">
      <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/4-variables-light.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=cce2951a318a67402a1c28539a3490ff" alt="4 variables, blue palette" className="block dark:hidden" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/4-variables-light.png" />

      <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/4-variables-dark.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=b9e32042421df83127e59deb46d071ee" alt="4 variables, blue palette" className="hidden dark:block" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/4-variables-dark.png" />
    </td>

    <td className="pr-2">
      <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/5-plus-variables-light.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=1a0916fe81302e500dc4d7b9c7859eeb" alt="5 plus variables, categorical palette" className="block dark:hidden" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/5-plus-variables-light.png" />

      <img src="https://mintcdn.com/servicetitan/CeN0_C35yWeoo5-G/images/docs/web/data-visualization/introduction/5-plus-variables-dark.png?fit=max&auto=format&n=CeN0_C35yWeoo5-G&q=85&s=00636365fae484bf924c01ca3fbc74b3" alt="5 plus variables, categorical palette" className="hidden dark:block" width="404" height="166" data-path="images/docs/web/data-visualization/introduction/5-plus-variables-dark.png" />
    </td>
  </tr>
</table>

<Columns cols={3} className="mb-4">
  <div className="flex flex-col items-center gap-2">
    <Badge color="green">One Variable</Badge>

    <img src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-1.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=a58f60c75b1c85e03e3b59b825eb9be8" alt="variable ordering, 1 variable" width="728" height="826" data-path="images/docs/web/data-visualization/introduction/variable-ordering-1.png" />
  </div>

  <div className="flex flex-col items-center gap-2">
    <Badge color="green">Two Variables</Badge>

    <img src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-2.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=0227e7c61b18dfc053e724b468bc2eaf" alt="variable ordering, 2 variables" width="728" height="826" data-path="images/docs/web/data-visualization/introduction/variable-ordering-2.png" />
  </div>

  <div className="flex flex-col items-center gap-2 justify-center text-sm">
    <Note>When adding a 4th variable to a stacked bar chart, place it at the bottom to support visual accessibility and maintain consistency.</Note>
  </div>
</Columns>

<Columns cols={3}>
  <div className="flex flex-col items-center gap-2">
    <Badge color="green">Three Variables</Badge>

    <img src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-3.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=d7799b3fba36963644c2bc771ccd2d1a" alt="variable ordering, 3 variables" width="728" height="826" data-path="images/docs/web/data-visualization/introduction/variable-ordering-3.png" />
  </div>

  <div className="flex flex-col items-center gap-2">
    <Badge color="green">Four Variables</Badge>

    <img src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/variable-ordering-4.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=7483ec5e349d9a7b1b2e3e83216b839a" alt="variable ordering, 4 variables" width="728" height="826" data-path="images/docs/web/data-visualization/introduction/variable-ordering-4.png" />
  </div>
</Columns>

### General Design Guidelines

### Bar charts

<Columns cols={2}>
  <div>
    <img
      src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-bar.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=5abe77c7627f0a6bf1463a8851a8561d"
      alt="bar chart with three
variables"
      width="512"
      height="550"
      data-path="images/docs/web/data-visualization/introduction/charts-bar.png"
    />
  </div>

  <div>
    <ol>
      <li>
        <strong>Top left and right corner</strong>: Border radius is 4px
      </li>

      <li>
        <strong>Space between bars</strong>: Space between bars should abide by
        Anvil spacing rules and be appropriate for the width of the total graph
      </li>

      <li>
        <strong>Stroke and pattern</strong>: The lightest color and pattern
        requires a 1px stroke for accessibility
      </li>
    </ol>
  </div>
</Columns>

### Grouped bar charts

<Columns cols={2}>
  <div>
    <img
      src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-group-bar.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=d57947e57ca008a4d008cfc048843846"
      alt="grouped bar charts, each with three
variables"
      width="758"
      height="550"
      data-path="images/docs/web/data-visualization/introduction/charts-group-bar.png"
    />
  </div>

  <div>
    <ol>
      <li>
        <strong>General guidance from Bar Charts apply</strong>: See guidance
        above
      </li>

      <li>
        <strong>Space between bars</strong>: Space between bars should abide by
        Anvil spacing rules and be appropriate for the width of the total graph
      </li>

      <li>
        <strong>Space between sections</strong>: Space between bars should abide
        by Anvil spacing rules, should be larger than the space between bars,
        and be appropriate for the width of the total graph
      </li>
    </ol>
  </div>
</Columns>

### Stacked bar charts

<Columns cols={2}>
  <div>
    <img
      src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-stack-bar.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=06861501fb588734896f17fba23e9acc"
      alt="three stacked bar charts, each with three
variables"
      width="728"
      height="778"
      data-path="images/docs/web/data-visualization/introduction/charts-stack-bar.png"
    />
  </div>

  <div>
    <ol>
      <li>
        <strong>General guidance from Bar Charts apply</strong>: See guidance
        above
      </li>

      <li>
        <strong>Space between sections</strong>: 4px spacing is recommended
      </li>
    </ol>
  </div>
</Columns>

### Donut charts

<Columns cols={2}>
  <div>
    <img
      src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/charts-donut.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=b510d7a8467fc469a58b8c88b21f22f9"
      alt="donut bar chart with four
variables"
      width="937"
      height="773"
      data-path="images/docs/web/data-visualization/introduction/charts-donut.png"
    />
  </div>

  <div>
    <ol>
      <li>
        <strong>Space between pie sections</strong>: 4px spacing is recommended
      </li>

      <li>
        <strong>Direct labeling</strong>: It’s best practice to have the value
        directly on the corresponding donut slice. If this is not possible, a
        hover state is required. More info on direct labeling here.
      </li>
    </ol>
  </div>
</Columns>

## Real Example

The following is a possible real-world example. This example displays multiple
datasets on a single page, including a donut chart, a single stacked bar chart,
a horizontal bar graph, and a larger bar graph all utilizing our monochrome
palette.

<img src="https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/introduction/real-example-1.png?fit=max&auto=format&n=mzb8vUC8QRJt2y_W&q=85&s=d27965fa26198a8b80d7f70c94c6335f" alt="page with several donut charts and a stacked bar chart" width="1380" height="1366" data-path="images/docs/web/data-visualization/introduction/real-example-1.png" />

<Card title="Questions? Challenges?" icon="link" href="https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR" arrow="true" cta="Click here">
  Contact the Visual Design team on the #ask-vizd channel
</Card>