headquarter/openspec/tasks/web-ui-spacing-typography-rework.md

OpenSpec Tasks: Web UI Foundations — Spacing, Typography & Visual Rhythm

Change

web-ui-spacing-typography-rework — Pass 1: Foundations

Parent Spec

openspec/specs/web-ui-spacing-typography-rework.md

Status

tasks

---

Implementation Tasks

• 1. Expand token scale in apps/web/src/styles/tokens.css

  • Add --space-7, --space-9, --space-12
  • Add --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-full
  • Add --line-height-tight, --line-height-normal, --line-height-relaxed
  • Add --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl
  • Add --touch-target, --sidebar-width, --mobile-nav-height
  • Add a documentation header comment explaining the token naming convention

• 2. Add button primitives to apps/web/src/styles/global.css

  • .btn, .btn-primary, .btn-secondary, .btn-sm
  • Include :focus-visible, :hover, and :disabled states

• 3. Add link-button primitive to apps/web/src/styles/global.css

• 4. Add form primitives to apps/web/src/styles/global.css

  • .form-input, .form-textarea
  • .checkbox-label
  • .hint
  • .form-error, .error-message

• 5. Add alert primitives to apps/web/src/styles/global.css

  • .alert, .alert-error, .alert-warning, .alert-info

• 6. Add loading-state primitive to apps/web/src/styles/global.css

• 7. Add badge primitives to apps/web/src/styles/global.css

  • .badge, .badge-success, .badge-secondary

• 8. Add text utility primitives

  • .text-muted in global.css

• 9. Add mobile detail view styles to apps/web/src/styles/utilities.css

  • .mobile-detail-view
  • .mobile-detail-header
  • .mobile-detail-header-content
  • .mobile-detail-title
  • .mobile-detail-subtitle
  • .mobile-detail-actions
  • .mobile-detail-fields
  • .mobile-detail-field
  • .mobile-detail-field-label
  • .mobile-detail-field-value
  • .mobile-detail-code

• 10. Add mobile list search styles to apps/web/src/styles/utilities.css

  • .mobile-list-search
  • .mobile-list-search-input

• 11. Fix mobile nav / FAB / bottom-sheet collisions

  • Update --mobile-nav-height usage in utilities.css and global.css
  • .start-tool-fab uses calc(var(--mobile-nav-height) + var(--space-3))
  • .shell-content.mobile uses calc(var(--mobile-nav-height) + var(--space-3))
  • .mobile-edit-actions uses var(--mobile-nav-height)

• 12. Add visible focus states

  • Add :focus-visible rings for .nav-item, .mobile-nav-item, .tab, .tree-entry, .btn, .form-input, .form-textarea, .link-button

• 13. Replace critical inline font-size violations

  • Replace fontSize: "0.7rem" in ConfigProfileListSidebar.tsx with token-based class
  • Audit for other 0.7rem / 10px / 11px inline styles and fix

• 14. Add SSH key page signing/verification styles

  • .key-signing, .key-verification, .signature-result, .verify-result in utilities.css

• 15. Add profile page avatar styles

  • .profile-avatar-section, .avatar-preview, .avatar-image, .avatar-placeholder in utilities.css

• 16. Verification

  • Run cd apps/web && npm run typecheck
  • Run cd apps/web && npm run lint
  • Search for each previously undefined class and confirm it now has a rule
  • Spot-check mobile detail view, SSH keys page, and profile page

---

Acceptance Criteria

• All tasks above are completed.
• npm run typecheck passes.
• npm run lint passes.
• No referenced class from the audit remains undefined.
• Mobile nav/FAB/edit-actions no longer collide on devices with safe-area insets.
• All interactive controls have visible :focus-visible states.
• Inline 0.7rem font sizes are replaced with token-based classes.

---

Notes

• Do not rename or remove existing tokens; only add new ones.
• Do not refactor inline styles in editor components in this pass (Pass 2).
• Do not unify modals/dialogs in this pass (Pass 3).
• Keep each commit focused; prefer one commit per task group.