Brand
Brand Guidelines
Logo usage and brand standards
Logo Variants
Full Logo
SparkTrail
Primary logo for navbar, homepage, and marketing materials.
<SparkTrailLogo variant="full" />Icon Only
App icon, favicon, and small spaces.
<SparkTrailLogo variant="icon" />Wordmark Only
SparkTrail
Social headers, print materials, and text-heavy contexts.
<SparkTrailLogo variant="wordmark" />Size Variations
Small
SparkTrail
size="small"Medium
SparkTrail
size="medium"Large
SparkTrail
size="large"Background Variations
On White
SparkTrail
On Light
SparkTrail
On Dark
Dark variant needed
Icon Component
Default
With Background
Large Size
<SparkTrailIcon :size="40" :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