first commit

myteamwallet_frontend_modern/.superdesign/design-system.md

@@ -0,0 +1,38 @@
+# TeamWallet Design System
+
+TeamWallet is a German mobile-first club cashbox app for amateur sports teams. Members quickly inspect balances and activity; authorized captains and treasurers create and reverse bookings, manage players, penalties and invitations.
+
+## Visual direction
+
+- Fresh, friendly and sporty rather than banking-like or corporate.
+- Angular Material 3 is the component foundation.
+- Green is the primary/action color; orange is reserved for warm accents and warnings.
+- Light surfaces, strong contrast, large readable euro balances and generous touch targets.
+- Roboto only. Do not introduce decorative or serif fonts.
+- Cards use restrained elevation, rounded Material corners and clear spacing.
+- Positive, negative and neutral balances must be distinguishable by text/icon as well as color.
+
+## Layout and interaction
+
+- Mobile first, usable at 360px width, progressively centered/constrained on larger screens.
+- Authenticated team pages always retain the existing toolbar and four-tab bottom navigation.
+- Primary actions are prominent but never obscure content.
+- Loading uses skeletons or small progress indicators; empty and error states include a clear next action.
+- Motion is short and functional, following Material defaults; respect reduced-motion preferences.
+
+## Key pages
+
+- Login and account recovery
+- Team selection
+- Team overview with wallet balance, outstanding player total and recent activity
+- Members list and member history
+- Cashbox transaction creation and reversal
+- More: penalties, invite, profile and logout
+- Public alias-based team overview and member history
+
+## Hard constraints
+
+- Use only Material system colors derived from the existing green/orange M3 theme.
+- German copy is embedded directly in templates.
+- Preserve the existing AppShell navigation structure.
+- No dark mode, i18n layer, NgRx, Bootstrap or custom icon pack.