Skip to main content
NowToPrint Help
NowToPrint Help
Help Center
Getting Started
Platform Overview
Marketplace
Print Shop
Prepress
Design Studio
Orders & Delivery
Notifications
Free Tools
Templates
VDP (Variable Data Printing)
Developer & API
FAQ
Technical Reference
NowToPrint Design SystemColour ManagementFile FormatsPDF StandardsResolution (DPI/PPI)XJDF ve CIP4 Standartlari
Edge Hub
Admin Panel
Technical Reference
  1. Technical
  2. NowToPrint Design System

NowToPrint Design System

The production authority for NowToPrint visual language, tokens, components, and governance.

docs30 min readReviewed Aug 31, 2026

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

  1. The token registry is the only value authority. Its generated manifest verifies the CSS, Tailwind, JavaScript, MUI, email, and document adapters.
  2. 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.
  3. @nowtoprint/ui provides canonical primitives and motion patterns.
  4. The accepted North Star defines composition and visual character, never product copy or behavior.
  5. Surface variants define composition and density without creating a second brand identity.
  6. 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?

Edit on GitHub

Last updated on

Teknik Rehberler

Profesyonel baskı için teknik bilgiler, standartlar ve en iyi uygulamalar.

Colour Management

A guide to CMYK, RGB, and colour profiles for colour accuracy in professional print.

On this page

NowToPrint Design SystemWhere to inspect the systemAuthority chainContributor rulesSession-aware page cachingVerification commands and evidence boundariesRelease-evidence identityCross-platform adaptersUI primitives V4Business truth, privacy and CSPGlobal brand and RTL V4Domain migration V4Public landing and chrome Phase 11High-density migration statusLegacy token quarantineOpaque legacy adaptersAuthority completion Phase 4Authority completion Phase 5Immutable-subject visual proofRuntime and delivery authorityLocal authority completionCurrent evidence pointerV4 prelaunch packageStorybook prelaunch coverageStage 1 public-surface source contractStage 4 audit and debt authorityStage 5 evidence-security boundary
Ask AI Assistant