Hey everyone, we're a product design studio in Brooklyn. We've published a few projects here before, like our site and some apps we've made. This time, we're sharing the style guide that we developed internally.
About six months ago, we started reflecting on how we present our studio and our work. The more we thought about it, the harder we worked to strip down our visual system to a clean, utilitarian toolbox that we could use for everything from prototypes to presentations.
We had a ton of fun and learned a lot in the process, and we wanted to share what we put together with the community. You can also see the system live by going to our site and typing "debug," or by going straight to this link. There's a little GUI there for seeing how we laid everything out.
You can also check out this twitter thread we shared yesterday, which has some more pieces of the process: https://twitter.com/ThisAlso/status/955892394913869830
Happy to answer any questions.
wonderful! grid system is inhouse or using any open source tools?
We built an internal SCSS framework that we use for web-based projects. The visualizer in the style guide is built as its own Javacript library so that people can see the design change real-time.
I am in awe of this style guide. Amazing work.
Love the guidelines around writing, very refreshing to see clichés like 'hustle' and 'take over the world' called out for the pap that they are.
How do I explain to people how awful the word "hustle" is?
Everyone is using it now, and those who do probably won't really get how its exclusionary.
Beyond that it's just tacky as hell. It screams tired old startup culture. My last boss put the damned word on the wall of the office!
This is awesome, I love the writing guide and grid system.
My only issue is that since the grid is entirely fluid, it is almost impossible to see how the gutter and multiplier values change as you resize your browser since it causes all the content to scroll up or down.
This isn't something you can really fix and is more just how browsers work, but I wanna see those values change!
Best and well managed interactive guide lines I ever seen. Such a great work. Thanks Brett.
The typography system is very intriguing. Great job!