Foundations
Logo
The logo serves as the primary visual representation of the brand. It should be designed to reflect the core values, mission, and vision of the brand while being versatile, scalable, and easily recognizable.
Palette
The logo should use the brand's primary colors, adhering to the defined color palette.
Color Variations: light mode and dark mode
Tagline
If a tagline is included, it should be placed appropriately relative to the logo text or icon, with clear spacing and a readable font size.
Alt-text: should always read 8Bit Loot logo
Usage
Aspect Ratio
The logo should maintain consistent proportions. Avoid stretching or distorting the logo
Do
Don't
Color background
Ensure the background color must always be $static-surface-color-default
Do
$static-surface-color-default
Don't
$action-surface-color-hover
File Formats
Use the correct format based on applications
- Vector format (for scaling): SVG, AI, EPS
- Raster format (for web/digital): PNG, AVIF
- Icon format (if applicable): ICO, PNG
PNG
Right click -> Save Image As...
SVG
Right click -> Save Image As...