Branding your app

The Branding page — in the dashboard header — is where the guest app stops being ours and becomes yours. You pick very little: a look, an accent color, a logo. Cordelle derives everything else, checks it for readability, and shows you the result on a live phone preview before you save.

Presets, or your exact colors

The fastest path is a preset: a curated pairing of accent and background that works out of the box. Picking one also sets its recommended appearance — dark or light — which you can switch independently in the Appearance card above it.

If your brand has exact colors, open Custom colors instead and enter your accent as a 6-digit hex code, like #C9A44C. You can also set an optional background tint, or leave it on Auto and we derive a background from your accent's own hue. Either way, the full palette — surfaces, borders, text shades, button colors — is built from those one or two picks.

The readability guarantee, honestly explained

Whatever colors you pick, the derived palette is checked against WCAG contrast targets: body text on cards must clear 7:1, secondary text 4.5:1, accent-colored small text 4.5:1, and text on accent buttons 4.5:1. The Readability check card on the Branding page shows you the actual numbers.

Here is the honest part: if your color can't carry small text, we adjust it until it can. The correction is mechanical — your accent is nudged lighter or darker, step by step, until it clears the ratio against your background. When that happens the page says so plainly ("We darkened your accent so it stays easy to read…"). Often only the small-text shade is corrected, and large headings keep your exact color. Contrast is enforced by math, not taste — a brand can veto a palette, but it cannot veto legibility.

One warning worth heeding: if your accent is very close to grey, the page will tell you. It will pass the contrast checks, but buttons may not stand out.

Your logo

1. On the Branding page, find the Logo card and click Upload a logo (or Replace logo).
2. Choose a PNG, JPEG, or WebP file. It is resized in your browser and saved as a small PNG the moment you pick it — the save button at the bottom of the page is for colors, not the logo.
3. Check it in the phone preview. If it looks wrong, Replace logo or Remove it the same way.

The logo is stored inside the trip bundle itself rather than fetched from the web, so it still appears on a phone with no signal. Guests see it at the top of their Today screen, on the join confirmation, and on the taxi card; it also heads the cover of the printed packet.

The live preview

The phone on the right of the Branding page is not a mockup or a screenshot. It is a guest's Today screen, drawn from your current picks with the exact same derivation rules the real phones run — so what you see is what your travelers get, by construction. It updates as you drag the color picker, and a small chip above it shows what your palette resolves to in the other appearance.

Saving, and when guests see it

Colors change nothing until you click Save branding. After that:

• New guests see the new colors immediately when they join.
• Guests already on a trip get them the next time their phone checks in — usually within minutes of opening the app.
• A phone that stays fully offline keeps the old colors until it reconnects. That is the deal the offline app makes, and it is the right one.

Two boundaries worth knowing. Your branding dresses what travelers see — the app and the printed packet. The dashboard keeps its own look, so your tables and status colors stay legible whatever palette you choose (your logo and name still sit at the top of it). And Cordelle's own name appears on exactly one guest-facing screen: the join screen, before the app knows whose trip the code belongs to. From the moment a code is accepted, the app is yours.