…if you can remember how to use it — If you’re like me you’ve played around with the Flexbox Froggy and forgotten most of it shortly after. When the perfect flexbox situation arises I go straight to the CSS Tricks Complete Flexbox Guide to try to decipher what the properties mean. I have yet to meet a developer that…

The 8-point grid is a powerful system for creating consistent and visually appealing user interfaces (UIs). This post is about how to establish vertical rhythm and set typography in an 8pt grid system. …

Advice I wish I had received earlier in my career. — I moved to San Francisco in 2013 as a junior designer with only a few years of experience and a desire to dive into the deep end of design. While I have experienced a lot over the past 4 years — and I still have even more to learn as…

In my first post about The Intro to 8-Point Grid System I laid out the key reasons to convert your workflow. This is a deep dive into some of the tricky questions I’ve had to answer while moving our design system at Pivotal Cloud Foundry towards the 8pt system. How do I count borders in the 8pt grid system? This…

The push for SVG icons over font icons has caught serious momentum in the web community. With an SVG icon system you can better meet accessibility standards, render higher quality visuals, and add/remove/modify icons in the library with ease. At Pivotal we’ve created an SVG icon system with React for…

As a designer you’ve probably heard the term grid whether you’re designing a website, a magazine, or a mobile app. We have grids for all sorts of content arrangements. We use column grids to align content horizontally. Baseline grids to vertically align bodies of text. Soft grids and hard grids…