Branding

Branding

All Onelo hosted surfaces — Auth, Checkout card, Store, Customer portal, Feedback, Waitlist, and Roadmap — are styled from your Branding settings via CSS custom properties. This page covers both halves: the visual controls in the dashboard, and Custom CSS for anything they don't expose — injected into every surface automatically. No framework, no build step.

The visual controls

Open Dashboard → App → Branding. Along the top are tabs for each surface — Auth, Checkout card, Store, Customer portal, Feedback, Waitlist and Roadmap — with a live preview beside the controls. Switch the preview between Desktop and Mobile at any time.

Logo

Below those, each surface gets its own show/hide and alignment — so you can centre the logo on the hosted Auth page but tuck it to the left in the compact checkout card, or hide it entirely on one surface without touching the others.

Colors

Buttons

Inputs

Card

Typography

Shadow

Shadows are off by default. The master Shadow toggle turns the whole system on; from there each element carries its own geometry, which you set by dragging a light source around a 2D pad rather than typing offsets.

Waitlist-only

Footer & Custom CSS

Custom CSS — how it works

Onelo renders each surface on its own URL and sets a base set of --onelo-* CSS variables from your Branding settings. Your Custom CSS is appended on top.

Custom CSS is automatically scoped to the surface it runs on — every rule you write is prefixed with that surface's root so it can never leak into the Onelo dashboard or another surface. You can also scope a rule yourself to a single surface using its root ID (e.g. #onelo-auth).

Brand tokens

Onelo resolves your Branding once into brand tokens — every colour, radius, font and shadow, with the defaults and light/dark-page rules applied — and every hosted surface, email and SDK paints from them. On a hosted page the tokens are these CSS variables, set on the surface root. The table below is generated from the code that sets them, with the value an app that changed nothing gets on the default dark page and on a light one (Page background #ffffff).

Change them with the visual controls in Branding. In Custom CSS, read them (e.g. box-shadow: var(--onelo-card-shadow)) or re-declare one scoped to a surface root for fine tuning. Derived values such as --onelo-button-bg are already resolved on the root, so to change one element reliably override its property directly with !important (see Cookbook).

Brand tokens in the SDKs

The SDKs paint their native chrome — the loading skeleton, spinner, retry button and close button shown around a hosted page — from the same tokens. /api/sdk/config and the store, portal, manage and upgrade responses carry a versioned brand_tokens object; before the first response an SDK uses a neutral grey, never Onelo's colours. Example values are for an app that changed nothing.

Selectors

These surfaces expose a root ID — scope a rule to one surface by prefixing it with the ID (e.g. #onelo-store .onelo-button).

Element hooks you can target (with !important for concrete properties):

Per-surface & per-element targeting

Because every rule is auto-scoped to the surface it runs on, and each surface exposes a root ID plus element hooks, you can style one element type on one surface and nothing else — and give each surface its own independent settings. Combine a root ID with an element hook: #surface .element.

Shadow on Auth buttons only — inputs untouched

#onelo-auth .onelo-button {
  box-shadow: 0 6px 24px rgba(255, 0, 255, 0.5) !important;
}

Different settings per surface

Each #surface .element block is independent — style Auth and Portal buttons completely differently.

/* Auth buttons — magenta glow */
#onelo-auth .onelo-button {
  box-shadow: 0 6px 24px rgba(255, 0, 255, 0.5) !important;
}

/* Portal primary button — different glow + sharper corners */
#onelo-portal .portal-btn-primary {
  box-shadow: 0 2px 8px rgba(0, 255, 0, 0.4) !important;
  border-radius: 4px !important;
}

/* Store CTA buttons — yet another look */
#onelo-store .onelo-button {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

Checkout card & Stripe

The checkout card is split in two. The left column (logo, product name, price) is rendered by Onelo and is fully stylable. The right column — every payment field (Email, Card number, Sort code…) and the payment-method tabs (Card / Bacs Direct Debit / …) — is rendered by Stripe inside an iframe. Custom CSS cannot reach inside it — a hard browser-security boundary.

How to style the Stripe fields & tabs anyway

Onelo bridges your input CSS into Stripe's appearance. A rule matching .onelo-input (or input / textarea) has its background, color, border, border-radius and box-shadow copied onto the Stripe fields and the unselected payment-method tabs. So this restyles them:

.onelo-input {
  background: #11001a !important;
  border: 2px solid #2a0040 !important;
  color: #ffffff !important;
}

The column divider line

The vertical line between the two columns is the left panel's border. Its color comes from Branding → Border color (applied inline). To recolor it from CSS, target the panel by its inline border — this works regardless of layout/build and leaves the lower divider untouched:

.checkout-card [data-onelo-card-divider] {
  border-color: #00ff88 !important;
}

Cookbook

Recolor buttons across surfaces

Buttons apply their background inline, so override the property with !important. A rule with no surface ID applies everywhere.

.onelo-button {
  background: #7c3aed !important;
  color: #ffffff !important;
}

Different button per surface

Prefix with a root ID to scope to one surface.

#onelo-auth .onelo-button {
  background: #6d28d9 !important;
}

#onelo-store .onelo-button {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35) !important;
}

Tune colors that read a variable live

Variables like --onelo-text and --onelo-border are read live, so re-declaring them scoped to a root works without !important.

#onelo-waitlist {
  --onelo-text: #e8e8e8;
  --onelo-border: rgba(14, 165, 233, 0.3);
}

Button hover animation

#onelo-auth .onelo-button,
#onelo-waitlist .onelo-button {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#onelo-auth .onelo-button:hover,
#onelo-waitlist .onelo-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45) !important;
}

Light mode adaptation

Media queries are supported and scoped automatically.

@media (prefers-color-scheme: light) {
  #onelo-auth,
  #onelo-waitlist {
    --onelo-border: rgba(0, 0, 0, 0.12);
    --onelo-text: #111111;
  }
}

Mobile tweaks

@media (max-width: 400px) {
  #onelo-store .onelo-button {
    font-size: 13px;
    padding: 10px;
  }
}

Fonts

Choose your heading and body fonts from the pickers in Branding → Typography — 15 web fonts are built in (Inter, Poppins, Plus Jakarta Sans, Figtree, Manrope, and more) and are loaded for you on every surface, plus system-ui, which uses the device's own font and loads nothing.

What you cannot do with CSS

• ✕Hide or recolor the "Powered by Onelo" mark — Footer-targeted rules are stripped; hide it via the plan-gated Branding toggle
• ✕Load external fonts or stylesheets with @import — @import is removed during sanitization — use the built-in font picker
• ✕Change field order (e.g. name before email) — HTML structure is controlled by Onelo
• ✕Add custom fields to the Auth form — Use Waitlist for custom data collection
• ✕Change button labels ("Sign in", "Join Waitlist") — Text is managed by Onelo
• ✕Reach inside the Stripe iframe with CSS — Payment fields + method tabs are cross-origin — style them via the .onelo-input bridge instead (see “Checkout card & Stripe”)

Tips

• —Override variables, not concrete properties, where you can — variable overrides cascade naturally and never need !important.
• —Use !important only when overriding a concrete property (background, box-shadow, border) that a widget applies as an inline style — e.g. on .onelo-button.
• —Avoid structural selectors like > div > div — widget HTML may change between releases. Stick to .onelo-button, .onelo-input, the data-onelo-* hooks, or the root IDs.
• —The dashboard preview is a snapshot — :hover and :focus states are not visible there. Test them on the hosted URL.
• —All surfaces share one Custom CSS field — use the root IDs (#onelo-auth, #onelo-store…) to scope rules to specific surfaces.