Documentation

Custom Templates

Create your own invoice designs using InvoiceKit's JSON templating engine. No code required — just define your colors, layout preferences, and style options in a simple JSON file.

Quick Start

Every custom template is a JSON file with three top-level fields: a version number, a name, and a styles object that controls the visual appearance of your invoice.

Here's the simplest possible template:

minimal-template.json

{
  "version": 1,
  "name": "My Template",
  "description": "A clean, minimal invoice design",
  "styles": {
    "primaryColor": "#3b82f6",
    "backgroundColor": "#ffffff",
    "textColor": "#1a1a1a",
    "mutedColor": "#6b7280",
    "borderColor": "#e5e7eb",
    "headerBg": "#ffffff",
    "headerText": "#1a1a1a",
    "tableHeaderBg": "#f3f4f6",
    "tableHeaderText": "#374151",
    "totalBg": "#f9fafb",
    "totalText": "#1a1a1a",
    "accentBarEnabled": true,
    "accentBarHeight": 4,
    "headerCentered": false,
    "tableBordered": false,
    "labelStyle": "uppercase"
  }
}

To use it: go to Settings → Templates → Import Template and paste your JSON or upload the file.

Schema Overview

The template configuration has this structure:

Field	Type	Required	Description
version	integer	Yes	Always 1. Used for future compatibility.
name	string	Yes	Display name shown in the template picker (max 50 chars).
description	string	No	Short subtitle shown beneath the name (max 200 chars).
styles	object	Yes	All visual properties. See sections below.

Core Colors

These five properties define the fundamental color palette of your invoice. Every element on the page derives its color from one of these.

Property	Default	Description
primaryColor	#3b82f6	Your template's signature accent color. Used for dividers, accent bars, themed labels, and the total row border.
backgroundColor	#ffffff	Page background. Almost always white for printable invoices.
textColor	#1a1a1a	Primary text color for headings, values, and body content.
mutedColor	#6b7280	Secondary text for labels, field names, and de-emphasized content.
borderColor	#e5e7eb	Default color for table row separators, dividers, and section borders.

All colors must be hex format: #rrggbb or #rgb. Named colors and rgb() syntax are not supported.

Section Colors

These control the background and text colors of three key regions on the invoice. Each pair works together — the text color should always contrast with its background.

Header Region

The top of the invoice containing your business name, address, and GSTIN.

Property	Default	Description
headerBg	#ffffff	Background of the header region. Use a dark color like #000000 for a banner-style header.
headerText	#1a1a1a	Text color in the header. Use #ffffff when headerBg is dark.

Example: Dark banner header (Noir style)

"headerBg": "#000000",
"headerText": "#ffffff"

Table Header

The column header row of the items table (Description, SAC, Period, Amount).

Property	Default	Description
tableHeaderBg	#f3f4f6	Background of the table header row. Can be subtle grey, transparent, or a bold brand color.
tableHeaderText	#374151	Text color in the table header. Use #ffffff when the background is dark.

Example: Navy table header

"tableHeaderBg": "#1e3a5f",
"tableHeaderText": "#ffffff"

Total Row

The grand total row at the bottom of the invoice — the most prominent financial figure.

Property	Default	Description
totalBg	#f9fafb	Background of the total row. Use a solid dark color for maximum impact.
totalText	#1a1a1a	Text color of the total amount. Use #ffffff when totalBg is dark.

Example: Bold black total bar

"totalBg": "#000000",
"totalText": "#ffffff"

Layout Options

These boolean and enum properties control the structural layout of the invoice — how elements are arranged, not just colored.

Header Layout

Property	Type	Default	Description
headerCentered	boolean	false	true = business info centered in a bordered box. false = two-column layout with info left, invoice number right.

headerCentered: false

Two-column: business info left, invoice details right. Most templates use this.

headerCentered: true

Single centered box with all info inside. Used by Classic, Noir, and Detailed.

Table Style

Property	Type	Default	Description
tableBordered	boolean	false	true = full cell borders (grid look). false = horizontal lines only (clean, modern).

tableBordered: false

Horizontal lines only between rows. Cleaner, lighter feel.

tableBordered: true

Full vertical + horizontal borders. Traditional, structured look.

Label Style

Property	Type	Default	Description
labelStyle	"bold" \| "uppercase"	"uppercase"	How section labels (Bill To, Bank Details, Declaration) are rendered.

labelStyle: "bold"

Regular case with bold weight:
Bank Details:

labelStyle: "uppercase"

Uppercase with letter-spacing:
BANK DETAILS

Accent Bar

Property	Type	Default	Description
accentBarEnabled	boolean	false	Show a colored horizontal line below the header. Uses primaryColor.
accentBarHeight	integer (0–8)	0	Height in pixels. Only applies when accentBarEnabled is true.

Example: Enable a 3px accent bar

"accentBarEnabled": true,
"accentBarHeight": 3

Built-in Templates Reference

InvoiceKit ships with 11 built-in templates. Each one is a specific combination of the properties above. Use them as starting points for your own designs.

Template	Primary Color	Key Traits
Classic	#000000	Centered header, full table borders, bold labels, monochrome
Modern	#475569 (slate)	Two-column, accent bar 4px, horizontal table lines, uppercase labels
Elegant	#000000	Large INVOICE title, tracking-spaced, minimal borders
Bold	#000000	Serif title accent, black total bar, full borders
Continental	#1e3a5f (navy)	Navy table header, accent bar 4px, balance due display
Standard	#374151	Bill-to/From two-column, clean horizontal layout
Compact	#374151	Right-aligned meta panel, full table borders
Noir	#000000	Black header/footer banner bars, boxed total
Gallery	#1a1a1a	3px outer frame border, lowercase business name, Contact footer
Detailed	#2563eb (blue)	Blue table header, serial numbers, date signature line
Executive	#4d7c0f (olive)	Olive accent bars, Tax Invoice label, colored total

You can export any built-in template as JSON from the template picker to use as a starting point.

Complete Examples

Example 1: Ocean Blue

A professional blue-themed template with a bold colored table header and accent bar.

ocean-blue.json

{
  "version": 1,
  "name": "Ocean Blue",
  "description": "Clean design with blue accents and a colored table header",
  "styles": {
    "primaryColor": "#2563eb",
    "backgroundColor": "#ffffff",
    "textColor": "#1a1a1a",
    "mutedColor": "#6b7280",
    "borderColor": "#dbeafe",
    "headerBg": "#ffffff",
    "headerText": "#1e40af",
    "tableHeaderBg": "#2563eb",
    "tableHeaderText": "#ffffff",
    "totalBg": "#eff6ff",
    "totalText": "#1e40af",
    "accentBarEnabled": true,
    "accentBarHeight": 3,
    "headerCentered": false,
    "tableBordered": true,
    "labelStyle": "uppercase"
  }
}

Example 2: Warm Minimal

A warm-toned template with amber accents and clean horizontal lines.

warm-minimal.json

{
  "version": 1,
  "name": "Warm Minimal",
  "description": "Warm tones with subtle borders and clean typography",
  "styles": {
    "primaryColor": "#b45309",
    "backgroundColor": "#ffffff",
    "textColor": "#1c1917",
    "mutedColor": "#78716c",
    "borderColor": "#e7e5e4",
    "headerBg": "#ffffff",
    "headerText": "#1c1917",
    "tableHeaderBg": "#fef3c7",
    "tableHeaderText": "#92400e",
    "totalBg": "#ffffff",
    "totalText": "#b45309",
    "accentBarEnabled": true,
    "accentBarHeight": 2,
    "headerCentered": false,
    "tableBordered": false,
    "labelStyle": "bold"
  }
}

Example 3: Corporate Dark

A high-contrast template inspired by the Noir built-in, with a dark banner header and black total bar.

corporate-dark.json

{
  "version": 1,
  "name": "Corporate Dark",
  "description": "Dark header and footer with high contrast",
  "styles": {
    "primaryColor": "#18181b",
    "backgroundColor": "#ffffff",
    "textColor": "#18181b",
    "mutedColor": "#52525b",
    "borderColor": "#d4d4d8",
    "headerBg": "#18181b",
    "headerText": "#fafafa",
    "tableHeaderBg": "#f4f4f5",
    "tableHeaderText": "#18181b",
    "totalBg": "#18181b",
    "totalText": "#fafafa",
    "accentBarEnabled": false,
    "accentBarHeight": 0,
    "headerCentered": true,
    "tableBordered": true,
    "labelStyle": "bold"
  }
}

Example 4: Forest Green

An earthy green template with olive tones and uppercase labels.

forest-green.json

{
  "version": 1,
  "name": "Forest Green",
  "description": "Earthy green accents with structured borders",
  "styles": {
    "primaryColor": "#166534",
    "backgroundColor": "#ffffff",
    "textColor": "#14532d",
    "mutedColor": "#4b5563",
    "borderColor": "#d1d5db",
    "headerBg": "#ffffff",
    "headerText": "#166534",
    "tableHeaderBg": "#166534",
    "tableHeaderText": "#ffffff",
    "totalBg": "#f0fdf4",
    "totalText": "#166534",
    "accentBarEnabled": true,
    "accentBarHeight": 4,
    "headerCentered": false,
    "tableBordered": false,
    "labelStyle": "uppercase"
  }
}

Invoice Data Reference

Every template renders the same set of data fields. Understanding what data is available helps you choose the right layout options.

Sections rendered on every invoice

Header — Business name, address, GSTIN (if set), email, phone
Invoice Details — Invoice number, date, place of supply, nature of supply, supply type
Bill To — Customer name, company (if set), address, country, email
Items Table — Description, SAC code, period of service, amount (per item)
Totals — Subtotal, IGST (or NIL), grand total, INR equivalent (if set)
Declaration — Custom declaration text (if set)
LUT — Letter of Undertaking reference and date (if enabled)
Bank Details — Bank name, account number, SWIFT code, IFSC code
Signature — "For [Business Name]", signature image (if uploaded), "Authorised Signatory"

Conditional sections

Section	Shown when
GSTIN line	GSTIN is set in profile
Company name	Customer has a company name
IGST amount	IGST rate > 0 (shows 'NIL' when 0)
INR equivalent	Total INR value > 0
Declaration	Declaration text is set
LUT block	LUT is enabled in settings
Signature image	Signature image is uploaded

Design Tips

Start with a built-in. Export one that's close to what you want, then modify the JSON. This is much faster than starting from scratch.
Test contrast. When using a dark tableHeaderBg or totalBg, always set the corresponding text to #ffffff.
Keep it printable. Leave backgroundColor as #ffffff. Colored page backgrounds waste ink and look bad when printed.
Use the accent bar sparingly. It works best with colorful primaryColor values. Skip it for monochrome templates.
Choose one hero element. Either a bold table header, a striking total bar, OR a banner header — not all three. Templates with too many competing colors look chaotic.
Match your mutedColor to your palette. Don't just use grey — tint it slightly warm or cool to match your primaryColor.

JSON Schema

For validation and editor autocomplete, InvoiceKit publishes a JSON Schema at:

https://invoicekit.app/template-schema.json

Add it to the top of your JSON file for IDE support:

{
  "$schema": "https://invoicekit.app/template-schema.json",
  "version": 1,
  "name": "My Template",
  ...
}

Back to home