Choosing what to encode

Pick a content type in The Studio → Content. A URL opens a web page; Wi-Fi joins a network (SSID, password, security); a vCard adds a contact; and there are types for email, SMS, WhatsApp, calendar events, geolocation, crypto and real country payments (SEPA, UPI, Pix, PromptPay, PayNow, VietQR, PayPal/Venmo/Cash App).

More data makes a denser code. For long text or a vCard with lots of fields, keep the URL short where you can and test with the scan self-test below.

Colours & gradients

Set a foreground (the dark modules) and background under Colours. The key rule is contrast: scanners need clearly darker modules on a lighter background. If the live warning appears, use Fix — it nudges the two colours apart while keeping their hue.

Gradients (linear or radial) can be applied to the modules, background, eyes and frame. Keep the darkest gradient stop dark enough to stay readable.

Module shape (incl. the hat)

Under Shape, choose square, rounded, dots, classy, connected ("liquid"), or the hat — the 2023 aperiodic monotile. Rounder and more decorative styles are lower-contrast at the module edges, so bump error correction and run the scan test if you push them hard.

Error correction (L / M / Q / H)

Error correction adds redundancy so a code still reads when it's dirty, curved, or partly covered. L ≈ 7% recoverable, M ≈ 15%, Q ≈ 25%, H ≈ 30% — but higher levels make a denser code.

Rule of thumb: M for most codes, Q or H if you embed a logo or print small/on an uneven surface.

Custom finder "eyes"

The three big corner squares are the finder patterns ("eyes"). Under Eyes you can recolour and reshape their frame and pupil, and style each eye independently. Keep them clearly darker than the background — scanners rely on them to locate the code.

Adding a logo

Under Logo, drop in an image and set its size and backing. A logo covers part of the code, so raise error correction to H and keep the logo under roughly 20–25% of the width. "Theme from logo" matches the code colour to your logo.

Always run the scan self-test after adding a logo.

Frames & a call to action

Under Decorate you can wrap the code in a card, a labelled banner ("SCAN ME"), or a circular badge/ring — a real, scannable square code stays inside. Background motifs and sprinkles fill the frame. Add a short call-to-action so people know to scan.

Keeping codes scannable

Watch the live scannability warning while you design, and use Verify scan to run the self-test — it rasterises your styled code, decodes it with a real reader at shrinking sizes, and gives a 0–100 confidence score.

Before printing: keep good contrast, a quiet-zone margin, enough error correction, and do a real test scan with a couple of phones.

Which export format?

Use SVG or PDF/EPS for print (vector, crisp at any size), and PNG (or WebP/JPG) for the web. The print-ready PDF lets you set an exact physical size in mm/inch with optional bleed and crop marks. Everything exports in your browser — nothing is uploaded.

Batch generation

Need many codes? Paste a list or CSV to generate them in one go and download them individually or as a ZIP — styled consistently with your current design.