Logo - Usage
Vend's logos are crafted to deliver consistency, clarity, and scalability across our multi-brand product ecosystem.
Size variants
The normal logo variant is the primary representation of the brand. This version should be used wherever there is adequate space for the logo to display clearly and maintain brand presence.
The small logo variant is optimized for use at reduced sizes, where the normal logo may lose clarity or visual balance.
Light & Dark variants
Most logo components include both regular (non-inverted) and inverted versions. Use the regular/non-inverted logos on light mode or light backgrounds, and use the inverted logos on dark mode or dark backgrounds.
In cases where you’re designing things on dark background, e.g. banners or decorative elements, use the “inverted” logo variants.
Please note: FINN, Bilbasen, Blocket and Tori don’t have inverted variants (because the logos are designed to work on light and dark backgrounds) so always use their regular versions regardless of background.
Scalability
Our logo set is fully scalable. This ensures a clean, balance appearance at all resolutions. By default the height is 32px for the regular logos and the small variants.
Custom scaling in Figma
Aspect ratio is locked for all logos in case you need custom scaling. When scaling logo dimensions, avoid arbitrary values, and use our 8px grid, e.g., 24px, 32px, 40px. This ensures visual consistency across components and maintains clean, proportional rendering at all sizes. Be mindful of brand specific logo guidelines, e.g. Vend has a minimum size of 20px for their logo.
Questions?
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system