Skip to content

STD-UX-005: The Workstation Pattern

1. Context

Professional users (Property Managers, Accountants, Admins) need consistency, density, and context. They do not need "landing pages"; they need "cockpits".

2. The Pattern

All operational tools MUST use the WorkstationShell component structure.

2.1 Anatomy of a Workstation

  1. The Header (Context):

    • Title: Clear name of the tool (e.g., "General Ledger").
    • Metadata: High-level KPIs relevant to this screen (e.g., "Unreconciled: 0", "FY: 2026").
    • Global Actions: Primary verbs (e.g., "Post Entry", "New Request").
    • Description: A single line explaining the purpose of this tool (Documentation-in-UI).

  2. The Canvas (Work):

    • Data Grid: The default view. Dense, sortable, filterable.
    • Master-Detail: Click a row -> Open a drawer/panel.
    • Zero-State: If empty, provide a specific, helpful prompt (not just "No Data").

  3. The Sidebar (Navigation):

    • Context-aware navigation (e.g., Finance sidebar differs from Operations sidebar).

3. Visual Compliance (The "Vibe")

  • Fonts: Inter (UI), Geist Mono (Data).
  • Colors: Domain-coded.
  • Finance: Emerald/Gold.
  • Governance: Blue/Purple.
  • Operations: Orange/Industrial.
  • Materials: Glassmorphism (bg-white/5 backdrop-blur) is standard for containers.

4. Forbidden Patterns

  • No "Boxy" Layouts: Do not use standard white cards on gray backgrounds. Use the "Glass on Dark/Image" method.
  • No "Welcome" Screens: Taking up 50% of the screen to say "Welcome back" is forbidden. Show the data immediately.
  • No Bare Tables: Standard HTML <table> is forbidden. Use the styled components or Data Grid.