39 lines
1.8 KiB
Markdown
39 lines
1.8 KiB
Markdown
# 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.
|