Design a code that still scans in print
A styled QR code is not a risk if you measure it, and the studio measures it while you work: it renders your actual design, reads it back with two decoders at descending sizes, and tells you the smallest size it survives at. This guide is the order to do things in, the four settings that break codes, and what to check in the last thirty seconds before the file goes to a printer.
Open the studio
- Open the code from your links list. Go to Links and click the row. The panel opens on the right.
- Go to the "Design" tab. It sits between Smart rules and AI art. The panel shows a live preview, a strip of presets and a Scan safety verdict · enough for a quick restyle.
- Press "Open studio". The full studio opens over the list: preview on the left with the safety panel and the export box under it, every control on the right. Your work saves as you go · the header reads Saving… then Saved, so there is no separate save step to forget.
A saved static code is designed in the same studio, reached from Static codes rather than from a link. Everything on this page applies there too, with one difference worth remembering: a static code's payload is the content itself, so it is usually a denser symbol and will ask for a larger print.
Style it, in the order that works
The controls are grouped down the right side of the studio. Working top to bottom saves backtracking, because each group can invalidate choices made after it:
- Presets · a gallery of complete looks. Start here even if you plan to change everything; every preset is a design that already decodes, so you are editing away from a known-good starting point rather than towards one.
- Style · the shape of the pattern. Modules offers Square, Rounded, Classy, Soft, Extra rounded, Bevel, Diamond, Cut, Plus and Squircle. Corner style and Corner center shape the three big finder squares. Fill switches between a solid colour and a linear or radial gradient, and Quick colors is a row of palettes that already pass contrast.
- Corner colors · a disclosure under Style, for colouring the finder squares separately from the rest. Leave it unset and they match the modules, which is the safe default.
- Logo · Upload logo for your own mark, Icon library for a built-in one, and Your uploads to reuse something from earlier. Logo size is capped by what the current error correction can recover, and the cap moves when you change it. Backdrop puts a plate behind the mark; the knockout option clears the modules underneath so the logo is not fighting the pattern.
- Frame · a border, a caption bar above or below, a speech bubble, a ribbon, a button, a card or a badge, plus the caption text and font. A caption that says what happens when you scan does more for scan rate than any colour choice.
- Advanced · a disclosure holding Error correction. Automatic is right almost always; the levels are L (recovers 7%), M (15%), Q (25%) and H (30%). Higher levels survive more damage and need a bigger print.
Read the scan safety panel
Under the preview is the panel that decides whether this design is printable. It reports two different kinds of thing, and the difference matters:
- Predictions · instant, computed from the design. Contrast is the symbol contrast between the code and its background. Logo damage is the share of the symbol your logo covers, stated against what the current error-correction level can rebuild.
- A measurement · the row that matters. taproute rasterises your actual code and reads it back with real decoders at descending sizes. Print at least reports the smallest size that still decoded, with the distance it reads from. Verified names the pixel size it was read back at, and the panel says Scans · verified with 2 decoders when the strict reader agreed as well.
If it says "Does not scan", stop
The studio's own words: "We rendered this code and could not read it back. Do not print it until the warnings above are cleared." The panel is not being cautious · it tried and failed. Undo the last change and watch the verdict come back.
The four settings that break codes
Every one of these is something the studio will warn you about. They are listed here because knowing them in advance is cheaper than meeting them at the end of an afternoon's design work.
- Not enough contrast · a scanner cannot separate light from dark below 3:1, the same floor WCAG 1.4.11 sets for non-text contrast. The pale-brand-colour-on-cream combination is the single most common way a beautiful code fails. Darken the code or lighten the background.
- Light on dark · inverted codes look excellent and read badly on cheap hardware. In the studio's words: "Most phones cope; the cheap scanner at a till often does not, because a reader expects dark marks on a light background." If a till or a warehouse scanner will ever meet this code, do not invert it.
- A transparent background, for print · fine on screen and on any light surface, and a trap on packaging. A transparent quiet zone takes the colour of whatever it lands on, and a dark pack kills the contrast. Pick white.
- A logo bigger than the error correction · past that budget the reader has nothing left to rebuild from. Shrink it, or raise error correction to H · and re-read the minimum print size afterwards, because H needs more paper.
There is a fifth verdict that is a caution rather than a failure. If a design reads on the primary decoder but not the strict one, the panel says so: "A stricter reader (ZXing at default settings) could not read this design back. Phones cope; fixed scanners at tills and warehouses may not." Whether that matters is a question about where the code will live, and only you can answer it.
Export the file
- Check the safety panel one last time. It reflects the live design, not the last saved one, so the verdict you can see is the verdict for the file you are about to download.
- Press "SVG" in the Export box. The button carries the measured minimum print size in millimetres. SVG is the format to send a printer: it is vector, so it stays sharp at any size, and it is what a print shop expects.
- Use "PNG" only for screens. Pick a size first with PNG size. A PNG that looked crisp in a slide will be soft on a poster.
- Scan the file off your own screen. Open the downloaded image, point a phone at it, and confirm it opens what you expect. Thirty seconds, and it is the only check that tests the whole chain rather than the design alone.
Two things the export box will tell you
- Still on the default style · "whatever you download is the look that gets printed". Not a defect · just the one moment where leaving a code unstyled costs something, because a file that has left for a printer is the one thing here that cannot be edited afterwards.
- A photo logo in an SVG · "Your logo is a photo, so the SVG carries a picture inside it and will blur if a printer scales it up." Upload an SVG logo for a file that stays sharp at any size.
Restyling a code that is already out there
Restyling is always safe for the codes already printed. The symbol encodes the short link, and that string is write-once, so nothing you do in the studio can stop printed ink resolving. The studio still raises a note when the design you are editing has already been downloaded, and it is precise about what is actually at stake: "Codes already printed keep working. But anywhere the QR is shown from a link updates immediately, and your next print will not match the last one."
If that matters · a second print run that has to match the first · open Design history at the bottom of the Design tab and restore the version that was exported. Every saved version is listed with where it came from and whether it was exported.
Before the print run
- Print size and quiet zone · the studio gives you the minimum in millimetres, measured for your design. Paper stock, ink spread and the scanning distance are covered properly in Printing QR codes that scan, including why a dark substrate defeats the scanner at a till.
- The argument, not the procedure · Do styled QR codes still scan covers which styling choices are measured to be safe and which are folklore.
- Repointing later · nothing about the design affects your ability to change the destination afterwards. Change where a printed code points.
Questions
Can I put my logo in the middle of a QR code?
Yes. A QR code carries error correction, so a centre logo covering a bounded share of the symbol is rebuilt by the reader. The studio shows the budget as "Logo damage · N% of what H can recover" and warns when the logo exceeds what the current error-correction level can rebuild. The fix is to shrink the logo or raise error correction to H.
Why can I not choose separated circles for the modules?
Because they do not decode dependably. Fully separated circles break the sampling grid a reader uses, and the failure is erratic rather than total: measured across sizes, the style reads at some and not at others, with no pattern a customer could design around. The Soft style gives the same rounded look and reads at every size, so that is what the picker offers.
Can a design change break a code that is already printed?
No. The code encodes its short link, and that string is write-once from the moment the code is published, so restyling cannot alter what printed ink resolves to. What a restyle does change is that your next print will not match the last one, which the studio warns about if the current design has already been downloaded.
How small can I print it?
The studio tells you, per design: it rasterises your actual code, reads it back at descending sizes, and reports the smallest that still works as "Print at least N mm", along with the scanning distance that implies. It is a measurement of your design, not a rule of thumb, so a design with a big logo and a tight palette will honestly ask for more paper.
Does designing a code cost credits?
No. Styling, restyling, the safety check and every export are free and unmetered. You pay to create a dynamic code and you pay per scan; the design studio is not a metered surface.