Design guidelines for brand and appearance

Adding your brand logo, images and colors to your Venue Manager settings is the best way to customize assets such as email templates, physical and digital tickets, online checkouts and more! 

In this article, we'll walk through some guidelines for adding logos, images and colors to your venue settings to match your brand.

Default logo 

We use the default logo in the following places unless otherwise specified:

• Email templates (including invoice email)
• PDF master and itemized tickets
• Waiver kiosk
• Digital wallet memberships and passes
• Progressive checkouts

You may find that the default logo does not display well in the above applications because of the background color or orientation.

For instance, a white logo will not be very visible on a white background or a tall logo will not fit very well in a letterbox-shaped space. If this is the case, we recommend you provide a logo that works better in those applications. 

We recommend using a transparent PNG and cropping the logo to a maximum width of 640 pixels. It doesn't matter what the height of the logo is, as that will be dictated by the dimensions of the logo.

• 640 pixels wide
• Acceptable file formats: WEBP, JPG and PNG
• Must be less than 1 MB

Background image

The background image is used for legacy and progressive checkouts, online waivers and custom forms. 

When viewed on a desktop computer, the image you upload will stretch to fill the window, so it’s best to use an image that is the same aspect ratio as a desktop screen.

The best size to use is 1920 x 1080 pixels.

Header logo

The header logo is no longer used in ROLLER. 

Color palette

The following applications will use the colors set in the design settings unless otherwise specified in the feature's settings:

• Email templates
• Waiver kiosk
• Digital wallet memberships and passes

You can apply two colors to ROLLER products, a primary and a secondary color.

The primary color is used mainly for headings and accents while the secondary color is reserved for links, buttons and other interactive elements.

If you wish to use only a single color, simply enter the same value in both inputs. 

Colors must be entered as HEX values. If you're unsure what HEX values to use, you can use this resource to generate a HEX code by uploading an image.

Checkout header

This image is used for legacy checkouts, payment links, online waivers and forms.

• 640 x 134 pixels
• Acceptable file formats: WEBP, JPG and PNG
• Must be less than 1 MB

Invoice logo

This image is displayed on any PDF invoice downloads that are sent through ROLLER.

• At least 300 x 100 pixels (aspect ratio 3:1)
• Acceptable file formats: WEBP, JPG and PNG
• Must be less than 1 MB

Prepare your logo using AI tools

Getting your logo to the right size and format before uploading it to ROLLER can take a bit of work — especially if your file has extra whitespace, an opaque background (non-transparent), or dimensions that don't quite fit. AI image tools make this much faster.

Tools like ChatGPT, Claude, Google Gemini, Microsoft Copilot, Adobe Firefly, and Canva's AI features can accept an uploaded image and follow plain-language instructions to resize, crop, and reformat it for you — no design software required.

What to ask the tool to do

Upload your existing logo file, then send the following prompts one at a time:

1. "Trim any transparent or white margins around the design so the logo fills the canvas edge to edge."
2. "Scale the design proportionally to fit within [width] × [height] pixels, preserving the aspect ratio with no distortion."
3. "Centre the design on a transparent canvas that is exactly [width] × [height] pixels."
4. "Save it as a PNG file with a transparent background."

Replace [width] × [height] with the dimensions for the image type you're preparing:

Here's an example of a logo before and after using an AI image tool.

Before: The original logo file has a white background and uneven whitespace around the design.

After: The same logo trimmed, scaled, and centred on a transparent canvas at 640 × 213 px — ready to upload. The grey checkerboard indicates a transparent background, which won't appear once uploaded to ROLLER.

For sharper results, ask for double the dimensions

AI tools generate images at a fixed pixel size. If your logo looks soft or pixelated after uploading — particularly on high-resolution or retina screens — ask the tool to produce it at double the target dimensions:

"Scale the design proportionally to fit within [double width] × [double height] pixels, then centre it on a transparent canvas at exactly [double width] × [double height] pixels."

For example, for the invoice logo, use 600 × 200 px instead of 300 × 100 px. ROLLER will display it at the correct size, but the extra pixels mean it renders more crisply.

This applies to all image types:

Tips

• Use a transparent PNG wherever possible — this looks cleanest against both light and dark backgrounds in ROLLER. If the AI tool returns a white background instead of transparent, follow up with: "Please make the background fully transparent, not white."
• Check the result before uploading. Zoom in to confirm the edges are clean and no part of the logo is cropped. The grey checkerboard pattern in the preview indicates transparency — it won't appear once your logo is uploaded to ROLLER.
• Don't distort your logo. If the AI tool stretches or squashes it, ask it to try again: "Scale the design proportionally, preserving the aspect ratio — do not stretch or distort."
• Keep your file under 1 MB. If the AI tool produces a large file, ask it to: "Compress the PNG file to under 1 MB without reducing the dimensions."
• For the background image, a transparent PNG won't work — use a JPG or PNG with an actual background colour or image, as it needs to fill the screen behind your checkout or waiver.