Favicon colour families

Ways to make login, dash, coach and connect tell themselves apart in a tab strip, all built from the Saga S. Multi-step treatments use close tints off one brand tone; every single-colour treatment uses an unmodified brand hex, so those can be matched exactly rather than sampled. Login keeps the full four-colour mark throughout.

What we have today

One favicon across every app. A favicon has no background of its own, so the tab bar shows through behind it and between its regions — which is why every view on this page sits on a real browser bar, and why the switcher changes them all at once.

It already has one weakness. The navy quarter is L* 17 and Chrome's dark tab bar is L* 13 — about 1.1:1. On dark chrome that quarter disappears and the mark reads as a crescent rather than an S. That is true today, before any change here.

The split

Blue for dash, green for coach, red for connect, with login holding the all-of-the-above mark. Each card lists the exact brand colours behind it.

Treatments

Each one shown twice: as specimens at 32 and 72 px, then in situ as a tab strip at a real 16 px. Only dash, coach and connect change — login is the constant in every strip.

Extras — the less-used palette

Not the primary set. These are here for a fifth app, or if one of blue / green / red gets rejected. Teal is the useful one: it sits visually between the blue and the green, and it is where the first dashboard ramp started before dash moved to the milder #006298.

Why this split

Blue to dash

Dash already is blue — #006298 runs the left nav and the buttons, so the tab matches the app you land in. It is also the mildest blue available, which suits the hub you keep returning to.

Green to coach

Growth, and the Saga Coach logo shown in the app already sets “Coach” in brand green. This is the one assignment with existing artwork behind it rather than reasoning.

Red to connect

Live video and energy. The least evidenced of the three — no Saga Connect wordmark exists in any repo searched — but red is the remaining primary that carries that much energy, and keeping coral in the large top region of the tonal ramp stops it reading as an error state.

The gap is not a constant

The brand single-colour art separates regions with a 2.04-unit gap, which renders at 0.31 px on a 16 px favicon — invisible. It needs roughly 3× that at tab size, so gap width is an optical-sizing decision. Border weight behaves the same way.