Ask DN: Style Guides -- How are you using them?

over 5 years ago from , Product Designer at nCino

Is anyone out there building and maintaining a UX/UI Style Guide or Design Framework for your product?

If so, what tools are you using to build these out and maintain a current version?

How are you using it to collaborate amongst designers and developers with various roles?

***To be clear, I don't mean "style tiles," or a flat file that only accounts for branding and visual design. I mean something along the lines of a product-specific Material Design Framework. Something that houses UX Guidelines and specifications around UI elements. Perhaps with or without code snippets.

Examples welcomed!


  • Adam ConradAdam Conrad, over 5 years ago (edited over 5 years ago )

    Ours is used for our product and development teams to help them create the components we use on the website. Marketing and sales also benefit because they have complete access to our branding guidelines for physical marketing materials, as well as non-devs who need to dabble in HTML for a one-off landing page or digital marketing material. I would highly recommend it to any organization that has a robust set of components for their brand.

    4 points
  • Lauren DormanLauren Dorman, over 5 years ago (edited over 5 years ago )

    I personally use Pattern Lab as a style guide of sorts... And I sometimes create my own, depending. I am a designer/dev hybrid, but it is often used as a tool to get designers and devs on our teams on the same page.

    However, there is a newer tool on the market called Frontify, but I have yet to put it to use. It claims to be easy for anyone to use. Looks pretty useful, may be worth a shot.

    3 points
  • Colm TuiteColm Tuite, over 5 years ago (edited over 5 years ago )

    Im working on a style guide at Marvel right now. The code is no different from the production app, it all lives in the same place - so when we update the code for production, the style guide will be updated automatically.

    For each component, we will include descriptions, multiple example implementations, code snippets and notes on when, where and why to use each particular variation of the component.

    We will probably add a change log with commit messages so the whole team can understand (and argue) the reasoning for each update.

    One of the goals is to empower devs to build out whole UIs without much back and forth between designers. Visual design Logic will be abstracted away from each project and managed as a system. Any issues between teams can be resolved and fixed after the fact.

    It's early days still, but we will likely release it publicly and I'll probably do a write up on the CSS architecture.

    2 points
  • jj moijj moi, over 5 years ago

    we use https://methods.18f.gov to kick off and pairs it with https://playbook.cio.gov/designstandards/getting-started

    2 points
  • Diego LafuenteDiego Lafuente, over 5 years ago

    Last time I did a Style Guide no one read it ever. Then I realized that Style guides mostly useless. When I started to use BEM, it became more obvious to me that a good writing Sass + a nice template tells you more than you think.

    1 point
  • Marcelo SomersMarcelo Somers, over 5 years ago

    I work in Consulting, and my firm had an interesting constraint of needing to make the process of building pattern libraries scalable to multiple teams on multiple projects.

    We built a tool called PatternPack which allows you to:

    • Build the interface
    • Document it in a static site generator
    • Share the code across multiple applications

    It's working very well on several of our clients. If you're interested, check out the Quick Start.

    1 point
  • David Wilder, over 5 years ago

    We're in the process of building one right now. We looked at a few different platforms like invisionapp.com or brandfolder.com but you can't remove either one's branding from the site, which was a deal breaker for us. How can you have a Brand Guide with someone else's logos all over it?!

    We're currently exploring a custom Wordpress install using the Semplice theme editor to create something similar to those platforms but branded to our specs and needs.

    1 point
  • Oliver PattisonOliver Pattison, over 5 years ago (edited over 5 years ago )

    I use them as a part of the design process, and to document work after it is done. I haven’t yet looked into self-generated ones, but those seem like they have at least as much overhead compared to simply creating HTML snippets and writing about their use. I think specification and substantive code samples are at least as important as automation and connection to the code base, so I spend more time writing and thinking about patterns than trying to automate the process.

    Here is an early-stage example of a pattern library for my own website. There is a lot more to do on this one. I will be publishing a more interactive, navigable, and maybe portable version soon. This is not just a flat file. It is generated using Liquid templates in Jekyll, outputting both markdown where applicable) and HTML. Each pattern is a .md file with YAML front matter for metadata, just like any other Jekyll page would use.

    Along similar lines, there is Pattern Primer and its cousins (I made a Jekyll fork). I really like the minimal nature of these sorts of pattern libraries. But in the future, I plan on using only tools that are built for responsive design and are context-sensitive (capable of showing layouts, switching on and off features, showing animation).

    More examples than you could ever hope to read about here: http://styleguides.io/examples.html

    1 point