1.8 KiB
1.8 KiB
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.