HiveGrid-Wireframes/Tickets/Fertige Tickets/D-D0b Layout Standards.md

kind, project, ticket, area, status, repo, stand

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

D-D0b Layout Standards

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

Arbeitsbereich im Repo: D-D0b Layout Standards

Backlog: D-D0b Backlog

Dauerhafte Standards: Subframe UI Standards / Layout

Entscheidungslog: Subframe UI Standards / Entscheidungen

HTML-Preview: D-D0b Layout Preview

Full-Page-Preview: D-D0b Full Page Preview

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

Hinweis fuer Ticket-System

Diese Datei ist der kompakte Handoff fuer D-D0b. Fuer verbindliche Regeln sind die Subframe UI Standards / Layout massgeblich.