Branding: logo, colours and custom CSS

In Pro and Unlimited events the speaker page and the emails sent to speakers look like your event. Deckhandoff shows only as a small line at the bottom of the page. The settings are on the Brändäys (branding) page of the organiser view. You can set them up and preview them in a Basic event too, but speakers see them only once the event is Pro.

Quick start

1. Open Brändäys in the organiser view.
2. Upload a logo (PNG, JPEG or WebP, up to 512 KB). A light or transparent logo works on the dark top band.
3. Choose the top band colour and the accent colour. The text colour is picked automatically so it stays readable.
4. Optionally upload a background image for the top band (at least 1600 px wide). A dark layer goes on top so the text stays readable.
5. Enter the sender name and reply-to address for speaker emails and choose Tallenna (save).
6. Check the result in the preview. It uses made-up content, so speakers don't see it and nobody is marked as visited.

Emails

• The sender name shows in the speaker's inbox, e.g. “Example Festival”. If empty, the event name is used.
• Messages are still sent from asiakaspalvelu@deckhandoff.fi so they don't land in spam. When a speaker replies, the reply goes to your reply-to address.
• Your logo is at the top of the message and the button is in your accent colour.

Custom CSS

With custom CSS you can fine-tune the speaker page. It is added after the colours and background image, so it can override them. It applies only to the speaker page, not to emails, the organiser view or the help.

Variables

The easiest way to change colours is the variables. The colour fields set the same variables.

• --brand-800 top band colour, --brand-900 its darker shade, --brand-700 a lighter shade
• --brand-yellow accent colour (buttons and selections), --brand-yellow-600 its darker shade, --brand-on-accent text on the accent colour
• --brand-on-dark and --brand-on-dark-muted text in the top band
• --bg page background, --surface card background, --fg text, --muted secondary text, --line borders, --accent links

:root {
  --brand-800: #2b0a3d;       /* top band colour */
  --brand-900: #1a0626;       /* top band's dark edge */
  --brand-yellow: #ff5a36;    /* buttons and highlights */
  --brand-on-accent: #ffffff; /* text on buttons */
}

Classes

• .app-band the whole top band (the same element also has [data-brand="pro"])
• .app-brand .event-logo the logo, .app-pill the language switch
• .app-hero h1 the session title, .app-eyebrow the small heading above it, .app-chips li day, time and name
• .card content cards, .card > h2 card headings
• .btn buttons, .btn.primary the main button (Upload)
• .drop the file drop area, .steps the delivery steps, .badge the status badge
• .footer the bottom of the page, .powered-by the Deckhandoff line

Examples

.btn { border-radius: 999px; }
.card { border-radius: 4px; box-shadow: none; }

/* Use a font that speakers' computers already have. */
.app-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
}

.app-band { background: var(--brand-800); }
.app-band::before { display: none; }

.app-brand .event-logo { height: 52px; max-width: 18rem; }

/* Dark text on a light top band */
:root {
  --brand-800: #f4efe6;
  --brand-900: #e8dfcf;
  --brand-on-dark: #1b1d21;
  --brand-on-dark-muted: #4a4f58;
}
.app-hero h1 { color: #1b1d21; }
.app-band::before { display: none; }

.drop {
  border-style: solid;
  border-color: var(--brand-yellow);
  background: color-mix(in srgb, var(--brand-yellow) 8%, var(--surface));
}
.drop-icon { background: var(--brand-yellow); color: var(--brand-on-accent); }

Limits

• For security, the CSS can't load anything from outside: @import, outside images (url(https://…)) and web fonts (@font-face) are skipped. Use the Logo and Background image fields for your own images.
• Web fonts are not supported. Use fonts computers already have, e.g. Georgia, "Helvetica Neue", Arial or system-ui.
• The CSS can be up to 20,000 characters. Saving tells you if anything was skipped.
• Class names may be refined later. The variables stay the same, so use them when you can.

Always try changes in the preview before the invitations go out. If something looks off, clear the custom CSS and save, and the page goes back to your colours and logo.