lfg2025/archy
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases 63 Wiki Activity

docs(01): revise UI-SPEC typography contract

Browse Source
This commit is contained in:
archipelago 2026-07-29 11:38:15 -04:00
parent ac09fc5ded
commit cb58a06d4b
1 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.planning/phases/01-federation-mesh-hardening/01-UI-SPEC.md
View File

@ -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 `<h3 class="text-xl font-semibold">` 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.