Step modules: a geometric pattern of cobalt stair blocks on a grid
Each module is a solid three-step stair: a full-width bar, a two-thirds bar and a one-third bar fused into a single block. Twenty-five of them fill a square grid in cobalt blue, turned to one of four orientations and tilted a few degrees off-axis so the grid feels hand-placed. The look leans toward pixel art and modernist print, and it is loud: give it a poster, an event identity or a section header, not the space behind a form.
Make it yours
Square the blocks to the grid
Curvature is 48, and for these blocks it only adds a small tilt. Set it to 0 and every stair snaps to true horizontals and verticals, which looks cleaner next to UI components and pixel-aligned type.
Limit the orientations
At Complexity 4 the blocks use all four quarter turns. Drop it to 2 and they alternate between just two orientations, which turns the scatter into a calmer, more repetitive rhythm. Open space, 14 to begin with, widens the gutters between blocks as you raise it.
FAQ
Where does a blocky pattern like Step modules work best?
It suits places that can take a strong graphic: campaign posters, event or conference identities, section headers and the image half of a split signup screen. Because the blocks are solid cobalt, keep body text off the pattern itself; use the Split or Feature preview to check the balance between pattern and copy.
How it works
Choose a system
Pick one of 24 geometric systems, from Ray crown and Iris fold to Latitude cage and Twist tower.
Shape the geometry
Set density, detail, bend, openness, weight, scale, rotation and offset, and change the variation for a new arrangement.
Color, frame and use it
Set paper, primary, secondary and accent colors, choose landscape, square or portrait, then sign in with a free UX Pilot account to use it on the canvas or export it.