Rufous & Co: A Shopify Design System and Ideal Client Profile

Snapshot

• 10 — colour tokens, each with a named role and a CSS variable

• 11 — sections of client research sitting behind the layout calls

• 5 — page templates specified block by block

The challenge

A Seattle interior design studio and artisan home goods shop runs two businesses on one Shopify store. The homepage redesign had settled the look, but nothing carried it to the other pages. Every new template restarted the same questions about which cream, which heading weight, which spacing step, and the answers kept drifting.

What I did

Pull the visual language out of the approved homepage and write it down as rules, then go a step further and document the person the rules are for, so a layout decision can be settled by evidence rather than by taste.

The work

The system. Ten colour tokens running from charcoal and warm cream through to sage, rust and deep olive, each mapped to a role and a variable. Montserrat as the sole typeface across five weights, a five-level heading scale from 42px Light down to a 13px SemiBold section label, and a five-level body scale. A button system with no border radius anywhere, a 4px spacing base running to 80px, a 12-column grid inside a 1200px container, and photography and icon rules covering white balance, crop ratios and a 1.3px Lucide stroke.

The client profile. Eleven sections on the Considered Homeowner: budgets by room, six pain points in their own words, the discovery channels and a 62 / 31 / 7 device split, what triggers a booking, the objections to clear, a copy guide naming the words to use and the words to avoid, and a page of design implications that turn all of it into instructions.

The templates. Homepage, shop and collection, product detail, design services, and about, each written out as an ordered block list so a build can start without a new design pass.

Stack: Shopify, Montserrat, Lucide icons, Figma