diff --git a/.planning/phases/01-federation-mesh-hardening/01-UI-SPEC.md b/.planning/phases/01-federation-mesh-hardening/01-UI-SPEC.md index 8c5ff54f..6b4c53ec 100644 --- a/.planning/phases/01-federation-mesh-hardening/01-UI-SPEC.md +++ b/.planning/phases/01-federation-mesh-hardening/01-UI-SPEC.md @@ -50,16 +50,17 @@ Exceptions: 44px minimum touch target on all new interactive buttons (global rul ## Typography -Scoped to this phase's new elements only (existing typography elsewhere is unchanged): +Scoped to this phase's new elements only (existing typography elsewhere is unchanged). Exactly two weights govern this phase's new elements — 400 and 600; Label and Body are differentiated from each other by size and color (not weight), matching how `NodeList.vue` already distinguishes node-name text from badge/hint text: | Role | Size | Weight | Line Height | |------|------|--------|-------------| -| Label | 12px (`text-xs`) | 500 (medium) | 1.4 | -| Body | 14px (`text-sm`) | 400 (regular) | 1.5 | -| Heading | 18–20px (`text-lg`/`text-xl`) | 600 (semibold) | 1.3 | -| Display (inherited, FED-06 only) | 48px (`text-5xl`) | 800 (`font-black`) | 1.1 | +| Label | 12px (`text-xs`) | 400 (regular), `text-white/60` | 1.4 | +| Body | 14px (`text-sm`) | 400 (regular), `text-white` | 1.5 | +| Heading | 20px (`text-xl`) | 600 (semibold) | 1.3 | -The Display row is **inherited unchanged** from the existing `SendBitcoinModal.vue`/`WalletScanModal.vue` success-amount numerals (e.g. `12,345 sats`) — FED-06 only replaces the ring graphic behind/around that text, never the text itself. Modal titles ("Open Lightning Channel", "Request Channel") use Heading; node names, URI strings, and helper/meta text use Body or Label per the existing `LightningChannelsPanel.vue`/`NodeList.vue` convention (node name = Body, badges/hints = Label). +Heading is pinned to `text-xl` (20px), not a range — this matches `BaseModal.vue`'s own `

` title (the component every new modal in this phase must use per the Modal contract above) and `WalletScanModal.vue`'s pane title, i.e. the size the existing house modals actually use most for their titles. Modal titles ("Open Lightning Channel", "Request Channel") use Heading; node names use Body (`text-white`); URI strings, badges, and helper/meta text use Label (`text-white/60`) per the existing `LightningChannelsPanel.vue`/`NodeList.vue` convention. + +**Inherited — not governed by this contract:** The `SendBitcoinModal.vue`/`WalletScanModal.vue` success-amount numerals (e.g. `12,345 sats`, `text-5xl font-black` — 48px / weight 800) are pre-existing, unchanged display text. FED-06 only replaces the ring graphic behind/around that text, never the text itself, so this weight/size falls outside the phase's new-elements typography contract above and is not counted toward its weight budget. --- @@ -128,6 +129,12 @@ Applicable state considerations resolved: 13 covered, 3 backstop, 0 unresolved. --- +## FED-05 Visual Anchor + +Primary visual anchor: the trusted-nodes list (federation trust is the primary path); meshed-lightning-peers list second; manual-paste fallback visually de-emphasized below both (collapsed behind the "Paste URI Manually" entry point per the Copywriting Contract above, not rendered as a third equal-weight column). + +--- + ## FED-06 Sizing Decision (resolves RESEARCH.md Pitfall 4 / Assumption A4) RESEARCH.md flagged the `ScreensaverRing` size mismatch (`compact` = 240–320px vs. the current 96–112px paid-tick badges) as needing a UI-spec decision before implementation. **Decision: add a new `badge` size variant to `ScreensaverRing.vue`**, not a CSS `transform: scale()` wrapper — cleaner, reusable across both call sites, and avoids reduced-motion/layout-box mismatches that a transform hack would introduce.