Matching your brand: colors, fonts and shape

The widget has six settings. That is the whole list, and it is short on purpose: six controls that cannot clash beat forty that can. Everything else — borders, muted text, the hover state, the progress bar — is worked out from those six so the result stays legible whatever you pick.

You will find them under Brand in Website widget, with a live preview beside them. The preview is the real widget, not a mock-up, so what you see is exactly what your customers get.

The six

Getting the colours right

Take your Background and Text from your website, not from your logo. The widget should disappear into the page it sits on, and the page is what surrounds it.

Take your Brand colour from your logo or your existing buttons. This one is allowed to stand out — it is the thing a customer taps.

Everything else is derived. Borders are your text colour at low strength against your background; muted text is the same idea further along. This is why you cannot set them: they are computed to stay readable against whatever pair you chose, and hand-setting them is how widgets end up with invisible dividers.

Error red is not yours to change. When something goes wrong the widget uses its own red, because a customer needs to recognise a problem as a problem even on a site whose brand colour is also red.

Appearance, and why two colours cover both modes

Set Appearance to Match the visitor's device and your background and text swap in dark mode. A dark grey background with near-white text becomes near-white text on dark grey — which is what you would have chosen anyway.

That is why there is no separate dark palette to fill in. One pair covers both.

If your website has no dark mode of its own, choose Light and be done. A widget in dark mode on a permanently white page looks like a hole.

Corner roundness

Match your site's buttons. If your buttons are sharp, set this near zero; if they are pill-shaped, turn it up. This is the setting people skip and then cannot say why the widget looks glued on — mismatched corner radius is the most visible tell there is.

Fonts

Choose from the list rather than typing a font name. Every option is served from your own page, so there is no third-party request from your customer's browser and no font that fails to load on a slow connection.

If your site uses a typeface that is not on the list, pick the closest and stop worrying. System default is a genuinely good answer: it renders in whatever the visitor's device uses everywhere else, which on a phone is invisible in the best way.

Things you cannot do, and why

• You cannot write CSS. Nothing you paste into your site can restyle the inside of the widget. That is what stops a broken stylesheet on your page from making a customer's balance unreadable.
• You cannot add a logo inside the widget. Yours already sits above it on your own page, and a second one is clutter.
• You cannot hide the balance or the reward list in the Full layout. That is the widget.

A quick sanity check before you publish

Open your page on a phone, in daylight if you can, and answer three questions: can you read the balance without leaning in, does the button look like a button, and does the box look like it belongs to the page around it? If yes to all three, you are done — this is not a screen anyone should spend an afternoon on.