Insert a pattern into a site running a different theme and you find out, immediately, how it was built. A portable pattern settles in — right colors, right type, right spacing. A brittle one arrives wearing its old theme’s clothes: hard-coded hex values, pixel padding, font sizes that ignore the new scale. If you keep a library that outlives any one project, portability is the difference between an asset and a museum.
Speak in presets
Every theme publishes a palette, a type scale, and a spacing scale through theme.json. When you pick “Primary” from the palette instead of typing a hex code, the pattern stores the slug — and on the next theme, “Primary” resolves to that theme’s primary. The same goes for font size presets and the spacing scale. Preset choices translate; literal values do not.
- Colors: palette entries, never custom hex.
- Type: size presets, never hand-typed rem values.
- Spacing: the theme’s scale, never raw pixels.
Let layout be inherited
Use Group and Columns with the default constrained layout and leave content widths alone wherever possible — the theme knows its own measure. A pattern that pins itself to 1140px will look wrong in any theme that disagrees. Full-width sections should be full-width by alignment, not by a hard-coded width.
Design for unknown context
Assume the next theme has a different accent color, a wider content column, and a heavier heading font. Guarantee your contrast with dims and overlays rather than trusting a specific palette combination; choose imagery that works beside any accent; avoid stacking two decisions (custom color on custom size) when one preset would do.
Test the cheap way
Keep two wildly different themes on a scratch site and insert your pattern into both before calling it done. Five minutes of switching catches ninety percent of portability sins — and once a pattern passes, it tends to pass everywhere, because it has stopped carrying assumptions and started speaking the theme’s language.