Styling

Every element in your template can be styled through the right panel. Select any element on the canvas and the panel shows the options available for that element type.

Dimensions and position

For freely positioned elements (text, images, shapes, barcodes, QR codes), you can set:

• W and H — Width and height in pixels
• X and Y — Position relative to the top-left corner of the parent section

Sections, headers, and footers are always full-width — you can only adjust their height.

Typography

Typography options appear when you select a text element or a table cell.

Font

The following fonts are available:

• Sans-serif — Inter, Roboto, Open Sans, Lato, Montserrat, Source Sans Pro, IBM Plex Sans, Arial, Helvetica, Verdana, Tahoma
• Serif — Times New Roman, Georgia, Merriweather, Playfair Display
• Monospace — Courier New

Size and weight

Set the font size in pixels. For reference:

• 10px works for fine print and disclaimers
• 12–14px is standard for body text
• 18–24px is common for headings

Weight ranges from Light (300) to Bold (700). Regular (400) is the default.

Color

Click the color swatch to open the color picker, or type a hex code directly (e.g. #333333).

Alignment

Four options: left, center, right, and justify. Numbers and prices are usually easier to read when right-aligned. Body text works best left-aligned.

Line height and letter spacing

Line height controls the vertical space between lines of text. The default of 1.6 works for most cases. Decrease it for compact layouts, increase it for more breathing room.

Letter spacing adjusts the horizontal space between characters. A small positive value (e.g. 0.015em) can improve readability for uppercase text or headings.

Fill

Fill controls the background of an element.

• Background color — Click the swatch to set a solid color. Leave it transparent for no background.
• Opacity — A slider from 0% (invisible) to 100% (fully opaque). This affects the entire element including its content.

Use subtle background colors to create visual separation between sections — for example, a light gray on a section that holds an address block.

Border

Borders add lines around the edges of an element.

Border mode

• All sides — Same border on all four edges. The simplest option.
• Per side — Set a different border for each edge (top, right, bottom, left). Useful when you want a line only at the bottom of a section, for example.

Properties

• Width — Thickness in pixels. Set to 0 for no border.
• Style — Solid, dashed, dotted, double, groove, ridge, or none.
• Color — Any color via the picker or a hex code.
• Radius — Corner rounding in pixels. 0 gives square corners, higher values create rounded corners.

Padding

Padding is the inner spacing between an element’s edge and its content. It prevents text from touching the border or background edge.

Like borders, you can set padding uniformly on all sides or individually per side. Values are in pixels.

Padding is available on text elements, sections, headers, footers, and table cells. A value of 4–8px is usually enough to keep content from feeling cramped.

What you can style on each element

Not every element supports every option. Here’s a quick overview:

Page-level defaults

When no element is selected (click an empty area of the canvas or select “Page” in the Layers panel), the right panel shows page-level settings:

• Body Typography — Default font, size, weight, color, and line height for the entire template. New text elements inherit these values.
• Fill — Page background color.
• Safe Margins — The space between the page edge and your content, in millimeters. See Page Settings for details.

Setting good defaults at the page level means less styling work on individual elements.

Next steps

• Page Settings — Configure page format, margins, and default typography
• Components — Learn about each element type
• Tables — Detailed guide on table styling