From bab59fb2205e8d39c477b0983d9224408a64c7d7 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 16 May 2026 12:53:13 +0200
Subject: [PATCH] fix(13): collapse typography to 2 weights, fix CTA copy, add
 focal point
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Heading weight 700 → 600 (resolves checker BLOCK on Dim 4 — max 2 weights)
- Modal header and empty-state title font-weight updated to match
- Empty state CTA "Add item" → "Create item" (verb + noun, Dim 1 flag)
- Catalog page focal point declaration added (Dim 2 flag)

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 .../13-design-system-foundation/13-UI-SPEC.md   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 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 8800596..d092d7c 100644
--- a/.planning/phases/13-design-system-foundation/13-UI-SPEC.md
+++ b/.planning/phases/13-design-system-foundation/13-UI-SPEC.md
@@ -104,12 +104,15 @@ 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.
+
 | 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 |
 | Small / hint | 14px (0.875rem) | 400 regular | 1.4 | Form hints, error messages, badge text, table headers |
-| Heading | 18px (1.125rem) | 700 bold | 1.2 | Modal titles, empty-state titles, section headings |
+| Heading | 18px (1.125rem) | 600 semibold | 1.2 | Modal titles, empty-state titles, section headings |
 
 **Font stack (declared in base.css body rule):**
 ```
@@ -293,7 +296,7 @@ Class: `ui-modal-backdrop` → `ui-modal-panel` → `ui-modal-header` / `ui-moda
 
 - Backdrop: `position: fixed`, `inset: 0`, `background: --overlay-backdrop-default`, flex center
 - Panel: max-width 32rem, border-radius 1rem, shadow `--shadow-surface-lg`
-- Header: `font-size: 1.125rem`, `font-weight: 700`, bottom border divider
+- Header: `font-size: 1.125rem`, `font-weight: 600`, bottom border divider
 - Actions: flex row, justify end, gap 0.75rem, top border divider
 - HTMX pattern: backdrop rendered server-side into `#modal-slot`; close button sets `hx-delete` or swaps empty fragment
 
@@ -314,7 +317,7 @@ Class: `ui-empty-state` wrapping `ui-empty-state-icon`, `ui-empty-state-title`,
 - Border radius: 1rem
 - Icon container: 4rem × 4rem circle, `--color-surface-muted` background, `--color-text-faint` icon
 - Icon SVG: 2rem × 2rem
-- Title: `font-size: 1.125rem`, `font-weight: 700`
+- Title: `font-size: 1.125rem`, `font-weight: 600`
 - Description: max-width 32rem, `--color-text-muted`
 
 Props struct:
@@ -413,6 +416,12 @@ They are distinct from the CSS spacing scale used in layout.
 **Build gate:** `//go:build catalog` — compiled only with `-tags catalog`
 **Template location:** `backend/internal/web/ui/catalog/catalog.templ`
 
+**Focal point:** The component grid in the main content area is the primary focal point. The sidebar
+provides navigation only — it carries no visual weight beyond a subtle border-right at
+`--color-border-default`. Each section opens with a bold section heading (`{ComponentName} — {DS-req}`)
+that anchors the viewer's eye before the variant grid. Within each section, the default/md size
+variant is rendered first (top-left) as the canonical reference.
+
 ### Layout
 
 ```
@@ -476,7 +485,7 @@ The only user-visible surface is the dev-only catalog page.
 | Each section subheading | `{ComponentName} — {DS-req}` (e.g. `Button — DS-02`) |
 | Empty state demo title | `Nothing here yet` |
 | Empty state demo body | `Add your first item to get started.` |
-| Empty state demo CTA | `Add item` |
+| Empty state demo CTA | `Create item` |
 | Table demo empty row | `No data to display` |
 | Form error demo | `This field is required.` |
 | Form hint demo | `Enter a value between 1 and 100.` |