Designsystem

UI-Kit für den Low-Code-PoC

Verbindliche Bausteine für Buttons, Formulare, Chips, Karten, Listen und Statusflächen. Neue Screens nutzen diese Muster — keine Sonderklassen.

Bereiche
14
Styles
components.css
Chrome
site-chrome.js

Chrome & Grundlagen

Site-Chrome Topbar

Verbindliche Hauptnavigation für alle Seiten (Start, Learning Agreement, Admin, Prof-Portal). Die Topbar dieser Seite ist das Live-Beispiel — eingefügt durch site-chrome.js in ein leeres <header class="topbar">.

Markup pro Seite — optional mit Kontext-Klasse wie admin-login-topbar oder home-topbar für seitenspezifisches Styling.

<header class="topbar" data-site-topbar></header>

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js" defer></script>
<script src="/assets/js/site-chrome.js" defer></script>

Styles: base.css (.topbar--site-chrome, .topbar__island, .topbar__nav-item). Logik und Nav-Einträge zentral in assets/js/site-chrome.js — keine duplizierte <nav class="nav"> mehr in HTML-Dateien.

Grundlagen

Farben, Flächen und Akzentzustände.

Surface #ffffff
Text / Aktion #1a1a1a
Akzent #ccff00
Muted #666666
Line #d4d4d4
Danger #f52e2e

Eingabe & Aktion

Buttons

Ein Button-System für alle Seiten. Binäre Ein/Aus-Schalter nutzen button.ui-toggle mit role="switch".

Formulare

Einheitliche Felder, skalierbare Mehrzeiler, Suffixe und Validierungsfehler über .is-error + aria-invalid="true".

Einfachfelder — <input class="ui-input">

Studienmodus
Studienmodus mit Fehler
Bitte wählen Sie einen Studienmodus.

Suffix-Felder — <span class="ui-input-suffix">

Mehrzeilige Textfelder — <textarea class="ui-textarea">

Vertikal skalierbar (resize: vertical). In Formular-Rastern mit ui-field full über die volle Breite spannen.

Interessenprofil

Range-Slider mit Prozentfeld — FU-Akzentfarbe Electric Lime (#ccff00 / --ui-color-accent). Bei Validierungsfehlern erhält das gesamte Raster .is-error (roter Kartenrahmen, kein Rand am Slider selbst).

Standard

Validierungsfehler — Summe ≠ 100 %

Container .ui-pillar-grid.is-error markiert alle Karten. Prozentfeld und Slider bleiben unverändert.

Die drei Bereiche müssen zusammen exakt 100 Prozent ergeben.

Portal

Portal-Dashboard

Verbindlicher Seitenkopf für Admin- und Prof-Hubs: Toolbar, Begrüßung und KPI-Zeile. Varianten über ui-portal-dashboard-head--admin bzw. --prof. Admin-KPIs sind pro Unterseite unterschiedlich (Studierende / Professor/innen / Einladungen).

Admin — Kohorte links, Bereichs-Switcher rechts, Begrüßung darunter

Guten Tag

Verwaltung

1

Handlungsbedarf

4

Studierende

0

Abgeschlossen

1

Ungeöffnet

Listen- und Modulbereich

Professor/in wurde angelegt.

Prof — Begrüßung links, Bereichs-Switcher rechts (ohne Kohorte)

Guten Tag

Prof. Dr. N. Kliewer

1

Handlungsbedarf

0

Termine in 7 Tagen

3

Zugeordnete Studierende

0

Abgeschlossen

Studierendenliste / Kalender

Learning Agreement wurde abgeschlossen.

Listen & Daten

Listen-Werkzeuge

Suche füllt die Zeile, Filter und Sortierung sitzen rechts in .ui-list-toolbar__controls. Dropdowns nutzen bindUiDropdown() aus portal-core.js.

Status & Feedback

Chips und Status

Statische Labels und klickbare Filter nutzen dieselbe Optik, aber unterschiedliche Elemente.

Statisch — <span class="ui-chip">

Wirtschaftsinformatik 6 LP Wintersemester Prüfung ausstehend Gespeichert Fehler Gesperrt Signatur erforderlich

Filter — <button class="ui-chip">

Tooltip

Info-Icon mit Hover-Tooltip — gleicher Button-Hover wie ui-semester-card__remove.

Markup — <button class="ui-info-tip">

<button type="button" class="ui-info-tip" aria-label="Info zu Mentoring">
  <i data-lucide="info" aria-hidden="true"></i>
  <span class="ui-info-tip__bubble" role="tooltip">…</span>
</button>

Vorschau — Bubble zum Stylen

Begleitendes Mentoring-Programm. Sollte bereits im 1. Semester gebucht und begonnen werden.

Interaktiv

Mit der Maus über das ⓘ fahren oder per Tastatur fokussieren.

Mentoring

Im Modulkontext

Operations Research

Pflichtmodul 6 LP Wintersemester

Semesterübersicht

Pflichtmodule und gewählte Wahlmodule in einem konsistenten Raster.

1. Semester

24 LP
  • Operations Research
  • Electronic Business
  • Vertiefung Business Analytics / Simulation Dynamischer Systeme
  • Wahlmodul 1

2. Semester

12 LP
  • Business Intelligence
  • Service Engineering
  • Wahlmodul 1

3. Semester

6 LP
  • Mentoring
  • Wahlmodul 1

4. Semester

0 LP
  • Wahlmodul 1
  • Wahlmodul 2

Modulzeilen

Listen nutzen Linien statt Schatten. Aktionen bleiben rechts stabil.

Vertiefung Business Analytics / Simulation Dynamischer Systeme

Wirtschaftsinformatik 6 LP Wintersemester benotet

Informationssysteme in Transport und Verkehr / Metaheuristiken

Wirtschaftsinformatik 6 LP Sommersemester benotet

Review und Signatur

Statuskarte, Akkordeon und QR-Bereich für den finalen Schritt.

Termin reserviert bis 11:20 Uhr

Mi., 10.06.2026

09:30 - 10:00 · Dr. D. Rößler

Operations Research

6 LP Pflichtmodul
Signatur erforderlich

Per Smartphone signieren und absenden

Scannen Sie den QR-Code und unterschreiben Sie das Dokument auf dem Smartphone.

Feedback States

Toast, Erfolg und Fehler müssen eine wiederverwendbare Form bekommen.

Termin wurde gelöscht.
Gespeichert
Noch keine Module Wählen Sie ein Modul aus der Liste, um den Semesterplan zu füllen.