Role: Designer of the sections
Years: 2026
Tools: Shopify Liquid, HTML, CSS, and JS, Figma
Library: 20 components, 9 button variants
Patterns: 9, bound to tokens.css
Phases: 6, Figma to the theme
Bridge: v1.0 to v2.1

Systems

hoyt.com sections

Storefront sections, a Figma library matched to the theme, and a frame carried into Liquid.

The XTS Tuning System page on hoyt.com, at 1440.

Sections I wrote

I extend hoyt.com with new sections and components. The ones I wrote are cards, rebuilt as a responsive horizontal-scroll carousel, technology-callouts, review-grid-cards, xts-tuning-map, the America 250 countdown, and the XTS Tuning System page template built from those sections.

review-grid-cards, a section I wrote, on the XTS page.

cards, which I rebuilt as a responsive horizontal-scroll carousel, on the home page.

Interactive data

Three of them are instruments, not banners: a let-off gauge, a draw-force comparator, and the XTS tuning map. The XTS page also stacks at 390.

The whole XTS Tuning System page, top to bottom.

Phase 1: 15 July 2026

The Hoyt Figma library

Phase 1 is 20 components and a button with nine variants, conformed to the code that is already shipping.

Section: countdown-timer.liquid

Figma to Shopify, on one section

Six phases, from Figma to the theme: Figma, then token-bound HTML and CSS, then Liquid, then a theme push. Nine section patterns are bound to tokens.css.

I proved it end to end on the America 250 countdown: a four-state review page, dark mode chosen, then sections/countdown-timer.liquid.

The Hoyt Figma bridge went from v1.0 to v2.1, with two reusable skills for the round trip and for setting up foundations.