# Thomax static concepts (Gate 2) Four directions, each with Home and the .wms flagship (IA.md 3.1 and 3.2, adjusted for Luke's 2026-09-25 steers). Plain HTML and CSS, no build step, no JavaScript. Menus use `
`. ## How to open Open the files straight from disk in a browser: - `direction-a/index.html`, `direction-a/wms.html` - `direction-b/index.html`, `direction-b/wms.html` - `direction-c/index.html`, `direction-c/wms.html` - `direction-d/index.html`, `direction-d/wms.html` (Direction D also loads `direction-d/tokens-d.css` and a small `site.js`) They load `../../brand/tokens.css`, `../shared/*.css` and `../fonts/` by relative path, so keep the repo layout. Screenshots at 1440px and 390px are in `screens/`. ## The directions **A: dark, enterprise (primary).** Navy-led, gradient used for accents, rules and headline text. The hero pairs the headline with a Wave Builder panel and a handheld pick screen over the current site's hero photo. The page layers stylised product panels throughout, has a full automation (WCS) section, a rescue proof block, and case-study cards. This is the more polished direction, per Luke's steer. **B: light, editorial (lighter touch).** White-led, navy type at lighter weights, numbered section rails, gradient only as a thin accent. The hero puts the product front and centre: a light "stage" with the Wave Builder, a charge review and the handheld. It has the same content with less art direction. **C: enterprise, flat blocks (Manhattan-grade restraint).** Reworked on Luke's 2026-09-25 steer that A and B read as generic. Navy and white base; deep blue `#002DB2` and cyan `#00B5FF` used as large flat blocks. The ownable device is the Thomax X: its stroke angle (about 37 degrees off vertical) drawn as huge cropped planes in the hero and CTA, and a pale cyan corner plane behind the customer outcomes. Very large, heavy headlines (Work Sans 700); quiet body type; plain rectangular buttons; full-bleed photography (the current thomax.com hero photo behind the regions section, art-directed placeholders elsewhere); one product screen per page, large and framed like an application window (Wave Builder on Home, client settings compare on .wms); customer outcomes as short sentences under a thin rule; a big structured footer with a cyan legal strip. - Hero subhead cut: the years-vs-months line is the only support line, which also sidesteps open question 2 ("platform"). - Home: hero, what we do (three plain columns plus the one screen), white-box WCS (full-bleed photo with a flat blue block), outcomes with the rescue line, global reach with the four regions, CTA, footer. - .wms: hero, "same floor, different rules" with the settings screen, ten capabilities as a numbered two-column list, WCS, fit / not in .wms / controls, outcomes, CTA. - Removed on purpose: eyebrow labels, gradient text, glass cards, chips and pills (outside the product screen), stat-tile rows (the four placeholder stats are dropped until real numbers exist), timelines, card grids, rounded corners. - One placeholder style: a small outlined-square caption ("Photo placeholder" or "Placeholder"), plus a dotted underline for unconfirmed figures such as `[X] weeks`. - Region selector sits in the utility bar above the header (`
`, no JavaScript). Motion: the hero planes settle on load (CSS only, off under reduced motion). - Files: `direction-c/style.css`, `direction-c/mocks-c.css` (screen framing only; shared files unchanged). Deploys to dev3 via the existing worker mapping. Shared across the directions: - `shared/mocks.css`: stylised UI panels built in HTML/CSS (handheld pick, Wave Builder, charge review, ULD record, planning board, integration log, warehouse control, putaway, cartonisation, freight estimate, client portal, rotation rule, settings compare). All the data is synthetic, the panels are labelled "Synthetic data", and client names are invented (Harbour Pet Co, Kestrel Outdoor, Northwind Apparel, Tasman Home Goods). Each panel carries a screen-reader description. - Placeholders (amber) mark stats, photos, the rescue customer and weeks, case-study metrics and media links, and attributions. - `fonts/`: Work Sans variable woff2 (latin, roman and italic) from Google Fonts, with `OFL.txt`. ## Direction D: light enterprise, commercetools usability (2026-09-25) Built to Luke's steer ("clean, very high end. Manhattan. But nice and usable, more like commercetools") and governed by `../docs/DESIGN_BRIEF.md`. Compared against commercetools (primary) and Manhattan in three critique rounds; Blue Yonder dropped as a reference. Files: `direction-d/index.html`, `wms.html`, `style.css`, `tokens-d.css`, `site.js`, `img/` (with `img/CREDITS.md`). Screens: `screens/direction-d-{home,wms}-{1440,390}.png`. What reads as high end in the references, and how D does it: - Type craft. Headings in Schibsted Grotesk 600 (OFL, `fonts/SchibstedGrotesk-Variable-latin.woff2`, Luke's pick) through the `--font-display` hook; Work Sans stays for body and UI. Tracking is lighter than Work Sans needs (display -0.022em, H2 -0.014em). Display 64px on Home only, H1 52px, H2 40px, H3 28px, H4 20px, body 17px at 1.6, captions 13px. No uppercase eyebrows, no gradient text, one blue clause per page (the hero's second sentence). - Canvas. White with ink-50 alternates; two navy bands (products explorer, regions); one blue-700 block (automation), plus the blue CTA with the tone-on-tone X plane; navy footer. Cards: 1px ink-200, 8px radius, no shadow at rest. Buttons 48px (40px in the header), 6px radius. - Rhythm. 1200px grid, 96px section padding, 48px from intro to content, 24px card gaps, 32px column gaps. Home has 11 sections, .wms has 10. Only the products intro is centred. - Usability. Five-item nav (Products, Solutions, Customers, Why Thomax, Company) with single-column 280px dropdowns: click or 120ms hover, arrow keys, Escape, outside click. Utility bar with a real-link region selector (current region marked by a blue inset bar), Integrations, Support, Contact, Log in. Primary "Book a demo", secondary "Check your fit". Products explorer and the .wms capability map are vertical ARIA tablists from 1024px up; below that, and without JavaScript, every panel is in the page in order. Mobile menu is a full-height sheet with the CTAs pinned. - Imagery. Hero: the owned thomax.com photo in monochrome with the real handheld pick screen overlapping it. Stock (Unsplash licence) only for non-people subjects in secondary slots, captioned "Illustrative photo, not a Thomax site". No stock people and no stock in heroes. - Product visuals. Real `screens-real` screens only, never restyled: 1x moment crops (Wave Builder selection, System Parameters rows per client, Review Charges row states, portal job actions) on ink-50 with a caption naming the screen and "Synthetic data"; one full Wave Builder at 72 percent on .wms with four numbered callouts outside the frame. Behaviour is drawn as SVG diagrams in the brief's style (integration hub, WMS to WCS to equipment, settings resolution, the 3PL charge chain). - Placeholders. One style: amber-700 on amber-50 with a dotted underline (rescue weeks and facts, Knobby attribution). The `[00]` stat row is removed until NUM-26 to NUM-29 are sourced. Design-system spec for the Astro build: 1. Tokens: `brand/tokens.css` plus the section 14 changes, currently scoped in `direction-d/tokens-d.css`; fold them into `brand/tokens.css` and `tokens.json` on approval. 2. Type roles: `.t-display` (Home hero only), `.t-h1`, `.t-h2`, `.t-h3` in `--font-display`; `.t-h4`, `.t-lead`, body, `.label`, `.caption` in Work Sans. Headline measure 14ch to 22ch; lead 60ch. 3. Surfaces: `section` (white), `section--alt` (ink-50), `band-dark` with `data-theme="dark"` (navy, max two per page, never adjacent), `band-photo` (navy band with a photo and a left-to-right overlay), one `c-block` blue panel per page, `cta` blue band with the X plane. 4. Components: `menu` and `menu-panel` (dropdown), `explorer` and `capmap` (vertical tabs), `pane`, `card` (3:2 photo, tags line, H4, one sentence, text link), `steps` (numbered columns under rules), `facts` (definition list), `chain` (process diagram), `crop` (moment crop), `frame` plus `callouts` (full screen), `diagram` (SVG), `quote`, `regions`, `industries` (text columns under rules), `link` (text plus chevron), `.m` maturity label (8px dot plus text). 5. Rules: no mega menus, stat tiles, pills, timelines, glass, glows or hover lifts; one heading and one visual per section; every product visual captioned; every claim traceable to `CLAIMS_REGISTER.csv`. Open items for D: confirm ownership of the thomax.com photo; the in-hand device shot (brief shot list 4 and 5) replaces the overlapped handheld; mono logo files for the logo row; rescue customer and weeks; Knobby attribution; "Six site control projects since 2023" needs the live-status check in WCS-11. ## Steers applied (2026-09-25) - Enterprise, global framing (ANZ, UK, Europe, North America), plus a region selector in the header. - Hero: "Best-practice warehousing, live faster. Flexibility for everything after." Subhead as supplied. Support line: "Enterprise suites measure rollouts in years. Most Thomax sites are live in months." No exact average. - The four stats are labelled placeholders. - Rescue block: failed rollouts by other providers taken live in [X] weeks. The customer and weeks are placeholders, and the previous provider is not named. - Automation: white-box WCS delivered alongside the WMS, with its own section on both pages. - Case studies are cards with region, industry, products and a media row (story, press, video). ## Open questions 1. Direction pick. A was the recommendation before the 2026-09-25 "less generic" steer; C is the response to that steer. B's hero "stage" could be adopted inside A. 2. The hero subhead says "platform", which POSITIONING.md bans as a noun. Keep it for the interim hero or reword? 3. "Live faster" and "most sites live in months": which go-live evidence backs this publicly? DNP-20 says no go-live evidence exists in the catalogues. Same question for the rescue customer, the weeks figure and permission to name them. 4. WCS: the positioning recorded "delivered patterns, not a standalone WES product" (DNP-06). Confirm "white-box WCS" wording, which sites can be named, and degraded-mode ownership. 5. The stat set to publish (sites live, orders a year, countries, measured uptime) and the source for each. 6. Region selector: are regional variants real pages (IA.md defers /en-gb and friends until each has its own proof), or does it switch contact details only? 7. Photography: the A hero uses the current thomax.com hero photo as a backdrop. Confirm it is owned and not stock, and plan a shoot (picker at pick face, pack bench, team, automation sites). 8. Customer logos: mono SVG logo files and permission for the logo row; Knobby quote attribution (named person). 9. Team locations wording (NZ, UK, Canada, USA) and any hosting-region statement. 10. Logo: original vectors from Thomax, cyan value (`#00B5FF` vs portal `#00A3D8`), and whether to lift the blue bands on dark.