Design System · Slices 1 & 2

MoTZ Style Guide

Live reference: tokens + components. Verify against docs/DESIGN.md.

Brand: logo, mascot & text

Logo lockups (light ink · on dark)

Mark of The ZealMark of The ZealMark of The Zeal

Dark ink · on light surface

Mark of The ZealMark of The Zeal

Ego mascot

Ego mascot: default
Ego mascot: guide
Ego mascot: detective

Text helpers

MoTZ is Legendary · New Winner!

Characters (MAR-151)

EgoEmptyState · pose × heading × description × action slot

Ego mascot: guide

Guide

Points at CTAs / onboarding.

Ego mascot: detective

Detective

Nothing found / empty search.

Ego mascot: meditate

Meditate

Quiet / pending / waiting.

Ego mascot: ronin

Ronin

Wallet / chain contexts.

EgoCelebration · success moment (gold glow ring + happy Ego)

Ego mascot: default

Wallet linked!

Your Ronin account is connected. Welcome to the squad.

BrandedLoader · flame-leaf spin (sm · md · lg) + CoinLoader gif

Loadingsm
Loadingmd
Loadinglg
Loading valueCoinLoader

EgoEmoji · 10 reaction faces, keyed by semantic alias

cutecutepleading
nicenicetroll grin
nervousnervoussweating
squadsquadtwo Egos
dazeddazedrekt
crycrysobbing
cheerscheerstoast
ragerageanger
policepolicecop
skillissueskillissuetaunt

Brand colors

Motz Red

#FF2A55

Primary actions, logo, highlights

Winner Gold

#fbbf24

Currency, winning states, emphasis

Electric Purple

#7000ff

Secondary brand, gradients

Mavis Blue

#0e7de9

Info, links, accents

Void

#0F0518

Main background (purple-cast)

Text · warm stone scale (MAR-148)

Aa

#F5F5F4

--foreground

Aa

#A8A29E

--muted-foreground

Aa

#78716C

captions / disabled

Gradients

Signature (gold→red→purple)
Primary button (red)
Gold / secondary
Card tint (purple)

Typography

Heading 1 · Fredoka Bold 36/48

The quick brown fox jumps over the lazy dog

Heading 2 · Fredoka Bold 30/36

The quick brown fox jumps over the lazy dog

Heading 3 · Fredoka SemiBold 24/32

The quick brown fox jumps over the lazy dog

Heading 4 · Fredoka Medium 20/28

The quick brown fox jumps over the lazy dog

Body Large · Inter Regular 18

The quick brown fox jumps over the lazy dog

Body Default · Inter Regular 16

The quick brown fox jumps over the lazy dog

Caption · Inter Regular 14

The quick brown fox jumps over the lazy dog

Overline · 12 UPPERCASE

The quick brown fox jumps over the lazy dog

Text effects

Gradient (gold)

Legendary Item

Gradient (brand)

MoTZ Revolution

Glow (red)

New Winner!

Glass surface (MAR-148)

glass-card utility

Frosted panel

Gradient fill + white-tinted border + soft shadow with an inset top highlight.

card-energy (hover)

Hover me

Lifts −4px & scales 1.01, with a tri-color top line + purple corner bloom.

Motion (MAR-148)

animate-float

Ego mascot: default

animate-pulse-dot

Live

button hover lift

Console instruments (MAR-250)

console-rail + animate-rail-sweep

dial-arc (hover)

console-scan (hover)

Hover: a gold scan line sweeps the panel.

stage-spotlight + animate-spot-breathe

The games stage’s slow gold house light.

sigil-grid (static)

ZF

energy-dial (voyages dock)

42/ 60Coin energy
9/ 12Key energy
Dormant

Quest board (MAR-254)

Ready

Set sail

Voyage actions ready

The home board’s signature: a perforated quest ticket — accent stub, state lamp (breathing only on a READY ticket), tear seam, notched corner. Accent rides --quest-c.

Set sail

feed-beat (guild pulse keyline)

A short pink charge travels the feed’s keyline every few seconds — invisible at rest, dead under reduced motion.

Eyebrow label (MAR-148)

Season 1 LiveNew Drop

Buttons

Form elements

RON

Badges

Gen 05,000 RON24h Left+12.5%FounderOutline

Status dot · leading pulse, color follows the badge (dot prop)

Season 1 LiveOnlineMinting

Card

Default · calm data surface

Gen 024h Left
Ego #888
Legendary • Founder

Price

5,000 RON

USD

$8,240

Interactive · glass + lift/glow on hover (interactive prop)

Gen 0Live
Ego #888
Hover: lifts, warms to gold, purple bloom

Use for link cards (hub launchers, gallery tiles), never for static data surfaces.

Surfaces & notices

The four surfaces · card · stat · row · hero (overlay = dialog/popover)

surface-card
rounded-2xl · border-white/10 · bg-card · p-6

surface-stat

1,240

rounded-2xl · bg-white/[0.03] · p-4

  • surface-row · rounded-xl · border · p-3list row
  • …with the one row hover tint (white/[0.03])hover me

Banner · one warning + one success recipe for an inline notice

You are viewing an archived version. The whole strip is gold, because the whole sentence is the caution.
You're all set. Body copy stays in the ambient ink — a green wall of text reads as an alert, not a confirmation.

CardEmptyBody · an empty card body fills its grid height, never stretches

Empty glance card
Ego mascot: detective

Nothing here yet. The Ego pose is the sanctioned filler.

Its tall sibling
In a CardGrid this one sets the row height…

…and the empty card beside it fills that height instead of stranding one line at the top. The page-level block stays `EgoEmptyState`, which brings its own frame and must not be nested inside a Card.

Tabs & navigation

Glass segmented · active = Motz Red

Market content

Underline · active = Winner Gold

Showing all

Dialog & avatar

MZE

AlertDialog

Typed-CONFIRM dialog (MAR-219)

The admin console's strongest confirmation: the operator must type the exact word CONFIRM AND supply a reason for the audit log before Confirm enables. Word, label and wrong-word copy mirror the Discord bot's deny modal verbatim, so an admin meets identical wording on both surfaces. Type a wrong word to see the inline hint.

Sonner

Table

Data table with header and rows

ItemValue (USD)Status
Ego #888$8,240Listed
Moki #442$3,100Draft
Ronaldo #101$1,450Unpriced

Select

Select dropdown with options

Pagination

Pagination control · 3 pages

Assets dashboard kit (MAR-128)

MoneyValue · the money renderer (Inter · tabular · semantic color)

Signed PNL

+$3,210.00
-$42.00
+$0.00

Plain / estimate

$12,480.00
≈ $12,480.00
≈ +$320.00

Token + ≈USD

1.5 RON≈ $3,910.00

Stat band · 4 glass panels (hero = Est. value) + loading

Est. value
$12,480.00

prices updated 4m ago

Invested
$9,120.00
Profit (all-time)
+$3,210.00
Needs pricing
⚠ 3
Est. value

View switcher (red pill = where you are) + range tabs (gold = money period)

Provenance trail · the signature element (incl. recognition affordance)

Allocation bar · invested share by collection (tap a segment/legend)

Allocation by collection: Moki 57%, Ego Genesis 29%, Ronin Ronaldo 13%, Pixel Pups <1%.

Profit-over-time · PnlBarChart (12 weekly buckets, green/rose split)

Profit by week: net +$865.00 across 12 weeks. Jan 5 +$220.00, Jan 12 -$85.00, Jan 19 +$140.00, Jan 26 +$60.00, Feb 2 -$210.00, Feb 9 +$310.00, Feb 16 +$45.00, Feb 23 -$30.00, Mar 2 +$180.00, Mar 9 -$120.00, Mar 16 +$260.00, Mar 23 +$95.00.

Loading skeletons (ledger rows)

Status glossary (MAR-128 tooltips)

Every status badge on the assets dashboard explains itself on hover, keyboard focus, or tap. Hover (or tap) a chip to see its tooltip; the same plain-language description renders inline here as a living glossary.

Confidence chips

  • We matched this sale to its on-chain payment, so the price shown is what actually changed hands.
  • We couldn't find what you paid for this. Set a price or mark it as a gift on the asset page so your totals stay accurate.
  • This was bought together with other items in one payment, so we split the total across them. This item's share is an estimate.
  • You entered this price yourself, and we use it as what you paid instead of an on-chain figure.

Source

  • This was minted straight to your wallet rather than bought, so it has no purchase price.
  • You bought this on a marketplace, and the price you paid is what it cost.
  • This moved in from another wallet you own, so what you originally paid carries over instead of counting as a new buy.
  • This came from a wallet we don't recognize, so we don't know its purchase price. If the wallet is yours, add it to bring over what you paid.
  • Tells us the wallet this came from is yours. We'll add it and pull in the original purchase prices for anything sent from it.

Sold & sent

  • You sold this, so what it sold for and your profit or loss count toward your totals.
  • You transferred this out without selling, so it left your holdings with nothing received and what you paid is treated as given away.
  • This was sent to a burn address and destroyed, leaving your holdings with nothing received.

Wallet sync

  • This wallet is waiting to sync. Its history will start loading shortly.
  • We're loading this wallet's on-chain history now, and its numbers will fill in as it finishes.
  • This wallet synced recently, so its holdings and history are current.
  • It's been a while since this wallet synced. We're refreshing it in the background.
  • This wallet hasn't been active in a long time, so its numbers may lag until the next background refresh.
  • We're re-checking this wallet after a change. This is usually quick.
  • Something went wrong syncing this wallet. We'll try again automatically.
  • This wallet has more activity than we can fully track. Your current holdings still show, but its full history and profit or loss aren't calculated.
  • Some items used a format we don't support yet, so we set them aside instead of guessing. They're counted but left out of your totals.
  • Your recent activity is already priced and ready to use. We're still filling in older history in the background.

Ledger notices

  • There's too much history here to total it all up, so we haven't built this portfolio's holdings or profit yet. The Activity tab still lists every transfer.
  • You erased a wallet's history, so profit totals no longer reflect your full record.
  • Some items are being re-priced after a recent change, and their values will update shortly.
  • We couldn't value some items because we don't know what you paid. Open the list to set a price for each.

Pricing

  • This estimate uses the collection's current floor, the lowest price anything in it is listed for.
  • This estimate uses the floor price for this asset's specific trait, which can differ from the whole-collection floor.
  • This estimate uses a ready-made grouping of traits chosen for this collection to value it more precisely than the plain floor.
  • The floor prices behind this estimate are more than a day old. We're refreshing them in the background.

Estimates

  • An approximate value based on floor prices, not a completed sale. The real amount depends on what it actually sells for.