Skip to main content

UX Feedback 2026-02-23 : Authority Path Detail

Claude Code Prompt

Authority Path Detail Page — Enterprise Typography & Spacing Refinement​

Context​

We are refining the Authority Path detail page for compositional clarity and enterprise-grade readability.

This is not a structural change and requires:

  • No backend updates
  • No new logic
  • No removal of risk conditions
  • No opacity-based styling

We will improve:

  • Vertical rhythm
  • Typography scale
  • Section hierarchy
  • Padding consistency
  • Visual emphasis

All text must remain WCAG AA compliant.

Do not reduce opacity on risk, ownership, or runtime information.

1 Vertical Rhythm (Major Layout Refinement)

Increase spacing between major sections to create stronger hierarchy.

Apply:​

  • 32px vertical spacing between:
  • Graph → Risk strip
  • Risk strip → Ownership/Authority row
  • Ownership row → Deterministic linkage
  • 24px internal padding for:
  • Graph card
  • Risk strip
  • Ownership card
  • 20px internal padding for:
  • Authority state
  • 16px internal padding for collapsed sections

Use consistent spacing tokens across the page.

Goal: increase breathing room without changing structure.

2 Header & Title Hierarchy

  • Font size: 12–13px
  • Use secondary text color token (not opacity)
  • Add 12–16px spacing below breadcrumb

Title:​

  • Slightly increase line-height (1.25–1.3)
  • Font weight: 600
  • Add 16px margin below title

Subtitle:​

  • Font size: 14px
  • Use secondary text color token
  • 8px spacing below title

Avoid overly light contrast. Maintain strong readability.

3 Graph Section (Primary Surface)

  • Padding: 24px
  • Ensure graph container visually dominates width
  • Label “Execution-derived authority path”:
  • 12px
  • Secondary color token
  • Regular weight
  • Do not use opacity to mute

Graph must clearly feel like the primary investigative surface.

4 Active Risk Conditions Strip (Hierarchy Clarification)

We are keeping all risk tiles. No reduction in signal.

Risk Tile Typography:​

  • Condition label:
  • 14px
  • Semibold
  • Primary text color
  • “Since Xd”:
  • 12px
  • Secondary text color token
  • Status chip (“Active”):
  • Font size: 11–12px
  • Tightened horizontal padding
  • Maintain strong contrast

Runtime Evidence (Right Side):​

Runtime must be visually secondary but readable.

  • Labels:
  • 12px
  • Secondary color token
  • Values:
  • 14px
  • Regular weight
  • Increase spacing between risk tile group and runtime group (24–32px gap)

Do not reduce opacity. Use color tokens and size hierarchy instead.

5 Ownership Card (Governance Emphasis)

Ownership must feel like a control surface.

Apply:​

  • Header font weight: 600
  • 24px internal padding
  • 16px vertical spacing between:
  • Automation owner
  • Runtime identity

Runtime Identity (Invalid State):​

If invalid:

  • “Not assigned” or “Departed”
  • Font weight: 500
  • Error color token
  • Reason text:
  • 12px
  • Secondary text color
  • Inline after dash

Do not combine multiple state indicators. Show one primary state + one reason.

6 Authority State (Secondary Context)

Authority State is descriptive, not diagnostic.

Apply:​

  • Padding: 20px
  • Labels:
  • 12px
  • Secondary color token
  • Values:
  • 14px
  • Regular weight
  • Slightly tighter row spacing than Ownership

Authority state must visually sit behind Ownership in importance.

7 Card & Background Consistency

Ensure:

  • Consistent border radius across all cards
  • Consistent border color tokens
  • Background tint is subtle and consistent
  • Avoid heavy grey backgrounds that compress perceived spacing

Whitespace should create hierarchy — not color blocks.

8 Collapsible Sections (Proof & Metadata)

Deterministic linkage + Audit metadata:

  • Collapsed by default
  • 16px internal padding
  • Section headers:
  • 13px
  • Semibold
  • Secondary text color for descriptive metadata

They must feel clearly secondary to the investigative surface above.

9 Typography Scale (Summary)

Use consistent scale:

  • 12px → metadata / timestamps / secondary labels
  • 14px → standard value text
  • 16px+ → section headers
  • 600 weight → primary section headers
  • 500 weight → important inline value (e.g., invalid state)

No opacity-based hierarchy.

Hierarchy comes from size, weight, spacing, and semantic color tokens.

10 Final Visual Acceptance Criteria

After refinement:

  • Graph clearly dominates first view.
  • Risk conditions visually outweigh runtime evidence.
  • Ownership feels more important than Authority state.
  • No text appears faded or low-contrast.
  • Page feels breathable and composed.
  • All signals remain visible and deterministic.

Non-Goals

  • No removal of risk tiles
  • No risk scoring
  • No backend logic changes
  • No new features
  • No opacity-based visual tricks

This is a compositional refinement pass only.