MazziveRic

Full-time astronaut & passionate gamer.

Marke

MazziveRic is the hooded figure. A cloaked, silent presence with a crimson-and-white chevron mask, standing in smoke in front of a dark neon city. Everything built for the brand (the studio app, overlays, thumbnails, Stream Deck keys) should feel like his command deck: black, metal, controlled, with red that only burns when something is live.

Public line: Full-time astronaut & passionate gamer. In-world name on the intro: MazziveGaming. Handles everywhere: @mazziveric.

Content fundamentals

Voice. Calm, commanding, few words. He does not explain himself; he issues an order and the system obeys. German (Swiss): never use ß, write "ss" (Grösse, schliessen). Uppercase for labels and commands (set in label / display-*), sentence case for body copy. Address the viewer with "du", never "Sie".

Write commands as verbs, states as short facts.

Instead ofWrite
Stream starten 🎉Übertragung starten
Du bist jetzt live!Signal steht
Aufnahme läuft gerade…Aufzeichnung läuft
Mikrofon stummschaltenRuhe
Highlight hinzufügenMarkieren
Pause-SzeneUnterbrechung
Fehler aufgetretenKein Signal
Erfolgreich gespeichert!Gesichert

Visual foundations

Color. Dark only. Start on void; lay panels in obsidian, raised elements in carbon. Text is bone, secondary text steel, metal highlights silver. Lines that only decorate are gunmetal; any border that tells a control apart is edge.

Red is the mask, so red is rare and means power is on:

Status uses a word plus color: signal = connected/healthy, ember = paused/warning, crimson-glow = off/error. signal and crimson differ in lightness (10.2:1 vs 4.1:1 on obsidian), so they are never told apart by hue alone; still, always print the word.

Type. display (Rajdhani) for anything that is a command, a label or a number, uppercase, tracked 0.04–0.08em. body (Inter) for sentences. wordmark (Michroma) only for the name MAZZIVE when the wordmark image cannot be used. Load from Google Fonts: Rajdhani 500/600/700, Inter 400/500/600, Michroma 400.

Shape. Cut, not rounded. Panels, buttons and tiles lose their top-left and bottom-right corners (cut-md; command tiles cut-lg; chips cut-sm). radius-xs is the only rounding (inputs, meter segments). Borders are 1px: gunmetal decorative, edge for controls.

HUD details (from his stream frame): small silver rivet dots in the corners of panels, a 2px gunmetal rail along panel tops, faint horizontal scanlines over panel bodies (white at 1.5% every 3px). Use bevel on raised metal.

Light. Shadows are glow, not drop shadows. glow-live only on a tile that is live or recording; glow-soft on hover of a command. An idle interface has no glow at all.

Spacing. 4px base: space-1 … space-12. Panels pad space-6 on desktop, space-4 on phones; tiles sit space-4 apart; sections space-8.

Imagery. The key art (Logos/keyart-hooded-figure.png) and the intro frames are the hero imagery: dark, smoke, red neon. Put them on void with heavy dark overlays so UI stays readable; never crop through the mask. The red flare scene and the intermission title are for stream scenes.

Motion. Slow and deliberate: 160–240ms ease-out for state changes; a 1.4s pulse on the live dot only. No bounces.

Focus. A 2px solid crimson-glow outline, offset 2px, on every focusable element (5.4:1 on obsidian, 5.0:1 on carbon).

Iconography

No emoji, no icon font. Simple geometric glyphs drawn as inline SVG or Unicode geometry, 1 ink, in bone or silver (red only when active):

Components

Classic script, no framework: window.MazziveRic exposes small builders that return DOM elements. Load tokens.css, components/bundle.css and components/bundle.js.

Accessibility

Farben

void#050507

Page ground. The black the hooded figure stands in; every screen starts here.

obsidian#0b0b10

Panels and the default surface on top of void.

carbon#15151c

Raised surfaces: tiles, inputs, hovered rows.

gunmetal#2a2a33

Decorative bevels, hairlines and dividers only (1.4:1 on obsidian, not a control border).

edge#666673

Control and focusable borders: 3.5:1 on obsidian, 3.2:1 on carbon, 3.6:1 on void.

steel#8b8f9a

Secondary text and metadata on void (6.3:1), obsidian (6.1:1) and carbon (5.6:1). Not on blood.

silver#d6d8de

Strong secondary text, rivets and HUD metal highlights on any dark surface.

bone#f3f3f5

Primary text on void, obsidian, carbon, blood and crimson-fill.

crimson#e1173f

The mask red. The brand mark color: emblem, live dot, large display text (24px+, 3.8:1 or better on carbon). Not for small text: use crimson-glow.

crimson-glow#ff2d55

Neon: small red text (5.4:1 on obsidian), the focus ring, glows on active/live states.

crimson-fill#c4103a

Fill of command buttons and the active Live tile, with bone text (5.4:1).

blood#6e0a1d

Deep red surfaces: armed/confirm states, muted-mic tile. Bone text on it (11:1).

ember#ff7a1a

Paused recording and warnings. As text on obsidian 7.5:1; as a fill use void text.

on-ember{void}

Text on ember fills (7.8:1).

signal#46d38c

Healthy status only (connected, signal ok). Always paired with a word; 10.2:1 on obsidian.

on-signal{void}

Text on signal fills (10.6:1).

Schrift

display-xl64px · 700

Hero states: the live timer, the empty-state headline.

SIGNAL STEHT
display-l40px · 700

Command tile labels.

ÜBERTRAGUNG
title24px · 600

Panel and section titles, uppercase.

SCHNITT
label14px · 700

Buttons, chips, tabs, uppercase.

AUFZEICHNEN
timer28px · 600

Running timecodes; tabular figures.

01:24:07
body15px · 400

Running text, descriptions.

Die Aufzeichnung läuft auf allen sechs Spuren.
body-strong15px · 600

Emphasis inside body copy.

Stream-Schlüssel hinterlegt.
small13px · 400

Metadata, hints, in steel.

D: 2398 GB frei
wordmark28px · 400

The name in app chrome when the wordmark image does not fit. Never for anything else.

MAZZIVE

Abstände, Ecken, Licht

space-14pxIcon-to-label gaps, meter segments.
space-28pxChip padding, tight stacks.
space-312pxButton vertical padding, grid gaps in dense rows.
space-416pxPanel padding on phones, gaps between tiles.
space-624pxPanel padding on desktop.
space-832pxBetween sections.
space-1248pxPage top margin, hero breathing room.
radius-xs2pxThe only rounding: inputs, meter segments. Everything else is cut, not rounded.
cut-sm6pxChamfer on chips and small buttons.
cut-md10pxChamfer on buttons, panels and tiles (top-left and bottom-right corners).
cut-lg18pxChamfer on command tiles and the cover blocks.
glow-live0 0 0 1px #ff2d55, 0 0 32px #ff2d5566Active Live/Record tiles only. Never on idle elements.
glow-soft0 0 18px #e1173f40Hover on command buttons.
bevelinset 0 1px 0 #ffffff12, inset 0 -1px 0 #00000099Raised metal feel on tiles and buttons.

Bausteine

CommandTile

The three big controls of the live screen: Live, Record and Pause, each a tile with a glyph, an uppercase label and a meta line (timer or state).

  • Provide: kind, label, meta, active, onClick; call .update({...}) on every state change.
  • Active Live/Record: crimson-fill with the glow-live light and a pulsing glyph; active Pause: ember outline, no glow. Idle tiles never glow.
  • Labels: "Übertragung", "Aufzeichnung", "Unterbrechen" / "Fortsetzen". Meta: "bereit", a running timer ("01:24:07"), "pausiert".
  • Lay them out in a three-column grid on desktop; on phones Live spans two columns on top.

Button

A cut-corner command: one command (crimson-fill) per view for the thing the screen is for, ghost for secondary actions, danger (blood) for an armed second press.

  • Provide: label as an uppercase-ready verb ("Übertragung starten", "Speichern", "Überarbeiten"), onClick.
  • Destructive or public actions arm first: on the first press switch the label to "Nochmals zum Beenden" with variant: 'danger', act on the second press within 3 s. Never a browser dialog.
  • Do: verbs, two words at most. Don't: emoji, exclamation marks, more than one command per panel.

StatusChip

A small cut-corner chip that reports one system's health with a word and a colored diamond.

  • Provide: state ('ok' = signal, 'warn' = ember, 'off' = crimson-glow), label (always a word: "OBS", "Headset", "Mikro", "Wave Link") and optional detail.
  • Sit chips in a row in the header; never use color without the word.

SceneSelector

A grid of scene buttons; the program scene is blood with a crimson-glow edge.

  • Provide: scenes [{ id, label, hint }], active, onSelect(id); call .setActive(id) when the program scene changes.
  • Labels in his words: "Gameplay", "Kamera", "Unterbrechung", "Nur Spiel", "PS5". Hint = the hotkey ("Strg+Shift+F1").

Panel

The HUD container for every grouped area: obsidian body inside a 1px gunmetal cut-corner frame, a top rail, two silver rivets and faint scanlines, as on his stream frame.

  • Provide: title (uppercase, one or two words: "Szene", "Schnitt", "Audio"), optional note in body type, children; append more into panel.body.
  • Don't nest panels inside panels; use spacing instead.

LevelMeter

A 24-segment audio meter: silver segments, the top quarter ember, the last two crimson-glow (clipping).

  • Provide: label ("Mikro", "Headset") and value 0..1; call .set(v) up to ~8 times a second.

Logos & Bilder

Emblem
Emblem
Wordmark (vertikal)
Wordmark (vertikal)
Key Art · die Gestalt
Key Art · die Gestalt
Intro
Intro
Red-Flare-Szene
Red-Flare-Szene
Intermission
Intermission
HUD-Rahmen
HUD-Rahmen

Offline-Kopie des MazziveRic Design Systems, Stand 15.10.2026.