HPM Experience Platform / Overview
HPM Experience Platform

Designed for quiet confidence.

A premium design language for every client portal, executive workspace, dashboard, presentation, and intelligent experience HPM creates.

Explore the system
Production blueprint8px spatial systemWCAG-awareMotion with meaning
One primary action
Clear next step
Progressive disclosure
Complexity on demand
01 / Foundations

A system with a point of view.

Every choice should make the platform feel calmer, clearer, and more deliberate—never more decorated.

01

Quiet Confidence

Restraint signals maturity. Whitespace, scale, and alignment do more work than ornament.

02

Progressive Disclosure

Show the essential first. Reveal supporting detail only when the user asks for it.

03

Motion Has Meaning

Movement explains relationships, confirms action, and preserves context. It never performs for attention.

04

Purposeful Precision

Every screen has one dominant action. Every component earns its place.

A disciplined, editorial scale

Readable at work. Distinguished in the room.

Display / 72
The work deserves a better interface.
-5.5% tracking
Heading 1 / 48
A platform clients remember.
-4.5% tracking
Heading 2 / 36
Clarity at every level.
-3.8% tracking
Title / 24
Capital Program Overview
-3% tracking
Body / 16
The system should disappear behind the work, helping clients understand what changed, what matters, and what happens next.
1.65 line height
Caption / 13
UPDATED JULY 2026 · HPM PROGRAM MANAGEMENT
+2% tracking
Architectural InkStructure, hierarchy, type
HPM NavyPrimary action, authority
Material CopperWarmth, emphasis, craft
Signal ColorsStatus without visual noise

8-point spatial rhythm

The system uses a small set of intentional increments instead of arbitrary gaps.

4
8
12
16
20
24
32
40
48
64
80
96

Density modes

Comfortable by default. Compact only for data-heavy workspaces.

Comfortable densityDefault for portals and executive views
Default
Compact densityTables, review queues, operations
Data

Purposeful radius

Small controls feel precise. Larger surfaces feel more generous.

6
10
16
24
34

Elevation with restraint

Borders establish structure. Shadows indicate interaction or temporary layers.

Level 0
Level 1
Level 2
02 / Components

One language. Every interaction.

Components are designed as calm, adaptable building blocks—not isolated visual tricks.

Buttons

One primary action, supported by quieter alternatives.

Interactive

Select “Publish update” to view the loading and success states.

Navigation

Navigation adapts to the work without changing its visual grammar.

2 modes
H
SCCPSS Program
CURRENT CONTEXT

Program Overview

Persistent context, quiet wayfinding, and one visible primary action.

Portal hero

Sets context and directs attention without behaving like a marketing banner.

Signature
SAVANNAH-CHATHAM COUNTY

A clearer view of what comes next.

Program progress, decisions, documents, and client experiences in one intentional workspace.

Experience card

Editorial framing, meaningful metadata, and a clear launch action.

Portal
Interactive Report

Capital Program Executive Briefing

A live view of schedule, budget, risk, decisions, and next actions.

Updated 2 hours ago

Document card

Secure files presented with version clarity and minimal friction.

Protected
July Executive Progress ReportPDF · Version 4 · Updated today
Board Workshop MaterialsZIP · 8 files · Updated July 8

Update card

Communicates what changed, why it matters, and whether action is required.

Activity
12July
Decision needed2 hours ago

Board workshop package is ready for review.

Four decisions are highlighted before the July 18 workshop.

People card

Human identity, role, and access status without turning people into admin records.

Access
JM
Jordan MitchellExecutive Sponsor · SCCPSS
Active
ACCESS
Executive portal
LAST VISIT
Today, 8:42 AM

Metric tiles

Designed to guide interpretation—not simply display numbers.

Executive
Program value$468MOn approved baseline
Active projects273 in procurement
Decisions due4Next 14 days

Forms

Clear labels, thoughtful defaults, and validation that helps.

Accessible
Add a title before continuing.
Keep the first sentence useful on its own.

Search and table

Data-heavy tools retain the same calm hierarchy and interaction language.

Workspace
DocumentCategoryVersionUpdated
Executive Progress ReportReportsv4Today
Board Workshop MaterialsMeetingsv2Jul 8
Program Master ScheduleSchedulev7Jul 5

Timeline

Chronology connects activity to the larger project story.

History
TODAY · 9:30 AM

Executive report published

Version 4 replaced the prior report and notified portal members.

JULY 10 · 3:15 PM

Decision assigned

Jordan Mitchell was asked to review the board workshop package.

Modal

Reserved for focused decisions that should not lose page context.

Layer 2
03 / Patterns

Repeatable ways to create clarity.

Patterns define how content, navigation, actions, and status behave together across the platform.

Pattern 01

The Executive Opening

Begin with context, one clear status statement, and the next decision—not a wall of metrics.

PROGRAM STATUS

On plan. Four decisions need attention.

The schedule remains stable through Q3.

Pattern 02

The Guided Workspace

Keep global navigation quiet and anchor work around a visible primary action.

Meeting Workspace
Pattern 03

The Decision Thread

Connect evidence, discussion, decision, owner, and due date in one visible chain.

1
EvidenceSchedule variance increased
2
DecisionAdvance package B
3
OwnerProgram Director · July 18
04 / Templates

Designed for the shape of the work.

Archetypes set the information hierarchy, rhythm, and interaction model before individual content is added.

Portal archetypes

Pursuit

Persuasive storytelling, proof, team, differentiators, and clear next steps.

Active Program

Status, decisions, schedule, budget, risk, documents, and meeting continuity.

Executive

High-signal synthesis, decisions, material changes, and future outlook.

Assessment

Evidence-rich findings, prioritization, imagery, cost, and recommended action.

Market Intelligence

Signals, opportunities, geography, scoring, review queues, and action routing.

Corporate

Shared services, enterprise applications, knowledge, and internal operations.

Education

District-wide capital programs, campuses, community communication, and board governance.

Healthcare

Operational continuity, phasing, compliance, clinical impact, and executive risk visibility.

Municipal

Public accountability, capital planning, community outcomes, procurement, and portfolio status.

Experience archetypes

Presentation

Guided narrative with cinematic pacing.

Dashboard

Persistent operational visibility.

Interactive Report

Editorial insight with live detail.

Meeting Workspace

Agenda, evidence, decisions, follow-up.

Assessment

Field evidence to prioritized action.

AI Assistant

Contextual guidance, not a generic chat box.

05 / Transformation

From functional portal to signature product.

Drag the divider to compare the typical plugin aesthetic with the intended Signature Edition experience.

Welcome to Your Client Portal

Project Information

View updates, documents and resources below.

Recent Documents
Project Updates
Quick Links
SAVANNAH-CHATHAM COUNTY

A clearer view of what comes next.

Program progress, decisions, and resources in one place.

WHAT'S NEW

July program briefing is ready.

Updated schedule, budget, and decisions for review.

NEXT ACTION

Review 4 decisions

↔
Before
Signature
06 / Motion

Movement that explains.

Motion should preserve context, confirm intent, and make the interface feel physically coherent.

Responsive elevation

Hover indicates that a surface can be opened or moved.

Contextual reveal

Supporting detail appears without displacing the user.

Structural loading

Skeletons preview the incoming layout instead of showing generic spinners.

Motion preferences are respected.

The system supports reduced motion without losing hierarchy or feedback.

07 / Accessibility

Premium means usable by more people.

Accessibility is not a compliance layer added later. It is part of the product’s quality standard.

Contrast
AA+

Primary text and essential controls target WCAG AA or better.

Keyboard
✓

Visible focus, logical order, skip navigation, and operable dialogs.

Motion
✓

Reduced-motion behavior removes nonessential animation automatically.

Responsive
320+

Core flows remain usable from small mobile screens through presentation displays.

08 / Implementation

Tokens before one-off styling.

The design system becomes enforceable when every plugin screen consumes the same variables, component contracts, and interaction rules.

tokens.css
/* Signature Edition core tokens */
:root {
  --hpm-ink-950: #0b1220;
  --hpm-navy: #0b1e36;
  --hpm-copper: #a96f44;
  --hpm-space-4: 16px;
  --hpm-space-8: 32px;
  --hpm-radius-control: 10px;
  --hpm-radius-surface: 16px;
  --hpm-duration-base: 240ms;
  --hpm-ease-out: cubic-bezier(.22,.78,.22,1);
}
component-contract.js
// One component API across the platform
ExperienceCard({
  title: "Capital Program Briefing",
  type: "interactive-report",
  status: "updated",
  primaryAction: {
    label: "Open briefing",
    route: "/experience/executive-brief"
  },
  metadata: {
    updatedAt: "2026-07-12T09:30:00",
    audience: "executive"
  }
});

Implementation guardrails

01

No local colors

Screens consume semantic tokens only.

02

No new components

Extend the system before inventing a pattern.

03

State is designed

Loading, empty, error, success, and permissions are specified.

04

Prototype first

Review the experience before changing plugin code.

09 / Roadmap

Apply the system in deliberate waves.

The platform should improve visibly without destabilizing the architecture that is already working.

Signature Edition Design SystemApprove foundations, components, archetypes, and motion language.
Now
Global ShellAuthentication, My Portals, global navigation, organization switching, settings.
Wave 1
Portal HomeHero, experience cards, What’s New, updates, documents, native navigation.
Wave 2
Core WorkflowsDocument center, updates, people, invitations, permissions, email states.
Wave 3
Experience EcosystemPM Hub, quarterly reviews, Spark, assessments, intelligence, assistants.
Wave 4
Product Quality SystemVisual regression, accessibility checks, component governance, release gates.
Ongoing

The interface should feel inevitable.

Not styled after the fact. Not assembled from unrelated screens. One coherent product language—recognizable everywhere HPM does its best work.

Copied