Design System

Client Portal Ledger

These components form the basis of the new "Command Center" Client Engagement Portal. They are optimized for a light-first theme, emphasizing a professional, time-anchored vertical ledger with rich execution blocks.

1. Ledger Items (The Timeline Feed) PortalLedgerItem.vue

The core of the portal is the Ledger Grid. Below are the distinct item categories that can appear on the timeline. Each state uses semantic background and border colors for quick scanning.

Oct 25
Execution RequiredPending Input

Technology Footprint Discovery

This is an Action item. It uses the warning/orange semantic color to draw immediate attention. It supports stacking compositional blocks like the Prompt and Actions.

Active Discovery Prompt
You are an expert systems auditor. Map the following workflows...
Oct 24
Library EntryDelivery

Synthesized Domain Architecture

This is a Resource item. It uses the accent/blue semantic color. It acts as an audit trail for file deliveries and documentation, utilizing the Attachments block.

Oct 26
ScheduledVideo Sync

Sync: Findings Readout

This is an Event item. It uses the primary/green semantic color. We use the Actions block to provide quick links like joining a meeting.

Oct 20
Approval RequiredBlocker

Final Architecture Sign-off

This demonstrates the 'Gate' play. It uses the Action wrapper combined with Attachments and primary/secondary Actions to force a formal decision before momentum can continue.

Oct 18
MilestonePhase Complete

🏁 Phase 1: Alignment Concluded

This demonstrates the 'Phase Transition' play. It uses the Log wrapper but leverages emojis and celebratory text to visually break up the timeline and mark a major project shift.

2. Context Widgets (The Sidebar)

These components provide high-level context without cluttering the main timeline. They sit in the right-hand sidebar.

PortalPhaseTracker.vue
Current Phase
Phase 2: Discovery
Week 2 of 445% Complete
PortalContactCard.vue
Project Lead
AP
Antonio PericΓ£o
Lead Strategist
PortalMiniCalendar.vue
January
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31