comprehensive design + component system

[hauf-toni]

❔ Problem To ensure consistency and efficiency in the development process and facilitate maintenance scalability, we need a comprehensive design and component system for the native and web app. during the creation process, all decisions should be aligned with the accessibility standards of WCAG 2 (Web Content Accessibility Guidelines).

💡 Proposed solution Creation of a comprehensive design and component system with assets and guidelines in figma. Components should come from an open source native Angular UI components set, eg. PrimeNG All design guidelines, principles, and component specifications should be compiled into a comprehensive design system document and stored on Nextcloud (backup/documentation).

↔️ Alternatives none

---

required guidelines for visual identity

• [ ] typography
• [ ] colors
• [ ] grid system
• [ ] Iconography

🧰 required components

• [ ] Buttons: Primary/Secondary/Outline/Disabled/Icon button
• [ ] Forms: Input fields, Text area, Dropdown/select, Radio buttons, Checkboxes, Switches, Date picker, Time picker
• [ ] Navigation: App bar/header, Tabs, Side navigation menu, Breadcrumbs, Pagination
• [ ] Modals and Dialogs: Standard modal, Confirmation dialog, Alert dialog, Full-screen modal
• [ ] Cards: Feature card, Product card, Image card, Notification card
• [ ] Tooltips and Popovers: Tooltip, Popover
• [ ] Alerts: Success alert, Error alert, Warning alert, Info alert
• [ ] Progress Indicators: Progress bar, Loading spinner
• [ ] Typography: Headings (h1 to h6), Body text, Subtitles, Captions
• [ ] Icons: Icon set, Icon labels
• [ ] Badges: Notification badges, Status badges
• [ ] Lists: Ordered lists, Unordered lists, Definition lists
• [ ] Tables: Basic table, Data table, Responsive table
• [ ] Sliders: Range slider, Single-value slider
• [ ] Media Players: Video player, Audio player
• [ ] Chips and Tags: Text chips, Filter tags
• [ ] Navigation Elements: Back button, Next button, Up arrow
• [ ] Search Bar: Basic search bar, Search with filters

[hauf-toni]

related issues: #2338 #2354 #2362 #2345 #2365

[LeandraH]

Something we would also like to know is the units. We currently mostly use the absolute px but in a few select places we use relative rem. It's especially a question of how the apps should handle zooming in or out, should e.g. the padding on a button increase with the font size?