Quackr Brand Kit
Everything you need to represent Quackr correctly — logos, colours, and type, in one place.
Logos
Always use the official files below — never recreate or retype the logo. Keep clear space around it equal to the height of the duck mark, and don’t place the standard logo on a busy background where it loses contrast (use the reversed version instead).
Primary lockup (vector)
Duck mark + “quackr” wordmark. The master, scalable logo — use this wherever possible.
Download SVG
Primary lockup (raster)
PNG of the full lockup with the black wordmark, for tools that can’t take SVG.
Download PNG
Duck mark (vector)
The duck-in-speech-bubble icon on its own, in full brand colour — teal bubble, yellow duck, red beak. Scalable; use for app icons, favicons, and tight spaces.
Download SVG
Duck mark (raster)
High-res 512px PNG of the same duck mark — for tools that can’t take SVG, and doubles as the app / PWA icon (other sizes 48–384px live in /assets/icons).
Download PNG
Sad Quackr (mascot)
The crying-duck mascot used on error and empty states. Use playfully, never as the logo.
Download PNGColour palette
Click any swatch to copy its hex value. Lead with yellow and teal for brand moments; use blue for interface actions and green for confirmations. Red is an accent only.
Core brand
The signature Quackr colours, taken straight from the logo. Yellow is the personality; teal anchors the mark.
Quackr Yellow
Duck body / brand pop
Duck Gold
Duck shading
Quackr Teal
Speech bubble
Deep Teal
Bubble shadow
Beak Red
Accent only — use sparingly
UI / action
The interface colours used across the product. Blue is the primary action colour; yellow is the high-emphasis CTA.
Action Blue
blue-600 · primary buttons & links
Action Blue (hover)
blue-700
CTA Yellow
yellow-400 · “Buy” CTA
CTA Yellow (hover)
yellow-500
Success Green
green-500 · confirmations
Success Green (hover)
green-600
Neutrals
Text, surfaces, and dark-mode backgrounds. From the Tailwind theme.
Ink
Headings / body text
Slate
Secondary text
Footer Dark
Footer / dark surfaces
Slate 900
Dark-mode background
White
Light-mode background
Typography
Quackr is set in Inter across the product, with Raleway reserved for the wordmark and bold display. Both are free Google Fonts.
Inter
Primary — UI, body & most headings
The quick brown fox jumps over the lazy dog — 0123456789
Loaded from Google Fonts in weights 400, 500, 600, 700. The whole product is set in Inter (the body uses font-inter).
Raleway
Display — the “quackr” wordmark
The quick brown fox jumps over the lazy dog — 0123456789
Loaded at weight 800. Used for the wordmark and bold display moments. Don’t use below 800.
Unicons (uil)
Iconography
The quick brown fox jumps over the lazy dog — 0123456789
The @iconscout/unicons “line” set powers every icon in the product (the uil-* classes). Use line-weight icons consistently.
Do & don’t
Keep the logo consistent and legible everywhere it appears.
Do
- Use the official logo files exactly as supplied.
- Give the logo clear space — at least the height of the duck mark.
- Use the reversed (white) lockup on dark or photo backgrounds.
- Prefer the SVG for anything that scales.
- Keep “quackr” lowercase.
Don’t
- Recolour the duck or wordmark off-palette.
- Stretch, squash, or rotate the logo.
- Add shadows, outlines, or other effects.
- Re-typeset “quackr” in a different font.
- Place the standard logo on a low-contrast background.
- Use the “Sad Quackr” mascot as the brand logo.
Source files
Editable originals for when you need to produce a new format.
These are the official Quackr brand assets. Please use them as-is and don’t alter the logo or colours. Need another format or asset? Get in touch.