From e867b735d93c8c7cb6e4f9c704772641c898ca00 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 12:58:32 +0200 Subject: [PATCH] docs(13): UI design contract --- .../13-design-system-foundation/13-UI-SPEC.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/.planning/phases/13-design-system-foundation/13-UI-SPEC.md b/.planning/phases/13-design-system-foundation/13-UI-SPEC.md index d092d7c..2b42880 100644 --- a/.planning/phases/13-design-system-foundation/13-UI-SPEC.md +++ b/.planning/phases/13-design-system-foundation/13-UI-SPEC.md @@ -91,9 +91,7 @@ as raw CSS values used inside component rules. All values are as declared in `go | lg | 16px | 1rem | `SpacingStepLG` | | xl | 24px | 1.5rem | `SpacingStepXL` | -**Note:** The spacing component (`SpaceX` / `SpaceY`) uses this non-standard scale (xs=4, md=12, xl=24) -because it is a port of the go-backend spacing utility. This scale serves the spacing *component* only. -Layout-level spacing in the catalog fake-shell uses Tailwind utilities directly. +**Exception:** The spacing component scale (xs=4, sm=8, md=12, lg=16, xl=24) is a verbatim port of go-backend's spacing utility components (locked by decision D-T01). The non-standard 12px (`md`) step is intentional and scoped exclusively to the SpaceX/SpaceY utility templ components — it is NOT used for page-level layout spacing. Layout spacing in all other components and the catalog shell uses standard Tailwind utilities (4, 8, 16, 24) directly. Touch target exceptions: buttons and icon-buttons enforce `min-height: 44px` and icon-buttons enforce `min-width: 44px` for WCAG 2.5.5 compliance. These override the spacing scale where needed. @@ -105,15 +103,18 @@ Touch target exceptions: buttons and icon-buttons enforce `min-height: 44px` and Sourced from `go-backend/internal/web/ui/base.css` body declaration and component CSS measurements. **Declared font weights: 400 (regular) and 600 (semibold) only.** Headings rely on size contrast -(18px vs 16px body) rather than a third weight to establish hierarchy. +(18px vs 16px body) rather than a third weight to establish hierarchy. Labels and form elements +share the 16px body size and are distinguished by weight (600 semibold) only — no separate size +step is introduced. | Role | Size | Weight | Line Height | Token / Usage | |------|------|--------|-------------|---------------| -| Body | 16px (1rem) | 400 regular | 1.5 | Default prose, descriptions | -| Label / form | 15.2px (0.95rem) | 600 semibold | 1.4 | Form labels, button labels | +| Body / label / form | 16px (1rem) | 400 regular / 600 semibold | 1.5 / 1.4 | Body prose at 400; form labels and button labels at 600 | | Small / hint | 14px (0.875rem) | 400 regular | 1.4 | Form hints, error messages, badge text, table headers | | Heading | 18px (1.125rem) | 600 semibold | 1.2 | Modal titles, empty-state titles, section headings | +Three declared sizes: 14px, 16px, 18px. Two declared weights: 400 and 600. + **Font stack (declared in base.css body rule):** ``` ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif @@ -376,7 +377,7 @@ type IconButtonProps struct { Class: `ui-form-field` wrapping `ui-form-label`, input/textarea/select, `ui-form-hint`, `ui-form-error` -- Label: `font-size: 0.95rem`, `font-weight: 600`, `--color-text-primary` +- Label: `font-size: 1rem`, `font-weight: 600`, `--color-text-primary` - Hint: `font-size: 0.875rem`, `--color-text-muted` - Error: `font-size: 0.875rem`, `--color-status-danger-foreground` - Grid layout with `gap: 0.5rem`