"The strongest products do not overwhelm users with capability. They reduce mental exhaustion while increasing operational power. That is the standard."
Locked doctrine · build v2026-05-24.20:45 · every surface measured against this
The Goal
Operational clarity with minimal cognitive friction.
This system is not designed as a collection of screens. It is designed as an operational environment. Every interface decision must reduce mental overhead, increase execution clarity, and support forward momentum. The product should feel calm, predictable, intelligent, and role-aware — even when managing complex operational workflows.
The goal is not visual impressiveness. The goal is operational fluency.
Core Product Doctrine
The Nine Principles
1
Build for Roles, Not People
People change. Roles persist. Every workspace, permission layer, notification, and workflow must be optimized for the responsibilities attached to a role — never to an individual.
Do
HR Workspace shows "Pending Onboardings · 3 awaiting review · this week" — the responsibility, not the person who happens to hold it today.
Don't
Hardcoded "Maame's Dashboard" or "Frank's Tasks" — when Maame leaves, the page identity breaks.
2
Workspace, Not Report
The product is an active working environment, not a passive reporting tool. Dynamic work happens inside the app. Frozen approval states become generated documents (PDFs).
Do
Production tab has cards: "Approve · Reassign · Note · Open" — every card is actionable. PDF digest is generated from the live state.
Don't
Static read-only dashboards full of KPIs but no ability to act on anything. Or PDFs that the team is expected to edit.
3
Action Hierarchy Discipline
Every card, module, or section contains exactly 1 primary action + 1 secondary overflow entry point. Never more. Overflow menus preserve power-user functionality without polluting the visual field.
Do
Card: Approve⋯ — one clear move, options hidden until needed.
Don't
Five buttons competing: Approve · Reassign · Escalate · Note · Open — user hesitates, scans, doubts.
4
Implicit Context Over Redundant Metadata
If a user is inside Regional View → Canada → Production, don't tag every row with "Canada · Production". Trust contextual intelligence. The hierarchy already says it.
Do
Inside Production-Canada view: rows show client name + date + status only. Context is in the breadcrumb.
Don't
Every row stamped with redundant chips: "Canada · Production · Active · Tier B · Region: Canada".
5
Forward-Looking Operational Design
Surface active work, upcoming deadlines, unresolved blockers. History exists but never dominates. The interface should make tomorrow visible, not yesterday loud.
Do
Top of every dept tab: "This week · 4 shoots · 2 deliverables due · 1 approval pending."
Don't
"Past Failures · 42 overdue invoices from 2024" plastered above current work, creating guilt and paralysis.
6
Graceful Failure & Fallback Architecture
The system stays operational under incomplete conditions. Smart defaults · automatic reassignment · graceful degradation. Never collapse. Never panic the user.
Do
HR role vacant → "Tier A steward (interim)" auto-fills + UI continues normally. No red errors, no blocked workflows.
Don't
Empty state: "No HR head assigned. All HR features disabled. Please contact admin." — punishes the user for an org-state.
Do
"Highlights due in 7 wd · auto-set from event_date" — same logic every project, every region. The number is sacred.
Don't
"When are highlights due? Depends on the team's mood." Free-text deadline per project = chaos.
8
Language Shapes Operational Behavior
Words define culture · ownership · responsibility · identity. Every label is intentional. "Sales & Brand" ≠ "Sales & Marketing" — the former says relationship-first, the latter says promotion-first.
Do
"Country Director · Canada" (role-first, region as scope). "Field Creative" (identity that respects craft).
Complexity reveals itself gradually. Show only what's needed at the current stage. Expandable metadata · contextual controls · layered detail views · hidden advanced settings.
Do
Card shows: client · date · status. Click → expands to full timeline · invoices · team · revisions. Layers of depth.
Don't
Every card crammed with 14 fields by default. Information density wins over decision speed.
System-Wide UX Principles
The Four Meta-Tenets
META 1
Calmness as a Product Feature
Calmness is not aesthetic minimalism. It is operational clarity. The experience should feel stable · composed · intentional · quiet · focused.
META 2
Operational Momentum Over Passive Monitoring
Orient users toward execution · movement · completion · next actions. Never build environments that reward passive observation.
META 3
Trust User Intelligence
Don't over-explain. Don't over-label. Don't repeat. Assume competency. Reward familiarity. This is what premium feels like.
META 4
Ecosystem-Level Thinking
No isolated screen-level thinking. Every decision considers workflow continuity · cross-functional impact · scalability · long-term maintainability.
Design Tokens
The Locked Palette
Color · brand
--brand-navy
#0c2340
--brand-gold
#c9a961
Color · status (use sparingly)
--ok
#16a34a
--warn
#d97706
--danger
#dc2626
--info
#2563eb
Color · neutral surfaces
--bg
#fafaf9 · page
--bg-elevated
#ffffff · cards
--bg-sunken
#f5f5f4 · headers
--border
#e7e5e4
Typography
Token
Size
Use
--text-xxs
10px
Pills · build stamps · uppercase eyebrows
--text-xs
11px
Meta · monospace · captions
--text-sm
12px
Secondary body · table cells
--text-base
13px
Default body — operational density without strain
--text-md
14px
Primary card titles · button labels
--text-lg
16px
Section headings · quoted text
--text-xl
20px
Principle titles · workspace headers
--text-2xl
24px
Section title
--text-3xl
32px
Page hero — used once per surface max
Font family: Inter · 400/500/600/700/800 · letter-spacing -0.005em on body, -0.02em on display.
Spacing scale (4px base)
Token
Value
Use
--space-1
4px
Icon ↔ text gap · pill padding
--space-2
8px
Within tight clusters (button padding-y)
--space-3
12px
Form field gap · row padding
--space-4
16px
Card padding · section spacing
--space-5
24px
Card-to-card gap · sub-section
--space-6
32px
Major section break
--space-7
48px
Page hero · section-to-section breathe
--space-8
64px
Top-of-page · footer separation
Motion
Token
Value
Use
--dur-1
120ms
Micro-interactions · hover background
--dur-2
180ms
Default · button color, border shifts
--dur-3
260ms
Larger transitions · panel slides
--ease
cubic-bezier(0.4, 0, 0.2, 1)
Standard easing — calm, deliberate
Motion principle: Animations should be felt but not noticed. Never bouncy. Never over-260ms. Calmness is in the easing.
Component Gold Standards
What Good Looks Like
Buttons · 3 variants only
Primary (navy fill) — the one obvious move. Ghost (border only) — cancel, skip, secondary nav. Danger (red outline) — destructive, requires confirm. Never use color filling for danger — only outline.
Status pills
LivePartialBlockedPendingIdle
Uppercase · 10px · letter-spacing 0.5px · subtle background tint (10% alpha) + bold color. Used to communicate state in a glance — never as decoration.
Workspace card · the gold standard
Akua + Kwame · Wedding
Jun 14 · Accra
Highlights due in 7 wd · primary photographer pending confirmation.
1 primary action · 1 overflow. Title is descriptive (not "Project #194"). Meta is contextual (date + location). Body states the one thing blocking next action. Overflow holds Reassign · Note · Escalate · Open.
For Every Surface
The 12-Question Audit
Is the surface built for a role or for a person?
A new hire in that role should inherit the page without confusion.
Can the user act on what they see, or only read it?
If read-only — is that intentional, or should it have actions?
Does each card / section have 1 primary action max?
Count visible buttons per card. Overflow swallows the rest.
Is the context inherited from navigation, or repeated visually?
Inside Regional → Canada → Production, no rows should say "Canada · Production".
Does the page open with "what's next" — or "what went wrong yesterday"?
Active queue first. Failures at most as a quiet flag, never dominant.
What happens if data is missing or a role is unfilled?
Smart defaults · interim assignments · graceful empty states. Never blocking errors.
Are the SLA timelines / status names / dept labels the canonical ones?