NS0-003 — Visual Quality And Motion Direction Input

• Classification: USER VISUAL DIRECTION / SHARED UI IMPLEMENTATION INPUT
• Status: CAPTURED — USER REFERENCE SAMPLE ADOPTED; PAGE ACCEPTANCE REMAINS
• Decision date: 2026-08-16
• Current owner Task: NS0-003
• Next owner Task: NS0-004
• Source registry: ../../catalog/sources/ui-visual-motion-reference-sources.yaml
• Restriction delta: RD-000 / NONE
• Effects: documentation and reconstruction input only; no Runtime, DB, route, writer, provider, service, Wiki publication or physical effect

Current execution note: references to an NS0-004 approval package below describe acceptance evidence, not authorization to restart prototype work. The current Roadmap applies this direction through NS1-002 shared UI contracts and verifies it on actual Foundation and Booking surfaces before expansion.

1. User Direction

The Logistics Workspace must feel deliberately designed rather than merely modernized. It should be the strongest visual result practical for this Product: polished, current, clean, expressive enough to feel crafted, and still fast and trustworthy during repetitive daily operations.

This direction explicitly requires:

• a premium operational-SaaS visual language rather than a generic admin-template appearance;
• richer but controlled animation and state transitions;
• visible craft in typography, spacing, material, hierarchy, iconography and interaction feedback;
• reference to operating logistics/control-tower products and established professional design-system guidance;
• no trade of operational density, legibility, accessibility, recovery clarity or field speed for decoration.

2. Target Decision

The accepted B · Contextual Workspace direction remains the base. The target is elevated to:

B+ · Contextual Precision Workspace

B+ means:

familiar dense operational surfaces
+ context-preserving workspace navigation
+ premium industrial visual craft
+ purposeful motion system
+ exception and Next Action emphasis
+ explicit authoritative feedback and recovery

This is not authorization to redesign Process meaning, fields, actions, access, state, transaction ownership or side effects. The current implementing Task applies this visual direction only through shared UI contracts and Process-reconciled actual pages.

2.1 User-provided design sample

!B+ operational UI reference

The supplied composite is the primary visual sample for applying B+ across the Product. It establishes these shared composition and craft requirements:

• a stable dark navigation shell around light, crisp Office work surfaces;
• a compact full-width Booking list with one coherent command region;
• a Booking workspace that keeps record identity, Process rail, tabs, main work, inspector, exceptions and related records visible in one context;
• a bounded Booking popup/detail composition with a stable title/action header;
• a touch-first field task with one dominant action and explicit completion readback;
• one component system for H/Cobalt and K/Indigo, varying semantic color only;
• restrained elevation, clean iconography and purposeful motion at the durations in section 7.

The sample is not a pixel-cloning mandate and does not authorize the dashboard metrics, Process stages, statuses, actions, field values or dark full-application treatment shown inside it. CTC source and approved page contracts continue to own those facts.

3. Confirmed Constraints To Preserve

The visual uplift must preserve all previously approved constraints:

• Legacy-compatible Office surfaces remain compact and high density;
• familiar menu, page, popup, close, return, refresh and direct-route behavior remains recognizable where operationally material;
• Product surfaces add Process stages, independent state, Next Action, Timeline and Exceptions;
• CTC defaults to Theme H / Cobalt Precision;
• MK defaults to Theme K / Indigo Studio;
• H and K vary through semantic colors only, never layout, typography, spacing, density, radius, shadow, component structure or motion behavior;
• concise user-facing copy remains the default;
• motion, color and decoration never become the only representation of business status;
• Field surfaces prioritize immediate action, connectivity and recovery over visual expression;
• save success is not shown before authoritative readback.

4. Reference Findings

The external sources are reference inputs, not CTC Product or Process authority.

4.1 Professional motion systems

• Atlassian treats motion as a clarifying layer that explains what changed, why it changed and what comes next. It places frequent interactions in approximately the 50–150 ms range, structural transitions in approximately the 150–400 ms range, requires one clear focal point and honors reduced-motion settings.
• IBM Carbon separates productive motion from expressive motion. Productive motion remains subtle and task-oriented; expressive motion is reserved for occasional important moments. Carbon rejects bounce, stretch and sudden-stop curves and provides standard, entrance and exit easing families.
• Microsoft Fluent 2 treats motion as functional, natural, consistent and appealing. It recommends a quick fade rather than moving large top-level surfaces, constraining motion to the focused element, keeping durations short and providing a no-motion path.
• W3C WCAG guidance requires nonessential interaction-triggered motion to be suppressible and documents prefers-reduced-motion techniques for CSS and JavaScript.

4.2 Dense enterprise information design

• Carbon data-table guidance keeps dense tables in the main content area with substantial horizontal width, consistent header/row sizing, a dedicated toolbar and keyboard-operable sorting and controls.
• Loading placeholders should reflect the final structure. Multiple skeletons should remain synchronized rather than producing fragmented, competing movement.

4.3 Operating logistics products

• FourKites Intelligent Control Tower connects orders, shipments, inventory, assets and facilities in a continuously updated operating context, emphasizing exceptions, impact and action rather than disconnected dashboards.
• FourKites Dynamic Ocean prioritizes ocean-container lifecycle, fee exposure, terminals, milestones, documents and actionable exceptions.
• Samsara connects fleets, equipment, sites and people, combining a real-time management surface with role-specific mobile workflows for drivers and field workers.

The adopted lesson is not to imitate any vendor's branding. It is to build one connected operational context, preserve role-appropriate density, emphasize exceptions and next actions, and make state changes understandable through consistent visual and motion language.

5. Target Visual Character

The intended character is:

precise
calm
premium
industrial
alive
operationally credible

It is not:

playful consumer UI
neon control-room spectacle
full-screen dark dashboard
generic card-grid admin template
AI-purple decoration
visual effects without operational meaning

5.1 Composition

• Use a stable dark shell for navigation and workspace context, with light neutral work surfaces for sustained Office use.
• Give dense tables and forms the primary canvas. Cards are for summaries, exceptions, decision support and bounded secondary content—not for converting every row into a card.
• Keep one dominant visual hierarchy per viewport: primary work, contextual inspector, then supporting status.
• Use asymmetry selectively to create editorial quality while retaining grid discipline and predictable alignment.
• Keep the App Shell visually continuous across Compatibility and Product surfaces.

5.2 Material and depth

• Prefer crisp 1 px borders, quiet surface steps, subtle inner highlights and restrained layered shadows.
• Use translucent or blurred material only in shell chrome, transient overlays or one signature area. Do not place dense tables or long forms inside glassmorphism.
• Use gradients, fine texture or mesh effects only as controlled brand atmosphere in shell/header/empty-state zones.
• Preserve high contrast and avoid low-contrast gray-on-gray styling presented as sophistication.

5.3 Typography and identifiers

Candidate direction for NS0-004 prototype evaluation:

• one contemporary variable sans family across the Product;
• tabular numerals for quantities, weights, dates, money and operational metrics;
• a compatible mono face only for immutable identifiers, references or technical evidence where it improves scanning;
• compact body typography remains readable at Office density and does not rely on ultra-light weights;
• headings use weight, spacing and scale before decorative color.

Exact font families and values remain NS0-004 prototype decisions, not authority from this document.

5.4 Color

• Neutral surfaces carry most of the interface.
• Tenant accent color should occupy a controlled minority of the viewport.
• Semantic colors are reserved for meaningful status, exception, warning, success and destructive actions.
• Status always includes text and, where useful, icon or shape—not color alone.
• CTC H and MK K must remain recognizably related products with different semantic accents, not separate visual systems.

5.5 Signature detail

NS0-004 should test one repeatable signature motif rather than many unrelated effects. Candidate motif:

Operational Signal Line

A thin contextual line or edge treatment may connect active navigation, selected rows, Process stages and the active inspector. It can briefly acknowledge authoritative state changes, then settle into a static indicator. It must not pulse continuously or imply a business state that the Process contract does not own.

6. Decoration Budget

To create a visibly crafted result without clutter:

one primary expressive zone per viewport
up to two secondary accents
all remaining surfaces productive and restrained

Primary expressive zones may include:

• Operating Home header/context band;
• first-use or empty-state composition;
• a Process milestone completion moment;
• a bounded map, yard or timeline visualization.

Secondary accents may include:

• active workspace-tab treatment;
• selected-row/inspector connection;
• compact exception emphasis;
• subtle surface lighting on a primary command region.

High-frequency data rows, form controls, field actions and status scanning remain visually quiet.

7. Motion Contract Candidate

These values are candidates for NS0-004 visual prototypes. The final semantic tokens belong to the accepted UI contract and later NS1-002 implementation.

Intent	Candidate duration	Typical use
instant	0 ms	focus placement, accessibility state, safety-critical feedback
micro	80 ms	press, toggle acknowledgement, icon response
fast	120 ms	hover, row affordance, compact highlight
state	160 ms	selection, tab indicator, filter/status visual change
standard	220 ms	inspector, accordion, bounded layout transition
enter	260 ms	modal, panel, command surface entrance
emphasis	320 ms	rare completion, first-use or milestone acknowledgement

No routine workflow animation should require the user to wait for completion before the next valid action.

7.1 Candidate easing

Use productive easing by default:

--motion-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
--motion-enter: cubic-bezier(0, 0, 0.38, 0.9);
--motion-exit: cubic-bezier(0.2, 0, 1, 0.9);

Expressive easing, if introduced, must be separately tokenized and limited to rare approved moments.

7.2 Motion rules

• Start feedback immediately after user input.
• Maintain one clear focal motion; supporting movement must reinforce the same event.
• Entrances establish origin and context. Exits are shorter and less prominent.
• Top-level destination changes use a short crossfade and, at most, a very small positional offset; large canvases do not slide across the screen.
• Prefer transform and opacity; avoid expensive layout animation in dense tables and forms.
• Similar components use the same entrance, exit and state-transition behavior.
• Do not use bounce, elastic overshoot, parallax, particles, auto-rotating decoration, continuous pulse or decorative infinite loops.
• Do not shake invalid fields. Move focus, show explicit validation and announce the error accessibly.
• Do not animate a row to a new sorted position unless the user or an explicit live-order contract caused the reorder and the movement remains understandable.

7.3 Real-time and authoritative feedback

Real-time change must be noticeable without destabilizing the operator's view:

new authoritative value
-> one-time border/background acknowledgement
-> settle to normal state

The UI must not continuously glow or pulse merely because data is live.

Save feedback remains:

input acknowledged
-> Saving
-> authoritative readback
-> Saved

If the response is lost or the result is unknown:

do not replay automatically
-> show Checking status
-> read authoritative state
-> classify committed / missing / partial
-> expose the exact recovery action

The animation cannot imply success before the readback succeeds.

7.4 Reduced motion

• Respect both CSS and JavaScript prefers-reduced-motion paths.
• Remove spatial translation, scale and stagger from nonessential transitions.
• Replace necessary orientation feedback with instant state change or a short opacity transition.
• Stop shimmer, continuous progress decoration and decorative looping motion.
• Preserve the same information, focus placement, ARIA announcements and valid actions with all motion disabled.

8. Surface Application

8.1 CTC Operating Home

The page should feel like an execution cockpit, not a KPI brochure.

Primary composition:

Now / Next work queue
-> operational exceptions
-> loader / driver / yard / container context
-> time-sensitive evidence and return obligations

Use a crafted context band or bounded operating visualization as the primary expressive zone. The work queue and exceptions remain the strongest actionable surfaces.

8.2 MK Operating Home

Use the same shell, component and motion system with MK semantic colors. The composition changes to commercial and inventory authority:

receipts / lots
-> available and allocated inventory
-> order fulfillment
-> cost / margin exceptions
-> carrier and document milestones

Do not recolor a CTC dashboard while preserving CTC information hierarchy. Profile composition may differ; metrics and interaction rules do not.

8.3 Booking List

• Keep a full-width compact table with sticky header and aligned compact toolbar.
• Combine search, active filters, saved view, display controls and primary creation action in one coherent command region.
• Use consistent row/header height and tabular data alignment.
• Selecting a row may reveal an inspector while preserving table context and scroll position.
• Connect selected row and inspector through a subtle shared highlight or Operational Signal Line.
• Batch actions replace the normal toolbar only when selection exists and return cleanly when selection ends.
• Sorting, filtering and expansion remain fully keyboard operable.

8.4 Booking Popup / Detail

• Preserve recognizable popup entry, close, cancel, save, parent return and refresh behavior.
• Upgrade it into a composed dialog or sheet with a stable title/action header, clear section rhythm and bounded contextual summary.
• Animate from the invoking record or trigger, not from an unrelated screen edge.
• Move focus and accessibility state at the start of the entrance; do not delay keyboard operation until animation finishes.
• Long forms remain light, crisp and readable rather than dark or heavily translucent.

8.5 Booking Workspace

This is the primary demonstration of B+.

Recommended composition:

record identity + independent state matrix + primary action
Process stage rail / lifecycle context
main record work surface
contextual inspector / Timeline / Exceptions
related records and documents

The Process stage rail may orient the user but cannot imply transitions or completion semantics not approved by Process authority. Next Action is explicit and never a hidden save cascade.

8.6 Loader Field Task

• Use large touch targets, direct language and one dominant valid action.
• Make assignment identity, location, material/container, current status and connectivity immediately visible.
• Motion is minimal: immediate press acknowledgement, clear state transition and one-time successful readback.
• Offline, unknown-result and retry behavior must remain visible without relying on animation.
• Decorative effects never delay or compete with Start, Pause, Complete, Photo or Exception actions.

9. Loading, Empty And Background Work

• Use skeletons only when the final structure is known and loading lasts long enough to justify them.
• Keep multiple skeleton animations synchronized.
• For measurable work, show determinate progress and the effect being performed.
• For long back-end work, use a nonblocking status surface or progress toast with persistent recovery access.
• Empty states may use one polished illustration or atmospheric treatment, but the next valid action remains primary.
• Never use an indefinite spinner as the only representation of a committed business action or unknown result.

10. Prohibited Visual Patterns

• full-application glassmorphism;
• a gradient on every card or button;
• default full-screen dark mode for sustained dense Office work;
• oversized marketing typography inside operational paths;
• excessive rounded floating islands that fragment one workflow;
• cards replacing appropriate data tables;
• neon borders, bloom or control-room theatrics;
• 3D scenes, particles or parallax without an approved operational need;
• continuous pulsing status indicators;
• long staggered list entrances on repeatedly visited pages;
• random component-specific animation;
• color-only, motion-only or glow-only business state;
• decorative AI treatment on non-AI data or actions;
• animations that reorder, hide or delay actionable information.

11. Required Shared UI Acceptance Package

The shared UI contract is not accepted from prose alone. Acceptance evidence must contain at least:

1. CTC Operating Home;
2. MK Operating Home;
3. Booking List;
4. Booking Popup / Detail;
5. Booking Workspace;
6. Loader Field Task;
7. H/K side-by-side token application;
8. motion storyboard for navigation, row-to-inspector, panel/dialog, save/readback, real-time update, exception and recovery;
9. loading, empty, saved, validation, committed, unknown-result, partial-effect and offline states;
10. reduced-motion variants;
11. dense-table and keyboard interaction evidence;
12. representative viewport evidence at 1366×768, 1440×900, 1920×1080 and a field viewport near 390×844.

The package must show real operational density and representative content. A landing-page composition, isolated component gallery or low-fidelity wireframe is insufficient for final visual approval.

12. Acceptance Criteria For Visual Quality

The final direction is acceptable only when:

• the six representative surfaces look like one intentionally authored Product;
• CTC and MK are visibly related while their operating priorities remain distinct;
• visual hierarchy makes the primary work and exception path obvious without explanatory prose;
• dense Office data remains scannable at realistic volume;
• every frequent interaction responds immediately and routine motion remains within the productive range;
• larger transitions do not create disorientation or make the Product feel slower;
• the interface remains fully understandable and operable with motion disabled;
• status, validation, recovery and authoritative readback remain explicit;
• the UI avoids the prohibited patterns in section 10;
• the user explicitly approves the implemented high-fidelity visual and motion direction before broader page expansion.

Candidate implementation performance gates for later Task definition:

60 fps target for supported motion on representative hardware
no cumulative layout shift caused by state animation
no blocking animation on a frequent command path
immediate visible input acknowledgement

Exact measurable budgets belong to NS0-004 and NS1 acceptance after supported browsers, devices and Runtime tooling are fixed.

13. Unknown / Conflict

The following remain open and must not be invented here:

• final typography family and font-loading strategy;
• final color, radius, spacing, shadow and motion token values;
• whether the Operational Signal Line candidate is accepted or replaced;
• final App Shell and workspace-tab persistence behavior;
• exact live-update ordering and stale-data handling;
• exact map, yard or timeline visualization requirements;
• Process-authoritative states, transitions, actions, access and recovery;
• supported browser/device performance envelope;
• whether any rare milestone merits expressive motion.

14. Affected Owners

NS0-003 Process reconstruction
-> records operational constraints and state/recovery facts

NS1-001 Runtime/UI platform foundation
-> owns supported technical motion/rendering capability after approval

NS1-002 design tokens/components/templates
-> owns shared high-fidelity composition, visual/motion contracts and implementation

NS2+ page Tasks
-> apply shared contracts without page-local visual systems

15. Required Verification

Before this direction can be accepted as complete:

• reconcile all six surfaces against approved Process/page contracts;
• verify H/K color-only variation;
• test keyboard, screen-reader announcements, focus timing and reduced motion;
• test slow network, response loss, authoritative readback and partial-effect states;
• test realistic dense datasets and table interaction without disruptive layout motion;
• record screenshots and motion evidence for named passing scenarios;
• obtain explicit user acceptance in NS0-004.

16. Effects

This document records user direction and reference findings. It changes no Runtime, business state, database, route, writer, provider, service, Wiki publication or physical operation. It does not authorize Production cutover or Legacy retirement.

---

Source: new-system/docs/reconstruction/NS0-003_VISUAL_QUALITY_AND_MOTION_INPUT.md — ctc repository · This page is an English translation of the source document. Identifiers, file paths and code symbols are unchanged.