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:

<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
Custom logo
Custom accent color
Dark theme

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.

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

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.

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

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).

<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 #.

<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. 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.

<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.

<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
Portrait
Square

A wide logo displays your brand name horizontally.

​Customize Fasten with your brand

​Quick start

​Preview customisations

​Theme

​Accent color

​Check your color’s contrast

​Company name

​Logo

​File format

​Size

​Preview logo shapes