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

# Branding

> Set the theme, accent color, company name and logo of the Fasten application with four branding parameters.

# Customize Fasten with your brand

Branding lets you match Fasten to your own brand. You can set the theme, accent color, company name and logo by adding four parameters to the `<fasten-stitch-element>`. All four are optional. If you leave a parameter out, or pass a value Fasten can't use (such as an invalid hex code or a broken logo link), Fasten uses its default for that parameter.

## Quick start

Add the parameters you need as attributes on the element:

```html theme={null}
<fasten-stitch-element
  branding-theme="dark"
  branding-accent-color="#E04E3C"
  branding-company-name="your brand"
  branding-logo-url="https://your-brand.com/assets/logo.svg">
</fasten-stitch-element>
```

| Parameter | What it changes | Accepted values | Default |
| - | - | - | - |
| `branding-theme` | Background and theme of the whole application | `light` or `dark` | `light` |
| `branding-accent-color` | Highlights, calls to action, interactive elements, icons and illustrations | A hex color code, for example `#E04E3C` | Fasten brand color |
| `branding-company-name` | Your company name on the welcome and done screens | Text | Company defined via developer portal |
| `branding-logo-url` | The logo in the top left of every screen | A URL to an SVG or PNG file | Fasten logo |

## Preview customisations

**Default**

With no branding parameters, the widget uses the Fasten logo, Fasten accent color, and light theme. The company name comes from your developer portal settings.

![Default Fasten widget with the Fasten logo, purple accents, and a light background](https://mintcdn.com/fastenhealth/KylI--RNiq8UVoib/images/branding/default.png?fit=max\&auto=format\&n=KylI--RNiq8UVoib\&q=85\&s=93b3ef3bd8af1d1bce2aa1c991ad92bd)

**Custom logo**

Using `branding-logo-url` displays your logo in the top left. This example keeps the default purple accents and light theme.

![Fasten widget with a custom Your Brand logo, purple accents, and a light background](https://mintcdn.com/fastenhealth/KylI--RNiq8UVoib/images/branding/branding-logo.png?fit=max\&auto=format\&n=KylI--RNiq8UVoib\&q=85\&s=654966007fa921e158204522b3df537f)

**Custom accent color**

Use `branding-logo-url` and `branding-accent-color` to display your logo in the top left and replace the default purple accents with your custom accent color.

![Fasten widget with a custom Your Brand logo, red illustrations, links, and Continue button on a light background](https://mintcdn.com/fastenhealth/KylI--RNiq8UVoib/images/branding/branding-accent-color.png?fit=max\&auto=format\&n=KylI--RNiq8UVoib\&q=85\&s=b5e737123182ceca6ee5aac7d4407222)

**Dark theme**

Combine your custom logo and accent color with `branding-theme="dark"` to display your logo and custom accent color on a dark theme.

![Fasten widget with a custom teal Your Brand logo, teal accents, and a dark background](https://mintcdn.com/fastenhealth/KylI--RNiq8UVoib/images/branding/branding-dark-theme.png?fit=max\&auto=format\&n=KylI--RNiq8UVoib\&q=85\&s=4b09f766bfbcce93de68c9ecfaab02e4)

## Theme

`branding-theme` sets the theme for the whole application.

* `light` (default): a light theme with a white background (`#FFFFFF`).
* `dark`: a dark theme with a dark background (`#15151A`).

```html theme={null}
<fasten-stitch-element branding-theme="dark"></fasten-stitch-element>
```

Choose the theme before you choose your accent color. Each theme has its own contrast requirements, described in the next section.

## Accent color

`branding-accent-color` replaces the Fasten brand color across the application. It's used for highlights, calls to action, interactive elements, icons and illustrations. Pass it as a hex code, including the `#`.

```html theme={null}
<fasten-stitch-element branding-accent-color="#E04E3C"></fasten-stitch-element>
```

### Check your color's contrast

Your accent color appears as text on the page background, and as a background behind text. People with low vision need enough contrast to read both. Before you go live, check that your color meets a contrast ratio of at least 4.5:1 for every pairing listed for your theme.

| Theme | Accent color as text on | Text on accent color |
| - | - | - |
| `light` | White background (`#FFFFFF`) | White text (`#FFFFFF`) |
| `dark` | Dark background (`#15151A`) | White text (`#FFFFFF`) |

You can check each pairing with a contrast checker such as the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/). If a pairing falls short, adjust the lightness of your color until it passes. Small changes are often enough.

## Company name

By default, the welcome and done screens use the company name you set up in the developer portal. Set `branding-company-name` to override the displayed name for that widget without changing your developer portal settings.

This makes it easier to customise the widget for different branches or brands under one company umbrella. For example, if your company operates several clinics, you can pass each clinic's name so people see the name they recognise when connecting their records. Leave the parameter out to use the company name from the developer portal.

```html theme={null}
<fasten-stitch-element branding-company-name="your brand"></fasten-stitch-element>
```

This is how your name appears:

| Screen | What people see |
| - | - |
| Welcome | Your brand uses Fasten to bring your health records together in one place. |
| Done | Your health records are now connected with your brand. You can close this window and return to your brand. |

## Logo

`branding-logo-url` replaces the Fasten logo in the top left of every screen. Pass a link to your logo file.

```html theme={null}
<fasten-stitch-element branding-logo-url="https://your-brand.com/assets/logo.svg"></fasten-stitch-element>
```

### File format

* **SVG (recommended):** stays sharp at any screen resolution.
* **PNG:** use a transparent background and export it at twice the size it will be displayed, so it stays sharp on high-resolution screens.

### Size

| Logo shape | Recommended display size |
| - | - |
| Landscape | Up to 160px wide and 32px high |
| Square | 48px × 48px |
| Portrait | Up to 48px high, with proportional width |

For a PNG, these are display sizes. A square logo, for example, should be exported at 96px × 96px.

### Preview logo shapes

Compare how landscape, portrait, and square logos appear in the top left of the widget.

**Landscape**

A wide logo displays your brand name horizontally.

![Fasten widget with a wide landscape Your Brand logo in the top left](https://mintcdn.com/fastenhealth/KylI--RNiq8UVoib/images/branding/logolandscape.png?fit=max\&auto=format\&n=KylI--RNiq8UVoib\&q=85\&s=6c8918c4fed4a534e89312d7433ddfe9)

**Portrait**

A tall logo displays your branding vertically.

![Fasten widget with a tall portrait logo in the top left](https://mintcdn.com/fastenhealth/KylI--RNiq8UVoib/images/branding/logoportrait.png?fit=max\&auto=format\&n=KylI--RNiq8UVoib\&q=85\&s=37f19b66e2818fecdeb4590857d13565)

**Square**

A square logo works well for a compact brand mark or initials.

![Fasten widget with a square logo containing the initials yb in the top left](https://mintcdn.com/fastenhealth/KylI--RNiq8UVoib/images/branding/logosquare.png?fit=max\&auto=format\&n=KylI--RNiq8UVoib\&q=85\&s=51d55b28bd28d29d2a150143b0084881)


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