Style Invoices with Custom CSS

You can personalize your invoices by adding your own custom CSS. This allows you to control fonts, colors, spacing, and more—matching your brand and preferences.

Units & Layout Scale

Because the invoice preview scales with the webview width in the app, use rem for sizes—not static units like px. The template sizes the page for A4 (21 × 29,7 cm). The conversion is 1 rem = 1 cm. Use the same numbers as centimeters with rem—e.g. 2.5rem for 2,5 cm.

CSS cm does not follow this scaling—don’t use.

Available Variables

You can use the following dynamic variables in your CSS. These will automatically reflect the values you’ve set in the app’s styling window:

Font Variables

{{primary-font}}
{{primary-font-weight}}

{{secondary-font}}
{{secondary-font-weight}}

{{label-font}}
{{label-font-weight}}

Color Variables

var(--primary)
var(--primary-dark) — dark variant for text
var(--primary-light) — 10 % opacity version
var(--primary-extralight) — 2 % opacity version

var(--accent)
var(--accent-dark) — dark variant for text
var(--accent-light) — 20 % opacity version
var(--accent-extralight) — 7 % opacity version

HTML Structure

This sample HTML file will reveal the HTML structure of each invoice. Additionally, your CSS will be applied on top of the default CSS. If you want to override an existing parameter, you may need to use !important.

Get a Template Made for You

Not confident building a custom template yourself? I’ll happily design one for you—so your invoices stand out and fit your needs and style perfectly. Get in touch via email and I have it ready in a couple of days.