CORE

Make it your brand

The PDF is your own HTML, rendered exactly as a browser would. So putting your brand on it is just HTML and CSS — your logo, your fonts, your colours.

Your HTML, your brand

There's no theme system to learn and no branding API to call. You send the markup; we print it. That means everything a browser can show, your PDF can show — a logo image, a web font, an accent colour. Below are the three things almost every branded document needs, each a copy-paste snippet you drop into your template.

Each one can be hard-coded, or driven from the data you POST with {{ }} placeholders (see Templates) — so one stored template renders for every client, each with their own logo and colour.

Putting your own brand on every render? Set it once in your brand kit — a saved logo, colour and company details that auto-fill {{ brand.* }} in every template.

Add your logo

Use a normal <img>. Point it at an absolute https:// URL, or inline it as a data: base64 URI to avoid an extra fetch. To make a stored template work for many customers, feed the source from your data (e.g. {{ from.logoUrl }}).

<!-- An absolute https:// URL to your logo -->
<img src="https://cdn.acme.studio/logo.svg" alt="Acme" style="height:40px" />

Use your fonts

Load web fonts the standard way — a Google Fonts <link> or your own @font-face over HTTPS — then set font-family in your CSS. (data:-embedded fonts are the most reliable since they need no network.)

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
    rel="stylesheet"
  />
  <style>
    body { font-family: "Inter", system-ui, sans-serif; }
  </style>
</head>

Use your colours

Style with plain CSS. A neat trick: define a single--brand custom property and have every accent read var(--brand) — then you can re-theme the whole document by setting that one value from your data on the root element.

<style>
  :root { --brand: #5b3df5; }
  .accent { color: var(--brand); }
  .bar    { background: var(--brand); }
  h1      { border-bottom: 3px solid var(--brand); }
</style>

The template examples put all three together: the invoice drives its logo from {{ from.logoUrl }} and its accent colour from a --brand variable fed by{{ brandColor }}.