MoTZ

Brand Guide

The definitive design system for the MoTZ ecosystem.

V 1.0.0 Alpha ยท Mirrored from motzbrandguide.netlify.app
๐ŸŽฏ

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
Primary Color Download โ†“
Monochrome Black
Monochrome (Black) Download โ†“
Monochrome White
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

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; }