Brand / Logo
Logo
The Xuperson mark is always inline SVG — never as <img src>.
It uses currentColor fill, so CSS color
controls the mark color. Four permitted lockups. No others.
Color Lockups
Four permitted color combinations — no others. Never use gradient fills on the mark itself. Never use low-opacity or watermark treatments. Never add drop shadows to the mark.
A — Signature
Champagne on Burgundy · Brand hero, email headers, merch
B — Navigation
Champagne on Ink · Site header, dark footers, dark theme
C — Light
Burgundy on Paper · Light header, print letterhead
D — Mark Only
Burgundy · Transparent · Favicon, app icon, embossed
Logo Animations
Two animation patterns. Pattern A for navigation contexts. Pattern B for hero contexts.
Both respect prefers-reduced-motion.
Pattern A — Nav Gradient Shift
3s ease infinite · Undulating background-position
Sticky navbar · 40–48px · Shrinks on scroll
Pattern B — Conic Fan Orb
4s linear infinite · Conic gradient rotation
Homepage hero · 96–128px · Orbit rings
Sizing Reference
XS · 20px
Favicon
SM · 28px
Navbar compact
MD · 40px
Standard nav
LG · 56px
Footer, hero
XL · 80px
OG images, print
Wordmark: "XUPERSON" · Oswald 600 · letter-spacing: 0.14em · uppercase · always same color as mark · never in serif · never italic.
Clear Space
Minimum clear space on all four sides equals mark width × 0.25. The diagram below shows clear space at the MD (40px) size — minimum clear space is 10px on each side.
Forbidden Variations
✗ Gradient fill on mark
Never use the AI gradient on the mark itself
✗ Rotated / skewed mark
The mark is never rotated or distorted
✗ Low opacity / watermark
Never use opacity < 100% on the mark
✗ Serif wordmark
Wordmark is always Oswald, never Instrument Serif
✗ Drop shadow on mark
Never add box-shadow or text-shadow to the mark
✗ Non-permitted colors
Only the four lockup color combinations are allowed