Übersicht ·
ALB
Design System
v0.1 Stand 29. April 2026
ALB Hanse · Brand & UI

Design System

Hanseatisch, zurückhaltend, sachlich. Eine kompakte Referenz für alle Tokens, Komponenten und Patterns, die in den ALB-Hanse-Portalen verwendet werden — gemeinsam definiert in assets/alb.css.

01 · Foundations

Farben

Tiefes Marineblau als Primärfarbe, warmer Sandton als Akzent, gebrochenes Weiß als Hintergrund. Statusfarben sparsam und gedämpft.

Marineblau
#1E3A5F
--alb-primary
Marine dunkel
#15293F
--alb-primary-dark
Sand
#D4B896
--alb-accent
Hanseblau
#5A8DC6
Logo-Akzent
Bruchweiß
#FAFAF7
--alb-bg
Surface
#FFFFFF
--alb-surface
Border
#E8E6E0
--alb-border
Text
#1A1A1A
--alb-text
Statusfarben
Erfolg
#2D6A4F
--alb-success
Hinweis
#B08900
--alb-warn
Fehler
#9B2C2C
--alb-error
01 · Foundations

Typografie

Source Serif 4 für Überschriften (hanseatischer Charakter), Inter für UI (klar, gut lesbar in Tabellen). Tabular figures für Zahlen.

Aa
Source Serif 4
Überschriften, Hero, Logo-Setup
Aa
Inter
UI, Body, Tabellen, Forms
Display
serif · 40 · 600
Hanseatisch verwalten.
H1
serif · 28 · 600
Weckmannweg 6 — Wohnungs-Detail
H2
serif · 20 · 600
Aktive Tickets
H3
inter · 16 · 600
Mietkonto im April 2026
Body
inter · 14 · 400
Die Schadensmeldung wird automatisch an den zuständigen Verwalter weitergeleitet. Sie erhalten innerhalb von 24 Stunden eine Rückmeldung.
Body small
inter · 13 · 400
Ihr Mietkonto ist ausgeglichen. Die nächste Miete ist am 1. Mai 2026 fällig.
Meta
inter · 12 · 400
Erstellt am 29. April 2026 · 14:32 Uhr
Eyebrow
inter · 11 · 600 · upper
Stand · Eigentümer · Weckmannweg 6
Mono
SFMono · 12
RG-2026-0429-001 · 1.247,80 €
01 · Foundations

Spacing & Radien

8-Punkt-Grid. Großzügige Innenabstände in Cards (24 px), enge in Tabellen (12 px). Radien dezent: 6 px für Inputs, 8 px für Cards.

Spacing-Skala
4
8
12
16
24
32
48
Radien
4 px · sm
Pills, Tags, Avatare klein
6 px · md
Inputs, Buttons, Sidebar-Items
8 px · lg
Cards, Dialoge, Modals
full · pill
Status-Pills, Avatare rund
01 · Foundations

Elevation

Sehr zurückhaltend. Wir setzen primär auf 1-px-Borders, Schatten nur für hovernde Cards und schwebende Layer (Modals, Popover).

0 · Flat
Border only
Standard für Cards & Felder
1 · Subtle
alb-shadow
KPI-Karten, Hero-Sektionen
2 · Hover
Card hover
Klickbare Listen-Items
02 · Components

Buttons

Drei Hierarchien: Primary für die eine wichtige Aktion pro Screen, Secondary für Alternativen, Ghost für unauffällige Aktionen wie „Abbrechen".

<!-- Primary action --> <button class="alb-btn-primary px-4 py-2"> Schaden melden </button> <!-- Secondary --> <button class="alb-btn-secondary px-4 py-2"> Speichern </button>
Größen
02 · Components

Pills & Status

Konsistente Statussprache: Erfolg = grün, Hinweis = ocker, Fehler = bordeaux, Neutral = sandig-grau, Primary = marine. Immer mit Icon, wenn Platz ist.

Erledigt In Bearbeitung Überfällig Archiviert Eigentümer
<span class="alb-pill alb-pill-success"> <i data-lucide="check"></i> Erledigt </span> // Varianten: // .alb-pill-success // .alb-pill-warn // .alb-pill-error // .alb-pill-neutral // .alb-pill-primary
02 · Components

Inputs & Forms

Klare Felder mit ruhigem Border, Focus-Ring im Marineblau. Labels darüber, Hilfetexte darunter — niemals im Placeholder.

Wir verwenden Ihre E-Mail nur für Login & Benachrichtigungen.
Datei wählen oder hierher ziehen
Validierung
Bitte vollständige E-Mail eingeben.
02 · Components

Cards

Drei Card-Typen: Standard (.alb-card), KPI-Karte mit Zahl, Hero-Card mit dunklem Verlauf für Onboarding & Hervorhebung.

Standard-Card
Weckmannweg 6
17 Einheiten · Hamburg-Eimsbüttel
Vermietet 12/12
KPI-Card
17.840 €
+4,2 % vs. Vormonat
Mieteinnahmen April
Hero-Card
Willkommen, Frau Müller
Ihre Wohnung in der Speicherstadt-Nähe.
02 · Components

Tabellen

Dichteste Datenmenge im Verwalterportal. Schmale Zeilen, tabular figures für Zahlen, Hover-Highlight, sticky Header bei langen Listen.

Einheit Mieter m² Kaltmiete Status
E-001 Carola Müller 68,4 964,80 € Vermietet
E-002 Familie Berkenkamp 94,2 1.420,00 € Vermietet
E-003 — frei seit 01.04. 52,1 820,00 € Sucht Mieter
E-004 Henning Stade 72,0 1.080,00 € Mietrückstand
03 · Patterns

Topbar

60 px hoch, weiß, dünner Border unten. Suche zentriert, Notifikation und Avatar rechts.

SK
… Hier folgt der Seiteninhalt mit Breadcrumb, Hero und Karten.
03 · Patterns

Empty States

Nie nur „keine Daten". Immer Icon + warme Erklärung + nächster Schritt.

Noch keine Tickets
Sobald Sie einen Schaden melden, erscheint dieser hier mit Status und Verlauf.
Keine Treffer
Für „Wasserschaden 2024" gibt es noch keine archivierten Tickets.
04 · Sonstiges

Iconography

Wir nutzen Lucide mit 1,5 px Stroke. Größen: 14 px (inline, Pills), 16 px (Buttons, Sidebar), 20 px (Empty-States).

home
building
key-round
user
users
briefcase
wrench
hammer
clipboard-list
calendar
mail
bell
search
folder
banknote
dashboard
04 · Sonstiges

Voice & Tone

Hanseatisch knapp, sachlich, freundlich-distanziert. „Sie", nie „Du". Keine Ausrufezeichen außer in echten Notfällen.

So sprechen wir
  • „Ihre Schadensmeldung ist eingegangen."
    Klar, faktisch, ohne Schmeichelei.
  • „Wir melden uns bis Donnerstag."
    Konkretes Versprechen, kein „so bald wie möglich".
  • „Die Heizung wird Mittwoch geprüft."
    Aktiv, aber nüchtern.
So eher nicht
  • „Hey! Vielen, vielen Dank!"
    Zu überschwänglich, nicht hanseatisch.
  • „Wir bemühen uns, schnell zu antworten."
    Vage, kein Versprechen.
  • „Du hast eine Nachricht!"
    Falsche Anrede, falsches Tempo.