CSS architecture for Shopify themes that don’t turn into spaghetti

Tokens, utility classes, and section-scoped styles — the system we’ve refined over 200 builds.

Shopify themes that scale don’t use plain CSS or full Tailwind. They use a hybrid: design tokens + utility classes + section-scoped styles. Here’s the system we’ve refined over 200 builds.

The three layers

• Tokens — colors, spacing, type scale, motion timings. Defined in a single CSS file as custom properties.
• Utilities — atomic classes for layout, spacing, type. Consume tokens.
• Section styles — scoped to each Shopify section, consume tokens, used for genuinely custom layouts.

What we avoid

Global styles for component-level concerns. Hard-coded values anywhere. CSS-in-JS in Liquid templates.

Tokens or it didn’t happen.