Primer was growing rapidly and was only going to continue to expand their footprint; we were tasked with building their marketing site in a way that made it easy for it to grow with them.
Rather than building a collection of web pages, we set out to build Primer a site system. This approach is used historically in product design, and we anticipated it translating well to marketing sites.
Building a site system meant eschewing the traditional page-based approach to web development. Rather than building individual pages, we built a flexible, light-weight system made of individual website components that is easily maintained and grown.
We started by building core components that would impact every piece of the website: color, typography, spacing, and the grid. From there, we built several dozen components that could be used throughout the website, including: buttons, form fields, navigation, and content blocks.
Scientific precision is a core component of Primer’s brand, and we wanted to weave that into the fabric of the marketing site. Specifically, we wanted to build a highly technical grid that would give us maximum control over spacing and visual rhythm.
Spacing is an impalpable component of design. It’s difficult to point out when it’s right, but creates an indefinable inconsistency when it’s wrong. That wrongness is an unavoidable side effect of a traditional flex grid. While easier to build, it would restrict us to optimizing for a single screen size and sacrificing control while scaling. Primer’s site needed predictability regardless of screen size.
With that in mind, we engineered a grid to give us maximum control at all breakpoints. Whereas flex grids have established column widths with gutters that flex to fill the screen, our grid featured predetermined padding and gutter widths. We built the grid in 3 sizes (mobile, tablet, and desktop), and defined gutters and padding on either side of the screen to ensure uniform margins regardless of screen size.
This approach was uniquely challenging, requiring highly complex math and code to allow for precisely positioned elements, nested elements, and flexibility for unique cases. The result was a collection of mixins that could be used on any element or component to span the desired number of columns. Regardless of whether the element was nested inside another grid element or not, it would be aligned properly at all breakpoints. The mixins did the heavy lifting with flexbox, calculating the correct width minus the offsets for padding and gutters.
The resulting hyper-modernist, technical Swiss grid (typically reserved for high-fashion and editorial sites) allows us to place components with extreme precision and maximize visual control.
Primer’s internal team can easily work within the system we built to modify and add content ongoing. With the site system we built, pages are easily added by leveraging pre-built components to compile content. We documented the system in Astrum, making it easy for someone new to pick it up and build with it in the future.
As an added bonus, down the road when Primer inevitably decides to revisit their branding, making updates to these components is simple. Changes to a CSS file will update the components’ design across the entire website.