Theme tokens

Change the :root variables in style.css to change the theme across the site. Purple identifies ordinary application actions. Red identifies cancellation or discarding. Yellow mockup information is separate from production notifications.

Shared font: Segoe UI with system fallbacks. Body 15px, page title 28px, section title 18px, controls 14px, labels 13px, navigation and ordinary status badges 12px; title status badges 22px (20px on narrow screens). Use the common spacing and radius variables rather than adding a second palette.

Headers and navigation

Sequence: navigation line, title with status immediately beside it, then one short introduction. On small screens the status may wrap within the title row. Put actions below the header in the relevant toolbar or action row. Keep this structure for each workflow step.

Status always includes text. Use yellow for Draft and Request; green for Active, Ordered, Shipped, and Receiving; purple for Received, Finalized, and Complete. Requested uses the same yellow as Request. Cancelled remains red; read-only/inactive labels remain neutral gray. Title badges use the identical color scheme with a larger font close to the page title size. Ordinary table/list badges stay compact. A corrected event report retains its explicit “Corrected report” text.

<header class="page-header">
  <nav class="page-nav" aria-label="Page navigation">…</nav>
  <div class="page-title-row">
    <h1>Page title</h1>
    <span class="badge" data-state="pending">Draft</span>
  </div>
  <p class="page-intro">Short description of this step.</p>
</header>

Walkthrough introduction

The shell opens on an introduction. Its TG Inventory brand link returns there without adding another sidebar item. The introduction hides Open separately and preserves visited workflow frames.

Action placement and wording

Page and section action rows align right. Put the primary action last in DOM order and visual order. Secondary actions precede it. Inline actions stay with their target: Add destination aligns right inside its table cell, Remove stays beside its row, and search controls remain beside the search field. Navigation links stay in the navigation line.

<div class="actions">
  <button type="button" class="cancel-action">Cancel</button>
  <button type="submit" class="primary">Save</button>
</div>

Forms and local actions

Labels sit above fields. Optional values say “optional.” Preserve blank versus zero wherever the specification distinguishes them. Do not use placeholder text as the only label.

Collection filters

Each checkbox label occupies its own line within a column. Long labels wrap within that option; adjacent options never run together.

Record metadata

Changed by

Jarod Nash

Recorded

Sep 25, 2026, 2:14 PM

Item SKU at the time

RP_HEHIM

Use muted, bold labels and regular values in a three-column definition list, stacking on narrow screens.

Location filters

Keep storage and other inventory areas in separate columns. No selection shows columns with nonzero balances in the results; explicit selections show only those columns, including zero balances. Item details retain all locations. Reconciliation uses the same search and collection controls with one required storage-location selector.

Use one table header treatment, left-aligned descriptions, right-aligned numbers with tabular figures, and horizontal scrolling where needed. Monetary precision and zero display follow each workflow’s specification. Keep row actions beside their target.

The inventory index retains its fixed headings/name column and conditional columns. The item view retains the agreed one-third inventory and two-thirds details layout. These are layout exceptions, not separate themes.

Location order

For location rows, columns, selectors, and destination summaries: Central first; other storage locations alphabetically; active or inventory-affecting events alphabetically; In Transit; Ordered. Keep existing visibility rules. Order the display, preserving each location’s quantities and selected value. Transaction histories retain their chronological order.

1. Central
2. Ames IA
3. Boston MA
4. Indianapolis IN
5. Milwaukee WI
6. Gamehole Con (event)
7. Gen Con (event)
8. Origins (event)
9. In Transit
10. Ordered

Mockups share inventory-order.js. For future dynamic event names, pass the explicit event kind to its comparator. Placeholder choices stay first and Unknown / external stays outside the inventory-location groups.

Request index tables

Only the purchase and relocation request indexes use these column sequences. Display one date, Last Updated, then the linked title without a second-line ID. Keep Request ID in its own final column.

Location-count worksheet

All pages clear the html/body page background in print styles, even with Background graphics enabled; content backgrounds such as table groups and status labels remain intact. Only the Print Worksheet view also uses a white page background on screen. Its collection sub-header rows retain their purple background with background graphics enabled. Other reconciliation steps keep the standard page background. Entering this worksheet opens the browser print dialog after rendering; retain the Print worksheet button for reprinting. Cancelling the dialog leaves the worksheet visible.

Draft review and status filters

The relocation index uses independently selectable status checkboxes; Complete and Cancelled are off by default. Selecting none shows no rows. Keep selections when returning within the mockup.

Draft editing leads to a read-only request review. Edit draft preserves values; Submit request alone changes the stage. Require a nonblank title. A separate Edit title dialog lets the owner or a Location Manager rename any stage without unlocking other fields.

Relocation requested items

Use this grouped base table across edit, view, fulfillment, receiving, review, and packing. The source/destination arrows are current stock to the projection after the requested quantity, not a second posting. Editing uses a Request input; fulfillment adds Sent; receiving adds Received. Packing has a blank Sent column. Keep Requested items in a separate bordered section above inventory search.

Multiple tracking lines

Each line has its own carrier. Other may include an https tracking URL. View pages link to carrier tracking in a separate tab. Shipping and receiving are full workflow pages with Save, a review step, and a final confirmation.

Notifications and mockup information

Success uses green, warnings use amber, errors use red, and informational notices use blue. Include explanatory text rather than relying on color. Announce errors with role="alert" and focus them when needed. The smaller yellow mockup-info banner has no heading and contains only necessary existing demo notes or controls. It never replaces a save result or a finalization warning.

Confirmation dialogs

Use a focused native dialog with a clear action title, concise consequences, and right-aligned actions. Red identifies discarding/cancelling, not ordinary finalization. Escape keeps the user in the previous step without committing.

Catalog section navigation

Use a purple selected state and aria-pressed for local section buttons. Place the create action at the right of the section heading. Use linked names for detail views, compact status badges in tables, and the shared enlarged badge beside a detail title.

Inactive and Archived badges use the neutral treatment. Keep lifecycle actions with the selected record; changing a parent status does not demonstrate a child cascade in this draft.

Developer and designer maintenance

Single stylesheet: every page links directly to public/css/style.css. There are no per-mockup theme stylesheets or inline styles. Keep new theme values in tokens and new reusable patterns in the shared components section. The scoped layout section holds genuine workflow geometry only.

New or changed components: update this guide in the same change, include the relevant states, then inspect affected mockups in Chrome. Check keyboard focus, disabled states, narrow layouts, tables, dialogs, and print layouts. Preserve inventory and costing semantics.

Markup: use the classes illustrated here directly in future application templates. The existing prototypes also use mockup-layout.js to normalize dynamically generated legacy markup. That adapter is a mockup convenience, not a required application architecture.

Scope: this is a provisional starting point. It does not approve a final visual design, new permissions, or application implementation.