--- title: Creating a design system with Storybook description: "There are plenty of living style guides on the Internet. We chose Storybook: it can summarize in bulk, save time, avoid mistakes, and decrease duplication." image: https://www.bitovi.com/hubfs/featured.jpg --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Design ](https://www.bitovi.com/blog/topic/design) | May 10, 2021 # Creating a design system with Storybook There are plenty of living style guides on the Internet. We chose Storybook: it can summarize in bulk, save time, avoid mistakes, and decrease duplication. ![The Bitovi Team](https://www.bitovi.com/hubfs/TheBitoviTeam%20(1).png) The Bitovi Team Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) ## Application + style guide = smart buy A recent project called for the creation of a single page site that would showcase a real estate agent’s expertise, sales history, professional connections, and various other impressive attributes. Pages would be generated using a fill-in-the-blank template. Eventually, two additional real estate agencies affiliated with our client would make their own versions of the page, identical in function, but with slight changes in styling and content. Future brand-specific styling variations would need to be documented somewhere, so Bitovi offered to provide a fill-in-the-blank re-usable style guide to go along with the template page. Both the template and the style guide could be cloned and restyled as many times as desired. Hence, our client bought themselves a cookie cutter vs. paying for one cookie at a time. ## ![Storybook MDX page for the Carousel component](https://www.bitovi.com/hs-fs/hubfs/Pattern%20Library%20%20%20Components%20%20%20Carousel%20-%20Team%20Members%20%E2%8B%85%20Storybook.png?width=1792&name=Pattern%20Library%20%20%20Components%20%20%20Carousel%20-%20Team%20Members%20%E2%8B%85%20Storybook.png) Choosing Storybook There are plenty of living style guide generators on the Internet (see [Alternatives to Storybook](https://www.bitovi.com/blog/creating-a-design-system-with-storybook#alternatives-to-storybook) below), but most are far too simplistic and inflexible to be viable options. The style guide solution we chose needed to fulfill the following criteria. - **Flexible** and customizable – To paraphrase Burger King, we wanted to "make it our way." The tool couldn't break if we started moving things around or did things differently. While we didn't intend to completely overhaul a tool's appearance, some customization was desirable. - **Robust** – We wanted more than a single Web page with all patterns on it. You don't need a living style guide generator or design system for that. A "pattern dump" can be accomplished far quicker with simple HTML, CSS, and JS. - **Easy to learn** – The tool had to have a low learning curve, not only for Bitovians, but for our client and eventually their internal users. - **Well-supported** with a vibrant community of users – Too many living style guides start off with lots of hype, then sit abandoned, with nothing to show for themselves except a GitHub repo that hasn't been updated in 3-6 years. (FYI: Storybook has an active Discord channel and plenty of online discussion in forums like Stack Overflow.) - **Well-documented** – When something isn't easy to learn and/or well-supported by fellow users, you at least need good documentation. - **Appealing** – The ideal tool needed to be pretty for designers, have plenty of "knobs and dials" (ability to edit code in a sandbox environment) for developers, and feel comprehensive for content authors and executives. [Storybook](https://storybook.js.org/docs/react/get-started/introduction) checked all the boxes, with a few caveats and annoyances mostly having to do with customizing the appearance. ![Storybook.js home page](https://www.bitovi.com/hs-fs/hubfs/Introduction%20to%20Storybook.png?width=1792&name=Introduction%20to%20Storybook.png) ## Annoyances - Storybook is written in React and the project used Vue, so **some plug-ins were not available** (e.g., [Playroom](https://storybook.js.org/addons/storybook-addon-playroom), [styled-component-theme](https://storybook.js.org/addons/storybook-addon-styled-component-theme), [Theme switcher](https://storybook.js.org/addons/storybook-addon-themes)). - It is **not easy to customize** Storybook's appearance. Changing the order of items in the sidebar was accomplished by editing *preview.js*, specifically `parameters = options: { storySort: order: [ ... ] }`. CSS style overrides were added to *preview-head.html* (e.g., `.sbdocs.sbdocs-h1 { font-weight: 600; }`). However, CSS changes made to *preview-head.html* would not refresh on their own (even after doing a page refresh and clearing browser cache). So any time a styling change to Storybook was made, you had to manually make Storybook rebuild (and restyle) itself by switching the theme (i.e., in *preview.js*, toggling between `parameters = docs: themes: theme.light` and `themes.dark`). - While you could include multiple `` tags in one `` tag, you **couldn't style or position story components** at all. For example, if you had a light version of a button and a dark version of a button (story 1 and story 2 inside a canvas tag), you couldn't put one on a light background aligned to the left and the other on a dark background aligned to the right. You *could* do this if you used ``. Both `` and `` would display the component(s) and show code, but `` showed HTML whereas `` showed Vue code, and only `` would link stories to the MDX documentation. - You **could not import the contents of a file** (i.e., SCSS) into ``, but had a dark background when they appeared along with a pattern preview using `` or ``. The whole point of a design system is *consistency*, so this was frustrating. ![Two inconsistent styles for a code syntax highlighter: one dark and one light](https://www.bitovi.com/hs-fs/hubfs/Pattern%20Library%20%20%20Components%20%20%20Heading%20-%20Page%20%E2%8B%85%20Storybook.png?width=1792&name=Pattern%20Library%20%20%20Components%20%20%20Heading%20-%20Page%20%E2%8B%85%20Storybook.png) ### Alternatives to Storybook Your JavaScript framework (e.g., Angular, React, Vue, Ember, Node) and CSS flavor (e.g., SCSS, LESS, vanilla CSS) will be the biggest factors in determining which living style guide options are available to you. #### No framework - **Roll your own** – write HTML, CSS, JS yourself; works with any front-end stack. Read our article, [Style Guide Driven Development: A How To Guide To Improve your Development Workflow](https://www.bitovi.com/style-guide-driven-development-workshop). - [Frontify](https://www.frontify.com/en/styleguide/) – a cloud-based subscription service with the ability to have a style guide, pattern library, as well as image, icon, and document digital asset management (DAM) system. #### Node.js - [DocumentCSS](https://documentcss.com/) - Read our 3-part tutorial, [Creating a Living Style Guide](https://www.bitovi.com/blog/planning-your-living-style-guide). - [Fabricator](https://fbrctr.github.io/) - [Knyle Style Sheets (KSS)](http://warpspire.com/kss/%20) - [StyleDocco](https://jacobrask.github.io/styledocco/) - [StyleDown](https://github.com/styledown/styledown) #### Ruby - [Hologram](https://trulia.github.io/hologram/) - [Knyle Style Sheets (KSS)](http://warpspire.com/kss/%20) - [The Living Style Guide](https://livingstyleguide.org/) – also has a Gulp version #### PHP - [Pattern Primer](https://github.com/adactio/Pattern-Primer) - [Pattern Lab](https://patternlab.io/) - [Style Guide Boilerplate](https://bjankord.github.io/Style-Guide-Boilerplate/) There are others, but they come and go, as does their user community, documentation, and support outlets. ## Bottom line: Storybook is the best design system tool to date When you’re in the early stages of creating a design system (e.g., playing around in Sketch, Figma, making mood boards), all the tools available for creating “living style guides” look about the same. You may be tempted to use something WYSIWYG like Frontify or just make a simple HTML page showing all patterns. After all, these are the easiest to “make pretty” and customize for your brand. However, once your design system ages up, grows bigger, and has seen several rounds of changes, your goals for what a design system tool should do will change also. Suddenly, you need features that can search and summarize in bulk, save time, avoid mistakes, and decrease duplication. This is where Storybook shines. Ask yourself, can my design system tool do that? Storybook can. [![Tag for user experience](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) user experience ](https://www.bitovi.com/blog/topic/user-experience)[![Tag for styleguide](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) styleguide ](https://www.bitovi.com/blog/topic/styleguide) Previous Post ![](https://www.bitovi.com/hs-fs/hubfs/MvJBDdQvnlW47qvT-croppedKw0Ow-jpg.jpg?height=117&name=MvJBDdQvnlW47qvT-croppedKw0Ow-jpg.jpg) [ When to Use the Non-Null Assertion Operator in Angular ](https://www.bitovi.com/blog/when-to-use-the-non-null-assertion-operator-in-angular)   Next Post ![](https://www.bitovi.com/hs-fs/hubfs/Banner_Images/sharon-mccutcheon-wRoyrBjSBzM-unsplash.jpg?height=117&name=sharon-mccutcheon-wRoyrBjSBzM-unsplash.jpg) [ Manage Form-Driven State with ngrx-forms (Part 1) ](https://www.bitovi.com/blog/manage-form-driven-state-with-ngrx-forms-part-1) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/creating-a-design-system-with-storybook", "@type" : "WebPage", "description" : "There are plenty of living style guides on the Internet. We chose Storybook: it can summarize in bulk, save time, avoid mistakes, and decrease duplication." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "The Bitovi Team" }, "dateModified" : "May 10, 2021, 7:43:03 PM", "datePublished" : "2021-05-10 18:51:07", "description" : "There are plenty of living style guides on the Internet. We chose Storybook: it can summarize in bulk, save time, avoid mistakes, and decrease duplication.", "headline" : "Creating a design system with Storybook", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/featured.jpg" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```