Gearbox Web Style Guide
Gearbox
Brand application, brand system
Gearbox is a dev agency that cares about the details. They asked PS to produce a comprehensive web style guide to use as an example for designers they collaborate with. The "guidelines for the guidelines" would help align design and development approaches from the start and ensure what was being built was responsive, grounded in a workable system, and scalable. To do that, we expanded Gearbox's brand guidelines into a system fit for the web and their development approach.
We laid out logo usage, colour, responsive typography, spacing, button and form components, and more, in an easy-to-navigate Figma file that included examples of type in action, light and dark modes, and mockups of how all the pieces come together.
We dedicated a section to variables and naming conventions to provide a snapshot of the underlying design system.
