---
kind: ticket-handoff
project: HiveGrid Screen Project
ticket: D-D0b
area: Foundation / Layout Standards
status: Fertig / Review
repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
stand: 2026-07-03
---

# D-D0b Layout Standards

Repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes

Arbeitsbereich im Repo: [D-D0b Layout Standards](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Layout%20Standards.md)

Backlog: [D-D0b Backlog](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Backlog.md)

Dauerhafte Standards: [Subframe UI Standards / Layout](../../04%20Standards/Subframe%20UI%20Standards/Layout/README.md)

Entscheidungslog: [Subframe UI Standards / Entscheidungen](../../04%20Standards/Subframe%20UI%20Standards/02_Entscheidungen.md)

HTML-Preview: [D-D0b Layout Preview](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/Preview/index.html)

Full-Page-Preview: [D-D0b Full Page Preview](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/Preview/preview.html)

Lokale Arbeitskopien der Preview: `99 Temp/D-D0b Layout Preview/index.html` und `99 Temp/D-D0b Layout Preview/preview.html`

Hinweis: Die Full-Page-Preview hat einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit die angewendeten Regeln direkt in der realistischen Beispielseite auffindbar sind.

## Kurzfassung

Fuer `D-D0b` wurden die grundlegenden Layout- und Composition-Standards fuer HiveGrid validiert, dokumentiert und in die dauerhaften Subframe UI Standards uebertragen.

Die HTML-Preview bleibt lokal erhalten, ist aber nicht Source of Truth. Die verbindlichen Regeln stehen in den Markdown-Dateien.

Eine bereinigte Kopie der Preview liegt versioniert im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt und aus diesem Ticket heraus referenziert werden kann.

## Gemacht

- 8px-basiertes Spacing-System mit erlaubten Standardwerten festgelegt.
- Page-, Card-, Surface-, Grid- und Section-Abstaende validiert.
- Token-aware Text-Rhythmus fuer Page-/Section-Header validiert.
- Button-, Form-, Table- und State-Ownership abgegrenzt, damit Screen-Layouts Komponentenstandards nicht nachbauen.
- Dialog- und Fullscreen-Dialog-Groessen validiert.
- Dialog-interne Gaps validiert.
- Backlog-Punkte in eigene Backlog-Datei ausgelagert.
- Lokale Preview behalten und als lokale Referenzhilfe markiert.
- HTML-Preview und Full-Page-Preview als versionierte Referenzdateien im D-D0b-Ordner abgelegt.
- Regel-Inspector in der Full-Page-Preview ergaenzt, damit D01-D09 im realistischen Beispiel sichtbar und anspringbar sind.

## Validiert

- `D01 Spacing Scale`: `4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96`.
- `D02 Page/Card/Grid`: Page 24px minimum, Card/Surface 16px, Grid/Card Gap 16px, kompakt lokal 12px, Section Gap 24px.
- `D03 Text-Rhythmus`: `0 / 24 / 0 / 12`, nur zusammen mit 150%-Texttokens fuer beschreibende Page-/Section-Texte.
- `D04 Button Ownership`: Standardaktionen nutzen Button Default/Medium/36px; Button-Padding und Varianten kommen aus der Button-Komponente.
- `D05 Form Layout Gap`: Komplette Field-Komponenten stehen 16px auseinander; Field-Anatomy kommt aus der Input-Komponente.
- `D06 Table Ownership`: Tabellen-Dichte kommt aus der Table-Komponente; Carbon ist nur Referenz.
- `D07 Dialog Sizes`: XS 420, S 560, M 720, L 1200; Fullscreen `width: calc(100vw - 48px)`, `max-width: 2512px`, `height: calc(100vh - 48px)`.
- `D08 Dialog Internal Gaps`: Balanced mit Title/Description 8px, Field/Form Row 16px, Section 24px, Footer Button 8px.
- `D09 States`: Empty/Error/No-Permission sind inline State-Komponenten, keine Modale.

## Wichtige Arbeitsregeln fuer neue Screens

- Komponenten-Defaults verwenden, wenn sie den validierten Standard bereits abbilden.
- Padding oder Gap nicht manuell nachbauen, wenn die zuständige Komponente dafuer bereits Varianten, Props oder Auto Layout besitzt.
- Modale in Subframe als echte Dialog-Komponenten bauen, nicht als Fake-Modal.
- Page-/Section-Beschreibungen als 150%-Texttokens setzen, wenn sie umbrechen koennen.
- `0px` bei D03 ist bewusst definiert und darf nicht automatisch durch 4px/8px ersetzt werden.

## Backlog / Offen

Nicht blockierend fuer den Handoff:

- Mobile Layout Standards.
- Drawer / Side Panel Breitenregeln.
- Button-/Action-Semantik.
- Error-/Result-Dialog-Komponenten.
- No-Permission-Komponente und Table No-Permission State.
- Fill Buttons fuer XS/S Dialoge.
- Weitere Accessibility- und Carbon-Recherche.

Details: [D-D0b Backlog](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Backlog.md)

## Hinweis fuer Ticket-System

Diese Datei ist der kompakte Handoff fuer `D-D0b`. Fuer verbindliche Regeln sind die [Subframe UI Standards / Layout](../../04%20Standards/Subframe%20UI%20Standards/Layout/README.md) massgeblich.