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

# Branding

> Use the full Atlas logo for a brand moment. Use the sparkle, the subtle form of Atlas, for a utility moment.

## When to use each mark

**Atlas**. A brand moment. The user is choosing to engage
with Atlas, such as the nav entry point, opening the window, or a button
like "Ask Atlas." Use the full Atlas logo. That logo is the primary or
monochrome mark.

**AI Mark (Sparkle)**. A utility moment. AI helps inside a
task the user is already doing, such as a table summary, a sorted list,
or an AI-filled field. Use the sparkle, even when Atlas powers it. In
smaller or inline places, the sparkle stands in for Atlas. Users do not
need to know which system is behind the feature.

## Atlas mark

The Atlas mark is the full logo for a brand moment, when the user chooses to engage with Atlas.

### Styles

The Atlas mark has two styles with specific rules for when to use them.

| Style | When to use |
| - | - |
| **Primary** | Active state in the global navigation, secondary buttons, and the Atlas chat window and avatar. |
| **Monochrome** | Inactive state in the global navigation, and every button variant other than secondary. |

Primary

Monochrome

### Sizes

The Atlas mark has two sizes.

| Size | Usage |
| - | - |
| **24×24** | Atlas avatar and notification header. |
| **16×16** | Buttons. Matches Anvil icon sizing. |

24×24

16×16

### Placement

Only actions like buttons receive the mark on the left.

Buttons inside a summary card do not carry a mark. The card already shows the Atlas mark or the AI Mark, and the button relies on that indicator. See [Atlas Entry Points](https://anvil.servicetitan.com/docs/patterns/atlas-entry-points/web.md#button-copy--icon-rules).

### Global navigation states

* **Inactive:** Use the monochrome mark so the icon matches the other navigation icons.
* **Active:** Use the primary mark.

![Global navigation Atlas launcher, neutral when closed and blue when the Atlas window is open](https://mintcdn.com/servicetitan/VMJg1Vc2vX4BMjqK/images/docs/web/patterns/atlas-entry-points/global-nav-entry.png?fit=max\&auto=format\&n=VMJg1Vc2vX4BMjqK\&q=85\&s=56a2aceca249c1a758a348ceae6d7059)

### Key locations

* **Global navigation.** The persistent launcher icon in the top nav. See [Atlas Entry Points](https://anvil.servicetitan.com/docs/patterns/atlas-entry-points/web.md) for details.
* **Atlas in conversations.** When Atlas the entity converses with the user, the mark is always used as its avatar.
* **Buttons that open Atlas.** A secondary button uses the primary mark. Every other button variant uses the monochrome mark. For button copy and icon rules, see [Atlas Entry Points](https://anvil.servicetitan.com/docs/patterns/atlas-entry-points/web.md#button-copy--icon-rules).

**Do**
Use the primary Atlas mark on a secondary button. Use the monochrome mark on every other button variant.

**Don’t**
Use the full Atlas logo for a utility moment, such as a table summary, a sorted list, or an AI-filled field. Use the sparkle instead.

## AI Mark (Sparkle)

The AI Mark, a double-star shape represented as a sparkle, is the subtle form of Atlas. Use it for a utility moment, including smaller or inline places. It replaces the single sparkle, the TI logo, and sparkle emoji.

For implementation details, see [AI Mark component](https://anvil.servicetitan.com/docs/components/ai-mark/web.md).

### Styles

The AI Mark has two styles.

| Style | When to use |
| - | - |
| **Primary (gradient)** | Default for most situations. Unless otherwise stated, use the primary mark. |
| **Monochrome** | Only when a color contrast problem arises (for example, inside a primary Button). |

Primary (gradient)

Monochrome

### Sizes

The AI Mark has three sizes, matching the [AI Mark component](https://anvil.servicetitan.com/docs/components/ai-mark/web.md). The component the mark appears in usually determines the size.

| Size | Dimensions |
| - | - |
| `medium` | 16×16 |
| `large` | 24×24 |
| `xlarge` | 32×32 |

16×16

24×24

32×32

### Placement

Only actions like buttons receive the mark on the left. Otherwise, place the mark to the right.

### Key locations

* **AI-assisted fields and labels.** Use the AI Mark to denote that data was AI-provided. See [Embedded AI](https://anvil.servicetitan.com/docs/patterns/embedded-ai/web.md) for placement guidance.
* **Summary cards.** AI-generated summary cards display the AI Mark. See [Atlas Entry Points](https://anvil.servicetitan.com/docs/patterns/atlas-entry-points/web.md) for how the AI Mark and Atlas mark interact on summary cards.
* **Headers and drawers.** The AI Mark can appear in headers and drawers when appropriate.

**Do**
Use the AI Mark (double star) as the standard AI labeling indicator, replacing any single sparkle, TI logo, or sparkle emoji.

**Don’t**
Use outdated marks such as single sparkles, TI logos, or sparkle emojis. Use the AI Mark component instead.

## Coexistence of marks

A utility moment and a brand moment can sit in the same area. An AI-generated summary card can show the sparkle on the card and the full Atlas logo on a button that leads to Atlas.

For detailed rules on how marks interact in summary cards and entry points, see [Atlas Entry Points](https://anvil.servicetitan.com/docs/patterns/atlas-entry-points/web.md#button-copy--icon-rules).

## Related

> [card] [AI Mark component](https://anvil.servicetitan.com/docs/components/ai-mark/web.md)
>
> Implementation details for the AI Mark component.

> [card] [Embedded AI](https://anvil.servicetitan.com/docs/patterns/embedded-ai/web.md)
>
> How to use the AI Mark within larger workflows in the product.

> [card] [Atlas Entry Points](https://anvil.servicetitan.com/docs/patterns/atlas-entry-points/web.md)
>
> How users get to the Atlas conversation experience.

> [card] [Atlas Logo (React Native)](https://anvil.servicetitan.com/docs/components/atlas-logo/react-native.md)
>
> The Atlas logo component for React Native apps.


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