SparkTrail Brand Guidelines
Logo usage and brand standards
Logo Variants
Full Logo
Spark Trail
Primary logo for navbar, homepage, and marketing materials.
<SparkTrailLogo variant="full" />Icon Only
App icon, favicon, and small spaces.
<SparkTrailLogo variant="icon" />Wordmark Only
Spark Trail
Social headers, print materials, and text-heavy contexts.
<SparkTrailLogo variant="wordmark" />Size Variations
Small
Spark Trail
size="small"Medium
Spark Trail
size="medium"Large
Spark Trail
size="large"Background Variations
On White
Spark Trail
On Light
Spark Trail
On Dark
Dark variant needed
Icon Component
Default
With Background
Custom Color
Large Size
<SparkTrailIcon :size="40" color="#9333EA" :background="false" />Usage Guidelines
Do's
- ✓ Use the full logo in the navbar and homepage
- ✓ Maintain clear space around the logo equal to the icon height
- ✓ Use the icon-only variant for favicons and app icons
- ✓ Apply the wordmark-only variant in text-heavy contexts
- ✓ Keep the gradient direction consistent (left to right)
Don'ts
- ✗ Don't rotate or skew the logo
- ✗ Don't change the gradient colors
- ✗ Don't add drop shadows or effects
- ✗ Don't use the logo smaller than 32px height
- ✗ Don't place on busy backgrounds without proper contrast