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

> ## Agent Instructions
> Install the Courier skill before writing code: `npx skills add trycourier/courier-skills`. It carries the verified SDK shapes and the rules you cannot get wrong.
> Authenticate every request with `Authorization: Bearer <API_KEY>`. A workspace has several environments and each has its own keys, which are plain `pk_` strings with no environment prefix. Start with Test.
> Send with `client.send.message`, the default import of the v7 Node SDK. Reference a template by its `nt_` id or its alias.
> A send accepts a bare Elemental element list, but storing content on a template requires the top-level elements wrapped in a channel element.
> Templates and journeys can be built in the Courier app or created through the API. Either way they live in the workspace and are referenced by ID when you send.
> The hosted MCP server is https://mcp.courier.com. For a briefing on what Courier is and when to use it, read https://www.courier.com/llms.txt.
> Prefer the Guides tab for how-do-I questions and the Docs tab for how-does-it-behave questions. The API reference lives under /api-reference.

# Design notifications

> Templates, brands, and the Elemental format that defines what a notification says and looks like.

export const Doc = ({href, children, name, bare}) => {
  const label = children || name || href;
  if (bare) {
    return <a href={href}>{label}</a>;
  }
  return <a className="cx-endpoint" data-kind="doc" href={href}>
      <span className="cx-endpoint-label">{label}</span>
      <span className="cx-endpoint-method">DOC</span>
    </a>;
};

A notification's design lives in a template: what it says, how it looks, and how it changes per channel.

<Frame>
  <img src="https://mintcdn.com/courier-4f1f25dc/fN1MbwzHtG3Vhos5/assets/design-studio.webp?fit=max&auto=format&n=fN1MbwzHtG3Vhos5&q=85&s=51850c52555d0647e10435c5d0bc6ef2" alt="Design Studio: the channel rail and blocks panel on the left, the canvas in the center, and the styles panel on the right" width="1400" height="876" data-path="assets/design-studio.webp" />
</Frame>

## How it works

<Doc href="/docs/design/templates/overview">Templates</Doc> hold the content and the channel, routing, and brand settings around it. Your team builds one in the <Doc href="/docs/design/templates/design-studio">Design Studio</Doc> or over the <Doc href="/docs/design/templates/api">Templates API</Doc>.

<Doc href="/docs/design/brands">Brands</Doc> hold the logo, colors, and footer that a template applies, so a styling change lands everywhere at once rather than template by template.

<Doc href="/docs/design/elemental/overview">Elemental</Doc> is the JSON format underneath. The visual editor writes it for you, and the API takes it directly, so a template is the same object either way.

## When your customers design their own

White-label and multi-tenant products often need each customer writing their own messages, not your team writing them all.

The <Doc href="/docs/design/embedded-designer/overview">Embedded Designer</Doc> mounts the same editor inside your React app. What a customer builds there belongs to their <Doc href="/docs/tenants/overview">tenant</Doc> rather than to your workspace.
