Music Quizly · June 2026
Brand guidelines
Music Quizly is a white mark on a blue-to-pink gradient. Use the logo when the full name fits, and the M icon when it does not.
Logo and icon
Always use the supplied files. Never redraw or retype the logo or icon.
Logo
Primary logo. Use wherever the full name fits, on any light or dark background. Minimum width: 120 px on screen, 30 mm in print.
App icon
App icon. Use for app icons, favicons, avatars and any space too small for the full logo (under 120 px wide). Minimum size: 16 px.
With background
Ready-made versions for app icons, store listings and profile images. Use them as supplied; the background is part of the file. The icon is a plain square, as phones and app stores round the corners themselves.
Colour
The brand gradient runs left to right from Quizly Blue to Quizly Pink, with no other colours in between. Never reverse it.
Quizly Blue
Midpoint
Quizly Pink
White
Night
Text on colourWhite text meets accessibility contrast on Quizly Blue and the Midpoint, but not on Quizly Pink, so use Night text on pink.
One-colour printUse the Midpoint where a gradient is not possible, such as one-colour print.
Clear space and size
| Logo | 120 px wide on screen, 30 mm wide in print |
|---|---|
| Icon | 16 px for a favicon; 32 px when other content is nearby |
Do and don't
DO
Use on light backgrounds
DO
Use on dark backgrounds
DO
Use the icon when space is small
DON'T
Stretch, skew, or rotate
DON'T
Flatten or recolour the gradient
DON'T
Reverse the gradient
DON'T
Place on blue, purple, or pink backgrounds
DON'T
Add shadows, glows, or bevels
Typeface
Lexend is for titles and headings. Space Grotesk is for body text. Both fonts are free from Google Fonts. Where they are not available, use the default sans-serif font. The logo is artwork, not a typeface, so always use the supplied files.
Lexend · titles
Guess the song.
Space Grotesk · body
Music Quizly is a white mark on a blue-to-pink gradient. Use the logo when the full name fits, and the M icon when it does not.
Download
SVG and PNG for screen, one-colour black and white files, ready-made versions with the background included, and the favicon. The zip contains every file. The PDF is this guide.
| Guidelines | music-quizly-brand-guidelines.pdf |
|---|---|
| All files | music-quizly-brand-assets.zip |
| Logo SVG Colour | music-quizly-logo.svg (Colour) |
| Logo SVG White | music-quizly-logo-white.svg (White) |
| Logo SVG Black | music-quizly-logo-black.svg (Black) |
| Logo PNG 600 × 300 | music-quizly-logo-600.png (600 × 300) |
| Logo PNG 1200 × 600 | music-quizly-logo-1200.png (1200 × 600) |
| Icon SVG Colour | music-quizly-icon.svg (Colour) |
| Icon SVG White | music-quizly-icon-white.svg (White) |
| Icon SVG Black | music-quizly-icon-black.svg (Black) |
| Icon PNG 512 | music-quizly-icon-512.png (512) |
| Icon PNG 192 | music-quizly-icon-192.png (192) |
| Icon PNG 180 | music-quizly-icon-180.png (180) |
| Icon PNG 32 | music-quizly-icon-32.png (32) |
| Icon PNG 16 | music-quizly-icon-16.png (16) |
| Icon ICO Favicon | favicon.ico (Favicon) |
| Logo SVG | music-quizly-logo-bg.svg (With background) |
| Icon SVG | music-quizly-icon-bg.svg (With background) |
| Icon PNG | music-quizly-icon-bg-1024.png (1024) |
| Icon PNG | music-quizly-icon-bg-512.png (512) |
| Icon PNG | music-quizly-icon-bg-192.png (192) |
| Icon PNG | music-quizly-icon-bg-180.png (180) |