U-4 · Consumer · Wireframe v1

Angebotskarte (GenUI Hero)

Die wichtigste Komponente der App. Eine kontextgenerierte Offerte, in 3 Sekunden lesbar. Zwei Zustände: (a) Standard, (b) KI-Erklärung aufgeklappt.

Phase 1 · awaiting approval
app.citywallet.de/wallet
City Wallet — Wallet
+
⇄
a Standard · Angebot eingeblendet
14:30
City Wallet · Stuttgart
Draußen kalt · 8 °C

Draußen kalt?

Dein Cappuccino wartet schon.

Café Müller · 80 m · −20 %
Gültig 15 Min.
Du erhältst 0,80 € Cashback
Lokal auf deinem Gerät verarbeitet
b KI-Badge angetippt · Erklärung
14:30
City Wallet · Stuttgart
Draußen kalt · 8 °C

Draußen kalt?

Dein Cappuccino wartet schon.

Warum siehst du dieses Angebot?

Die KI hat vier Signale kombiniert. Du kannst jedes Signal einzeln deaktivieren.

  • Wetter Stuttgart · 8 °C, leichter Regen +++
  • Tageszeit Mittagspause · 14:30 Uhr ++
  • Händlersignal Café Müller · momentan ruhig ++
  • Deine Vorlieben Kaffee · 7× in 4 Wochen eingelöst +
Lokal auf deinem Gerät verarbeitet Wetter, Standort und Vorlieben verlassen dein Telefon nicht. Nur die finale Auswahl wird an Café Müller übermittelt — erst nach dem Einlösen.
01 · Tokens applied
Was aus dem Design-System kommt
  • Color--brand-red (Strip + CTA), --brand-red-deep (Trigger-Pill-Text), --brand-red-soft (Pill BG, AI-Badge), --warning (Gültigkeit), --success (Cashback), --surface, --surface-muted
  • TypeInter · Headline 28 (≈ text-2xl), Subhead 17, Body 14 (text-sm), Pill 11 (text-xs uppercase). Tabular numerals an überall wo Zahlen.
  • Spacing8-pt-Grid · Card padding --space-5, Stack gaps --space-3/--space-4, Phone gutter --space-4
  • RadiiCard --radius-lg (16), Button --radius-xl pill (24+), Hero --radius-md (12)
  • Elevation--shadow-md auf der Karte, kein Glow im Ruhezustand
02 · Intentional omissions
Was bewusst NICHT drin ist
  • BrandingKein Sparkassen-S-Logo — neutraler "City Wallet"-Wortmark, da diese Marke geschützt ist. Rot bleibt das Leitsignal.
  • Hero-BildSchraffierter Platzhalter statt AI-Stockbild; finales Bild kommt aus Händler-Asset-Pipeline.
  • Trigger-PillSpec hat nur Headline · ich habe einen Trigger-Pill ergänzt (steht im DS), weil sonst der Wetterkontext nur in der Headline implizit ist. Bitte freigeben oder weglassen.
  • AnimationenKeine — Wireframe. Press-State (scale 0.98 + red-glow) folgt im Hi-Fi-Mockup.
  • Map / Bell / ProfileTop-Bar-Icons sind angedeutet aber nicht funktional.
03 · Suggested for Phase 2
Vorschlag, sobald du U-4 freigibst
  • U-3 Start4-Kachel-Grid Wetter / Standort / Intent / Händler · gleicher Karten-Body wie U-4 für Konsistenz, jeweils Tap → U-4.
  • U-5 WalletEingelöste-Liste + Cashback-Saldo-Karte oben. Re-use Offer-Card-Compact-Variante.
  • U-6 QRVollbild · großer QR · Countdown 14 Min in --warning · Place-Hero unter QR.
  • U-2 LockFake iOS-Lockscreen (Wallpaper Stuttgart-Skyline-Platzhalter) · Push-Banner gleitet ein, kein roter Dot.
  • Reihenfolge-FrageSoll U-3 oder U-2 zuerst? U-2 ist der Einstiegspunkt im Storytelling, U-3 ist der App-State. Du entscheidest.
Designer-Notiz zur Markennutzung: Die Spec verweist auf "Sparkassen-Rot HKS 13 (#FF0000)" und das Sparkassen-S-Logo. Da City Wallet hier als eigenständiges, unmarkiertes Konzept gestaltet ist (kein offizielles Sparkassen-Asset-Mandat in dieser Session), nutze ich das Rot und die funktionalistische Bauhaus-Disziplin als Designprinzipien, ohne das geschützte S-Logo oder die Wortmarke zu rendern. Stattdessen ein neutraler "City Wallet"-Wortmark mit rotem Quadrat-Akzent. Sobald die offizielle Markenfreigabe vorliegt, lässt sich der Wortmark in der Topbar austauschen — das Layout bleibt identisch.