NowToPrint Design System
The production authority for NowToPrint visual language, tokens, components, and governance.
NowToPrint Design System
NowToPrint uses one design authority across the public website, authentication, product workspaces, PDF Studio, desktop, email, and documents. The direction is Precision Editorial Industrial: exact, material, calm, editorial, and human.
Where to inspect the system
The localized /styles catalog renders production semantic tokens and canonical primitives. It supports light, dark, and pressroom themes plus comfortable and compact density.
Runtime consumers use purpose-specific semantic boundaries for motion, charts, operational status, prepress, production, typography, and layout. The old shared token file is now an import-only facade. The quarantined raw web color bridge has zero active compatibility consumers and is closed to new use. Its generated adapter remains fail-closed until a deliberate breaking removal proves that no supported external consumer depends on it.
Its traceability cockpit is a derived adapter backed by docs/design-system/authority-manifest.json
and catalog-traceability.json: it connects the registry, generated package API, canonical
primitives, real product journeys, and the current proof pointer. The journey list is checked against
docs/design-system/critical-journey-proof-manifest.json; the catalog never upgrades missing
current-SHA or deployment evidence into a release-ready claim.
Storybook is the deterministic component proof surface. Its toolbar exposes themes, densities, locale, mobile and desktop viewports, and reduced motion. The V4 Visual Regression stories cover primitive states, semantic statuses, responsive forms, motion accessibility, locale, and RTL direction.
Authority chain
- The token registry is the only value authority. Its generated manifest verifies the CSS, Tailwind, JavaScript, MUI, email, and document adapters.
- The design constitution is root DESIGN.md: the single written source for every criterion shown on /styles. Accepted ADRs preserve decision history. The MUI adapter uses literal palettes so theme creation can validate and derive channels safely; pressroom is prepared as a complete custom MUI color scheme.
- @nowtoprint/ui provides canonical primitives and motion patterns.
- The accepted North Star defines composition and visual character, never product copy or behavior.
- Surface variants define composition and density without creating a second brand identity.
- Consumer applications implement the chain; source audits and contract tests block new visual debt.
docs/design-system/authority-manifest.json is the machine-readable contract for this order and its fail-closed evidence status. It points to current evidence without rebinding that evidence to a newer HEAD.
Global overlay order is registry-owned as well. The base, sticky, dropdown,
popover, drawer, modal, toast, and tooltip layers are generated for Tailwind
and MUI; canonical UI primitives must consume the corresponding z-ntp-* utility
instead of inventing a local z-50 or arbitrary z-index value.
Global bottom surfaces use @nowtoprint/ui/ViewportOverlayHost. It owns safe-area
padding and pointer-event isolation, measures its live height, and exposes that
reservation to Sonner and independent floating help surfaces. The host remains a sibling
client island and does not wrap the App Router tree. Do not add a second
fixed bottom host or truncate consent copy to avoid a collision.
Responsive shells are reviewed at the launch-critical 320 CSS px width. The localized
/styles catalog uses narrow base gutters, min-w-0 boundaries, breakable provenance
values, and bounded token previews without hiding horizontal overflow at the route root.
PDF Studio keeps one minmax(0, 1fr) canvas track across its 320-2560 CSS px shell. Below
768 px, optional side panels start closed and open one at a time as semantic drawer overlays.
From 768 through 1023 px, the canvas shares a two-track layout with one applicable side panel;
at 1024 px and above, both applicable panels may occupy fixed tracks around the fluid canvas.
The production cockpit follows the same authority: compact and collapsed on mobile, expanded
by default on tablet and desktop, while preserving an explicit user disclosure preference.
Compact panel disclosures bind aria-controls and aria-expanded to stable panel identities,
move focus into the opened panel, and return it to the trigger when Escape dismisses the panel.
Below 768 px, Studio buttons, visible form controls, and checkbox or radio labels preserve 44 by
44 CSS pixel hit areas and browser zoom; native checkbox/radio glyphs are not enlarged. Organize
and imposition keep visible button alternatives for every operation instead of requiring drag.
The release lane statically guards the 44 px product policy and defines a 12-state axe matrix with
enabled rules tagged through WCAG 2.2 AA plus axe's explicit 24 px target-size rule; current-SHA
browser and manual assistive-technology evidence remain separate authorities.
The marketplace and quote console, onboarding, order confirmation, dashboard grids, and
print-shop actions follow the same rule: one-column base layouts or minmax(0, 1fr) tracks,
wrapping localized copy, and fixed actions positioned above the shared overlay reservation.
Tables and canvases may scroll only within their own bounded region.
Form fields use the semantic controlBoundary role, which is separate from decorative
dividers and is verified at 3:1 or better against canvas and surface in every supported theme.
Quote, offline recovery, and PWA installation surfaces follow the active theme and locale,
preserve document language/direction, expose 44 px interaction targets, and suppress
non-essential movement when reduced motion is requested.
The root runtime boundary provides a localized skip-to-main action on surfaces that do not already own one, assigns a stable target to the first main landmark, and keeps browser/PWA theme-color metadata aligned with the selected light, dark, or pressroom theme.
Contributor rules
- Use semantic --ntp-* tokens instead of hardcoded colors, radii, spacing, shadows, or motion values.
- Import canonical primitives before creating a local component.
- Use pressroom for dense production and PDF work, not as a decorative dark theme.
- Keep surfaces opaque and information hierarchy explicit.
- Do not introduce glass effects, decorative gradients, hover lift, 3D tilt, or a feature-local token authority.
- Reduced motion removes non-essential movement while retaining focus, progress, loading, selection, and error meaning.
- Update the catalog, stories, tests, and help content with every authority change.
The global CSS surface retains only the token-driven animate-fade-in compatibility
utility and a restrained root view crossfade. The retired editor.css, duplicate editor
font declarations, gold/glass/3D effects, and their stale story/E2E assertions were
removed after the active-source scan found no consumers. New motion belongs in a
canonical primitive or a focused product-local pattern with reduced-motion proof.
Product UI uses registry-derived semantic sRGB roles. Consumer-owned oklch() or
color(display-p3 ...) values are rejected by design-system:color-space; future
wide-gamut output must be generator-owned and retain an sRGB fallback. Display color is
not print color: ICC profiles, CMYK, spot colors and rendering intent remain under the
PDF/color-management authority.
The PDF registration-mark screen value is a prepress semantic constant, not a product UI
palette. Social-card and platform-icon renderers use the path-bound
@design-system-authority generated-image-inline marker because ImageResponse requires
inline style objects; their colors and fonts still come from generated tokens. PDF Studio's
fixed desktop panel tracks live in its local CSS-module boundary rather than a second global
token source.
Session-aware page caching
Request-rendered page HTML is never stored in a shared CDN cache. The server-rendered marketing
navigation can depend on the current session, while the proxy creates a new CSP nonce for every
request. Root and localized page responses therefore use
private, no-store, max-age=0, must-revalidate.
Non-localized special HTML surfaces other than / are outside this localized route policy and
retain their own route/runtime boundary.
This page policy does not cover APIs, download/object responses, /_next/static, or root static
assets. Content-addressed WASM binary and glue files remain public and immutable; the mutable WASM
manifest remains no-store. Cache Components/PPR is not enabled and the nonce or session behavior is
not removed. Staging header/body/nonce validation is still pending external evidence, so local
contract green is not deployment or release proof. The canonical rationale is recorded in
docs/design-system/SESSION_AWARE_HTML_CACHE_POLICY.md.
Verification commands and evidence boundaries
Design-system CI has three explicit boundaries. Pull requests and local development
run pnpm design-system:engineering for engineering checks only; the legacy
pnpm design-system:ci name is a compatibility alias for that gate. The
pnpm design-system:evidence:merge gate validates current evidence and critical
journey structure only for a merge subject. pnpm design-system:evidence:release
adds attested staging/release proof. Engineering green never means releaseReady,
deployment, or production authorization; see the CI gate policy.
For a fast local authority check, run pnpm design-system:prelaunch:gate. It executes the
focused token, layer, overlay, reflow, brand, iconography, motion, capability-baseline,
globalization, compatibility, Storybook/styles and documentation contracts. It is a regression
filter, not a replacement for
the dependency-complete engineering gate or immutable browser/deployment proof.
Matching main pushes run the separate design-system-main-receipt.yml lane. Its
pnpm design-system:main:receipt command binds the exact Git commit/tree, a clean checkout,
canonical working-state v2, and live capability status/metric parity into
.artifacts/design-system/main-subject/main-push-local-receipt.v1.json. The receipt is
local-static only: branch protection, required checks, a direct human push, browser evidence,
deployment, staging, production, signatures, SLSA, and releaseReady all remain unproved or
false. See docs/design-system/MAIN_PUSH_LOCAL_RECEIPT.md.
docs/design-system/capability-baseline.json is the live working-tree measurement for the
remaining design-system work. Run pnpm design-system:capability:baseline to verify its metrics and
status parity. complete closes only a local contract boundary; partial, blocked, and
pending remain explicit migration, environment, browser-proof, or release work. The baseline
never claims releaseReady, push, deploy, staging, or production authorization.
Motion ledger v2 distinguishes adoption from engine-boundary debt. The 2026-08-24 live scan
records 174 files importing a canonical motion authority, 2 explicit framer-motion engine
gateways, 215 consumer files still importing that engine directly, and 1,007 forbidden-pattern
compatibility occurrences, for 1,222 exact debt identities. A separate immutable inventory protects
1,225 direct-engine subidentities: 386 runtime bindings and 839 semantic uses, with no active dynamic
loader site. The expanded taxonomy covers implicit
spring/layout/drag/keyframe defaults, long or unbounded travel, unbounded timing/type/ease,
unresolved variants, 3D motion, missing reduced-motion boundaries, and the older interaction and
timing patterns. The guard enforces 320ms duration/individual-delay, 120ms per-item stagger, and
200ms pre-group delay ceilings. Unknown dynamic values fail closed unless a complete transition
uses canonical getTransition or each numeric field uses its field-specific canonical clamp
helper. CSS/Tailwind compatibility debt remains in the strict audit and compatibility ledgers.
Direct-engine and forbidden-pattern identities are independently closed to growth. Direct-engine
file IDs bind path and imported engine module set; separate protected subidentities bind every
runtime binding, dynamic loader site, and semantic use occurrence. Adding a binding or starting to
use an existing binding in an already-baselined file creates a new subidentity without churning
retired file debt. The immutable protected-base baseline permits retirement but rejects new or swapped IDs;
regenerating the live ledger cannot authorize growth. Run pnpm design-system:motion-baseline:check
alongside the live-ledger check.
The TypeScript compiler AST guard covers engine subpaths and active .ts, .tsx, .js, .jsx,
.mts, .cts, .mjs, and .cjs production sources, rejects parse ambiguity, and scans without
gateway exclusions while ignoring comments and inert examples. It resolves bounded finite
conditional/static-string loaders, unshadowed CommonJS require, and official
node:module/module createRequire bindings while rejecting feature-local fake loaders.
Forbidden identities bind their semantic source owner and motion boundary; anonymous callbacks
also bind their call-site owner and sibling ordinal, while imperative findings bind the nearest
canonical engine API, stable target, and ordinal among same-owner, same-target calls of that API.
Unrelated calls and local alias renames do not affect it. Moving debt between two elements,
adjacent map/render callbacks, or same-target engine calls therefore cannot preserve an allowlisted
ID. Gateway adapters may render and
internally consume engine values but cannot leak raw bindings through direct exports, closures,
local callees, direct object/array member and local factory-return calls, caller-to-parameter flow,
defaults, destructuring/index/getter wrappers, exported destination aliases or recursive
nested/default/rest pattern assignments, arbitrary method sinks, late mutations, element-access,
bound, aliased or promise-wrapped dynamic loaders, class heritage or side
effects, caller callbacks, or raw component factories. Read-only exemptions require a statically
proven built-in receiver. Engine-derived booleans and internal React consumption are not raw-binding
exports.
This is an owned migration inventory, not a product-wide migration-complete or release claim.
Run the engineering gate for fail-closed token, UI, web, authority, audit, and help checks. The included design-system:compatibility-lifecycle gate keeps the registry and legacy-consumer ledger under one owner and fails when their governed 2026-10-31 sunset is reached. Production CSS responds to the real reduced-motion media preference; Storybook browser proof emulates that preference instead of masking every descendant with a blanket duration override. pnpm design-system:critical-journey:check validates the structural proof boundary. pnpm design-system:critical-journey:run -- --base-url <staging-origin> executes smoke coverage for all 17 launch-critical surfaces plus deep quote, dashboard, production, and admin journeys. The matrix proves 320 px reflow and 1440 px desktop behavior, default and reduced motion, forced-colors, localized skip-to-main operation, selected-theme/browser-metadata parity, and distinct fail-closed role sessions. pnpm design-system:evidence:release cannot pass until the complete, duplicate-free, digest-bound pixel, accessibility, keyboard, motion, forced-colors, reflow, localization, and global-overlay result set proves an immutable code-bearing subject. CI never updates baselines automatically. Earlier 108-pixel and 111-semantic-render results are historical evidence; they are not current proof for a newer subject until rerun.
For a bounded contributor check, run pnpm design-system:contracts and pnpm design-system:audit:v2; these do not replace the integrated CI or current-SHA browser proof. The strict literal audit covers web, the canonical UI package, and the active imposition and XJDF UI package surfaces. Non-visual XJDF standard data remains under its domain authority rather than being misclassified as interface color.
General interface colors use theme-aware CSS variables through themeColorRoles.
Stable chart, prepress and production colors use the separately named
domainColorRoles. Motion comes from @nowtoprint/ui/motion and the canonical 120/200/320 ms
registry scale;
hover lift, glow, bounce, spring overshoot and hover scale are not supported patterns.
Every retained compatibility bucket has an owner, exact consumer allowlist and sunset,
and the lifecycle check fails closed when any of that evidence is missing or expired.
The check also discovers real consumers per API: unlisted new use, stale allowlist
entries, non-file paths and paths outside the repository all fail. Existing
semanticColorRoles references are frozen by this ratchet while UI code moves to
themeColorRoles and stable chart/prepress/production code moves to domainColorRoles.
Lifecycle API keys must also exactly match the explicit discovery policy and governed
registry properties; omitted, extra or newly ungoverned APIs fail.
Production consumers cannot access token-registry compatibility data directly; the
boundary guard covers assignment alias chains, parenthesized roots, bracket/computed
access, root-package default bindings, namespace chains and structural destructuring
without counting comments or inert strings. New
hover scale, lift or elevation occurrences also fail. The baseline tracks 465
occurrences across 359 unique path/rule/evidence semantics. Each occurrence has a
distinct identity, so duplicate IDs and unrecorded decreases fail until an intentional
baseline regeneration. This is prelaunch migration debt, not an approved visual style.
Audit fingerprints are invariant across LF and CRLF. Malformed utilities such as border0, bg-primary/20/30, and dark:/50 fail closed. In @nowtoprint/design-tokens, verify checks checked-in artifacts before generation; run generate explicitly and commit the resulting adapter and manifest changes.
The docs/design-system directory contains the constitution, foundations, component decisions, visual-regression standard, copy standard, phase evidence, and migration ledger.
Release-evidence identity
The /styles header visibly shows the allowlisted source SHA, build identifier, and deployment revision received by the server. A source SHA is accepted only when it is exactly 40 lowercase hexadecimal characters. Provenance is verified only when source, build, and deployment are all present; any incomplete combination is partial, and an empty identity is unidentified. Partial and unidentified renders are not release evidence.
The public, no-store /api/deployment-provenance boundary exposes only
sourceCommitSha, deploymentRevision, buildIdentifier, optional application version, schema,
and status. The critical-journey runner rejects redirects, cross-origin responses, malformed
JSON, partial identity, and any SHA other than the immutable subject before Playwright starts.
The observed identity is bound into the run plan, each digest-bound result, and the final proof,
then independently checked again in Playwright. The deployment pipeline signs a canonical
payload covering the exact origin and identity with Ed25519 outside the application request
path. The endpoint never signs at request time. The runner and proof checker verify the detached
receipt against the protected NTP_DS_PROVENANCE_TRUSTED_KEYRING_JSON public-key allowlist; the
deployment exposes only the public receipt through NTP_DEPLOYMENT_PROVENANCE_PAYLOAD_B64U,
NTP_DEPLOYMENT_PROVENANCE_SIGNATURE_B64U, NTP_DEPLOYMENT_PROVENANCE_KEY_ID, and
NTP_DEPLOYMENT_PROVENANCE_ALGORITHM. The
private key must never enter the repository, application runtime, logs, or evidence. Without a
trusted keyring and signed deployment, live proof remains pending and releaseReady: false.
The signed immutableDeploymentUrl must use an exact lowercase deploymentRevision DNS label;
mutable staging aliases are rejected. Receipt fetches have explicit timeout and byte limits, and
each browser case revalidates the receipt at both start and end while navigating only the
immutable origin. The manifest-authoritative caseProofOutcomes are emitted as ordered
executedProofOutcomes; missing, duplicate, extra, or reordered outcome IDs fail closed.
Authenticated cases also compare the session
role, accountType, and organizationId presence with the manifest profile. A storage-state
label alone cannot prove admin or print-producer authority, and sensitive identity values are not
written to evidence.
The localized catalog is the V3 preview truth. Legacy V2 evidence is historical only and cannot prove the V3 preview or authorize production cutover. This local Phase 1 evidence does not claim live verification, deployment, push, or production release.
Cross-platform adapters
Web and desktop consume the same registry output. The full MUI system, Tailwind --color-ntp-* / --shadow-ntp-* namespace, and desktop generated adapter are produced together and checked for unresolved variables. Compatibility names may preserve old APIs during migration, but they cannot introduce independent values.
The legacy import paths colors.ts and design-tokens.ts are generated-authority derivatives only: the first re-exports the public @nowtoprint/design-tokens/legacy-web-colors API and the second derives preserved compatibility names from the public package root. Motion, shimmer, and surface/elevation adapters use that same package boundary; deep relative imports into generated files are rejected. Focused contracts reject raw token literals in either path and byte-check generated artifacts plus manifest hashes for drift.
That scan also covers the active unified theme, surface/elevation, motion, and shared loading-state authority modules. Typography is generated with the MUI system; surface, shadow, spacing, radius, motion, and loading compatibility names resolve to generated objects or canonical CSS variables. Provenance rejects extra unmanifested generated files, and semantic Tailwind resolution scans web, UI, and desktop variant/modifier forms.
UI primitives V4
@nowtoprint/ui V4 is independent from application-private aliases. Its canonical interaction token keeps controls at a 44 px minimum target in comfortable and compact density. Tabs use the full keyboard and ARIA contract; StatusState composes empty, loading, success, warning, and error presentations without embedding product copy. Product copy must come from the active locale. The Phase 6 consumer migration is complete; the unused legacy state modules have been removed.
Business truth, privacy and CSP
The interface does not show success before the owning server operation is confirmed. The feedback primitive is not mounted in global shells without a real submitter, and feedback text or email is never written to the browser console. Disabled forms use native disabled semantics and navigation uses real links.
Production script policy uses a per-request nonce and strict-dynamic, forwarded through request headers before rendering. Scripts contain neither unsafe-inline nor production unsafe-eval. This requires dynamic rendering; inline-style and PDF WebAssembly exceptions remain explicit tracked risks.
Global brand and RTL V4
Marketing, authentication, dashboard and administration shells use the canonical @nowtoprint/ui BrandMark. Do not recreate the symbol with text, local SVGs or feature-specific logo components.
Arabic interfaces use the self-hosted Noto Sans Arabic variable font. RTL layouts use logical properties and utilities such as start, end, ms, me, ps and pe; physical left/right spacing is not allowed in application shells. Directional navigation icons mirror in RTL while brand and status icons remain unchanged.
The styles catalog stores theme and density in the URL, so a selected visual state can be shared and reviewed. Catalog messages cover all six translation locales. This does not expand the separate shipping-locale contract, and it does not claim that every product message has already been localized.
Domain migration V4
Active onboarding and passkey flows, plus the organization and platform agent-access controls, use canonical V4 Card, Alert, Input, Button, Badge and Switch primitives. The migration changes presentation and accessibility contracts only; routing, authorization, API endpoints, rollback behavior, quote acceptance policy and payment authority are unchanged.
The unused compatibility state API has been removed. New empty, loading, success, warning and error views use StatusState or Alert with locale-owned copy. PDF Studio/desktop and email/document adapters remain protected by their generated-token contracts.
Public landing and chrome Phase 11
The localized landing page, shared marketing navbar, mobile menu and footer have a zero-debt scoped audit contract. The bounded 15-file surface moved from 39 legacy visual-debt occurrences in 7 files to 0. Public chrome uses the canonical BrandMark, semantic tokens, localized navigation labels, logical RTL layout, explicit focus states, reduced motion and hydration-safe mobile-menu portals. This claim applies only to the landing/chrome scope; it does not claim that every public route or the historical repository baseline is migrated.
High-density migration status
The 24 July 2026 static-closure snapshot reported zero exact fingerprints and a 7,992-call bridge under its narrower source universe. Those values remain historical evidence for that subject, not current product measurements. Live working-tree values come only from the digest-bound docs/design-system/working-state.json, which is regenerated from the capability, compatibility, desktop, Storybook, and motion ledgers. The achromatic migration remains valid: fixed contrast uses registry-owned onDark, onLight, paper, and scrim roles. Runtime AI-generated or user-selected palettes may use the category-specific runtime-color-palette authority marker; this exemption applies only to raw palette values and does not permit gradients or arbitrary visual effects.
Desktop preserves an immutable schema-v2 lineage of 4,976 exact fingerprints with zero parser failures. Its active ceiling is lower at 4,918. A separate digest-bound ledger freezes the 209 post-baseline identities and current category budgets without rewriting July history; it is closed to new use, can only shrink, is due by 30 September 2026, and must close before desktop GA. The achromatic migration receipt still governs its reviewed same-budget rebind. Any identity outside both ledgers fails even if the total falls, so this boundary does not claim desktop debt is zero.
Transactional email remains a deliberate inline-CSS channel because email clients require literal presentation values. Only files with the explicit transactional-email authority marker can use that channel, and colors and typography still come from generated email tokens. The legacy MUI token adapter is exempt only by its exact authority path; neighboring consumers remain audited.
Legacy token quarantine
The legacy web color module remains quarantined as a generated compatibility bridge. It is closed to new use and tracked by an exact import/reference ledger. Use semantic --ntp-* roles or generated Tailwind names. It is not removed by unsafe mechanical replacement: each domain must move to typed semantic roles with focused visual, accessibility, and behavior proof.
Opaque legacy adapters
Phase 6 removed the package GlassPanel/GlassCard/GlassButton compatibility API after its last active consumer moved to canonical Card, Button, and Input primitives. The print-shop composition is now named OperationalSurface; no glass-named web runtime adapter remains.
Authority completion Phase 4
Overlay primitives now require localized dismiss labels, 44 px targets, semantic opaque surfaces, overscroll containment, and reduced-motion fallbacks. The root locale provider supplies the six supported dismiss labels to dialogs and sheets, while an explicit closeLabel remains available for product-specific copy. Select, dropdown, and tooltip remain Radix-managed APG interactions; tooltip content is portalled so clipping and stacking containers cannot hide it. React 19.2 stable does not expose <ViewTransition>, while the Next.js 16 experimental.viewTransition flag remains experimental and is not recommended for production. It is not enabled here, and production CSS does not opt into automatic cross-document transitions; navigation uses stable Next.js Link behavior. The next-themes disableTransitionOnChange prop only suppresses CSS transitions during a color-theme switch and is not a React or browser View Transition API.
Dismiss backdrops and their sibling popup panels use the same generated semantic layer; DOM order keeps the interactive panel above the dismiss target.
Desktop custom modals compose the same canonical Radix-backed dialog interaction engine through DesktopDialog; product-owned layout remains in the desktop adapter instead of importing web-only compatibility CSS. The canonical engine owns focus trapping, Escape and outside-pointer interaction, and body scroll lock; the desktop adapter adds explicit invoker focus return and the dismissible-versus-blocking policy. Localized title, description, close copy, programmatic form labels, and pressed-state choice buttons remain mandatory. Blocking operator decisions, such as shift logout confirmation, disable implicit close, Escape, and backdrop dismissal so only the explicit action can complete the decision. The source-authority contract and package type checks prove this local boundary; protected runtime/browser and release evidence remain separate gates.
Authority completion Phase 5
The generated catalog manifest is the executable inspection contract shared by the localized /styles route and Storybook. It carries the registry version and registry SHA together with theme, density, semantic color, spacing, radius, and motion entries. Do not copy these lists into application or Storybook code; change the registry or generator and commit every generated artifact plus the hash manifest together.
Phase 5 compatibility CSS is generated from immutable migration receipts plus a
small owned runtime-correction ledger. CI now requires every live
ntp-phase5-* consumer candidate to be a standalone utility with a generated CSS
definition. Dialog motion belongs to the exported @nowtoprint/ui/styles.css
component asset; application code must not compose hashed utilities inside
animation class names.
Immutable-subject visual proof
Real-route visual and accessibility proof starts from a clean tracked worktree and captures the exact code-bearing commit/tree as an immutable subject. The tracked evidence commit follows that subject and may change only docs/design-system/evidence/**; this avoids a circular self-referential HEAD hash without permitting product drift. The current state is docs/design-system/evidence/critical-journey-current.json. A passed state identifies the runner and binds every surface/journey result to its exact SHA-256 artifact under docs/design-system/evidence/critical-journey/artifacts/; hand-edited success booleans, missing matrix cases, canonical URLs that bypass localized routing, and stale product subjects are rejected. If the browser matrix has not run, it remains explicitly pending-subject-proof. A local Windows pass does not approve Linux CI baselines, push, staging, production, or release readiness.
Runtime and delivery authority
The localized application tree has one App Router cache provider at the root. It uses the official MUI adapter with CSS layers enabled; dashboard and admin themes reuse that streaming cache instead of creating nested Emotion caches.
Only the document element may use the broad hydration warning exception needed for
client-owned theme attributes. Body, locale, and dashboard wrappers must render
deterministically. The root owns all self-hosted next/font/local variables, Storybook
bundles the Arabic variable font as a hashed asset, and the viewport preserves user zoom up
to 5x.
Shared marketplace SHA-256 helpers use audited browser-safe code and are compatibility-tested against Node UTF-8/hex output. Server-only cryptography stays at server boundaries. The standalone Node delivery target remains unchanged. This local closure does not claim a green full-web typecheck, Linux baseline approval, push, staging, production, or release readiness; the current cross-domain typecheck baseline is recorded in the Phase 8 receipt.
Local authority completion
The active-product audit no longer hides supported source under reports or deceptively
named generated directories. Only exact generated paths with an owned generator and
provenance may be excluded. The current ratchet carries 206 V1 occurrences; V2 fingerprints 68. The other 138 are not an arithmetic remainder: each has a stable identity, exact path,
category, policy rule/reason and digest in filtered-audit-occurrence-ledger.json. The immutable
V1-to-V2 lineage is not rewritten to absorb later product growth. Instead,
post-baseline-expansion-debt.json freezes the 9 August 2026 product snapshot as 7,657 exact
fingerprints (6,982 mui-sx, 637 inline-style, and 38 arbitrary utilities).
post-baseline-filtered-occurrence-ledger.json preserves the immutable 138-occurrence
reconciliation while binding the current 117 filtered identities to exact paths and evidence
digests. Both current sets are digest-bound and shrinkable: retirements pass,
but an unknown replacement or new identity fails the strict gate. The
occurrence-exact compatibility ledger carries 0 production style-bridge calls across
0 files and 1,635 live Phase 5 utility uses backed by 536 generated recipes. The
consumer-boundary baseline also freezes 1,792 direct MUI references across 617 files. Its owner is
design-system-platform, new use is forbidden, and the removal target is 2026-09-30 with
domain visual, accessibility, and behavior proof. F16 migrated the publish dialog, F17
migrated the Master Data bootstrap control, F18 migrated the Publication Cluster pilot
command card, F19 migrated the L1 Standards Control Tower, F20 migrated the
operation cockpit panels/shared primitives, F21 migrated the governance panels, and F22
migrated the main operation cockpit shell, F23 migrated the operation cockpit icon/type
boundary, F24 migrated the Catalog Steward Workbench, and F25 migrated the Master Data Overview
Workspace to canonical primitives, F26 migrated the Supply Workspace, F27 migrated the Data Health Sidebar,
and F28 migrated the Standards Registry Review Panel, while F29 migrated the Catalog Workspace
shell, F30 migrated its lead surface, and F31 migrated the Steward Governance Panel to canonical
primitives, F32 migrated the Steward Operating State Panel, F33 migrated the Command KPI Bar, F34 migrated the Operation Module Grid, F35 migrated the Publications Workspace shell, F36 removed the MasterDataQualityPanel compatibility renderer, F37 removed the live-storage readiness geometry bridge, F38 migrated the Master Data Admin Cockpit shell while retaining the MUI Tabs interaction boundary, F39 migrated the XJDF Compliance Tab progress boundary with accessible score semantics, F40 migrated the Analytics XJDF Compliance Widget from the style bridge to direct MUI sx props, F41 migrated the XJDF Compliance Badge to the same direct MUI sx boundary, F42 migrated XJDF Material Coverage to direct MUI sx props, F43 migrated XJDF Override Status to direct MUI sx props, F44 migrated the XJDF Order Viewer to direct MUI sx props, F45 migrated the public Developer Portal to direct React style props, F46 migrated the Graphics State Benchmark cockpit sections to direct MUI sx props, and F47 manually migrated the dashboard Loading Skeletons, Order Timeline, and Customer 360 visual boundaries. Their focused static contracts are wired into the prelaunch gate; the F18/F19/F20/F21/F22/F23/F24/F25/F26/F27/F28/F29/F30 focused
behavior suites are green in a provisioned local runtime. Package-wide typecheck, browser,
accessibility and release proof remain separate gates. Remaining consumer migrations follow
the same domain-scoped proof standard. This is deliberately not a zero-debt claim.
Occurrence IDs do not depend on line or column; those fields are diagnostic only. The
canonical audit-authority-bundle.json binds the V1 source, exact V2 baseline, filtered
ledger and reconciliation digests. Legacy files are mirrors and cannot override the bundle.
Updates publish the bundle last through a uniquely named atomic rename. Debt deadlines are
checked against the injected audit date or current UTC date and fail after expiry. The separate
post-baseline expansion ledger binds itself to the exact baseline digest and cannot overwrite
the historical reconciliation.
The verdict is local-authority-complete-external-release-not-authorized. The historical
20 July browser result remains bound to its original code subject and does not prove newer
design-system code. Current real-route evidence therefore remains
pending-subject-proof. Protected Linux CI, staging UAT, production authorization,
and release approval remain external gates. No push, staging mutation, or production
deployment was performed.
Current evidence pointer
docs/design-system/working-state.json is the only live working-tree measurement entry point. It
binds the capability baseline, compatibility debt, immutable and active desktop debt, Storybook
coverage, and motion-taxonomy ledger by schema and SHA-256. Working-state schema v2 uses the
explicit repo-local json-value-v1 mode (SHA-256(JSON.stringify(parsedJson))), so formatting,
CRLF, and indentation do not change a source identity. This is not a general canonical-JSON
standard. Compatibility occurrences use kind, normalized repository path, semantic detail, and
ordinal as identity; line and column remain non-authoritative locationHint diagnostics. Audit
V2 keeps immutable fingerprintV2 continuity and exposes semanticIdentity as the formatter-
independent fallback after exact matching. Generate, format, then check is the required order.
It explicitly carries no release,
push, or deployment proof. The only current release-evidence entry point remains
docs/design-system/evidence/current.json. Its target verifies SHA-256 digests and keeps
historical measurements bound to their own source commits rather than promoting them to current
truth. When pending evidence is bound, source digests and governance/runtime/superseded
reconciliation are rebuilt from those same declared sources; missing measurements fail closed
instead of preserving stale reconciliation values. The pointer validates Git commit/tree identity, HEAD ancestry, tracked worktree
cleanliness, and critical-path drift after the subject. Without current browser proof, the
release state remains pending and fail-closed.
V4 prelaunch package
The V4 engineering package defines the staging UAT surface, locale/RTL, theme, density,
viewport, motion, accessibility, hydration-console, pixel-diff and overflow matrix. The
authoritative review sizes are 320x1000 and 1440x1000. Localized quote review follows the product
route for each language (/tr/teklif, /de/angebot, /fr/devis, and the corresponding English,
Russian and Arabic routes). It is a handoff specification, not staging evidence. Protected Linux
CI, reviewed baseline promotion, staging UAT, production cutover, push and deployment remain
pending external approvals.
Storybook prelaunch coverage
Storybook reads its token examples from the generated catalog and its authoritative
320x1000 and 1440x1000 dimensions from viewport-authority.json. Accessibility violations
fail the addon test by default. storybook-component-coverage.json classifies all 50 public
UI exports and all 41 files under the configured story globs. The F15 bounded proof wave closes
Button, Input, Select and Dialog across state, theme, density, keyboard and accessibility; the
first four primitives; the launch-critical matrix adds 12 interactive primitives to the browser-proof
core. Barrel modules, typed utilities, and deprecated aliases that only re-export a canonical primitive are explicitly not applicable because they have no independent rendered surface. The final 28 render-producing exports now bind the executable component closeout matrix, so the current public export gap count is zero. That story participates in the 159-case semantic browser matrix; the manifest remains separate from current-SHA release and production proof. State, theme, density, keyboard
and accessibility dimensions must be proven with an executable reference,
not-applicable with a rationale, or a gap with an owner and deadline. The file
fails closed again when a new public export or unproven dimension appears.
A rationale alone cannot grant N/A status: notApplicableAuthority must classify a non-rendering
asset, barrel, or utility, or bind a component canonical-alias whose source is a pure re-export
of the named canonical package export.
The authoritative story globs cannot be replaced at build time. Proof references must stay
inside the repository and bind a named story export to its own play, a real named source
export, or an allowed design-evidence receipt schema and proof id. Deadlines use the current CI
date; deterministic audits can set DESIGN_SYSTEM_AUDIT_DATE. Unknown Storybook theme values
fall back to the generated catalog default instead of indexing an undefined theme. The
DesignTokens/MotionAuthority story demonstrates the token-derived Framer adapter and
UI/PageTransition/ReducedMotion demonstrates final-state behavior under the motion toolbar.
The localized /styles route renders the same generated motion entries and disables transitions
under the real prefers-reduced-motion media preference.
Stage 1 public-surface source contract
The local public-surface contract now keeps the marketing logo, theme action, language control,
and mobile menu inside the 320 CSS px structural budget. It also prevents a nested main in
the styles catalog, allows traceability cards to shrink, keeps alert titles heading-neutral,
and rejects decorative hero eyebrows, fake percentage metrics, direct supplier entry motion,
and nested link/button controls.
This is local source closure only. The immutable browser proof remains pending for the exact code-bearing subject; protected Linux CI, staging UAT, baseline review, push, and deployment are not implied.
Stage 4 audit and debt authority
Report-like paths are active source, traversal paths are rejected, symlinks cannot escape the
repository, and traversal order is deterministic. Bare, arbitrary and variant
backdrop-blur forms are audited. The 48 report-surface mui-sx and 4 gradient occurrences are frozen
as exact residual debt instead of being hidden or mass-refactored without visual proof.
Four shared SalesCharts color/elevation violations were migrated to semantic authority.
Stage 5 evidence-security boundary
The tracked UAT declaration is intentionally releaseReady: false. Every check, protected gate
and mutation has a unique pending evidence binding; empty, duplicate, unknown or unbound claims
fail closed. The public quote journey binds the actual AI quote and submit API handlers, so their
changes invalidate critical-route proof.
Workflow dispatch values cross into shell commands only through validated environment variables.
Baseline candidate v3 binds a real Git commit to its tree, policy digests, toolchain digests and
the extracted regular snapshot files. The promotion job must pass the named
design-system-baseline-approval protected environment before it generates an approval
attestation from trusted server, repository, run ID, run attempt, workflow ref, job, environment
and SHA context plus the candidate digest. There is no caller-supplied approval receipt and no
reviewer identity claim. Local CLI validation without that context fails closed. These are local
source guarantees, not Linux, browser, staging or release evidence; no push or deployment is implied.
Routing evidence uses the real exported pathname object and ignores commented, string and
template decoys. Candidate policy hashes are recomputed from committed Git blobs, tool digests
from the exact name:version contract, and every snapshot pointer is containment/type/symlink
checked before bytes are read.
Was this article helpful?
Last updated on