12 comments

  • Brett BergeronBrett Bergeron, over 5 years ago

    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.

    Cheers!

    6 points
    • Neel KadiaNeel Kadia, over 5 years ago

      wonderful! grid system is inhouse or using any open source tools?

      2 points
      • Brett BergeronBrett Bergeron, over 5 years ago

        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.

        1 point
  • Joel CalifaJoel Califa, over 5 years ago

    I am in awe of this style guide. Amazing work.

    5 points
  • Craig Garner, over 5 years ago

    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.

    3 points
    • Mattan IngramMattan Ingram, over 5 years ago

      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!

      1 point
  • Vernon Chris, over 5 years ago

    Awesome.

    0 points
  • Mattan IngramMattan Ingram, over 5 years ago

    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!

    0 points
  • rishi shah, over 5 years ago

    Best and well managed interactive guide lines I ever seen. Such a great work. Thanks Brett.

    0 points
  • Evan MacAlpineEvan MacAlpine, over 5 years ago

    The typography system is very intriguing. Great job!

    0 points