QR design customization

Every QR code you build in the dashboard, or generate through the customer API, can be tuned along the same dimensions: shape, color, logo, frame, quiet zone, error correction, and security. Here is the full inventory of what you can change.

Shape

The QR pattern has three structural pieces, and each can be styled independently.

Styling the three finder eyes and their inner dots separately from the body is what makes a QR look designed rather than generated. A common recipe is a rounded body with extra-rounded eyes and a dot inner dot.

Rule of thumb: rounded body + extra-rounded eyes is the safe, modern default; it is legible on any phone camera and prints well at small sizes. Use dots for a softer look on packaging; use square when you need maximum contrast for small-print scanning.

Color

Color is set per element, and every color slot accepts either a solid color or a gradient.

Setting distinct dots / eye / eye-dot colors lets you match a brand palette precisely. A transparent background lets the QR sit on a colored surface or photo, which is why transparent is supported as a background color.

Gradients

Any color slot (dots, corner-square, corner-dot, background) can take a gradient instead of a solid color. A gradient is:

A two-stop linear gradient on the dots is the most common brand treatment. Keep both stops dark against a light background so the contrast stays high enough to scan.

Logo

You can drop a center logo into any code and control how it sits in the pattern.

A logo physically occludes part of the pattern, so raise the error-correction level when you add one (see below). The combination of hideBackgroundDots: true and error-correction H is the reliable recipe for a logo that always scans.

Quiet zone (margin)

The margin is the empty border (the “quiet zone”) around the QR. Cameras need it to isolate the pattern from surrounding artwork. Do not set it to 0 for print. A margin of at least the width of a few modules is the safe minimum, and more helps when the QR is printed against a busy background.

Error correction

The error-correction level (ECL) is how much of the QR can be physically damaged or occluded before it becomes unreadable.

Higher ECL means a denser code (more modules), so the printed QR has to be slightly larger for the same scan distance.

Scannability guidance

Design freedom is only useful if the code still scans. Two rules cover almost every failure:

• Keep contrast high. A pale grey QR on a white page, or a light gradient stop against a light background, often fails. Dark pattern on a light background is the safe baseline. If you use transparent, make sure the surface behind it stays light.
• Raise ECL when you add a logo. A center logo occludes modules. Pair a logo with error-correction Q or H and turn on hideBackgroundDots.

Always test a printed proof at the real size and distance before committing a run.

Security and expiry

These features apply to dynamic codes and stack. You can password-protect and set an expiry, encrypt and set an expiry, or combine all three.

For encrypted modes, save the generated key the first time it is shown. It cannot be recovered later.

Presets and brand kits

• Design presets. The builder ships 12 ready-made looks (6 styles plus 6 industry starting points with matching frame captions) so you can start from a designed code and tweak. Over the API and in bulk uploads, pass preset with one of classic, soft, dots, ocean, sunset, contrast-eyes, menu, bizcard, wifi, event, boutique, cafe; the server expands it to the same pixels as the dashboard.
• Brand kits. Save your complete design (colors, gradients, eyes, logo, frame, shape) as a reusable brand kit and apply it to every new code with one click. Over the API and in bulk uploads, pass brandKitId; the kit’s full captured style is expanded server-side and the kit stays associated with the code.

Frames and call-to-action labels

A frame wraps a decorative border, and optionally a call-to-action caption like “SCAN ME”, around the code. Framed codes measurably lift scan rates on print.

In the builder, pick a frame from the style panel’s frame row, then set the caption text, colors, and font. Over the API, pass a frame object (only id is required):

{
  "data": "https://yourcompany.com/menu",
  "dataType": "url",
  "frame": {
    "id": "scanme",
    "text": "Scan me",
    "color": "#2563eb",
    "textColor": "#ffffff",
    "background": "#ffffff",
    "font": "display",
    "uppercase": true
  }
}

The caption is capped at 24 characters (uppercase by default; set uppercase: false to keep your casing). font is one of sans, serif, mono, display, rounded. The framed image is larger than the bare code (it adds the border and caption around it).

If you need the full styling surface programmatically, it is all available on the QR API.