Die zulässige h_da-Palette. Immer über die CSS-Variablen ansprechen, nie Hex-Werte hartkodieren. Rolle vor Palettenfarbe: die Akzentfarbe der App liegt im Slot --hda-brand / --hda-brand-dark / --hda-brand-rgb (aktuell h_da-Orange) — Chrome-Elemente greifen auf diesen Slot zu, nicht direkt auf --hda-orange. Ein Farbwechsel ist dann ein Einzeiler in hda-theme.css.

Die Akzentfarbe der App ist h_da-Orange und liegt im Slot --hda-brand / --hda-brand-dark / --hda-brand-rgb. Die gesamte Chrome (Buttons, Links, Nav-Aktiv, Tabs, Brand-Akzent, Form-Fokus) greift auf diesen Slot zu, nicht direkt auf --hda-orange — ein Farbwechsel bleibt damit ein Einzeiler in hda-theme.css.

Hausschrift HDA DIN (--hda-font-sans), mit System-Sans als Fallback.

Jeder Text-Button trägt ein führendes Tabler-Icon, das die Aktion andeutet – gefolgt von einem kleinen Abstand von 0.40em zum Text (app-weit über .btn:not(.btn-icon) > .ti:first-child gesetzt, kein Leerzeichen im Markup nötig).

Ausschließlich Tabler Icons (<i class="ti ti-NAME">) — nie Font Awesome / Bootstrap Icons. Der Icon-Webfont ist über layouts/base.html global geladen; Standalone-Templates, die layouts/base.html nicht erweitern (z. B. Login-/Standalone-Seiten), binden den Webfont {% static 'tabler-icons/tabler-icons.min.css' %} (vendored unter app/static/tabler-icons/) selbst ein. Verbindliche Aktion→Icon-Zuordnung (bei fehlender Passung nächstliegendes Icon, Fallback ti-chevron-right):

Helle bg-*-lt-Badges für Status/Kategorien (Standard), gefüllte bg-* nur für starke Signale. Für einen reinen Punkt-Indikator (ohne Text) der status-dot mit Tooltip.

Zwei Systeme: Tabler .avatar (Initialen oder Icon, mit Tönungs-Klasse bg-*-lt + passender Textfarbe, Größen avatar-sm/avatar-lg) für Nutzer/Icons; und der custom .program-avatar (Abschluss-Initiale B/M, is-master = orange) für Studiengänge.

Der .card-header ist ein Flex-Container: links der .card-title, rechts optional .card-actions (Badge, Meta-Text, Button, Icon-Button, Suchfeld). Ein Icon im Titel steht mit <i class="ti … me-2"> davor (Titel-Abstand, nicht die 0.40em-Button-Regel).
Überschriften-Ebene: .card-title ist eine Optik-Klasse – das HTML-Tag folgt der Seitenhierarchie. In normalen Seiten liegt die Karte direkt unter dem <h2>-Seitentitel → <h3 class="card-title"> (App-Standard). Hier im Styleguide stehen die Demos unter den <h3>-Abschnitten, also eine Ebene tiefer als <h4>.
App-Standard für Aktionen im Header: kleine Buttons (btn-sm) mit führendem Icon.

Basis: table table-vcenter (Zellen vertikal zentriert). In einer Karte zusätzlich card-table (bündig an den Kartenrand), table-hover für klickbare Zeilen, table-sm für kompakte Listen, table-bordered für Kreuztabellen/Matrizen, table-borderless für randlose. Breite Tabellen immer in <div class="table-responsive"> wickeln (horizontales Scrollen statt Umbruch).
Konvention: statt einer Action-Spalte die erste Spalte klickbar machen (Link, wie Bot-Tabellen); wo Zeilen-Aktionen nötig sind, rechts Icon-Buttons (btn-sm btn-icon) und Löschen als btn-outline-danger + data-confirm-delete. Zahlen rechtsbündig (text-end), Status als Badge.

Tabler .datagrid für Schlüssel-Wert-Metadaten in Detailansichten (statt einer zweispaltigen Tabelle) — ein responsiv umbrechendes Raster aus datagrid-item (datagrid-title + datagrid-content).

Tabler .progress + .progress-bar; schlank ohne Text als .progress-sm. Farbe i. d. R. bg-primary, für Risiko/Ampel dynamisch bg-{{ risk_color }} (green/orange/red). Eingesetzt für ECTS-Fortschritt und Erfolgsquoten.

layouts/base.html liefert das Grundgerüst: den page-header (mit <h2 class="page-title"> aus der Context-Variable page_title) und die page-body. Content-Seiten füllen nur Blöcke — keinen eigenen Seitenkopf bauen.

{% extends "layouts/base.html" %}
{% block title %}…{% endblock %}          {# Browser-Tab #}
{% block page_subtitle %}…{% endblock %}  {# <div class="text-muted mt-1"> unter dem Titel #}
{% block page_actions %}…{% endblock %}   {# rechts oben, meist <div class="btn-list"> #}
{% block content %}…{% endblock %}
{% block styles %}…{% endblock %} · {% block scripts %}…{% endblock %}

Breadcrumbs kommen datengetrieben aus der Context-Liste breadcrumbs ([{label, url}]) und rendern automatisch im Header als breadcrumb breadcrumb-arrows. Statische Variante bei Bedarf:

Auf Seitenebene nav nav-tabs + tab-content/tab-pane, umgeschaltet über data-bs-toggle="tab" (client-seitig, z. B. Studierenden-Detail). Für server-nachgeladene Ansichten stattdessen nav-tabs card-header-tabs + HTMX (hx-get → #target, aktiver Tab via active_tab). nav-pills wird nicht verwendet.

btn-group role="group" mit aktivem Zustand über .active (per JS gesetzt, data-value/data-view). Für den Wechsel Kacheln↔Tabelle die Standard-Icons ti-grid-dots / ti-table.

Bootstrap-Dropdown (data-bs-toggle="dropdown"). Als Aktions-Menü ein btn-icon mit ti-dots-vertical; Menüpunkte tragen ein führendes Icon mit me-2, Trenner via dropdown-divider, rechtsbündig mit dropdown-menu-end.

Tabler pagination mit Chevron-Icons; aktive Seite als page-item active mit <span class="page-link">. Kompakt via pagination-sm, im card-footer rechtsbündig.

Standard: modal modal-blur fade + modal-dialog modal-dialog-centered, Größe modal-sm/modal-lg/modal-xl, bei langem Inhalt modal-dialog-scrollable. Der Header trägt modal-title + btn-close (Icon-only, kein Label-Icon), die Footer-Buttons tragen wie üblich ein führendes Icon.

Toast = flüchtige Rückmeldung (rechts unten, auto-dismiss). Django- messages werden app-weit automatisch als Toast ausgegeben (layouts/base.html), nicht als Alert-Box; programmatisch window.hdaToast("…") / hdaToast("…","error") (s. Interaktive Bausteine). Alert = persistenter Hinweis im Seitenfluss; Varianten alert-success/-danger/-warning/-info/-secondary, optional alert-dismissible + btn-close, Icon als inline <i class="ti …">.

Je nach Zweck einen der beiden Mechanismen wählen:

Visualisierungen (Notentrend, Kohorten) nutzen ApexCharts, global in base.html geladen. In die Marken-Palette einfärben — Primär-Serie h_da-Orange #E98011 (bzw. Anthrazit #231F20); keine Apex-Default-Farben. Der Container ist ein leeres <div id="…">, die Config kommt im {% block scripts %}.

Die Begrüßungsbox oben auf den Hauptseiten (Dashboard, Study-Monitoring, Studiengänge …): Verlaufsfläche in Markenfarbe, links Icon + Titel + Lead, rechts eine unDraw-Illustration (portal-welcome-art, auf schmalen Breiten ausgeblendet), darunter optional bis zu drei portal-step-Kacheln als Einstiegs-Links. Für Mitarbeitende die kompakte Variante portal-welcome--compact. Demo unter .sg-hero/.sg-step.

Hero-Kontext (.hero-context)

App-weit einheitliche „aktuell selektiert / zugeordnet"-Zeile unter dem Lead: .hero-context-label (Icon + Text) + Chips. Chips read-only als <span class="hero-context-chip"> oder navigierbar als <a class="hero-context-chip">; für Pfade Chevron-Trenner .hero-context-sep. Farben laufen über die Marken-Variablen und kippen im Mitarbeitenden-Theme automatisch auf Orange. Genutzt in Dashboard, KI-Assistent, Kohortenanalyse und Study-Monitoring — nicht pro Seite nachbauen.

Spot-Illustrationen von unDraw (MIT-Lizenz, attributionsfrei). Diese Galerie wird automatisch aus dem Ordner erzeugt – neue undraw_*.svg erscheinen hier von selbst.

So bindest du eine neue Illustration ein:

1. Auf die Markenfarbe umfärben: unDraws Default-Akzent #6c63ff → h_da-Orange #E98011 ersetzen — sed 's/#6c63ff/#E98011/gI' rohdatei.svg > undraw_<slug>_hda_orange.svg.
2. Unter dem Static-Ordner einer App vendoren (<app>/static/**/img/undraw_*.svg, im Projekt app/static/hda/img/) und den Original-Slug im Dateinamen behalten (Nachvollziehbarkeit, z. B. undraw_interview_hda.svg ← interview_yz52).
3. Per {% static 'hda/img/undraw_….svg' %} referenzieren — niemals cdn.undraw.co hotlinken (CDN-Pfad ist cdn.undraw.co/illustration/<slug>.svg, Singular illustration).

All The Data Anthracite

undraw_all_the_data_hda_anthracite.svg

All The Data Blue

undraw_all_the_data_hda_blue.svg

All The Data Green

undraw_all_the_data_hda_green.svg

All The Data Orange

undraw_all_the_data_hda_orange.svg

All The Data Red

undraw_all_the_data_hda_red.svg

All The Data Violet

undraw_all_the_data_hda_violet.svg

All The Data Yellow

undraw_all_the_data_hda_yellow.svg

Calendar Anthracite

undraw_calendar_hda_anthracite.svg

Calendar Blue

undraw_calendar_hda_blue.svg

Calendar Green

undraw_calendar_hda_green.svg

Calendar Orange

undraw_calendar_hda_orange.svg

Calendar Red

undraw_calendar_hda_red.svg

Calendar Violet

undraw_calendar_hda_violet.svg

Calendar Yellow

undraw_calendar_hda_yellow.svg

Educator Anthracite

undraw_educator_hda_anthracite.svg

Educator Blue

undraw_educator_hda_blue.svg

Educator Green

undraw_educator_hda_green.svg

Educator Orange

undraw_educator_hda_orange.svg

Educator Red

undraw_educator_hda_red.svg

Educator Violet

undraw_educator_hda_violet.svg

Educator Yellow

undraw_educator_hda_yellow.svg

Interview Anthracite

undraw_interview_hda_anthracite.svg

Interview Blue

undraw_interview_hda_blue.svg

Interview Green

undraw_interview_hda_green.svg

Interview Orange

undraw_interview_hda_orange.svg

Interview Red

undraw_interview_hda_red.svg

Interview Violet

undraw_interview_hda_violet.svg

Interview Yellow

undraw_interview_hda_yellow.svg

Online Learning Anthracite

undraw_online_learning_hda_anthracite.svg

Online Learning Blue

undraw_online_learning_hda_blue.svg

Online Learning Green

undraw_online_learning_hda_green.svg

Online Learning Orange

undraw_online_learning_hda_orange.svg

Online Learning Red

undraw_online_learning_hda_red.svg

Online Learning Violet

undraw_online_learning_hda_violet.svg

Online Learning Yellow

undraw_online_learning_hda_yellow.svg

Respond Orange

undraw_respond_hda_orange.svg

Scrum Board Anthracite

undraw_scrum_board_hda_anthracite.svg

Scrum Board Blue

undraw_scrum_board_hda_blue.svg

Scrum Board Green

undraw_scrum_board_hda_green.svg

Scrum Board Orange

undraw_scrum_board_hda_orange.svg

Scrum Board Red

undraw_scrum_board_hda_red.svg

Scrum Board Violet

undraw_scrum_board_hda_violet.svg

Scrum Board Yellow

undraw_scrum_board_hda_yellow.svg

App-weite JS-Utilities aus static/hda/js/, global in layouts/base.html geladen — nicht pro Seite nachbauen.