arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

docs(13): UI design contract

Browse source
This commit is contained in:
Arthur Belleville 2026-05-16 12:58:32 +02:00
parent bab59fb220
commit e867b735d9
No known key found for this signature in database
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.planning/phases/13-design-system-foundation/13-UI-SPEC.md
View file

@ -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`