earnOS Navigator

Executive Navigator UI Specification

Owner: Group PMO Reviewed: 2026-02-24 Read: 3 min Repo: earnOS
ATAGAGHALPEBS

Summary

- `earnOS` is a decision-support knowledge system, not a content warehouse.

Decision Points

  • `earnOS` is a decision-support knowledge system, not a content warehouse.
  • Group policy pages remain in earnOS; entity operating detail remains in entity repos.
  • Navigation prioritizes search, then domain, then entity context.
  • `governance`
  • `shared-services`

Executive Navigator UI Specification

1) Information Architecture Redesign

IA Principles

  • earnOS is a decision-support knowledge system, not a content warehouse.
  • Group policy pages remain in earnOS; entity operating detail remains in entity repos.
  • Navigation prioritizes search, then domain, then entity context.

Primary IA Layers

  1. Global Layer
    • Search, recent history, and global shortcuts.
  2. Domain Layer
    • Governance, Shared Services, Provider Governance, Group Finance, Entity Interfaces.
  3. Document Layer
    • Briefing summary, decision data, deep links, controlled long-form details.

Domain Taxonomy

  • governance
  • shared-services
  • provider-governance
  • group-finance
  • entity-interfaces
  • entities
  • wiki

Required Frontmatter Additions for Navigation UX

  • summary: 1-2 sentence briefing abstract.
  • entity_badges: list of entity codes impacted.
  • nav_weight: integer for domain ordering.
  • doc_type: briefing | policy | interface | registry | standard.
  • estimated_read_minutes: integer for skim planning.

2) Mobile Navigation Proposal (iPhone First)

Mobile Shell

  • Top sticky search bar, always visible, 52px height.
  • Main content scroll area below search.
  • Bottom navigation fixed at viewport bottom.

Bottom Navigation (Thumb Reach)

  1. Home
  2. Domains
  3. Search
  4. Entities
  5. Recent

Mobile Behaviors

  • Tap target minimum: 48x48px.
  • Search opens full-screen command sheet with recent queries and top hits.
  • Domain switcher appears as horizontal chips below sticky search.
  • Entity switcher appears as icon badges in an expandable drawer.
  • Quick jump card to Shared Services pinned near top of Home feed.

3) Desktop Navigation Proposal

Desktop Layout

  • Three-region shell with practical density:
    • Left rail: 264px for domain/entity/recent nav.
    • Center: 760-860px for content.
    • Right rail: 280-320px for briefing summary and in-page outline.

Desktop Behaviors

  • Global search pinned top-left with Cmd/Ctrl + K shortcut.
  • Left rail supports collapse to icon mode.
  • Right rail sticky blocks:
    • Summary
    • Decision Points
    • On This Page
    • Cross-Repo Links

4) Typography Scale (25-70 Readability)

Font Stack

  • font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;

Type Tokens

  • --text-xs: 0.8125rem (13px minimum metadata)
  • --text-sm: 0.9375rem (15px)
  • --text-base: 1.0625rem (17px body)
  • --text-lg: 1.1875rem (19px lead)
  • --text-xl: 1.375rem (22px section headings)
  • --h3: 1.5rem (24px)
  • --h2: 1.75rem (28px)
  • --h1: 2rem (32px)

Contrast and Spacing Rules

  • Body text contrast minimum 7:1 on primary background.
  • Avoid grey-on-grey combinations for any critical text.
  • Body line-height: 1.6.
  • Heading line-height: 1.25.

5) Component Hierarchy

  1. AppShell
  2. GlobalSearchBar
  3. DomainSwitcher
  4. EntitySwitcher
  5. RecentDocsPanel
  6. Breadcrumbs
  7. RepoDomainBadges
  8. BriefingSummaryCard
  9. DecisionPointsCard
  10. DocumentSection
  11. CollapsibleSection (native <details>)
  12. ReadingProgressBar
  13. CrossRepoLinkList
  14. OnThisPageNav

6) Sidebar Redesign

Replace Dense Sidebar With Structured Left Rail

  1. Domain switcher (top, segmented/chip style).
  2. Entity switcher (badges: AT, AG, AGH, ALP, EBS).
  3. Quick jump block:
    • Shared Services
    • Provider Registry
    • Group Finance Controls
  4. Recently viewed list (last 10 on mobile drawer, last 20 desktop rail).
  5. Pinned docs (manual bookmarks).
  • Build from frontmatter: domain, nav_weight, title, repo, entity_badges.

7) Executive Briefing Layout Pattern

Page Composition Order

  1. Breadcrumb row with repo + domain badges.
  2. Title and metadata row (owner, last_reviewed, read time).
  3. Briefing summary card (always above first heading).
  4. Decision points list (max 5 bullets).
  5. Main body sections.
  6. Collapsible detail sections for policy depth.
  7. Cross-repo references and related documents.

Long-Page Controls

  • Reading progress bar fixed under sticky search.
  • Auto-generated in-page outline.
  • Collapse all details / Expand all details utility.

8) Tailwind or CSS Implementation Strategy

  • CSS-first with design tokens and progressive enhancement JavaScript.
  • Keep runtime JS under 35KB gzip for navigation/search enhancements.
  • Use semantic HTML and native controls first (<details>, <nav>, <dialog> where supported).

If Tailwind Is Preferred

  • Use Tailwind only as a compile-time utility layer.
  • Keep tokens in :root CSS variables and map into Tailwind config.
  • Restrict custom JS to:
    • command palette search,
    • reading progress,
    • recent documents storage.

Progressive Enhancement Rules

  • Content and links must remain fully usable with JS disabled.
  • Search input falls back to dedicated search page when JS unavailable.
  • Navigation drawers degrade to standard link lists.

9) Suggested Repo Folder Additions for UI Components

See: UI Folder Structure.

Recommended additions under a static-friendly site workspace:

  • site/src/layouts/
  • site/src/components/nav/
  • site/src/components/briefing/
  • site/src/components/search/
  • site/src/components/common/
  • site/src/styles/
  • site/src/scripts/
  • site/src/data/
  • site/src/pages/