arrow_back
Material 3 Refactor
Material 3 · Mai 2026

Material 3 Refactor — drei Referenz-Templates.

Marken-Identität bleibt: Storm-Blau als Primary, Lime als Tertiary, Paper-Cream als Surface. Material 3 Token-System (--md-sys-*), Material Symbols Outlined, Bricolage als Display + Roboto als Body. Mobile-first für Frontend + Kunden, Desktop-first mit Navigation Rail für Admin.

Referenz-Templates

Ein Template pro Bereich — als Muster für den Rollout.

Nach deinem OK rollen wir das System auf die übrigen 22 Seiten aus.

Mobile · 412 px

Frontend · Startseite

Top App Bar + Bottom Nav (4 Tabs + „Mehr"-Drawer). Filled Hero, horizontal scrollable Live-Cards, Tertiary FAB-Akzente, M3 Cards (large & medium).

Mobile-first Bottom Nav Drawer
Mobile · 412 px

Kunde · Wetterübersicht

Bottom Nav mit 5 Tabs (App-Feeling), Filled Top App Bar, Warn-Banner als Surface Container, 7-Tage Carousel, Stat-Cards, Extended FAB für Karten.

Mobile-first 5 Tabs Extended FAB
Desktop · 1440 px

Admin · Dashboard

Navigation Rail (80 px) mit FAB, Top Search Bar, KPI-Tiles (Primary highlight), Charts, Activity Feed, Donut-Distribution. Mobile: collapse zu Bottom Nav.

Desktop Nav Rail Mini-FAB
Color Tokens

Marken-seeded M3 Palette.

Wechsle oben das Theme — die gesamte Seite reagiert über --md-sys-color-*.

Primary
Storm-Blau · CTAs, Hero, Brand
--md-sys-color-primary
Primary Container
Hervorgehobene Karten
primary-container
Secondary
Stiller, ruhig
secondary
Secondary Container
Nav-Indikator, Chips
secondary-container
Tertiary
Lime · Akzent, Highlights
tertiary
Tertiary Container
Pulsing dots, FAB
tertiary-container
Surface
Page Background
surface
Surface Container
Bottom Nav, Top Bar scrolled
surface-container
Error
Badges, Notifications
error
Warn 1 · grün
Ruhig
warn-1-container
Warn 3 · orange
Erhöht
warn-3-container
Warn 5 · violett
Extrem
warn-5-container
Type Scale

Bricolage (Display) + Roboto (Body).

M3-Standard-Hierarchie, Marke bleibt in Headlines erkennbar.

display-large Aa Bb Cc 57 / 64 · Bricolage 700
display-medium Aa Bb Cc 45 / 52 · Bricolage 700
headline-large Wetter ist Handwerk 32 / 40 · Bricolage 700
headline-medium Wetter ist Handwerk 28 / 36 · Bricolage 700
title-large Top App Bar Titel 22 / 28 · Roboto 500
title-medium Card Titel · 16 px 16 / 24 · Roboto 500
body-large Fließtext. Markus aus Kufstein, seit 2019 Wetterfrosch im Inntal. 16 / 24 · Roboto 400
body-medium Sekundärer Text in Cards, Listen, Forms. 14 / 20 · Roboto 400
label-large BUTTON LABEL · 14 px 14 / 20 · Roboto 500
Komponenten

M3-Bausteine im Brand-Look.

Material 3 Spec mit Marken-Farben — gleichbleibend über alle 25 Seiten.

Buttons

Icon Buttons

FABs

Chips

Standard Ausgewählt addMit Icon

Warn-Chips (Ampel)

Ruhig Stufe 2 Stufe 3 Stufe 4 Extrem

Switch

Push-Benachrichtigung

Segmented Button

Text Field

Badge

3 12
info
Nächste Schritte Wenn die drei Referenzen passen, rollen wir das M3-System auf alle 25 Templates aus. Reihenfolge nach Bedarf — z.B. zuerst alle Kunden-Screens (mobil), dann Frontend, dann Admin.
arrow_back Zurück zur Übersicht