Custom branding

Most of the graphical user interface of deaddrop can be branded, including colors, logos, text, emails, and the favicon. Branding is managed through the ddadm administration panel and requires the brandadm or sysadm role.

Considerations

The graphical interface changes between deaddrop releases. New SCSS variables, new text keys, or changes to image dimensions may be introduced, and a custom brand should be tested after each upgrade to ensure nothing is missing or misaligned. Contact sysctl to be notified in advance when a release will affect branding files.

It is not possible to brand the behavior of deaddrop. If behavioral changes are required, contact sysctl with a feature request.

Managing brands

Brands are managed in the Branding section of the ddadm sysadm panel. Users logged in as a branding administrator are directed to the Branding section automatically. The following operations are available:

Operation Description
New brand Creates a new brand from the default template.
Upload Installs a brand from a zip package (see Brand packages).
Edit Opens the multi-tab brand editor for a brand.
Info Edit the brand description.
Activate Makes a brand live on the deaddrop site. No service restart is needed.
Download Exports the brand as a zip package for backup or transfer.
Delete Removes a brand. The active brand and the default brand cannot be deleted.

Brand names may contain letters, numbers, hyphens, and underscores. The name default is reserved.

To revert to the standard deaddrop look, activate the default brand.

Brand file structure

All brand files are stored under /opt/sysctl/deaddrop/branding/<brand-name>/.

File Required Purpose How it appears
brand.conf Yes Identity metadata (display name, version, author). Created by ddadm.
variables.json Yes SCSS variable overrides — primary CSS customization. Created by ddadm (empty overrides).
palette.json No Custom named colors referenced in variables.json. Created when palette colors are first saved.
deaddrop.json No Login and logout page text. Pre-populated from defaults on new brand. 1
language.json No Main application text. Pre-populated from defaults on new brand. 1
mail_language.json No Email notification text. Pre-populated from defaults on new brand. 1
mail_style.json No Email colors and logo configuration. Created when first saved in the mail editor.
sms.json No SMS notification text (password delivery). Pre-populated from defaults on new brand. 1
favicon.json No Pointer to the favicon asset. Created when favicon is configured in the editor.
assets/ No Image files (logos, favicon, mail logo). Created when the first asset is uploaded.

All optional files fall back to the corresponding file in the default brand at runtime if absent.

zip package only contain what was explicitly included — absent language files fall back to defaults at runtime but are not copied into the brand directory on install.

brand.conf

A key=value metadata file. The ddadm UI reads the following keys:

Key Description
display_name Human-readable name shown in the ddadm brand list.
version Version string (e.g. 1.0).
author Author or contact address.
description Free-text description.

Example:

[brand]
name = acme
display_name = Acme Corp
version = 1.0
author = branding@acme.com
description = Acme corporate brand

variables.json

A flat JSON object where each key is a SCSS variable name (written with underscores, e.g. button_background) and each value is a CSS literal or a palette color reference.

This file is the source of truth for all CSS customization. main.css is compiled from it automatically — do not edit main.css directly.

Values can be:

  • CSS literals — color values (#3a6ea5, rgb(58, 110, 165)), sizes (14px, 1.2rem), or image URLs (url("/images/assets/my-logo.svg")).
  • Palette color references — a $color-name value (e.g. $brand-blue) that resolves to a color defined in the brand’s palette (see palette.json).

An empty object ({}) is valid and means all variables use their defaults.

The variable editor in ddadm groups variables into categories and provides color pickers, size inputs, and image selectors. Changes can be previewed before saving.

Variable categories

Category Variables
logos Login logo, login symbol, header logo, waiting-screen logo — path, width, height.
buttons Button colors, backgrounds, hover states.
login Login, logout, and waiting screen colors and backgrounds.
overlays Modals, progress bars, status indicators.
navigation Header, navigation, category, profile, and language selector appearance.
forms Form fields, inputs, icons, and time display variables.
brand Body, titles, subtitles, links, borders, and general catch-all variables.

The full list of available variables and their defaults is defined in /opt/sysctl/deaddrop/branding/default/scss/config/_variables.scss.

palette.json

An optional JSON object that defines custom named colors for the brand. These names can then be referenced as $color-name in variables.json, making it easy to apply a consistent color scheme across many variables by changing a single palette entry.

Default colors from _colors.scss are always available as palette references without being listed in palette.json. Custom palette entries extend — not replace — those defaults.

Color names must be alphanumeric with hyphens or underscores. Values must be CSS color literals.

Example:

{
  "brand-blue": "#2c5f8a",
  "brand-accent": "#f16064"
}

CSS customization

CSS is customized entirely through the variable editor — there is no direct CSS editing.

Live preview

The brand editor’s Variables tab provides a live preview workflow:

  1. Adjust variable values in the editor.
  2. Click Apply to Preview to compile and display the changes without saving.
  3. Open a preview window (login, main application, download page, mail, sign-out) to inspect. 2
  4. Click Save to write the changes to variables.json permanently.

If the brand is currently active, saving immediately pushes the compiled CSS to the live site.

toggles for each sign-out variant (SAML, x509, password, timeout).

Text customization

Text is customized through JSON language files. Each file covers a different surface:

File Surface
deaddrop.json Login page, logout page, and download page.
language.json Main application (logged-in pages).
mail_language.json Email notification messages.
sms.json SMS one-time password messages.

Language files are edited in the Language tab of the brand editor, which shows each key alongside its default or customized value. Changes can be previewed before saving.

New brands are pre-populated with complete copies of all language files. Keys absent from a brand’s file fall back to the default and cannot be modified through the editor.

deaddrop.json — login and logout page

Notable keys:

Key Description
title Browser page title on the login page.
header Main heading on the login page.
para1–para4 Information panel paragraphs on the right side of the login page. HTML is allowed.
signin, saml_signin, x509_signin Button labels for each login method.
copyright_header Copyright text shown at the bottom.
company Organization name used in various places.

The default values are in /opt/sysctl/deaddrop/branding/default/deaddrop.json.

language.json — main application

Covers all text shown to logged-in users. The default values are in /opt/sysctl/deaddrop/branding/default/language.json.

mail_language.json — emails

Covers the subject lines and body text of all email notifications. The default values are in /opt/sysctl/deaddrop/branding/default/mail_language.json.

sms.json — SMS messages

Covers the text sent in SMS password-delivery messages. The default values are in /opt/sysctl/deaddrop/branding/default/sms.json.

Email branding

Email appearance is configured through mail_style.json and an optional mail logo image.

mail_style.json

A JSON object with color and logo size settings. Available keys:

Key Description
color_background Background color of the email header area.
color_box Background color of the main content box.
color_text Body text color.
color_title Title text color.
color_highlight_text Highlighted/accent text color.
color_commercial Color for footer/commercial text.
color_commercial_link Color for footer links.
color_automail Color for automated message text.
color_vertical_line Color of the vertical separator line.
logo_width Width of the mail logo (e.g. 103px).
logo_height Height of the mail logo (e.g. 32px).
logo_path Filename of the logo asset to use (e.g. mail_logo.png). Defaults to mail_logo.png.

The default values are in /opt/sysctl/deaddrop/branding/default/mail_style.json.

Upload a logo image via the Mail tab in the brand editor. The logo is stored in the brand’s assets/ directory. Set logo_path in mail_style.json to the filename to use it, or place a file named mail_logo.png in assets/ and it will be picked up automatically.

Recommended dimensions: 103×32 px.

Favicon

The favicon is configured via favicon.json, which points to an image file in the brand’s assets/ directory:

{ "path": "favicon.ico" }

Upload a favicon image and configure it through the Favicon tab in the brand editor. If no favicon.json is present, assets/favicon.png is used as a fallback.

Asset management

Images (logos, favicon, mail logo) are uploaded through the Assets tab in the brand editor. Uploaded files are stored in the brand’s assets/ subdirectory and served through the branding API.

An asset that is currently referenced by variables.json, favicon.json, or mail_style.json is protected and cannot be deleted until the reference is removed.

Image URLs in variables.json use the production path /images/assets/<filename>. The preview system rewrites these automatically to serve through the branding API during preview.

Brand packages

A brand package is a zip file containing all brand files, suitable for backup, version control, or transferring a brand between installations.

Package structure

The zip must contain exactly one top-level folder named after the brand:

acme.zip
└── acme/
    ├── brand.conf          (required)
    ├── variables.json      (required)
    ├── palette.json        (optional)
    ├── deaddrop.json       (optional)
    ├── language.json       (optional)
    ├── mail_language.json  (optional)
    ├── mail_style.json     (optional)
    ├── sms.json            (optional)
    ├── favicon.json        (optional)
    └── assets/             (optional)
        ├── logo.svg
        └── mail_logo.png

main.css is excluded from downloaded packages and regenerated automatically on import.

Upload validation

When a package is uploaded, ddadm:

  1. Validates the brand name (letters, numbers, hyphens, underscores only).
  2. Checks that brand.conf and variables.json are present.
  3. Verifies that all $palette-ref values in variables.json resolve to a known color.
  4. Compiles the SCSS to verify the overrides produce valid CSS.

If any step fails, the upload is rejected with an error message and nothing is installed.

Overwriting an existing brand

If a brand with the same name already exists, the upload form provides an Overwrite option. When overwriting, the existing brand directory and theme file are backed up with a timestamp suffix before the new package is installed.

Legacy brands

Brands created before the current branding system (i.e. brands that lack brand.conf and variables.json) are displayed with a legacy badge in the brand list. They can still be activated, and their language files and mail_style.json work as before.

To migrate a legacy brand to the new system, create a new brand via ddadm and use the variable editor to reproduce the CSS customizations from the old brand’s hand-edited main.css.

© Copyright sysctl Aktiebolag 2013-2026. All rights reserved

  1. Pre-populated when creating a brand via ddadm’s New brand action. Brands installed from a ↩ ↩2 ↩3 ↩4

  2. Each preview window includes EN/SV language toggles. The sign-out preview additionally has ↩