Designing a code
Colours, shapes, logo, frames and stickers, with a scannability check on every change.
Step 2, Design your code is a live preview plus an accordion of sections. Change anything and the preview repaints at once.
Two shortcuts
- Let KuikCode design it (PRO) reads your website's colours and logo and proposes finished, scan-safe designs. Paste the site address, click Extract, pick a variant and Apply design.
- Start from a template opens the template gallery: the KuikCode tab holds house designs, the Saved tab your own. Applying a template replaces the look and keeps your destination.
The sections
| Section | What it controls |
|---|---|
| Colors | Every colour in the design as swatches. Change one and it updates everywhere it appears. Use brand colors applies your Brand Kit; Undo and Restore original step back. |
| General | The code's overall shape and edges, and the centre: nothing, a logo or text. Logo upload, cropping, colour style and font live here. |
| Pattern | The dot pattern, its fill (solid or gradient) and colours, or your own SVG as the module shape. |
| Eyes | The three corner markers: frame and centre shape, roundness, colours. |
| Background | Solid, gradient, image or transparent, with opacity. |
| Borders | An outer and an inner border: style, thickness, fill, glow. |
| Frame | The decorative frame around the code: colour, two colours, gradient, animated shader or a photo, with presets, shape, rotation, repeating text or shapes, an outer ring and shadows. |
| Stickers | Emoji or your own images placed around the frame, with size, angle, layout, flipping and duplication. |
Scannable, always
Under the preview a badge reports how well the design reads. Scannable is green. An amber Scannable, improve contrast means it works but could be safer. A red Hard to scan names the section to fix and links to it. When the editor manages to decode the preview itself the badge says Scan verified. Light dots on a dark background fail on many scanners, so the check nudges towards dark modules.
Logos and stickers
Upload a PNG with transparency for the cleanest result. Remove background offers Quick remove for solid backgrounds, done in your browser, and AI remove for photographs, metered per month by plan.
Brand Kit
Settings, Brand Kit (PRO) stores your logo, brand colours in priority order and two fonts. In the editor they surface as Use brand colors, Use brand logo and a Brand group in every colour picker, so a team designs on-brand without hunting for hex codes.
Templates
Turn on Save as template in Step 3 when creating a code to keep its design for later. Templates appear in the Saved tab of the gallery and, through the API, as templateId on new codes.