MoTZ Brand Guide

🎯

Mission & Tone

MoTZ aims to be the next powerhouse in the Ronin Ecosystem. We are building a gamified, community-first guild that empowers players, collectors, and creators to thrive in Web3.

⚡

Bold & Energetic

Speak with confidence and excitement. Use exclamation points! Hype up the wins!

🤝

Community First

Inclusive, welcoming, encouraging. Use terms like "Fam", "Squad", "Legends".

🚀

Futuristic & Tech-Savvy

Embrace Web3 terminology but keep it accessible. "Mint", "Vault", "Drop".

🎨

Color Palette

Motz Red

#FF2A55 📋

Primary actions, logo, highlights

Winner Gold

#FBBF24 📋

Currency, winning states, emphasis

Electric Purple

#7000FF 📋

Secondary brand color, gradients

Void Black

#0F0518 📋

Main background

Gradients & Surfaces

Primary Gradient
CTA Buttons

Gold Gradient
Rewards & Rank

Surface Card
Panels & Sections

Glassmorphism
Overlays & Modals

🔤

Typography

Aa

Fredoka

Headings, Buttons, Emphasis

Aa

Inter

Body text, UI labels, long form

H1 · Bold 36/48px

Heading One

H2 · Bold 30/36px

Heading Two

H3 · Semi 24/32px

Heading Three

H4 · Medium 20/28px

Heading Four

Body Large · 18px

The quick brown fox jumps over the lazy dog.

Body · 16px

The quick brown fox jumps over the lazy dog.

Caption · 14px

The quick brown fox jumps over the lazy dog.

Overline · 12px

Overline Text

Text Effects

Gradient Text

Glow Effect

✦

Logo Variations

Primary Color Download ↓

Monochrome (Black) Download ↓

Monochrome (White) Download ↓

👾

Meet Ego

The face of MoTZ. Designed by OxygN. A chunky creature with diamond eyes, horns, and a tail half his body height. Mischievous yet lovable.

Ego (Default)

General branding & identity

😊

Ego (Happy)

Success states & celebrations

👉

Ego (Guide)

Tutorials & tooltips

🔘

Buttons

Primary (game action) · Secondary (transaction) · Gold (rewards) · Glass (connect) · Disabled

🌗

Theme & Modes

Primary: Dark "Void Mode" — Cyberpunk aesthetic, deep void colors. This is our default and identity.

Secondary: Light Mode — For documentation, reading experiences, and daytime usage.

Adaptive Surfaces

Backgrounds auto-switch from white/gray to deep void

Contrast Handling

Text inverts intelligently between modes

Glassmorphism

White opacity (dark) / gray-black opacity (light)

💻

CSS Variables

/* MoTZ Design System */
:root {
  --motz-red: #FF2A55;
  --winner-gold: #FBBF24;
  --electric-purple: #7000FF;
  --void-black: #0F0518;
  --font-heading: 'Fredoka', sans-serif;
  --font-body: 'Inter', sans-serif;
}