The system from docs/design-reference.md, built and rendered on real WSM
content. Structure, spacing, and type follow the reference concept; the palette is
WSM's own — proposed below for sign-off.
01 — Proposed palette
The logo is green + yellow + black — so is John Deere's, in the same equipment category. The fix is structural, not cosmetic: dark surfaces go graphite (the logo's black field — 78% of its pixels), green becomes purely an action color (never a background), and yellow stays a narrow accent (arrows, live status, labels on dark — never a field, never text on white). Value structure of the reference is preserved; hue is WSM's.
Surfaces
Ink
Action — the WSM letterform greens
Accent — the logo yellow
State
Lines
Alternate on file: if graphite dark sections
get pushback, the sanctioned fallback is #0B2417 — a very dark blue-green
derived from the logo's outline green, still far from the reference's dark green.
One or the other sitewide, never both.
02 — Typography
Named on the reference's own spec page. Self-hosted variable font, weights 400 / 500 / 600 / 800, latin subset, ~35 KB. Negative tracking only at 28 px and above; uppercase always +0.08em and only in three places: photo-tile titles, footer column heads, badges. Everything else — headings, buttons, nav — is sentence case.
03 — Grid & rhythm
1200 px container, 12 columns, 32 px gutters — the card unit is 3 columns = 276 px.
Sections breathe at 96 px (desktop) / 56 px (mobile); inventory surfaces switch to the
dense tier via data-density="dense". The grid breaks in exactly four
sanctioned places: full-bleed media, the floating nav, the straddling search bar, and
overlapping split cards.
04 — Buttons & the arrow rule
↗ means go somewhere new — a catalog, a bidding platform, a detail page. → means continue in place — submit, next. The circular ↗ is the design's repeated glyph: solid green, white arrow, never outlined, never yellow on light, never labeled.
The split control — every auction's two actions, one unit
05 — Status system
UPCOMING is the one sanctioned yellow fill on light — "upcoming" is exactly the state that should catch the eye. The LIVE dot pulses 1.6 s (off under reduced-motion). The photo-count chip replaces the reference's 360° glyph.
06 — The lot card
The type does the selling, so honest yard photography reads as inventory, not neglect. Uniform 3:2 frames with a 1 px inset normalizer; no per-photo "fixing"; the empty state is designed, never a placeholder JPG.
07 — Feature cards
Bring it in or send photos — we tell you what it should bring at auction, no obligation.
Drop off at the Phoenix yard weekdays 7–3:30, or we arrange transport for heavy units.
Assets prepped within 48 hours, photographed, cataloged, and put in front of 800+ registered bidders.
Clean settlement after the sale — one statement, one check, no surprises.
08 — The divided strip
These four items are rendered from the real HiBid feed snapshot (auctioneer 83391), not typed in. One shared border, 1 px internal rules, no gaps — the opposite of the card grid, on purpose: contained items on light, divided items on dark.
Tools & Materials
258 lots · 8:00 AM · Phoenix
View catalog ›Tools & Materials
211 lots · 8:00 AM · Phoenix
View catalog ›Vehicles & Equipment
42 lots · 8:00 AM · Phoenix
View catalog ›Vehicles & Equipment
Catalog coming · 8:00 AM · Phoenix
View catalog ›09 — Dark strip payloads
Auction alerts by email — items of interest, catalog drops, promotions.
10 — Forms & the straddling bar
The search bar and band forms are zero-radius with a square green submit — a signature, not an oversight. Standard fields are 48 px, radius 4, with the green focus ring. The bar below actually straddles this section's boundary: 60% above, 40% below.
As it appears on your bidder registration.
Enter a complete email address.
11 — Motion
| Token | Value | Used for |
|---|---|---|
| --dur-fast · 140ms | ease-inout | color, border, opacity on hover |
| --dur-base · 200ms | ease-inout | card lift, small shifts |
| --dur-slow · 400ms | ease-out | scroll reveals (16px rise, 60ms stagger, cap 6) |
| --dur-slower · 560ms | ease-out | carousel slide, nav collapse |
| countdown | none | digits never animate — tabular numerals, zero reflow |
| hero | none | complete at first paint, never revealed |
Hover any card or the icon-circles above — lift, border, and the 2px arrow nudge are the system's entire vocabulary. Reduced-motion collapses everything to 120 ms fades.
