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

# Branding

> Name, icon, and the mark on every card — make your integration feel official.

An integration's identity lives in the manifest and one image file. VoiceOS
carries it everywhere: the integrations list, the install sheet, and the notch
header of every card your tools render.

## Identity in the manifest

```json theme={null}
{
  "name": "Coffee Tracker",
  "summary": "Log every coffee by voice and glance your habits in the notch.",
  "description": "Longer markdown shown on the detail page…",
  "icon": "icon.png",
  "categories": ["health", "tracking"],
  "publisher": { "id": "pub_you", "name": "You" },
  "homepage": "https://example.com",
  "repository": "https://github.com/you/coffee-tracker"
}
```

| Field         | Guidance                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------- |
| `name`        | Short and speakable — it's how users refer to your integration by voice.                  |
| `summary`     | One line, ≤ 140 chars. Shown under the name everywhere.                                   |
| `description` | Markdown for the detail page. Only rendered when it says more than the summary.           |
| `icon`        | Folder-relative path (`icon.png`, `icon.svg`). Square, ideally 256px+. SVG is used as-is. |
| `repository`  | A "view source" trust signal on the detail page. VoiceOS never clones or executes it.     |
| `publisher`   | Your stable identity. Integrations you build in-app show as **"Made by you"**.            |

## Changing the icon in the app

Hover any custom integration's icon — in the Studio, or on its detail page — and
a pencil appears.

| Action               | Available on                          | What it does                                                                                              |
| -------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| **Generate with AI** | Studio-built integrations             | Draws a new icon from a text prompt.                                                                      |
| **Choose image…**    | All custom integrations & MCP servers | Pick a `png`, `jpg`, `webp`, `svg`, or `ico`. Bitmaps are resized to a square app tile; SVGs stay vector. |
| **Remove icon**      | All custom integrations & MCP servers | Back to the neutral monogram tile.                                                                        |

The generate prompt takes **exact art direction** — it's your words, not a theme
picker:

* *"hand-drawn orange cat on cream, no gradient"* → original artwork in your
  style.
* *"use the Notion logo"*, or just *"linear.app"* → VoiceOS fetches the **real
  brand mark** (favicon / touch icon) and composites it into a proper app tile
  deterministically. No AI-redrawn approximations of real logos.

With no direction at all, Studio icons follow the house style: one flat white
glyph, SF-Symbol simple, on a single-hue gradient — so a shelf of generated
integrations looks like a family.

Changing the icon updates everywhere at once: the list, the detail page, and the
mark on your cards.

## The mark on every card

Cards rendered with the [Widget Kit](/integrations/widget-kit) carry your icon
as a small mark in the top-left. The kit draws it automatically, and
Studio-built integrations get the icon baked into their `widgetKit.ts` at
generation time. In custom layouts, place it yourself with `markHtml()`; if you
don't, the kit floats it over the top-left corner so no card ever ships
unbranded.

Built-in [glance blocks](/integrations/result-cards) don't need any of this —
`header` takes your `icon` glyph or an `appIcon`, and the notch shows your
integration's identity with the result.

## Renaming

* **While a draft is open** (building or editing with AI), the name in the modal
  header is editable — up to 60 characters.
* **After install**, open the integration with **Edit with AI** and rename in
  the header, then save.

<Warning>
  The manifest **`id` never changes.** It's the stable identity that installs,
  updates, and settings hang off. Renames only change the display name.
</Warning>

## Accent color

Custom widget cards can declare one **accent** — ideally the service's real
brand color. The kit validates it and, when a brand color would be unreadable on
the notch's dark glass (or on a light surface), nudges it just enough to clear a
3:1 contrast ratio while preserving the hue.

You pick the brand; the kit keeps it legible. Details in
[Widget Kit](/integrations/widget-kit#accent-and-theme).