States
Section titled “States”QrCode has no interactive states.
| State | Visual change | Tokens |
|---|---|---|
| Default | Dark modules on a light background | qr-foreground, qr-background |
| With logo | A mark on a light square in the centre | qr-background, radius-sm |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Default size | 192 px | |
| Quiet zone | 4 modules | |
| Frame corner radius | 8 px | radius-md |
| Logo area | 20 % of the width | |
| Gap between code and caption | 6 px | space-sm |
| Caption type | Body, small | text.body-sm |
Tokens
Section titled “Tokens”qr-foreground and qr-background are the same in every brand, every mode and in print.
| Token | Light mode | Dark mode |
|---|---|---|
--bigbang-qr-foreground | #000000#000000#000000 | #000000#000000#000000 |
--bigbang-qr-background | #ffffff#ffffff#ffffff | #ffffff#ffffff#ffffff |
--bigbang-radius-md | 8px8px8px | 8px8px8px |
--bigbang-radius-sm | 6px6px6px | 6px6px6px |
--bigbang-space-sm | 6px6px6px | 6px6px6px |
Motion and interaction
Section titled “Motion and interaction”QrCode does not move.