Design Handbuch

[sophiadeckhut]

Allgemein

Schriftart: Mada Sans-Serif
Elementfenster: Eckenradius 20px
Frame: 1440px breit; 1024px hoch
Abstand zwischen Elementen (im Normalfall): 20px

Schriftgröße Titel: 80px
Schriftgröße Subtitel: 36px
Schriftgröße Standardtext: 32px
Schriftgröße Hinweise: 28px

Schriftfarbe: #121212 (schwarz)
Hintergrundfarbe: #FAFAFA (weiß)
Elementfenster: #F0F0F0 (hellgrau)
Hinweis: später benutzerdefiniert
Akzentfarbe 1: #264653 (dunkelblau)
Akzentfarbe 2: #2A9D8F (Petrol)
Akzentfarbe 3: #EEC37B (Gelb)
Akzentfarbe 4: #E76F51 (Orange)

Navigationsleiste

Profil

• Profilbild (Einstellungen, Logout)
• Event hinzufügen Button

Suchleiste

• Suche nach Titel

Aktuelle Events
(standard ausgeklappt)

• Auflistung der Events (Name, Datum und Uhrzeit)

Archivierte Events
(standard eingeklappt)

• Auflistung der in der Vergangenheit liegenden Events (Name, Datum und Uhrzeit)

Eventseite

Basisinformationen (oberes 1/3)

• Banner(Profilbild/Farbe, Titel, Ort, Datum, Uhrzeit, Teilnehmer anzeigen, Link teilen, Bearbeiten, Verlassen)
• Beschreibung (ausklappbar, standard eingeklappt)

Widgets (unteren 2/3)
scrollbar mit Tabs

• Widgetleiste (Widgetscroll-Tabs, Hinzufügen-Button)
• Widgetfenster

Event Erstellen

Overlay
Abgerundete Ecken 20px
Hingergrundfarbe #FAFAFA (weiß)
(Scrollbar, benötigt bei Mobilansicht)
Angular Material UI Komponenten

• Titel
• Beschreibung
• Zeit & Datum
• Standort
• Bild
• Erstellen-Button