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

# Brand

> Set the practice name, logo, and colors patients see on booking, receipts, invoices, and the chat widget.

The Brand page is where you set everything patients see that represents your clinic — your practice name, logo, and colors. Decoda applies them to self-scheduling, payment receipts, invoices, and the embeddable chat widget. The page has two sections: **Practice details** and **Brand colors**.

Where to find it: **Settings > Brand**.

## Practice Details

The **Practice details** section holds the basics patients see across every page:

* **Practice Name:** The display name patients see on receipts, emails, and booking pages.
* **Introductory Text:** A welcome message shown on public-facing pages. A rich text editor is available for formatting.
* **Practice Logo:** Upload your clinic logo (PNG, JPG, or GIF, max 5 MB). Drag-and-drop is supported. The logo sits next to your brand color on patient-facing pages.

<Info>
  Changes save automatically as you pick colors — there's no Save button. The previews on the right update live so you can see how each page will look.
</Info>

## Pick Your Colors

<Steps>
  <Step title="Open the Brand page">
    Go to **Settings > Brand** and scroll to the **Brand colors** section.
  </Step>

  <Step title="Set Your Brand Color">
    The **Brand Color** is used for buttons, links, and the receipt header — it's the main accent patients see. Click the color swatch to open the color picker, or type a hex value (like `#4A5D4E`) into the box next to it.
  </Step>

  <Step title="Set Your Page Color">
    The **Page Color** is the background for pages, cards, and panels. A soft off-white usually works best, but anything goes as long as the contrast check is happy (see below).
  </Step>

  <Step title="Review the Previews">
    On the right side of the page, you'll see four live previews — Self-Schedule, Chat Widget, Receipt, and Invoice. Each one updates as you change colors so you can confirm the result before you publish.
  </Step>
</Steps>

Colors save automatically about a second after you stop adjusting them. There's no need to click anything.

## Contrast Check

If your two colors are too close in tone, a **Contrast check** panel appears under the color pickers. It calls out any pair that doesn't meet accessibility minimums so patients with low vision can still read your pages.

The check follows the WCAG accessibility standard:

* **Main Text on Page Color** — body text needs at least a 4.5:1 contrast ratio.
* **Brand Color on Page Color** — buttons need at least 3:1.
* **Link Color on Page Color** — links need at least 4.5:1 to stay readable as text.

Each issue lists the measured ratio and the minimum it should hit. A yellow warning means the pair is borderline; a red error means it's hard to read and should be fixed before you ship the change. Adjust either color until the panel disappears.

<Info>
  The contrast warnings don't block saving — your colors apply either way. They're guidance to keep your pages readable for every patient.
</Info>

## Where Your Colors Show Up

<AccordionGroup>
  <Accordion title="Self-Schedule">
    The booking page patients use to pick a service and time. Your brand color highlights the selected service, the **Book** button, and other interactive elements.
  </Accordion>

  <Accordion title="Chat Widget">
    The embeddable chat bubble that lives on your website. The bubble background and the send button both pick up your brand color. The widget pulls these colors automatically — there's nothing extra to configure on your site.
  </Accordion>

  <Accordion title="Receipts">
    The receipt header bar uses your brand color, and the page background uses your page color. Patients see this when they open a receipt link or get a receipt by email.
  </Accordion>

  <Accordion title="Invoices">
    Invoice PDFs and the online invoice page both pick up your brand and page colors so they match the rest of your patient-facing communications.
  </Accordion>
</AccordionGroup>

## Reverting to Defaults

If you want to start over, type the default hex values into the inputs:

* **Brand Color:** `#4A5D4E`
* **Page Color:** `#FAF6F0`

The previews update right away and the change saves itself.

## Related Settings

* **Calendar Appearance** — Per-user calendar colors and styles are configured separately in **Settings > Calendar Appearance**, not here.