Client
Law & OrderTimeline
Studio buildProduct
Concept build, single-page law firm marketing siteIndustry
Legal ServicesProfessional ServicesMarketingLaw & Order is a concept build for a Seattle law firm, produced in-house from a design reference rather than for a client. Firm sites carry the same three components almost every time, and each is where hand-rolled implementations break: a testimonial carousel with autoplay that will not pause, a mobile menu that loses scroll position on iOS, and display headings whose line breaks shift at every width. The page had to hold all three with no framework and no build step.
Split the type strictly by role, with Outfit for every heading, button, label, and numeral, and Newsreader for every paragraph and blockquote. Nothing crosses over.
Built the testimonial carousel on transforms rather than native scrolling, with four clone sets for runway, autoplay that runs only while the section is on screen, and separate durations for input at 700ms and unprompted motion at 900ms.
Gave the mobile menu one set(state) function that owns the panel class, aria-expanded, the button label, inert, and the scroll lock, so there is no second code path that can fall out of sync.
Measured every display heading's max-width in em against the real font, so the intended line break survives every viewport width without a media query per heading.
About 600 KB of imagery across ten files, all lazy below the fold, with the hero at high fetch priority.
Full keyboard operation: a skip link, visible focus rings, Escape closing the menu and returning focus, and focus pausing the carousel, which is the keyboard-reachable pause WCAG 2.2.2 asks for.
Assistive technology sees four testimonials rather than sixteen, because the twelve clones are aria-hidden.
Seven breakpoints, each with a single job, plus a video frame that steps from 11:5 to 16:9 to 4:3 so the subject stays 263px tall at 390px wide instead of 131px.
