QR Code Design Principles That Stay On-Brand and Still Scan

A QR codeA 2D matrix barcode that encodes data in a square grid of black and white modules. Read more → is one of the few brand surfaces where the design has to satisfy a machine before it satisfies a human. The phone camera doesn’t care that the modulesA single black or white square in the QR grid. The number of modules per side scales with the QR versionThe size of a QR code, numbered 1 (21×21 modules) through 40 (177×177). Higher versions store more data but require more printed space. Read more →, from 21×21 modules for version 1 up to 177×177 for version 40. Read more → are rounded into elegant little dots and the eyes are softened to match the wordmark. It cares that the dark-light threshold is unambiguous, the finder patternsThe three large squares in the corners (top-left, top-right, bottom-left) of every QR code. Scanners use them to detect a QR in the camera frame, lock onto it, and determine its orientation. Read more → are intact, and enough of the data area survives whatever damage, occlusion, or print noise the symbol picks up between the artboard and the customer’s hand.

Most of the QR designs that fail in production fail because the design team optimised for the human side first and verified the machine side last. The principles below run the other way: start with the constraints the QR specification (ISO/IEC 18004The international standard that defines the QR code format. First published in 2000 and revised in 2015, it specifies module structure, finder/alignment patternsSmaller square patterns scattered through QR codes from version 2 onward. They help scanners correct for perspective distortion when the code is photographed at an angle, on curved surfaces, or with a wide-angle lens. Read more →, error correctionMathematical redundancy built into every QR code that lets it scan correctly even if part of the matrix is damaged, dirty, smudged, or covered (for example by a logo). Read more →, encoding modesHow a QR code packs its payload — numeric (most efficient for digits), alphanumeric (digits + uppercase + a few symbols), byte (8-bit, used for URLs and Unicode), or Kanji (Japanese characters in Shift JIS). Read more →, and reading procedures. Read more →) actually imposes, then layer brand on top inside the room those constraints leave you. For pre-press details on contrast and quiet zoneThe unprinted margin of at least four modules' width that must surround every QR code. Read more →, the print-ready checklist goes deeper; this post is about what happens before you reach the printer.

Error correction is the first design decision, not the last

Every QR code carries Reed-Solomon redundancy so it can be recovered from physical damage. ISO/IEC 18004 defines four levels:

• L (Low) restores about 7% of the symbol.
• M (Medium) restores about 15%.
• Q (Quartile) restores about 25%.
• H (High) restores about 30%.

The trade-off the marketing copy never explains: that redundancy is encoded as extra modules. At a fixed payload, L produces the smallest, lowest-density symbol; H produces the largest, densest one. At a fixed physical size, L gives you headroom to encode a longer URL; H forces a shorter URL or a denser module grid.

In practice, the decision tree is shorter than people think:

• No logo, clean digital placement. Use M. It absorbs minor compression and screen-rendering artifacts without inflating the symbol.
• No logo, printed material. M for clean substrates (uncoated paper, vinyl), Q if you expect wear, scuffing, or outdoor exposure.
• Logo embedded. H, every time. The logo masks data modules; the recovery budget has to cover that masking plus normal print noise.
• Industrial or harsh environment. H. Heat, abrasion, sun bleaching, and label peeling all eat into the symbol. The extra redundancy is what keeps it readable in year three.

The honest comparison is below. Each level can lose roughly the indicated fraction of the symbol and still decode, which is why the H-level code can carry a logo where the L-level one can’t.

The mistake to avoid is defaulting to H “for safety”. H pays a real cost in module density, which makes the code harder to read at small print sizes and on weak cameras. Match the level to the surface, not to the worst-case scenario you can imagine.

Module shape: square is universal, rounded is fashion

The QR specification doesn’t say modules have to be square. It says they have to be distinguishable as dark or light cells on a regular grid. That leaves room for visual styling.

• Square modules. Universal. Every scanner ever built handles them. Default unless you have a specific reason to deviate.
• Rounded squares. Modern phone cameras handle these without trouble. Some older POS scanners and industrial barcode readers struggle because their thresholding assumes hard cell boundaries.
• Dot modules (circles). The biggest risk. Adjacent dots leave a small light gap between them, which some decoders read as a column or row of light modules. iPhones and current Android phones handle dots fine; budget Android scanners and embedded barcode readers don’t always.
• Custom geometric (diamonds, plus signs, leaf shapes). Cosmetic and unpredictable. Test before committing.

The rule of thumb is straightforward: the broader the audience and the older the device fleet, the more conservative the module shape. A consumer-facing menu QR can run rounded modules safely. A QR on a manufacturing parts label that gets scanned by a fixed-mount industrial reader should stay square.

Eye and finder pattern customisation

The three large squares in the corners of every QR code are the finder patterns. The decoder uses them to locate, orient, and de-skew the symbol before reading the data. They are the most important visual elements in the code, and the most over-customised.

What’s safe:

• Rounding the outer ring. A subtle radius on the outer 7×7 frame is almost always fine. Modern decoders find the pattern by detecting the distinctive 1:1:3:1:1 dark-light ratio across the centre, not by recognising the corners.
• Rounding the inner pupil. Same logic — the ratio is what matters, not the geometry.
• Mismatched eyes. Three different eye styles (one square, one rounded, one circular) will scan on most phones but increasingly look like a design experiment. Stay consistent unless brand requires otherwise.

What’s risky:

• Hollow eyes (outer ring only, no centre dot). Breaks the 1:1:3:1:1 ratio. Many decoders fail.
• Eyes filled with a logo or icon. Same problem. The finder pattern is no longer a finder pattern.
• Eyes the wrong colour. Light eyes on a dark module field invert the contrast the decoder expects. Some scanners cope; many don’t.

If the design system pushes for radically reshaped eyes, the safe path is to test on at least five phones spanning three years of hardware before committing the design to print.

Embedded logos: position, size, and the H-level requirement

Centred logos are the single most common brand customisation, and the one most likely to break a code that worked in the artboard.

Three rules cover almost every case:

1. Logo size capped at ~20% of QR width. This is the design target. 25% is the absolute maximum at H-level correction. Past 30%, even H stops being enough.
2. Always centred, never near the corners. The finder patterns occupy the three corners. A logo that bleeds into a corner masks a finder pattern, and no error correction level recovers a missing finder pattern.
3. Error correction H is mandatory. The 30% recovery budget is what lets the decoder reconstruct the modules the logo masks. At any lower level, the masking exceeds the recovery and the code fails.

A subtler point: the logo should be opaque, not semi-transparent. A semi-transparent logo lets the dark modules underneath show through faintly, which confuses the decoder’s threshold step. Either fully cover the modules with a clean shape, or don’t add a logo at all. The same applies to drop shadows and glow effects around the logo — they leak greyscale into the binary grid the decoder expects.

For codes that need both a logo and a smaller physical size, increase the printed size before lowering the error correction level. A larger H-level code outperforms a smaller M-level code in almost every real environment.

Colour palettes that maintain contrast

The QR specification was written assuming dark-on-light. Most decoders enforce that. Designs that flip the polarity (light modules on dark background) work on iPhones running iOS 11 and later, fail on a noticeable share of Android decoders, and fail outright on most fixed-mount scanners. Inversion is not in the spec; treat it as unsupported unless your audience is exclusively modern iPhones.

Inside the dark-on-light constraint, you have meaningful room:

• Dark navy, deep green, burgundy, dark brown, charcoal. All work as foreground colours when paired with a true white or warm cream background.
• Brand red and orange. Tend to fail contrast checks because they read as mid-tone to a camera. Test before approving.
• Pure black on pure white. The safest, most boring, most reliable choice. Pick this when the surface matters more than the brand expression.

Measure with a contrast tool, not by eye. WCAG 4:1 is the minimum I’d accept for any printed code; 7:1 is what I’d target for outdoor or rough-surface placements. Camera sensors lose dynamic range in low light, and a 4:1 ratio in your design tool can become 2.5:1 on a phone in a dim restaurant. The pre-press contrast checks cover the verification workflow.

Gradients are a trap

Gradient-filled QR codes are the design trend that fails most predictably in production. The decoder thresholds the image into binary modules. A gradient that runs from dark navy to bright cyan crosses the dark-light threshold somewhere in the middle of the symbol. Modules on the dark side of the gradient register as dark; modules on the light side register as light. The data flips.

If a gradient is a non-negotiable brand requirement:

• Keep both endpoints firmly on the dark side of the threshold. Navy to slightly lighter navy is fine. Navy to teal is not.
• Run the gradient diagonally, not edge-to-edge in one axis. A diagonal gradient distributes the lightening more evenly across the modules.
• Test the printed result on three phones before scaling. The print process compresses dynamic range further; what looks safe on screen may not survive the press.

In almost every case, a flat dark colour outperforms a gradient and the brand penalty is smaller than the design team expects. Save the gradient for the background art around the QR, not the symbol itself.

Frames, calls-to-action, and the quiet zone

The quiet zone is the four-module-wide blank margin around every QR code. It’s part of the symbol — the decoder uses the contrast between the modules and that empty margin to find the boundaries. Frames that touch the quiet zone are the second-most common production mistake after gradient codes.

Safe framing patterns:

• Caption frame outside the quiet zone. A border or coloured rectangle that sits at least four modules away from the QR’s outer edge. Adds the “Scan me” affordance without invading the symbol.
• Bottom-only label. A coloured strip below the QR (with the quiet zone preserved) carrying the call-to-action. Works on packaging and table tents.
• Coloured background filling the quiet zone. Risky but workable if the colour is light enough to maintain contrast with the dark modules. Treat the entire region inside the frame as part of the quiet zone.

Unsafe patterns:

• Tight decorative frames hugging the modules. Eats the quiet zone. Detection slows or fails.
• Text or icons inside the quiet zone. Same problem.
• Drop shadows on the QR itself. The shadow blends the boundary the decoder needs.

The framing serves a real function: it tells humans “this is a QR code” and gives them a reason to scan. The quiet zone serves a different function: it tells the camera where the code ends. Both have to coexist; the frame lives outside the quiet zone, full stop.

When to break the rules and when not to

Most of the principles above can be bent for specific surfaces. The bending that works:

• Premium hospitality (hotel welcome cards, restaurant menus in fine-dining settings). Soft module shapes, custom eye styling, brand-coloured foreground, embedded wordmark logo at 18% width with H-level correction. The audience scans on modern phones in good light. Aesthetic investment pays off.
• Outdoor signage and packaging. Stay conservative. Square modules, square eyes, dark-on-light, no logo, M or Q correction. The variance in scan environment punishes design ambition.
• Industrial, healthcare, or compliance contexts. Black on white, square modules, M correction, no customisation. The cost of one failed scan is high enough that brand consistency comes second.
• Small print sizes (under 2 cm). Skip the logo and any module shape that softens the boundary. At small sizes, every pixel of the camera’s threshold matters.

The principle behind the rules is simple: every customisation is a tax on scan reliabilityHow consistently a QR code scans across different devices, lighting conditions, distances, and orientations. Read more →, and you have to know how much tax the surface can afford. A clean restaurant menu can afford the tax. A delivery label can’t.

Sign-off checklist before you ship

Before any branded QR code goes to print or production:

1. Error correction level matches the surface (M for clean print, Q for wear, H for embedded logo).
2. Logo (if present) is centred, opaque, and ≤20% of QR width.
3. Module shape is appropriate for the device fleet (square as default; rounded only if all scanners support it).
4. Eyes preserve the 1:1:3:1:1 ratio; no hollow rings, no inset icons.
5. Foreground is dark, background is light, contrast measured ≥4:1.
6. Quiet zone is at least four modules clear; no frames, copy, or shadows inside it.
7. Final design tested on at least three phones spanning two generations of camera hardware.

A QR code that satisfies all seven looks unambiguously branded and scans on the first try. One that skips any of them is gambling on the next batch of customers.

Wrap-up

QR design works because the constraints are knowable. Error correction is a budget, not a setting. Module shape and eye styling are licenses the audience’s hardware grants you, not preferences. Logos work at H-level correction and 20% width; everywhere else they don’t. Colour and gradient choices live or die at the threshold step. The quiet zone is part of the symbol, not the layout. Stay inside those lines and the code can wear the brand without losing the function it exists to perform.

Sources

• ISO/IEC 18004:2015 — The QR code symbology specification, including the four error correction levels (L/M/Q/H), Reed-Solomon recovery percentages, and finder pattern requirements.
• Denso Wave — About QR Code — The original QR code developer’s reference for module structure, error correction, and version capacity tables.
• Wikipedia — QR code — Background on QR structure, error correction levels, and module/version capacity that informs the design trade-offs in this post.