> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.kota.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.kota.io/_mcp/server.

# Customization

> Customize Kota Hosted to match your brand

Kota Hosted provides comprehensive customization options to ensure the benefits experience feels native to your platform. All customization settings are configured once during integration setup and can be updated if needed.

---

## Branding options

### Custom domain

Host the Kota experience on your own subdomain to maintain a seamless experience for your users.

**Example**: `benefits.yourplatform.com`

This ensures employees see your domain in the browser address bar throughout their benefits journey.

**SSL certificates**: Kota issues and manages SSL certificates for your custom domain. You'll need to add CNAME records to your DNS configuration for domain validation - Kota will provide these records during setup.

---

### Logo

Display your company logo throughout the Hosted experience to reinforce your brand.

**Format**: URL to your logo image (PNG, SVG, or JPG recommended)

**Example**: `https://yourplatform.com/logo.png`

---

### Favicon

Set a custom favicon that appears in the browser tab.

**Format**: URL to your favicon file (ICO or PNG format)

**Example**: `https://yourplatform.com/favicon.ico`

---

### Platform name

Customize the page title and meta title that appears in browser tabs and bookmarks.

**Example**: `"Acme Benefits Portal"`

---

### Redirect URL

Configure where employees are sent when they click the return button in the header or encounter authentication errors.

**Example**: `https://yourplatform.com/benefits`

This URL is used throughout the Hosted experience to bring employees back to your platform.

---

## Theme configuration

Customize colors, borders, and other visual elements to match your platform's design system. All theme properties are optional - any omitted fields will use Kota's default values.

> **Tip**
>
> Kota's theme uses a simple background/foreground convention for colors. For example, a primary button uses `primaryColor` as the background and `primaryForegroundColor` as the text color.

### Theme properties

| Property                       | Description                                                      | Format                              |
| ------------------------------ | ---------------------------------------------------------------- | ----------------------------------- |
| **primaryColor**               | Primary background color for buttons, badges, etc.               | Hex color (e.g., `#0875E1`)         |
| **primaryForegroundColor**     | Text color on primary elements                                   | Hex color                           |
| **secondaryColor**             | Secondary background color for buttons, badges, etc.             | Hex color                           |
| **secondaryForegroundColor**   | Text color on secondary elements                                 | Hex color                           |
| **accentColor**                | Background/text for accents like hover effects on dropdown menus | Hex color                           |
| **accentForegroundColor**      | Text color on accent elements                                    | Hex color                           |
| **foregroundColor**            | Default text color of the interface                              | Hex color                           |
| **foregroundHeadingColor**     | Text color for headings                                          | Hex color                           |
| **backgroundColor**            | Default background color of the interface                        | Hex color                           |
| **borderColor**                | Default border color                                             | Hex color                           |
| **cardColor**                  | Background color for cards                                       | Hex color                           |
| **cardForegroundColor**        | Text color on cards                                              | Hex color                           |
| **destructiveColor**           | Color for destructive actions (e.g., delete buttons)             | Hex color                           |
| **destructiveForegroundColor** | Text color on destructive elements                               | Hex color                           |
| **inputColor**                 | Border color for form inputs, selects, radio buttons             | Hex color                           |
| **mutedColor**                 | Background for off states of components like tabs & switches     | Hex color                           |
| **mutedForegroundColor**       | Text color for muted elements                                    | Hex color                           |
| **popoverColor**               | Background color for popovers                                    | Hex color                           |
| **popoverForegroundColor**     | Text color in popovers                                           | Hex color                           |
| **radius**                     | Border radius for cards, inputs, and buttons                     | CSS value (e.g., `12px`, `0.75rem`) |
| **ringColor**                  | Color of focus ring for accessibility                            | Hex color                           |
| **warningColor**               | Background color for warning badges/alerts                       | Hex color                           |
| **warningForegroundColor**     | Text color on warning elements                                   | Hex color                           |

---

## Example theme configuration

Here's an example of a custom theme configuration:

```json
{
  "primaryColor": "#0875E1",
  "primaryForegroundColor": "#ffffff",
  "backgroundColor": "#f5f5f8",
  "radius": "12px",
  "ringColor": "#0875E1",
  "cardColor": "#ffffff",
  "borderColor": "#d8dee6"
}
```

Remember, all theme properties are optional. You can provide as few or as many as needed to match your brand.

---