Design Guide

Inhalt

• Design-Sprache
• Farben
• Typografie
• Layout-Komponenten
• Seiten-Layouts
• AppShell
• Sessions-Ansicht
• Auth-Bereich
• Mantine-Spezifika

Design-Sprache

Das CMS orientiert sich am Cloudflare Dashboard: minimalistisch, aufgeraeumt, kontrastarme Grauabstufungen mit weissen Karten auf hellem Hintergrund.

Farben

Hintergrund

Bereich	Farbe	Verwendung
AppShell (Header, Sidebar, Content)	#f9fafb	Einheitlicher Seitenhintergrund
Karten-Header / Karten-Footer	#f5f6f7	Grauer Karten-Header und -Footer
Karten-Body	white	Weisser Inhaltsbereich

Borders

Typ	Wert	Verwendung
Karten-Rand	rgba(0,0,0,0.12)	Aeusserer Kartenrand
Karten-Header Separator	rgba(0,0,0,0.12)	Border zwischen Header und Body
Karten-Footer Separator	rgba(0,0,0,0.12)	Border zwischen Body und Footer
Listen-Divider	rgba(0,0,0,0.12)	Zwischen Zeilen in Listen/Tabellen
Sidebar-Border	var(--mantine-color-gray-3)	Rechter Rand der Sidebar
Header-Border	var(--mantine-color-gray-3)	Unterer Rand des AppShell-Headers

Brand-Palette

Definiert in theme.ts als Mantine Custom Color brand:

• Primary: #1a56db (Index 6)
• Verwendet fuer: Buttons, Links, aktive Navigation, Logo

Typografie

• Font: Inter (mit System-Fallbacks)
• Headings: fw={600}
• Body: Mantine Default (sm)
• Seiten-Titel (PageHeader): <Title order={3} fw={600}>
• Karten-Header Text: <Text size="sm" fw={500} c="dark">
• Beschreibungen: <Text size="sm" c="dimmed">

Layout-Komponenten

PageHeader

Grosser Seitentitel direkt auf dem grauen Hintergrund, AUSSERHALB der Karte. Optionale Beschreibung und Action-Buttons.

<PageHeader title="Seitentitel" description="Optional">
  {/* Optionale Action-Buttons rechts */}
  <Button size="xs">Aktion</Button>
</PageHeader>

Regeln:

• Jede Seite hat einen PageHeader
• Action-Buttons (z.B. “Account anlegen”, “Alle abmelden”) gehoeren in den PageHeader, NICHT in die Karte
• Beschreibung nur auf dem Dashboard

ContentCard

Wiederverwendbare Karten-Komponente mit optionalem Header, Body und Footer.

<ContentCard
  title="Kartentitel"           // Grauer Header mit Text
  description="Optional"       // Kleinere Beschreibung neben dem Titel
  headerRight={<Button />}     // Optionales Element rechts im Header
  footer={<Button />}          // Grauer Footer-Bereich (fuer Submit-Buttons)
  maw={480}                    // Max-Breite (fuer Formulare)
  noPadding                    // Kein Body-Padding (fuer Tabellen/Listen)
>
  {children}
</ContentCard>

Struktur:

• radius="md" — abgerundete Ecken
• Header: bg-[#f5f6f7] + rounded-t-md + Border-Bottom
• Body: weiss, Standard-Padding md (oder noPadding fuer Listen)
• Footer: bg-[#f5f6f7] + rounded-b-md + Border-Top

Seiten-Layouts

Formular-Seiten (Profil, Passwort, Account erstellen)

PageHeader (Titel auf grauem Hintergrund)
ContentCard maw={480}
  ├── Header (grau): Sektions-Titel
  ├── Body (weiss): Formularfelder
  └── Footer (grau): Submit-Button

• <form> wrapped die gesamte ContentCard (damit der Footer-Button submit auslöst)
• maw={480} beschraenkt die Breite
• Button im Footer mit size="xs"
• Kein Button im PageHeader

Listen-/Tabellen-Seiten (Team, Sessions)

PageHeader (Titel + Action-Button rechts)
ContentCard noPadding
  └── Body: Tabelle/Liste edge-to-edge

• noPadding fuer randlose Tabellen/Listen
• Action-Buttons im PageHeader (nicht in der Karte)
• Zeilen-Divider: border-b border-[rgba(0,0,0,0.12)]

Dashboard

PageHeader (Username + Beschreibung)
ContentCard title="Dashboard"
  └── Body: Inhalt

AppShell

• Header: bg="#f9fafb" via Mantine bg-Prop (NICHT Tailwind-Klasse — Mantine ueberschreibt Tailwind)
• Sidebar: background-color: #f9fafb in CSS Module
• Content: bg-[#f9fafb] via Tailwind auf <MantineAppShell.Main>
• Header zeigt: Logo links, Username rechts
• Sidebar zeigt: Navigation + User-Info/Logout im Footer

Navigation States

State	Background	Text	Icon
Default	transparent	gray-7	gray-5
Hover	gray-1	black	black
Active (selected)	gray-2	black	black

Kein Blau in der Navigation — nur Grauabstufungen.

Sessions-Ansicht

Jede Session zeigt:

• Device-Icon (Monitor) als visueller Anker
• Browser + OS aus User-Agent geparst (z.B. “Chrome on macOS”)
• IP-Adresse mit Globe-Icon
• Standort mit Pin-Icon (aus MaxMind Geolocation, ueber geolocation-Tabelle gejoined)
• Erstellungsdatum
• “Aktuelle Session” Badge
• “Abmelden” Button fuer andere Sessions

Auth-Bereich (Login, 2FA, Password Reset)

Separates Design, nicht im AppShell:

• Hintergrund: #f9fafb
• Zentrierte Karte mit Paper withBorder shadow="sm" und overflow-hidden
• Split-Layout mit Storyset-Illustration (nur Desktop)
• Logo + “Content Management System” Text darueber

Mantine-Spezifika

• AppShell.Header Background: Immer ueber Mantines bg-Prop setzen, NICHT ueber Tailwind-Klassen. Mantine hat eigene background-color: white Styles die Tailwind ueberschreiben.
• Default Radius: md (in theme.ts konfiguriert)
• Default Button Size: sm
• Default Input Size: sm