The Work Order — a hometown trade-print system for Luycx Plumbing.

What carries over from the current site, and the measured evidence behind the applied identity.

The real Luycx logo — red slanted slab lettering on print white — archived from the current site and used in the header, footer, and social card. On dark surfaces it rides in a white chip, like a printed label. A typographic fallback (Oswald, red accent) renders wherever the asset cannot.

Approved Luycx values, each labeled by provenance: observed (directly supported by evidence) or derived (a tonal derivative of observed evidence). Luycx red is the single interactive accent. Token names keep the design system’s original semantic vocabulary (copper/ink/paper) with every value remapped centrally to the brand — no invented colors remain. Text always wears ink tokens except red-deep, which passes AA on paper.

The approved Luycx pairing, self-hosted via next/font/local (nothing fetched at build time): Oswald for display headings, Roboto for body — both observed on the current live site — and Geist Mono for the work-order texture: eyebrows, labels, stamps, meta. Mono labels are always uppercase, 11px, +0.14em tracking.

4px base grid. Sections: 64px mobile / 96px desktop. Max content width 72rem. Print artifacts do the sectioning work: a 3px double rule opens major bands; a 2px dashed “perforation” separates a card’s summary from its detail. Radii stay print-small: 4px controls, 6px cards, 8px tickets. Shadows are reserved for tickets and hover states only.

Tactile press model: primary buttons carry a 3px hard shadow that collapses on :active while the button translates down 2px — a physical push, no bounce. Hover darkens one step. Focus is the global 2px red outline. Disabled drops the shadow and dims to 45%. Minimum hit target 44px.

Three card states, deliberately varied: the default card (hairline border), the edge card (red left rule grows top-to-bottom on hover/focus-within plus a ticket shadow), and the ticket (double border weight, permanent shadow, stamp + perforation) reserved for hero and contact artifacts. Never stack identical gray cards.

Fields sit on card white with a strong hairline, 44px minimum height. Focus swaps the border to Luycx red and adds a red-tint halo. Errors use the invalid border with a text message — never color alone. Choice tiles (wizard) fill red-tint when selected.

Sticky paper header with a mono utility bar (banner + hours) that hides on mobile. Links use the red underline reveal; current-page links hold the underline. The phone number is a primary button and never collapses into the menu. Mobile: a disclosure menu with 44px rows; the call button stays visible beside the toggle. Footer is ink, four columns collapsing to one, and always carries the full contact record, hours, private surface links, and the Keeden preview panel.

Motion is print-mechanical, semantic, and brief: things slide, press, and stamp — nothing floats or pulses. Implemented in CSS (offline build; no motion library) with an IntersectionObserver adding .is-in.

Two approved first-party truck photographs carry the imagery: the archived newspaper-ad truck (history block) and the owner’s newer fleet truck from the claimed Google Business Profile (hero background and history block), screened before use — bystander face and license plate blurred. Photos are framed inside ticket borders with mono captions. The current site’s Getty/Thinkstock stock is never reused (rights not established; URLs preserved in lib/facts.ts), and two non-Luycx photos found on the business profile were rejected in screening. For production: commission more of the real thing — the crew, the trucks at 603 S Lazy Ln, work in progress, warm daylight.

Global 2px red focus-visible outline with 2px offset. Skip link to #main. All interactive targets ≥44px. Icons are decorative (aria-hidden) with text always present. The services menu closes on Escape and outside click, with aria-expanded state. Rating and star icons never convey information color-alone — always rides with a numeral.