Articles
9 |An index of insightful articles about design systems. If you've written an article that you want to add here, just tweet me at @jadlimcaco.
10 |├── .all-contributorsrc ├── .gitignore ├── CNAME ├── README.md ├── content ├── articles │ ├── adoption-design-system.md │ ├── advanced-tips-clarity.md │ ├── animation-design-system.md │ ├── atomic-design-system-sketch.md │ ├── build-component-library-figma.md │ ├── build-ds-ryte.md │ ├── building-sketch-library.md │ ├── cascade-consistency.md │ ├── circling-ourselves-asana.md │ ├── color-palette-framework.md │ ├── component-architecture-figma.md │ ├── component-based-design.md │ ├── component-examples.md │ ├── construct-design-system.md │ ├── creating-documenting.md │ ├── design-language-system.md │ ├── design-language-systems.md │ ├── design-system-focus-people.md │ ├── design-system-spacing.md │ ├── design-system-structure.md │ ├── design-systems-boring.md │ ├── design-systems-fail.md │ ├── design-systems-style-guides-pattern-libraries.md │ ├── design-systems-wild.md │ ├── design-tokens-dummies.md │ ├── distributing-scalable-sketch-libraries.md │ ├── drag-drop.md │ ├── ds-css-grid.md │ ├── ds-single-source-failure.md │ ├── figma-dynamic-elements.md │ ├── figma-octicons-icon-library.md │ ├── foundations-system-design.md │ ├── full-stack-ds.md │ ├── gusto-design-system.md │ ├── lead-design-system-2017.md │ ├── lesson-for-managers.md │ ├── micro-design-systems │ ├── office-hours.md │ ├── open-source-design-system.md │ ├── pattern-libraries.md │ ├── pattern-library.md │ ├── people-design-systems.md │ ├── random-thoughts-design-systems.md │ ├── scenario-design-systems.md │ ├── space-size-style.md │ ├── start-systems-thinking.md │ ├── system-colors.md │ ├── the-complete-guide-about-design-systems-engineering.md │ ├── themeable-design-system.md │ ├── tips-sketch-ui-library.md │ ├── tokens-ds.md │ ├── visual-language.md │ └── visual-system-scale.md ├── books │ ├── atomic-design.md │ ├── creating-design-system.md │ ├── design-systems-handbook.md │ ├── design-systems.md │ ├── frontend-architecture.md │ ├── laying-foundations.md │ ├── pattern-language.md │ └── thinking-systems.md ├── design-systems │ ├── alta.md │ ├── ant.md │ ├── apple.md │ ├── arui-feather.md │ ├── asphalt.md │ ├── atlassian.md │ ├── audi.md │ ├── australia.md │ ├── axa.md │ ├── backpack.md │ ├── barista.md │ ├── base.md │ ├── beeline.md │ ├── biings.md │ ├── biteable.md │ ├── blocks.md │ ├── bolt.md │ ├── bulb.md │ ├── buzzfeed.md │ ├── canvas.md │ ├── carbon.md │ ├── cedar.md │ ├── clarity.md │ ├── code-for-america.md │ ├── comet.md │ ├── designers-italy.md │ ├── digital-nsw.md │ ├── duet.md │ ├── elastic-ui.md │ ├── elementary.md │ ├── etrade.md │ ├── evergreen.md │ ├── fabric.md │ ├── feelix.md │ ├── finastra.md │ ├── fiori-fundamentals.md │ ├── fiori.md │ ├── fishtank.md │ ├── futurelearn.md │ ├── gel.md │ ├── gitlab.md │ ├── gov-uk.md │ ├── grommet.md │ ├── help-scout.md │ ├── heroki.md │ ├── ibm-design-language.md │ ├── infor.md │ ├── instructure.md │ ├── latitude.md │ ├── lexicon.md │ ├── lightning.md │ ├── liquid.md │ ├── luna.md │ ├── mailchimp.md │ ├── mapbox.md │ ├── marvel.md │ ├── material.md │ ├── mineral.md │ ├── mixpanel.md │ ├── mongodb.md │ ├── morningstar.md │ ├── mutual-omaha.md │ ├── nachos.md │ ├── nutanix.md │ ├── opattern.md │ ├── orbit.md │ ├── patternfly.md │ ├── pega.md │ ├── photon.md │ ├── pluralsight.md │ ├── polaris.md │ ├── predix.md │ ├── priceline.md │ ├── primer.md │ ├── protocol.md │ ├── pulse.md │ ├── qbds.md │ ├── quantum.md │ ├── ratio.md │ ├── react95.md │ ├── rimble.md │ ├── rivet.md │ ├── rizzo.md │ ├── seeds.md │ ├── seek.md │ ├── sendgrid.md │ ├── servicenow.md │ ├── servicetitan.md │ ├── skyline.md │ ├── spectrum.md │ ├── stacks.md │ ├── swarm.md │ ├── thumbprint.md │ ├── uniform.md │ ├── us-web-design.md │ ├── vanilla.md │ ├── vercel.md │ ├── vtex.md │ ├── wanda-design-system.md │ ├── westpac-gel.md │ ├── wonderbly.md │ ├── workday.md │ ├── yelp.md │ ├── yoga.md │ └── zendesk.md ├── talks │ ├── designers-git-it.md │ ├── dsconf-2018.md │ ├── facebook-design-system.md │ ├── polymer-design-systems.md │ ├── scaling-design.md │ ├── systemizing-design.md │ ├── systems-chaos.md │ ├── thinking-symbols.md │ ├── yelp-design-system.md │ └── zero-to-one.md └── tools │ ├── abstract.md │ ├── alva.md │ ├── astrum.md │ ├── bootstrap.md │ ├── catalog.md │ ├── chromatic.md │ ├── compositor-lab.md │ ├── docsify.md │ ├── ether.md │ ├── figma.md │ ├── fractal.md │ ├── framer.md │ ├── gitbook.md │ ├── html-sketchapp.md │ ├── invision-dsm.md │ ├── jan-losert-nested-symbols.md │ ├── lingo.md │ ├── lucid.md │ ├── modulator.md │ ├── pattern-lab.md │ ├── patternplate.md │ ├── plant.md │ ├── react-sketch.md │ ├── react-symbols.md │ ├── rename-it.md │ ├── sketch-app.md │ ├── sketch-icons.md │ ├── storybook.md │ ├── straple.md │ ├── symbol-ds.md │ ├── symbol-organizer.md │ ├── symbols-manager.md │ ├── text-styles-manager.md │ ├── toolabs.md │ ├── ux-power-tools.md │ ├── vue.md │ ├── zeplin.md │ ├── zeroheight.md │ └── zurb-foundation.md ├── gridsome.config.js ├── package-lock.json ├── package.json ├── src ├── admin │ ├── config.yml │ ├── index.html │ └── index.js ├── assets │ ├── css │ │ ├── reset.css │ │ └── style.css │ ├── images │ │ ├── dsr-logo-blocks.svg │ │ ├── dsr-logo-small.svg │ │ ├── dsr-logo.svg │ │ ├── favicon.ico │ │ ├── favicon.png │ │ ├── icon-add.svg │ │ ├── icon-books.svg │ │ ├── icon-talks.svg │ │ ├── icon-tools.svg │ │ ├── illustration-articles.svg │ │ ├── illustration-books.svg │ │ ├── illustration-ds.svg │ │ ├── illustration-talks.svg │ │ ├── illustration-tools.svg │ │ ├── social-dribbble.svg │ │ ├── social-github.svg │ │ └── social-twitter.svg │ └── static │ │ └── social.png ├── index.html ├── layouts │ └── Default.vue ├── main.js └── pages │ ├── About.vue │ ├── Articles.vue │ ├── Books.vue │ ├── DesignSystems.vue │ ├── DesignSystemsRecent.vue │ ├── Index.vue │ ├── Talks.vue │ └── Tools.vue └── static ├── social-media.png └── uploads ├── abstract.jpg ├── adobe-spectrum.jpg ├── alta.jpg ├── alva.jpg ├── ant-design.jpg ├── apple.jpg ├── arui-feather.jpg ├── asphalt.jpg ├── astrum.jpg ├── atlassian.jpg ├── atomic-design.jpg ├── atomize-ds.jpg ├── audi.jpg ├── australia-gov.jpg ├── autodesk.jpg ├── axa.jpg ├── backpack.jpg ├── barista.jpg ├── base.jpg ├── beeline.jpg ├── biings.jpg ├── biteable.jpg ├── blocks.jpg ├── bolt.jpg ├── bootstrap.jpg ├── bulb.jpg ├── buzzfeed.jpg ├── canvas.jpg ├── carbon.jpg ├── catalog.jpg ├── chromatic.jpg ├── clarity.jpg ├── code-for-america.jpg ├── comet.jpg ├── compositor.jpg ├── creating-design-system.jpg ├── design-systems-handbook.jpg ├── design-systems.jpg ├── designers-git.jpg ├── designers-italy.jpg ├── docsify.jpg ├── ds-facebook.jpg ├── ds-yelp.jpg ├── dsconf-2018.jpg ├── dsm.jpg ├── duet.jpg ├── elastic-ui.jpg ├── elementary.jpg ├── ether.jpg ├── etrade.jpg ├── evergreen.jpg ├── fabric.jpg ├── feelix.jpg ├── figma.jpg ├── finastra.jpg ├── fiori-fundamentals.jpg ├── fiori.jpg ├── fishtank.jpg ├── foundation.jpg ├── fractal.jpg ├── framer.jpg ├── frontend-architecture.jpg ├── futurelearn.jpg ├── gel.jpg ├── gitbook.jpg ├── gitlab-design-system.jpg ├── gitlab.jpg ├── gov-uk.jpg ├── grommet.jpg ├── help-scout.jpg ├── heroki.jpg ├── html-sketchapp.jpg ├── ibm-design-language.jpg ├── infor.jpg ├── instructure.jpg ├── jan-losert.jpg ├── latitude.jpg ├── laying-foundations.jpg ├── lexicon.jpg ├── lightning.jpg ├── lingo.jpg ├── liquid.jpg ├── lucid.jpg ├── luna.jpg ├── mailchimp.jpg ├── mapbox.jpg ├── marvel.jpg ├── material.jpg ├── mineral.jpg ├── mixpanel.jpg ├── modulator.jpg ├── mongodb.jpg ├── morningstar.jpg ├── mutual-omaha.jpg ├── nachos.jpg ├── nsw.jpg ├── nutanix.jpg ├── opattern.jpg ├── orbit-ds.jpg ├── orbit.jpg ├── pattern-lab.jpg ├── pattern-language.jpg ├── patternfly.jpg ├── patternplate.jpg ├── pega.jpg ├── photon.jpg ├── plant.jpg ├── pluralsight.jpg ├── polaris.jpg ├── polymer-design-systems.jpg ├── predix.jpg ├── priceline.jpg ├── primer.jpg ├── protocol.jpg ├── pulse.jpg ├── qbds.jpg ├── quantum.jpg ├── ratio.jpg ├── react-sketch.jpg ├── react-symbols.jpg ├── react95.jpg ├── rei-cedar.jpg ├── rename-it.jpg ├── rimble.jpg ├── rivet.jpg ├── rizzo.jpg ├── scaling-design.jpg ├── seeds.jpg ├── seek.jpg ├── sendgrid.jpg ├── servicenow.jpg ├── servicetitan.jpg ├── sketch-icons.jpg ├── sketch.jpg ├── skyline.jpg ├── stacks.jpg ├── storybook.jpg ├── straple.jpg ├── swarm.jpg ├── symbol-ds.jpg ├── symbol-organizer.jpg ├── symbols-manager.jpg ├── systemizing-design.jpg ├── systems-chaos.jpg ├── test3.jpg ├── text-styles-manager.jpg ├── thinking-symbols.jpg ├── thinking-systems.jpg ├── thumbprint.jpg ├── tool-labs.jpg ├── uniform.jpg ├── us-web-design.jpg ├── ux-power-tools.jpg ├── vanilla.jpg ├── vercel.jpg ├── vtex.jpg ├── vue.jpg ├── wanda.jpg ├── westpac-gel.jpg ├── wonderbly.jpg ├── workday.jpg ├── yelp.jpg ├── yoga.jpg ├── zendesk.jpg ├── zeplin.jpg ├── zero-height.jpg └── zero-to-one.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .cache 3 | .DS_Store 4 | src/.temp 5 | node_modules 6 | .env 7 | .env.* 8 | .vscode 9 | dist/ 10 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | designsystemsrepo.com -------------------------------------------------------------------------------- /content/articles/adoption-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-05 3 | title: How to Gain Widespread Adoption of Your Design System 4 | author: Julie Nergararian 5 | link: https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries 6 | description: Redesigns only work when co-owned by designers and developers. We cultivated this co-ownership, in large part, by building good tools and documentation. 7 | tags: 8 | - documentation 9 | - contribution 10 | - process 11 | 12 | # ================================ 13 | # ARTICLE TAGS AVAILABLE 14 | # ================================ 15 | # - animation 16 | # - code 17 | # - contribution 18 | # - design-tokens 19 | # - figma 20 | # - leadership 21 | # - patterns 22 | # - process 23 | # - sketch 24 | # ================================ 25 | --- -------------------------------------------------------------------------------- /content/articles/advanced-tips-clarity.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-09-11 3 | title: Advanced Tips with the Clarity UI Library 4 | author: Rahul Chakraborty 5 | link: https://medium.com/claritydesignsystem/advanced-tips-with-the-clarity-ui-template-da7e594581ef 6 | description: We have incorporated several different advanced override methods you can use to speed the process of building prototypes. These advanced tips should dramatically increase the speed of prototyping. 7 | tags: 8 | - sketch 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/animation-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2016-12-16 3 | title: Animation in Design Systems 4 | author: Sarah Drasner 5 | link: https://24ways.org/2016/animation-in-design-systems/ 6 | description: Our modern workflow has matured over time to include design systems that help us stay organized and consistent. But why are we still treating animation like a second-class citizen? Probably because we don’t really consider its power. 7 | tags: 8 | - animation 9 | - patterns 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/atomic-design-system-sketch.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-06 3 | title: Build an Atomic Design System with Sketch Libraries 4 | author: Pratik Shah 5 | link: https://medium.com/sketch-app-sources/atomic-design-system-with-sketch-libraries-e06e3b1f8302 6 | description: How we built an Atomic design system with Sketch libraries at Capital Float. Also, some lessons we learned while building an atomic design system. 7 | tags: 8 | - sketch 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/build-component-library-figma.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-05 3 | title: How to Build a Component Library / Style Guide with Figma 4 | author: Milan Tailor 5 | link: https://blog.prototypr.io/how-to-build-a-component-library-style-guide-with-figma-9064b6c7fe4 6 | description: This is a set of guidelines, based on our implementation of a style guide / component library. This 05 not translate directly for you, and is only one possible solution. 7 | tags: 8 | - figma 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/build-ds-ryte.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-05-23 3 | title: Building a Design System for 500,000+ Users at Ryte 4 | author: Raphael Fleckenstein 5 | link: https://medium.com/ryte/building-a-design-system-for-500-000-users-at-ryte-1a5ca8bda992 6 | description: In this article we want to share the lessons we learned building our design system and how we dramatically increased the velocity of our design process with it by 8x. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/building-sketch-library.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Building Our Sketch Library 4 | author: Michael Fouquet 5 | link: https://medium.com/in-the-hudl/building-our-sketch-library-cd8c925e566 6 | description: Here are some of the decisions we arrived at and lessons we learned as we put our design system into a Library. Since launch, we’ve received a lot of feedback on how much time has been saved by using the library. 7 | tags: 8 | - sketch 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/cascade-consistency.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-05 3 | title: CSS in the Age of React - How We Traded the Cascade for Consistency 4 | author: Theresa Ma 5 | link: https://engineeringblog.yelp.com/2018/03/css-in-the-age-of-react.html 6 | description: With hundreds of engineers, developers and designers, ensuring visual consistency across Yelp is a challenging task. We’ve been migrating our web components from Yelp Cheetah to React to increase designer and developer productivity while ensuring visual consistency. 7 | tags: 8 | - code 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/circling-ourselves-asana.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2015-10-01 3 | title: Circling Ourselves - The Story Behind Asana’s Rebrand 4 | author: Micah Daigle 5 | link: https://medium.com/building-asana/circling-ourselves-the-story-behind-asana-s-rebrand-e8247516705a 6 | description: On the surface, this is the story of how Asana went from a logo with three circles to a logo… with three circles. It's also a story of how they established a new brand design system at Asana. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/color-palette-framework.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-19 3 | title: Building a Color Palette Framework 4 | author: Rahul Chakraborty 5 | link: https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries 6 | description: In this article, we will discuss techniques to define a set of rules to generate color variations, that can scale to a larger spectrum of usage and also could be applied across any brand palette. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/component-architecture-figma.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-14 3 | title: Component Architecture in Figma 4 | author: Thomas Lowry 5 | link: https://blog.figma.com/component-architecture-in-figma-f16ae9cc4481 6 | description: One of the best things about Figma’s component system is that you can access the layer stack of every instance of a component. This helps keep components contained and reduces the number of components required. 7 | tags: 8 | - figma 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/component-based-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-26 3 | title: Component-Based Design 4 | author: Alan B Smith 5 | link: https://medium.com/@_alanbsmith/component-based-design-168811e0c4ab 6 | description: We have an incredible design team. One of the best things we’ve done in collaborating with them was shifting from page-based to component-based design. I’d like to share a bit about how we came to that decision. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/component-examples.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-24 3 | title: Component Examples 4 | author: Nathan Curtis 5 | link: https://medium.com/eightshapes-llc/component-examples-9c4b3bb3b308 6 | description: Visual examples are the most essential element of effective component doc. How do you best render, arrange, label, and order each one to with effective content (but not embedded guidelines!) to enable quick use and experimentation? 7 | tags: 8 | - process 9 | - patterns 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/construct-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-02 3 | title: Your Sketch Library is Not a Design System 4 | author: Brad Frost 5 | link: http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/ 6 | description: You can’t build working software out of screenshots and Sketch files. At the heart of any great design system is a reusable set of UI components that product teams can reach for to build actual software. 7 | tags: 8 | - sketch 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/creating-documenting.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-01-25 3 | title: Creating and Documenting a Product Design System 4 | author: Andrew Couldwell 5 | link: https://medium.com/owl-studios/plasma-design-system-4d63fb6c1afc 6 | description: An article about how we created a design system at WeWork. I’ll share insight into our process, product design, the tools we used to create and implement the system, and also how we document and share the system with our team. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-language-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-10-15 3 | title: Design Language System 4 | author: Patrick N. Lewis 5 | link: https://medium.com/patricknlewis/design-language-system-23223dd86b54 6 | description: We were all trying to do our best but it had become unnecessarily hard to create great products. So Button’s design team set out to solve these issues by creating a design language system. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-language-systems.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-09 3 | title: Design Language Systems - Why Your Team Needs One and How to Build it 4 | author: Hamza Erbay 5 | link: https://medium.freecodecamp.org/design-language-system-why-your-team-needs-one-and-how-to-built-it-d996ba8c3889 6 | description: As projects and teams grow, management becomes increasingly difficult. Let’s examine how design language systems make life easier in such situations. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-system-focus-people.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-09 3 | title: How Building a Design System Empowers Your Team to Focus on People — Not Pixels 4 | author: Mariah Muscato 5 | link: https://medium.com/hubspot-product/people-over-pixels-b962c359a14d 6 | description: We learned that the best way to create consistent, functional, and delightful product experiences is to make the lives of those who build those experiences much easier. 7 | tags: 8 | - process 9 | - contribution 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/design-system-spacing.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-08 3 | title: Generating Design System Spacing 4 | author: Ether 5 | link: https://medium.com/@ethersystem/generating-design-system-spacing-aa69714160bc 6 | description: Your spacing system should be easily defined and applied to designs. Understood by designers and developers alike. And be able to change without breaking. 7 | tags: 8 | - design-tokens 9 | - process 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/design-system-structure.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-07-17 3 | title: Design System Structure 4 | author: Daniel Eden 5 | link: https://daneden.me/2017/07/17/design-system-structure/ 6 | description: You can think of our system so far as a tree, with its most primitive elements at the bottom, comprising our atomic elements. These atoms are composed into components, and further composed to create patterns, which are common solutions to common problems. 7 | tags: 8 | - patterns 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-systems-boring.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-04-03 3 | title: The Most Exciting Design Systems are Boring 4 | author: Josh Clark 5 | link: https://bigmedium.com/ideas/boring-design-systems.html 6 | description: Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-systems-fail.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-14 3 | title: Why Design Systems Fail 4 | author: Una Kravets 5 | link: https://24ways.org/2017/why-design-systems-fail/ 6 | description: Design systems are standalone products, and have proven to be very effective means of design-driven development. However, in order for a design system to succeed, everyone needs to get on board. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-systems-style-guides-pattern-libraries.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-07-17 3 | title: Design Systems, Style Guides, and Pattern Libraries - Oh My! 4 | author: Ste Grainer 5 | link: https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries 6 | description: Many people, though, use the terms interchangeably when they are, in fact, different concepts. Let’s take a few minutes to explore their differences. 7 | tags: 8 | - patterns 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-systems-wild.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: Design Systems — In the Wild 4 | author: Sonja Sarah Porter 5 | link: https://blogg.bekk.no/design-systems-in-the-wild-7b7ce817c6d4 6 | description: The most developed design systems are the ideal of what we want our products to be — holistic, systematic and well-documented wonders. But the truth is, many of these well-intentioned design systems fail in the end. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/design-tokens-dummies.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-17 3 | title: Design Tokens for Dummies 4 | author: Louis Chenais 5 | link: https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71 6 | description: Design tokens allow product teams to better collaborate and ensure brand consistency across any platform. Design tokens are central and tiny pieces of UI information such as colors, fonts, spacing, etc. 7 | tags: 8 | - design-tokens 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/distributing-scalable-sketch-libraries.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-11 3 | title: Distributing Scalable Sketch Libraries 4 | author: Julie Nergararian 5 | link: https://uxplanet.org/distributing-scalable-sketch-libraries-ed642f9d3d0a 6 | description: How can we build complex symbols, distribute them and keep changes in sync with all of our users? If you have insight into better managing and distributing design systems, let us know. 7 | tags: 8 | - sketch 9 | - process 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/drag-drop.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-12 3 | title: Drag and Drop for Design Systems 4 | author: Grace Noh 5 | link: https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d 6 | description: Drag and drop interactions are often overlooked or go unnoticed. Sometimes they happen so naturally that you don’t even realize it. But if you look closely, there are many different UX standards around drag and drop. 7 | tags: 8 | - patterns 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- 24 | -------------------------------------------------------------------------------- /content/articles/ds-css-grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-12 3 | title: Design Systems and CSS Grid 4 | author: Stuart Robson 5 | link: https://24ways.org/2017/design-systems-and-css-grid/ 6 | description: If you find yourself tasked with creating some new components for your design system try out CSS Grid. It really feels like the possibilities are endless in terms of layout for the web. 7 | tags: 8 | - code 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/ds-single-source-failure.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-13 3 | title: Why Design Systems are a Single Point of Failure 4 | author: Dominic Nguyen 5 | link: https://blog.hichroma.com/why-design-systems-are-a-single-point-of-failure-ec9d30c107c2?token=WLU_YEWyJY6PUVxc 6 | description: As designers and frontend developers, we can be so caught up in evangelizing UI consistency that we become blind to the single point of failure in front of us. This article talks about why design systems collapse and how maintenance stops that from happening. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/figma-dynamic-elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-17 3 | title: Design System for Figma - The Power of Dynamic Elements 4 | author: João Araújo 5 | link: https://medium.com/@juauz/design-system-for-figma-the-power-of-dynamic-elements-4ca4dc3e4524 6 | description: The power of tools such as Figma Components reaches its peak of performance if as a designer, one can dominate its flexibility within a process one feels confident in following. 7 | tags: 8 | - figma 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/figma-octicons-icon-library.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-12 3 | title: Using Figma Designs to Build the Octicons Icon library 4 | author: Jon Rohan 5 | link: https://blog.github.com/2018-04-12/driving-changes-from-designs/ 6 | description: Recently our friends at Figma announced their new Figma platform, and we’ve been really excited about its potential. We’ve immediately put the platform to use with Octicons, our SVG icon library. 7 | tags: 8 | - figma 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- 24 | -------------------------------------------------------------------------------- /content/articles/foundations-system-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-12 3 | title: Laying the Foundations for System Design 4 | author: Andrew Couldwell 5 | link: https://medium.com/owl-studios/laying-the-foundations-7e503ef2120f 6 | description: Building on-brand, quality and consistent digital products at scale is hard. You need a source of truth. You need to lay strong foundations — then use them to sustainably build (or repair existing) products and design systems. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/full-stack-ds.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-04-03 3 | title: The Full Stack Design Sytem 4 | author: Emmet Connolly 5 | link: https://blog.intercom.com/the-full-stack-design-system/ 6 | description: UI methodologies like Atomic Design bring logic and structure to individual screens. Now it’s time to extend that thinking to every aspect of your product. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/gusto-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: Design Systems at Gusto 4 | author: Robin Rendle 5 | link: https://medium.com/gusto-design/design-systems-at-gusto-a710543b2c93 6 | description: At Gusto we’ve been building our design system for the past two years and thinking about how to scale our product and design process across multiple complex projects and teams. 7 | tags: 8 | - process 9 | - contribution 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/lead-design-system-2017.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-02 3 | title: What I Learned About Leading a Design System in 2017 4 | author: Jeff Crossman 5 | link: https://publication.design.systems/what-i-learned-about-leading-a-design-system-in-2017-46b85e9d7eab 6 | description: I wanted to take the time to document what I have learned about leading a design system and design systems in general over the past year so that I can be intentional about my efforts to improve in 2018. 7 | tags: 8 | - leadership 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/lesson-for-managers.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-26 3 | title: Building a Successful Design System — 3 Lessons for Design Managers 4 | author: Ryan Donahue 5 | link: https://medium.com/zendesk-creative-blog/building-a-successful-design-system-3-lessons-for-design-managers-926a87cbbe74 6 | description: There’s been a lot of great writing about the craft of design systems. Much less has been written about what it’s like to support and invest in a design system from the perspective of design management. 7 | tags: 8 | - leadership 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/micro-design-systems: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-07 3 | title: Micro Design Systems — breaking the Monolith 4 | author: Paul van Oijen 5 | link: https://uxdesign.cc/micro-design-systems-breaking-the-monolith-c2b4abcd7158 6 | description: With many of our design systems still in their infancy, now is the time for us to mature our work. By modeling, categorizing and extracting the different services in our systems, we force ourselves to answer questions about the nature of different elements, set quality standards for their foundation, and prepare them for the future. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- 24 | -------------------------------------------------------------------------------- /content/articles/office-hours.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-22 3 | title: Design Systems Office Hours Playbook 4 | author: Daniel Eden 5 | link: https://github.com/daneden/design-systems-office-hours-playbook 6 | description: As our company and system scales, it’s important that Design System team members have a common approach to attending and operating office hours. Office hours are our most direct channel of input from the product teams we serve, making it an important part of our work. 7 | tags: 8 | - leadership 9 | - process 10 | - contribution 11 | 12 | # ================================ 13 | # ARTICLE TAGS AVAILABLE 14 | # ================================ 15 | # - animation 16 | # - code 17 | # - contribution 18 | # - design-tokens 19 | # - figma 20 | # - leadership 21 | # - patterns 22 | # - process 23 | # - sketch 24 | # ================================ 25 | --- -------------------------------------------------------------------------------- /content/articles/open-source-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-11-29 3 | title: Setting Up a Healthy, Thriving Open-Source Community Around a Design System 4 | author: Dominik Wilkowski 5 | link: https://medium.com/@wilkowskidom/setting-up-a-healthy-thriving-open-source-community-around-a-design-system-d96e86fb6da4 6 | description: The success of a design system built for collaboration and in the open source space asks people to donate their time and effort to the project. We must ensure that effort and time is not wasted because of lacking communication. 7 | tags: 8 | - contribution 9 | - process 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/pattern-libraries.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-02 3 | title: Pattern Libraries 4 | author: Jack Davies 5 | link: https://medium.com/@whatjackhasmade/pattern-libraries-abcc45c6144c 6 | description: Style Guides, Pattern Libraries, Design Systems, what are they? Where do the lines blur? And how can both designers and developers of interfaces benefit from them? 7 | tags: 8 | - patterns 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/pattern-library.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-05-31 3 | title: Pattern Library 4 | author: Natasha Hockey 5 | link: https://blog.prototypr.io/pattern-libraries-5d627c5c65b4 6 | description: Whilst the initial period of designing and developing a pattern library take a while, the benefits that follow will save time and improve the code base. 7 | tags: 8 | - patterns 9 | - process 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/people-design-systems.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-28 3 | title: The People Part of Design Systems 4 | author: Magera Moon 5 | link: https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4 6 | description: We realized that ultimately for our systems to succeed long-term, they needed to be thought of as everyone’s responsibility. It became clear our role as a team should also be to help everyone contribute to our evolving system with the big picture in mind. 7 | tags: 8 | - process 9 | - contribution 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/random-thoughts-design-systems.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-18 3 | title: Random Thoughts on Design Systems from Recent Experience 4 | author: Ted Goas 5 | link: https://medium.com/@tedgoas/random-thoughts-on-design-systems-from-recent-experience-d96ae4203aa9 6 | description: For the last 12 months, the product design team at Stack Overflow has been working on a design system. Here are some random thoughts about design systems. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/scenario-design-systems.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-02 3 | title: Scenario-Driven Design Systems 4 | author: Luke Wroblewski 5 | link: https://www.lukew.com/ff/entry.asp?1989 6 | description: In her presentation at An Event Apart in Seattle, Yesenia Perez-Cruz shared lessons learned building design systems for multiple brands/Web sites and how specific user-scenarios are key to making flexible solutions. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/space-size-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-30 3 | title: Space, Size & Style 4 | author: Nayan Suthar 5 | link: https://medium.com/@nynsuthar/space-size-style-aba80f820716 6 | description: Designing components, maintaining consistency and building a harmonious system is a challenge. This is where the understanding of basic elements – space, size and style can help us. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/start-systems-thinking.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-07 3 | title: Scaling Design - The Start of System Thinking 4 | author: Taurie Davis 5 | link: https://about.gitlab.com/2017/12/12/gitlab-design-library/ 6 | description: We took the initial step towards establishing our own system by creating a pattern library of reusable components that can be shared and reused across the application. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/system-colors.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-27 3 | title: Designing Systematic Colors 4 | author: Jeeyoung Jung 5 | link: https://uxplanet.org/designing-systematic-colors-b5d2605b15c 6 | description: Color is a core building block of any design system. This article focuses on how to make themable, flexible, WCAG 2.0 compliant color ramps for a design system. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/the-complete-guide-about-design-systems-engineering.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-08-23 3 | title: The Complete Guide About Design Systems 4 | author: Gustavo Ribeiro 5 | link: https://medium.com/ci-t/the-complete-guide-about-design-systems-engineering-cd332cf520f2 6 | description: My main learnings as a developer in design systems projects from engineering, design, and management aspects and build an entire design system from scratch. 7 | tags: 8 | - leadership 9 | - code 10 | - process 11 | - contribution 12 | 13 | # ================================ 14 | # ARTICLE TAGS AVAILABLE 15 | # ================================ 16 | # - animation 17 | # - code 18 | # - contribution 19 | # - design-tokens 20 | # - figma 21 | # - leadership 22 | # - patterns 23 | # - process 24 | # - sketch 25 | # ================================ 26 | --- 27 | -------------------------------------------------------------------------------- /content/articles/themeable-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-02 3 | title: Creating Themeable Design Systems 4 | author: Brad Frost 5 | link: http://bradfrost.com/blog/post/creating-themeable-design-systems/ 6 | description: Is it possible to create a single design system that powers wildly different-looking brands and experiences? The answer is yes! But why would you want to? 7 | tags: 8 | - code 9 | - design-tokens 10 | 11 | # ================================ 12 | # ARTICLE TAGS AVAILABLE 13 | # ================================ 14 | # - animation 15 | # - code 16 | # - contribution 17 | # - design-tokens 18 | # - figma 19 | # - leadership 20 | # - patterns 21 | # - process 22 | # - sketch 23 | # ================================ 24 | --- -------------------------------------------------------------------------------- /content/articles/tips-sketch-ui-library.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-18 3 | title: (More) Tips for Building Your Sketch UI Library 4 | author: Buzz Usborne 5 | link: https://medium.com/help-scout/more-tips-for-building-your-sketch-ui-library-975a44416f59 6 | description: For those of you deep in the trenches, I wanted to share a couple of things that have made my life immeasurably easier when creating and maintaining our shared components with Sketch. 7 | tags: 8 | - sketch 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/tokens-ds.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2016-06-24 3 | title: Tokens in Design Systems 4 | author: Nathan Curtis 5 | link: https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421 6 | description: Nathan Curtis give us 10 practical and insightful tips regarding design tokens to architect and implement design decisions for your team. 7 | tags: 8 | - design-tokens 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/visual-language.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-09-07 3 | title: Building a Visual Language 4 | author: Karri Saarinen 5 | link: https://airbnb.design/building-a-visual-language/ 6 | description: A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/articles/visual-system-scale.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-06-07 3 | title: Designing a Visual System at Scale 4 | author: Cathy Lo 5 | link: https://medium.com/elegant-tools/designing-a-visual-system-at-scale-d275259e17d 6 | description: Not every experience across every Facebook business and consumer product strikes a perfect balance between distinctiveness and unity with the overall Facebook experience. But the visual system has helped us make a big leap toward that goal. 7 | tags: 8 | - process 9 | 10 | # ================================ 11 | # ARTICLE TAGS AVAILABLE 12 | # ================================ 13 | # - animation 14 | # - code 15 | # - contribution 16 | # - design-tokens 17 | # - figma 18 | # - leadership 19 | # - patterns 20 | # - process 21 | # - sketch 22 | # ================================ 23 | --- -------------------------------------------------------------------------------- /content/books/atomic-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Atomic Design 4 | author: Brad Frost 5 | link: http://atomicdesign.bradfrost.com/ 6 | image: /uploads/atomic-design.jpg 7 | description: Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. 8 | --- 9 | -------------------------------------------------------------------------------- /content/books/creating-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Creating a Design System - The 100-Point Process Checklist 4 | author: Marcin Treder 5 | link: https://www.uxpin.com/studio/ebooks/create-design-system-guide-checklist/ 6 | image: /uploads/creating-design-system.jpg 7 | description: Know how to build a design system step-by-step. Create a UI inventory, get buy-in, and more. 8 | --- 9 | -------------------------------------------------------------------------------- /content/books/design-systems-handbook.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Design Systems Handbook 4 | author: InVision 5 | link: https://www.designbetter.co/design-systems-handbook 6 | image: /uploads/design-systems-handbook.jpg 7 | description: Learn how you can create your design system and help your team improve product quality while reducing design debt. 8 | --- 9 | -------------------------------------------------------------------------------- /content/books/design-systems.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Design Systems 4 | author: Alla Kholmatova 5 | link: http://designsystemsbook.com/ 6 | image: /uploads/design-systems.jpg 7 | description: What are the key qualities of a well-functioning, enduring design system? Throughout the book, Alla will share an approach that will help you every day with your work. 8 | --- 9 | -------------------------------------------------------------------------------- /content/books/frontend-architecture.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Frontend Architecture for Design Systems 4 | author: Micah Godbolt 5 | link: http://shop.oreilly.com/product/0636920040156.do 6 | image: /uploads/frontend-architecture.jpg 7 | description: Using real-world examples, case studies, and practical tips and tricks throughout, author Micah Godbolt introduces you to the four pillars of frontend architecture. 8 | --- 9 | -------------------------------------------------------------------------------- /content/books/laying-foundations.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-10-28 3 | title: Laying the Foundations 4 | author: Andrew Couldwell 5 | link: https://designsystemfoundations.com/ 6 | image: /uploads/laying-foundations.jpg 7 | description: This is real talk about creating design systems and digital brand guidelines. No jargon, no glossing over the hard realities, and no company hat. Just good advice, experience, and practical tips. 8 | --- 9 | -------------------------------------------------------------------------------- /content/books/pattern-language.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-23 3 | title: A Pattern Language 4 | author: Christopher Alexander 5 | link: https://www.amazon.com/dp/0195019199 6 | image: /uploads/pattern-language.jpg 7 | description: The book creates a new language, what the authors call a pattern language derived from timeless entities called patterns. Patterns describe a problem and then offer a solution. 8 | --- 9 | -------------------------------------------------------------------------------- /content/books/thinking-systems.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-03 3 | title: Thinking in Systems 4 | author: Donella H. Meadows 5 | link: https://www.amazon.com/dp/B005VSRFEA 6 | image: /uploads/thinking-systems.jpg 7 | description: Thinking in Systems, is a concise and crucial book offering insight for problem solving on scales ranging from the personal to the global. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/alta.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-07 3 | title: Alta 4 | company: Oracle 5 | link: https://www.oracle.com/webfolder/ux/middleware/alta/index.html 6 | image: /uploads/alta.jpg 7 | description: The Oracle Alta UI system was used to develop the most recent Oracle Cloud products, the latest versions of Oracle Fusion Applications, a number of innovative mobile applications, with many more to come. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/ant.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-31 3 | title: Ant Design 4 | company: Ant Financial 5 | link: https://ant.design/ 6 | image: /uploads/ant-design.jpg 7 | description: A design system with values of Nature and Determinacy for better user experience of enterprise applications. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/apple.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Human Interface Guidelines 4 | company: Apple 5 | link: https://developer.apple.com/ios/human-interface-guidelines/overview/themes/ 6 | image: /uploads/apple.jpg 7 | description: Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/arui-feather.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: Arui-Feather 4 | company: Alfa-Bank 5 | link: http://design.alfabank.ru/ 6 | image: /uploads/arui-feather.jpg 7 | description: We are sure that designers and front-end developers should work in tandem, using all the advantages of a design system for testing hypotheses and developing products. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/asphalt.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-08 3 | title: Asphalt 4 | company: GO-JEK 5 | link: https://asphalt.gojek.io/ 6 | image: /uploads/asphalt.jpg 7 | description: Asphalt is GO-JEK's very own design language system. This is a collection of guidelines and components which can be used to create amazing user experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/atlassian.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Atlassian Design Language 4 | company: Atlassian 5 | link: https://atlassian.design/ 6 | image: /uploads/atlassian.jpg 7 | description: Use Atlassian's end-to-end design language to create straightforward and beautiful experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/audi.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-02 3 | title: Audi UI 4 | company: Audi 5 | link: http://www.audi.com/ci/en/guides/user-interface/introduction.html 6 | image: /uploads/audi.jpg 7 | description: The aim is to create varied solutions and a well-balanced, system-wide user experience – from the app to the vehicle. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/australia.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-23 3 | title: Australian Government Design System 4 | company: Australian Government 5 | link: https://designsystem.gov.au/ 6 | image: /uploads/australia-gov.jpg 7 | description: The Australian Government Design System provides a framework and a set of tools to help designers and developers build government products and services more easily. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/axa.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-06-08 3 | title: AXA Digital Guidelines 4 | company: AXA 5 | link: https://design.axa.com/ 6 | image: /uploads/axa.jpg 7 | description: We help product teams at AXA build meaningful interactions and share best practices. Principles, tools, templates, components, advice – the one stop shop to create state of the art digital assets. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/backpack.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Backpack 4 | company: Skyscanner 5 | link: https://backpack.github.io/ 6 | image: /uploads/backpack.jpg 7 | description: Backpack is the foundation for all Skyscanner products. It builds on Atomic Design principles to help visualise how these products are assembled. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/barista.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Barista 4 | company: Dynatrace 5 | link: https://barista.dynatrace.com/ 6 | image: /uploads/barista.jpg 7 | description: The Barista Design System is a collection of reusable components, patterns and styles living in code. All parts follow the Dynatrace design principles. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/base.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Base Web 4 | company: Uber 5 | link: https://baseweb.design/ 6 | image: /uploads/base.jpg 7 | description: Base Web is a foundation, a basis for initiating, evolving, and unifying web products. The system is designed to be fully responsive and device agnostic providing designers and developers with a unique catalog of components. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/beeline.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-08 3 | title: Design System “2.0” 4 | company: Beeline 5 | link: http://beelinedesignsystem.com/ 6 | image: /uploads/beeline.jpg 7 | description: The Beeline Design System is a library of design standards and patterns that can be used to design and build any number of Beeline products. A single source of truth for all Beeline product design needs. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/biings.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-10-09 3 | title: Biings Design System 4 | company: Biings 5 | link: https://biings.design/ 6 | image: /uploads/biings.jpg 7 | description: The single source of truth for building Biings products. BDS is a series of guidelines used for creating unified experience and UI. Avoid design missteps by combining styles and components together. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/biteable.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-20 3 | title: X (Biteable Design System) 4 | company: Biteable 5 | link: https://x.biteable.com/ 6 | image: /uploads/biteable.jpg 7 | description: X is the Biteable Design System — a considered collection of resources to help you create Biteable-flavored design and content. Come here to understand our brand and creative vision, align with our philosophy, and access tooling. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/blocks.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-08 3 | title: Blocks Design System 4 | company: CBRE Build 5 | link: https://blocks.cbrebuild.com/ 6 | image: /uploads/blocks.jpg 7 | description: Blocks is the shared approach, language, and communication between design, engineering, and product teams at CBRE Build. The site contains a library of reusable UI and code components that are used to solve a variety of design problems. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/bolt.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-06-06 3 | title: Bolt Design System 4 | company: Pega Digital 5 | link: https://boltdesignsystem.com/ 6 | image: /uploads/bolt.jpg 7 | description: The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/bulb.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-06-09 3 | title: Solar Design System 4 | company: Bulb 5 | link: http://design.bulb.co.uk/ 6 | image: /uploads/bulb.jpg 7 | description: Solar is the design system for Bulb products. Our design system is a collection of shared design patterns and practices that allow our team to build quality consistent interfaces. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/buzzfeed.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-17 3 | title: Solid Style Guide 4 | company: BuzzFeed 5 | link: https://solid.buzzfeed.com/ 6 | image: /uploads/buzzfeed.jpg 7 | description: Solid is BuzzFeed's CSS style guide. Influenced by frameworks like Basscss, Solid uses immutable, atomic CSS classes to rapidly prototype and develop features. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/canvas.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Canvas Design System 4 | company: Hubspot 5 | link: https://canvas.hubspot.com/ 6 | image: /uploads/canvas.jpg 7 | description: This library showcases the building blocks that make up Hubspot's design system, from colors and typography to React-based components and data visualization tools. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/carbon.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-07-30 3 | title: Carbon Design System 4 | company: IBM 5 | link: https://www.carbondesignsystem.com/ 6 | image: /uploads/carbon.jpg 7 | description: Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/cedar.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Cedar 3 | company: REI 4 | link: https://rei.github.io/rei-cedar-docs/ 5 | image: /uploads/rei-cedar.jpg 6 | date: 2020-05-15T07:47:55.136Z 7 | description: Cedar is REI’s open-source Design System for digital products and 8 | experiences. Cedar includes the resources to create user interfaces consistent 9 | with REI’s experience principles, brand styles, and best practices. 10 | --- 11 | -------------------------------------------------------------------------------- /content/design-systems/clarity.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-31 3 | title: Clarity Design System 4 | company: VMware 5 | link: https://vmware.github.io/clarity/ 6 | image: /uploads/clarity.jpg 7 | description: UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/code-for-america.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-05 3 | title: Code for America Style Guide 4 | company: Code for America 5 | link: http://style.codeforamerica.org/ 6 | image: /uploads/code-for-america.jpg 7 | description: This website style guide is intended to help anyone involved with communications for Code for America and its affiliate programs. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/comet.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Comet 4 | company: Discovery Education 5 | link: https://comet.discoveryeducation.com/index.html 6 | image: /uploads/comet.jpg 7 | description: Comet is a scalable design system of visual language, components, and design assets encoded as and extensible from HTML & CSS starting points for use in Discovery Education digital experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/designers-italy.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-06-07 3 | title: .it Designers Italy 4 | company: Italian Public Administration 5 | link: https://designers.italia.it/ 6 | image: /uploads/designers-italy.jpg 7 | description: Designers Italia is the reference point for the design of the Public Administration – guides , tools and a forum to foster collaboration and promote the role of human centered design in the development of public services. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/digital-nsw.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Digital NSW 3 | company: State of New South Wales 4 | link: 'https://www.digital.nsw.gov.au/digital-design-system' 5 | image: /uploads/nsw.jpg 6 | date: 2020-03-30T03:49:31.075Z 7 | description: >- 8 | The NSW Design System is a way for people in government to design products and 9 | services that are distinctly NSW. It’s a toolkit to help us to create 10 | consistent, user-focused experiences for our customers. 11 | --- 12 | -------------------------------------------------------------------------------- /content/design-systems/duet.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-11-06 3 | title: Duet 4 | company: LocalTapiola 5 | link: https://www.duetds.com/ 6 | image: /uploads/duet.jpg 7 | description: Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva digital products and experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/elastic-ui.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Elastic UI 3 | company: Elastic 4 | link: 'https://elastic.github.io/eui/#/' 5 | image: /uploads/elastic-ui.jpg 6 | date: 2020-04-14T04:08:33.294Z 7 | description: >- 8 | The Elastic UI framework (EUI) is a design library in use at Elastic to build 9 | internal products that need to share our aesthetics. It distributes UI React 10 | components and static assets for use in building web layouts. 11 | --- 12 | -------------------------------------------------------------------------------- /content/design-systems/elementary.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Elementary - Human Interface Guidelines 4 | company: Elementary 5 | link: https://elementary.io/en/docs/human-interface-guidelines 6 | image: /uploads/elementary.jpg 7 | description: These guidelines are designed to help developers and designers create a beautifully consistent experience on the elementary OS desktop. They were written for interface designers, graphic artists and software developers who will be working on elementary OS. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/etrade.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-06 3 | title: E-Trade 4 | company: Design Language 5 | link: http://etrade.design/ 6 | image: /uploads/etrade.jpg 7 | description: A unified aesthetic plays a key role in making E-Trade a connected, engaging and meaningful experience. Through the Design Language, our experiences are differentiated, easy to use and easy to comprehend. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/evergreen.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-08 3 | title: Evergreen 4 | company: Segment 5 | link: https://evergreen.segment.com/ 6 | image: /uploads/evergreen.jpg 7 | description: Evergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/fabric.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-02 3 | title: Office UI Fabric 4 | company: Microsoft 5 | link: https://developer.microsoft.com/en-us/fabric 6 | image: /uploads/fabric.jpg 7 | description: The official front-end framework for building experiences that fit seamlessly into Office and Office 365. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/feelix.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Feelix 4 | company: MYOB 5 | link: http://feelix.myob.com/ 6 | image: /uploads/feelix.jpg 7 | description: A living styleguide for product designers & developers at MYOB. Explore foundations of our design system including typography, colors, grid and more. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/finastra.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2020-07-21 3 | title: Finastra Design System 4 | company: Finastra 5 | link: https://design.fusionfabric.cloud/ 6 | image: /uploads/finastra.jpg 7 | description: Design and build the future of finance. From prototype to product, build ready to use financial applications faster and better with our design system. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/fiori-fundamentals.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Fiori Fundamentals 4 | company: SAP 5 | link: https://sap.github.io/fundamental/ 6 | image: /uploads/fiori-fundamentals.jpg 7 | description: SAP Fiori Fundamentals is a light-weight presentation layer using HTML and CSS with the following implementations under active development – Angular, React, and Vue. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/fiori.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Fiori 4 | company: SAP 5 | link: https://experience.sap.com/fiori-design-web/ 6 | image: /uploads/fiori.jpg 7 | description: The original SAP Fiori user interface for web apps based on the SAPUI5 framework. Learn how to design engaging and intuitive apps that can run on any device. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/fishtank.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-10-09 3 | title: Fishtank 4 | company: Bloomberg BNA 5 | link: https://fishtank.bna.com/ 6 | image: /uploads/fishtank.jpg 7 | description: Unified design practices and code implementation to help us create exceptional and cohesive products for our users. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/futurelearn.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: FutureLearn Pattern Library 4 | company: FutureLearn 5 | link: https://www.futurelearn.com/pattern-library 6 | image: /uploads/futurelearn.jpg 7 | description: The library directly reflects the FutureLearn platform and uses the same underlying CSS and markup to display the elements and rules that make up the interface. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/gel.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-10 3 | title: Global Experience Language (GEL) 4 | company: BBC 5 | link: http://www.bbc.co.uk/gel/ 6 | image: /uploads/gel.jpg 7 | description: GEL is the BBC's shared design framework which enables us to create consistent and delightful user experiences across all of our Digital Services. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/gitlab.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-04-01 3 | title: Pajamas - Gitlab Design System 4 | company: Gitlab 5 | link: https://design.gitlab.com/ 6 | image: /uploads/gitlab.jpg 7 | description: The GitLab Design System contains design guidelines and UI components. When you look at any screen, you should know immediately that it is GitLab. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/gov-uk.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: GOV.UK Design System 4 | company: GOV.UK 5 | link: https://design-system.service.gov.uk/ 6 | image: /uploads/gov-uk.jpg 7 | description: Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/grommet.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Grommet 4 | company: Hewlett Packard 5 | link: http://grommet.io/ 6 | image: /uploads/grommet.jpg 7 | description: Grommet provides all the guidance, components, and design resources you need to take your ideas from concept to a real application. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/help-scout.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: Help Scout Style Guide 4 | company: Help Scout 5 | link: http://style.helpscout.com/ 6 | image: /uploads/help-scout.jpg 7 | description: This style guide is our brand’s playbook. A way of presenting people with a polished brand experience, but also a way to empower members of the Help Scout team to move quickly and do excellent work. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/heroki.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: Heroki Design 4 | company: Heroku 5 | link: https://design.herokai.com/ 6 | image: /uploads/heroki.jpg 7 | description: We design holistic, consistent, intuitive, accessible experiences and interfaces that offer value to existing and new Heroku customers. We champion our users. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/ibm-design-language.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-03 3 | title: IBM Design Language 4 | company: IBM 5 | link: https://www.ibm.com/design/language/ 6 | image: /uploads/ibm-design-language.jpg 7 | description: Use the IBM Design Language to create beautifully crafted products and enlightening user experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/infor.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-12 3 | title: Infor Design System 4 | company: Infor 5 | link: https://design.infor.com/ 6 | image: /uploads/infor.jpg 7 | description: A central resource for development tools, best practices, and support documentation to help everyone create consistent, quality UX. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/instructure.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Instructure UI 4 | company: Instructure Inc 5 | link: https://instructure.design/ 6 | image: /uploads/instructure.jpg 7 | description: Instructure UI has a number of beautiful and accessible React components with baked-in styles and theming and helpful utility functions. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/latitude.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Latitude 3 | company: Flexport 4 | link: https://www.flexport.com/design 5 | image: /uploads/latitude.jpg 6 | date: 2020-05-15T07:46:14.898Z 7 | description: Design guidelines, component documentation, and resources for 8 | building interfaces with Flexport’s design system. 9 | --- 10 | -------------------------------------------------------------------------------- /content/design-systems/lexicon.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-01 3 | title: Lexicon 4 | company: Liferay 5 | link: https://lexicondesign.io/ 6 | image: /uploads/lexicon.jpg 7 | description: A set of principles, patterns and tools created to provide a common design framework for crafting user interfaces within Liferay product ecosystem. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/lightning.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Lightning Design System 4 | company: Salesforce 5 | link: https://www.lightningdesignsystem.com/ 6 | image: /uploads/lightning.jpg 7 | description: The Lightning Design System enables you to build rich enterprise experiences and custom applications with the patterns and established best practices that are native to Salesforce. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/liquid.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Liquid 4 | company: Merck 5 | link: https://www.emd.design/ 6 | image: /uploads/liquid.jpg 7 | description: Use Liquid to create and develop digital products to make science faster, treatments more personalized, and everyday work more enjoyable. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/luna.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-08-14 3 | title: Luna 4 | company: Sainsbury’s 5 | link: https://luna.sainsburys.co.uk/guidelines 6 | image: /uploads/luna.jpg 7 | description: The Sainsbury’s design system is customer centred and inclusive, consistent across all touch points and unmistakably Sainsbury’s. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/mailchimp.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: MailChimp Pattern Library 4 | company: MailChimp 5 | link: http://ux.mailchimp.com/patterns 6 | image: /uploads/mailchimp.jpg 7 | description: The MailChimp Pattern Library is a byproduct of our move to a more responsive, nimble, and intuitive app. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/mapbox.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: Mapbox Base 4 | company: Mapbox 5 | link: https://www.mapbox.com/base/ 6 | image: /uploads/mapbox.jpg 7 | description: Base is an internal guide & code repository for designing and coding at Mapbox. Not a Mapbox team member? Feel free to find inspiration or borrow from Base. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/marvel.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-17 3 | title: Marvel Styleguide 4 | company: Marvel 5 | link: https://marvelapp.com/styleguide/ 6 | image: /uploads/marvel.jpg 7 | description: Marvel created this styleguide to act as a central location where they house a live inventory of UI components, brand guidelines, brand assets, code snippets, developer guidelines and more. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/material.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Material Design 4 | company: Google 5 | link: https://material.io/ 6 | image: /uploads/material.jpg 7 | description: Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/mineral.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-20 3 | title: Mineral UI 4 | company: CA Technologies 5 | link: https://mineral-ui.com/ 6 | image: /uploads/mineral.jpg 7 | description: Mineral UI is an open-source design system created to simplify building appealing, modern software experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/mixpanel.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Mixpanel 4 | company: Mixpanel Design System 5 | link: https://design.mixpanel.com/ 6 | image: /uploads/mixpanel.jpg 7 | description: At Mixpanel, we want to create a cohesive experience for our users. This system will enable teams to be more efficient, have a shared language across the company, and focus deeper on solving user problems. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/mongodb.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: MongoDB Design System 4 | company: MongoDB 5 | link: http://mongodb.design/#/ui-design-system/welcome 6 | image: /uploads/mongodb.jpg 7 | description: This site aims to provide everything you need to get up to speed quickly when designing for MongoDB. You'll find documentation for components, Sketch assets, and usage guidelines. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/morningstar.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-18 3 | title: Morningstar Design System 4 | company: Morningstar 5 | link: http://designsystem.morningstar.com/ 6 | image: /uploads/morningstar.jpg 7 | description: The Morningstar Design System aligns product teams on Morningstar brand, visual language, UX, and technical standards. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/mutual-omaha.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Digital Design Guide 4 | company: Mutual of Omaha 5 | link: http://design.mutualofomaha.com/digital/ 6 | image: /uploads/mutual-omaha.jpg 7 | description: The Digital Design System is a central repository where we house reusable UI elements, high-quality, tested code, and guidelines and UX patterns for a consistent user experience. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/nachos.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Nachos 4 | company: Trello 5 | link: https://design.trello.com/ 6 | image: /uploads/nachos.jpg 7 | description: Nachos is Trello's design system. This comprehensive guide and resource library contains everything you’ll need to design with us, including our core principles, visual design and interface components. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/nutanix.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-06 3 | title: Design System “2.0” 4 | company: Nutanix 5 | link: http://nutanix-design.com/2.0/ 6 | image: /uploads/nutanix.jpg 7 | description: A shared knowledge base of the Nutanix UI design language that helps products and features share a similar experience across the board. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/opattern.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: OPattern 4 | company: OPower 5 | link: https://ux.opower.com/opattern/ 6 | image: /uploads/opattern.jpg 7 | description: Opattern is a design system and style guide for everyone who creates Opower products. See the look and feel we’re going for and get specs for colors, buttons, charts, and more. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/orbit.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Orbit 3 | company: Kiwi.com 4 | link: 'https://orbit.kiwi/' 5 | image: /uploads/orbit-ds.jpg 6 | date: 2020-03-21T21:26:22.562Z 7 | description: >- 8 | Orbit is an open-source design system created for specific needs of Kiwi.com 9 | and together with that – for needs of travel projects. Our vision is to 10 | provide the necessary tools needed for building incredible travel products. 11 | --- 12 | -------------------------------------------------------------------------------- /content/design-systems/patternfly.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PatternFly 3 | company: Red Hat 4 | link: 'https://www.patternfly.org/v4/' 5 | image: /uploads/patternfly.jpg 6 | date: 2020-05-05T18:02:26.762Z 7 | description: >- 8 | PatternFly is an open source design system created to enable consistency and 9 | usability across a wide range of applications and use cases. PatternFly 10 | provides clear standards, guidance, and tools that help designers and 11 | developers work together more efficiently and build better user experiences. 12 | --- 13 | -------------------------------------------------------------------------------- /content/design-systems/pega.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: Pega Cosmos 4 | company: Pegasystems 5 | link: https://design.pega.com/ 6 | image: /uploads/pega.jpg 7 | description: Pega is a powerful UX system for engaging customers and employees. Pega software solves complex business problems through outcome-based product design. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/photon.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Photon Design System 4 | company: Firefox 5 | link: https://design.firefox.com/photon/ 6 | image: /uploads/photon.jpg 7 | description: Photon is the Firefox design language to build modern, intuitive, delightful experiences, for products across all platforms – from mobile to desktop, from TV to the next big thing. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/pluralsight.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Pluralsight Design System 4 | company: Pluralsight 5 | link: https://design-system.pluralsight.com/ 6 | image: /uploads/pluralsight.jpg 7 | description: The Pluralsight Design System strives toward a cohesive design language for Pluralsight’s products, a shared vocabulary for their teams, and basic building blocks to accelerate development. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/polaris.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-04 3 | title: Polaris 4 | company: Shopify 5 | link: https://polaris.shopify.com/ 6 | image: /uploads/polaris.jpg 7 | description: Polaris is the blueprint for Shopify's design system. It helps collaborate across disciplines to build a great experience for all of Shopify’s merchants. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/predix.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-03 3 | title: Predix Design System 4 | company: General Electric 5 | link: https://www.predix-ui.com/ 6 | image: /uploads/predix.jpg 7 | description: Our user interface components enable you to quickly and easily create Industrial Internet web applications that run on dedicated Predix services and data. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/priceline.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Priceline One 4 | company: Priceline 5 | link: https://pricelinelabs.github.io/design-system/ 6 | image: /uploads/priceline.jpg 7 | description: In order to create a consistently great experience for our users, Priceline One is meant to be the single source of truth for user interface standards for both designers and developers. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/primer.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-06-12 3 | title: Primer 4 | company: GitHub 5 | link: https://styleguide.github.com/primer/ 6 | image: /uploads/primer.jpg 7 | description: Resources, tooling, and design guidelines for building websites with Primer, GitHub's front-end framework. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/protocol.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-08 3 | title: Protocol 4 | company: Mozilla 5 | link: https://protocol.mozilla.org/ 6 | image: /uploads/protocol.jpg 7 | description: Protocol is a design system for Mozilla branded websites. It establishes a common design language, provides reusable coded components, and outlines high level guidelines for content and accessibility. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/pulse.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-08-14 3 | title: .pulse 4 | company: Heartbeat 5 | link: https://pulse.heartbeat.ua/ 6 | image: /uploads/pulse.jpg 7 | description: We have created .pulse as the one source of truth for all processes and beliefs inside Heartbeat Agency. Like any tool or methodology, it will only work right when used right. And "right" can only be determined through a process of constant polishing and practice. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/qbds.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-01 3 | title: QuickBooks Design System 4 | company: QuickBooks 5 | link: https://designsystem.quickbooks.com/ 6 | image: /uploads/qbds.jpg 7 | description: The QuickBooks Design System mission is to deliver delightful customer experiences that elevate our brand. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/quantum.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-04-02 3 | title: Quantum 4 | company: Catho 5 | link: https://catho.github.io/quantum/ 6 | image: /uploads/quantum.jpg 7 | description: CSS in JS based reusable components, are the core of Quantum design-system a library for developing consistent UI/UX at Catho. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/ratio.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Ratio 4 | company: Rambler 5 | link: https://ui-kit.rambler.ru/#/ 6 | image: /uploads/ratio.jpg 7 | description: Ratio is a new Rambler design system designed to optimize work with the visual language of products and their interfaces. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/react95.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-04-02 3 | title: React95 4 | company: React95 5 | link: https://react95.github.io/React95/ 6 | image: /uploads/react95.jpg 7 | description: React95 is a unique component library inspired by the Windows 95 UI design. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/rimble.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Rimble 4 | company: ConsenSys 5 | link: https://rimble.consensys.design/ 6 | image: /uploads/rimble.jpg 7 | description: Rimble is here to make life easier for everyone. As an open source project, Rimble aims to create common dApp UX patterns, validated through user research, and built for developers. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/rivet.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-12 3 | title: Rivet 4 | company: Indiana University 5 | link: https://rivet.uits.iu.edu/ 6 | image: /uploads/rivet.jpg 7 | description: Familiarity is a key component of usability. With Rivet, you get a toolset for creating familiar web applications to give users a better experience. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/rizzo.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: Rizzo 4 | company: Lonely Planet 5 | link: http://rizzo.lonelyplanet.com/ 6 | image: /uploads/rizzo.jpg 7 | description: When creating Rizzo, we didn't focus on the Style Guide as the deliverable. Instead we focused on reducing complexity and increasing reusability. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/seeds.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-11 3 | title: Seeds 4 | company: Sprout Social 5 | link: https://sproutsocial.com/seeds/ 6 | image: /uploads/seeds.jpg 7 | description: This creative hub is home to all the tools and resources needed to understand the Sprout brand, express it creatively and inspire meaningful customer experiences. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/seek.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Seek Style Guide 4 | company: Seek 5 | link: http://seek-oss.github.io/seek-style-guide/ 6 | image: /uploads/seek.jpg 7 | description: The SEEK styleguide's purpose is to enable the creation of content that will assist our users to complete tasks easily and hopefully enjoy the experience. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/sendgrid.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-03 3 | title: SendGrid Style Guide 4 | company: SendGrid 5 | link: http://styleguide.sendgrid.com/index.html 6 | image: /uploads/sendgrid.jpg 7 | description: The SendGrid Style Guide is a library for developing consistent UI/UX at SendGrid. It is made up of modular, reusable components based on OOCSS and SMACSS principles. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/servicenow.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: ServiceNow Design System 4 | company: ServiceNow 5 | link: http://styleguide.servicenow.com/#!/ 6 | image: /uploads/servicenow.jpg 7 | description: The ServiceNow Design System is a living system that empowers us to design and achieve a consistent, efficient, and high quality visual language that brings cohesion and familiarity to the user experience across the platform. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/servicetitan.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-11-11 3 | title: Anvil 4 | company: ServiceTitan 5 | link: http://anvil.servicetitan.com 6 | image: /uploads/servicetitan.jpg 7 | description: Anvil is a collection of design guidelines and development tools for building products at ServiceTitan. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/skyline.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Skyline 3 | company: Benevity 4 | link: 'https://skyline.benevity.org/' 5 | image: /uploads/skyline.jpg 6 | date: 2020-03-30T03:54:21.337Z 7 | description: >- 8 | The simplest, fastest way to build user interfaces that look and feel like 9 | they belong in the Benevity ecosystem of Purpose-driven software. Save time 10 | and avoid reinventing already solved problems by tapping into this resource of 11 | shared learnings and best practices of common patterns within our software. 12 | --- 13 | -------------------------------------------------------------------------------- /content/design-systems/spectrum.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-10-28 3 | title: Spectrum 4 | company: Adobe 5 | link: https://spectrum.adobe.com/ 6 | image: /uploads/adobe-spectrum.jpg 7 | description: Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/stacks.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-11-17 3 | title: Stacks 4 | company: Stack Overflow 5 | link: https://stackoverflow.design/ 6 | image: /uploads/stacks.jpg 7 | description: Stacks provides everything you need to quickly deliver coherent, consistent experiences across all of Stack Overflow—the product itself, and emails. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/swarm.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: Swarm Design System 4 | company: Meetup 5 | link: https://meetup.github.io/swarm-design-system/ 6 | image: /uploads/swarm.jpg 7 | description: The Swarm Design System is a living ecosystem to help our teams craft online experiences to bring people together offline. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/thumbprint.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-08 3 | title: Thumbprint 4 | company: Thumbtack 5 | link: https://thumbprint.design/ 6 | image: /uploads/thumbprint.jpg 7 | description: Thumbprint is a living system that streamlines the design and development process through consolidation, standardization, and documentation. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/uniform.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-08 3 | title: Uniform 4 | company: Hudl 5 | link: http://uniform.hudl.com/ 6 | image: /uploads/uniform.jpg 7 | description: Uniform is Hudl’s design system. It exists to unify Hudl’s products through design and code implementation. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/us-web-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-07 3 | title: U.S. Web Design System 4 | company: U.S. Government 5 | link: https://designsystem.digital.gov/ 6 | image: /uploads/us-web-design.jpg 7 | description: Design and build fast, accessible, mobile-friendly government websites backed by user research. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/vanilla.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-06-10 3 | title: Vanilla 4 | company: Ubuntu 5 | link: https://vanillaframework.io/ 6 | image: /uploads/vanilla.jpg 7 | description: Vanilla is a simple extensible CSS framework, written in Sass, by the Ubuntu Web Team. Anyone can contribute to Vanilla, improve it and extend it. All the code is available on GitHub and is licensed under LGPLv3 by Canonical. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/vercel.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-08 3 | title: Vercel 4 | company: Vercel 5 | link: https://vercel.co/design 6 | image: /uploads/vercel.jpg 7 | description: The design system for Vercel and public branding assets for Vercel's products. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/vtex.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-03-07 3 | title: VTEX Styleguide 4 | company: VTEX 5 | link: https://styleguide.vtex.com/ 6 | image: /uploads/vtex.jpg 7 | description: The home for all VTEX product design related reusable patterns, components and assets. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/wanda-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: " Wanda Design System" 3 | company: Wonderflow 4 | link: https://design.wonderflow.ai/ 5 | image: /uploads/wanda.jpg 6 | date: 2021-09-14T19:25:01.160Z 7 | description: Wanda is Wonderflow’s open-source design system built for digital 8 | products and experiences. Wanda aims to provide a solid guidance for designers 9 | and developers, to reduce the risks of divergence. 10 | --- 11 | -------------------------------------------------------------------------------- /content/design-systems/westpac-gel.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: GEL 4 | company: Westpac 5 | link: https://gel.westpacgroup.com.au/ 6 | image: /uploads/westpac-gel.jpg 7 | description: GEL is our single source of truth, providing everything you need to deliver our brand promises and create consistent, coherent customer experiences across our entire digital landscape faster, and with less effort. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/wonderbly.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-02-01 3 | title: Wonderbly Design System 4 | company: Wonderbly 5 | link: http://design-system.wonderbly.com/ 6 | image: /uploads/wonderbly.jpg 7 | description: We’ve been working to create this design system as a centralised hub for showcasing our design rules, principles, and frontend components. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/workday.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-07 3 | title: Workday Canvas 4 | company: Workday 5 | link: https://design.workday.com/ 6 | image: /uploads/workday.jpg 7 | description: The Workday Canvas Design System provides designers and developers with tools to create exceptional experiences. Delve into our design standards, writing guidelines, and playbook. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/yelp.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-20 3 | title: Yelp Styleguide 4 | company: Yelp 5 | link: https://www.yelp.com/styleguide 6 | image: /uploads/yelp.jpg 7 | description: The styleguide is a resource that provides a common language around Yelp’s UI patterns. We use it to maintain modular front-end code and visual consistency across the web app. 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/yoga.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2019-11-25 3 | title: Yoga 4 | company: Gympass 5 | link: https://gympass.github.io/yoga/ 6 | image: /uploads/yoga.jpg 7 | description: Yoga is a scientific system of practices made to help each one of us achieve our highest potential and experience (Gympass Cross-platform design-system) 8 | --- 9 | -------------------------------------------------------------------------------- /content/design-systems/zendesk.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-18 3 | title: Zendesk Garden 4 | company: Zendesk 5 | link: https://garden.zendesk.com/ 6 | image: /uploads/zendesk.jpg 7 | description: Welcome to our curated collection of UI goodness, the Zendesk Garden. The Garden is where we grow user interface components for Zendesk products. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/designers-git-it.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-31 3 | title: Designers Git-It - A Unified Design System Workflow 4 | speaker: Stephen Hathaway 5 | link: https://vimeo.com/242899818 6 | image: /uploads/designers-git.jpg 7 | description: Stephen talks about the process in his company where designers are using Git to automate and enhance their Sketch workflow and collaboration. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/dsconf-2018.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-23 3 | title: Talks from DSCONF 2018 4 | speaker: Jina Anne, Nathan Curtis & more... 5 | link: https://dsconference.com/dsconf-conference-day/ 6 | image: /uploads/dsconf-2018.jpg 7 | description: The DSConf was a 2-day conference in Finland dedicated to Design Systems. Some of the keynote speakers include Nathan Curtis, Hayley Hughes and the IBM team, Karri Saarinen from Airbnb and more. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/facebook-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-11-17 3 | title: Design Systems & Tools at Facebook 4 | speaker: Cristobal Castilla & Zack Schiller 5 | link: https://vimeo.com/242899818 6 | image: /uploads/ds-facebook.jpg 7 | description: Facebook designers show how their teams collaborate. They also show a demo of internally developed tools that help them design faster and more consistenly at scale. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/polymer-design-systems.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-08 3 | title: Polymer-Powered Design Systems 4 | speaker: John Riviello 5 | link: https://youtu.be/VkZHDPjMasI 6 | image: /uploads/polymer-design-systems.jpg 7 | description: In this talk you'll learn the specifics of working with Polymer, the most popular Web Components library, to build your design system in a way that can be used across any web-enabled device. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/scaling-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-10-02 3 | title: Scaling Design with Systems 4 | speaker: Karri Saarinen 5 | link: https://vimeo.com/242899818 6 | image: /uploads/scaling-design.jpg 7 | description: Airbnb designer Karri Saarinen gives a talk during Nordic Design 2017 about how to scale design by using and leveraging systems. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/systemizing-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-08-25 3 | title: Systemizing Design 4 | speaker: Nate Baldwin & Alan Wilson 5 | link: https://vimeo.com/242899818 6 | image: /uploads/systemizing-design.jpg 7 | description: We will tell the story of Design Systems and the basics of what to know to get one started at your organization, including real-life examples of the challenges and evolution of building a design system from inside Adobe. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/systems-chaos.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-09-07 3 | title: Introducing Design Systems Into Chaos 4 | speaker: Diana Mounter 5 | link: https://www.youtube.com/watch?v=FZSi1bK-BRM 6 | image: /uploads/systems-chaos.jpg 7 | description: Diana Mounter, Design Systems Lead at GitHub shares practical examples on setting up a design system, what to prioritize, and how to make a big impact to customers and colleagues. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/thinking-symbols.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-09-07 3 | title: Thinking in Symbols for Universal Design 4 | speaker: Benjamin Wilkins 5 | link: https://www.youtube.com/watch?v=z5XxgxBz3Fo 6 | image: /uploads/thinking-symbols.jpg 7 | description: Benjamin Wilkins, Design Technologist at Airbnb touches on the internationalization and localization of design elements, and how might we design with consistency for multiple interface targets. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/yelp-design-system.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-15 3 | title: The Yelp Design System - Impact at Scale 4 | speaker: Theresa Ma & Taron Ghazaryan 5 | link: https://youtu.be/CjYfg6v4PkA 6 | image: /uploads/ds-yelp.jpg 7 | description: The design systems team at Yelp talk about what it's like to build a design system and use it to impact at scale. 8 | --- 9 | -------------------------------------------------------------------------------- /content/talks/zero-to-one.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-10-05 3 | title: Design Systems - Zero to One 4 | speaker: Paul Farino 5 | link: https://www.youtube.com/watch?v=Eq0-Sz5S9iI 6 | image: /uploads/zero-to-one.jpg 7 | description: Paul Farino discusses the lifecycle and iterative nature of building a design system. He’ll cover creating buy-in with internal stakeholders and tactical ways to scale and maintain a design system. 8 | --- 9 | -------------------------------------------------------------------------------- /content/tools/abstract.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Abstract 3 | link: 'https://www.goabstract.com/' 4 | image: /uploads/abstract.jpg 5 | date: 2018-04-09T00:00:00.000Z 6 | description: >- 7 | Abstract is a platform for modern design teams to work together. It's a 8 | secure, version controlled hub for your design files. No conflicting copies. 9 | No duplicates. One single source of truth for your design files. 10 | tags: 11 | - design 12 | - sketch 13 | type: Plugin 14 | sketch: Plugin 15 | --- 16 | -------------------------------------------------------------------------------- /content/tools/alva.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-05 3 | title: Alva 4 | link: https://meetalva.io/ 5 | image: /uploads/alva.jpg 6 | description: Meet Alva, a radically new digital design tool built for cross-functional product teams. Alva lets you design interactive products based on the same components your engineers are using for production websites. 7 | tags: 8 | - design 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/astrum.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Astrum 4 | link: http://astrum.nodividestudio.com/ 5 | image: /uploads/astrum.jpg 6 | description: Astrum is a lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way. 7 | tags: 8 | - frameworks 9 | - development 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/bootstrap.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Bootstrap 4 | link: http://getbootstrap.com/ 5 | image: /uploads/bootstrap.jpg 6 | description: Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. 7 | tags: 8 | - frameworks 9 | - development 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/catalog.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-05 3 | title: Catalog 4 | link: http://www.catalog.style/ 5 | image: /uploads/catalog.jpg 6 | description: With Catalog you combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless. 7 | tags: 8 | - documentation 9 | - development 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/chromatic.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Chromatic 4 | link: https://www.chromaticqa.com/ 5 | image: /uploads/chromatic.jpg 6 | description: Pinpoint UI component bugs instantly. Chromatic ensures UI consistency in React components, down to the pixel. Every commit is automatically tested for visual changes in the cloud. 7 | tags: 8 | - development 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/compositor-lab.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Compositor Lab 4 | link: https://compositor.io/ 5 | image: /uploads/compositor.jpg 6 | description: Lab is a component-based design system manager for building production-ready UI. It's a design tool that is closing the gap between design and code. 7 | tags: 8 | - design 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/docsify.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-02 3 | title: Docsify 4 | link: https://docsify.js.org/#/ 5 | image: /uploads/docsify.jpg 6 | description: Docsify generates your documentation website on the fly. It does not generate static html files. Instead, it smartly loads and parses your Markdown files and displays them on the website. 7 | tags: 8 | - development 9 | - documentation 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/ether.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: Ether 4 | link: https://ether.thescenery.co/ 5 | image: /uploads/ether.jpg 6 | description: Build your design system faster now. And keep it from breaking later. Meet Ether, a modular base for any design system. 7 | tags: 8 | - frameworks 9 | - development 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/figma.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Figma 4 | link: https://www.figma.com/ 5 | image: /uploads/figma.jpg 6 | description: Design, prototype, and gather feedback all in one place. Figma is the first interface design tool based in the browser, making it easier for teams to create software. 7 | tags: 8 | - design 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/fractal.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Fractal 4 | link: https://fractal.build/ 5 | image: /uploads/fractal.jpg 6 | description: Fractal is a tool to help you build and document web component libraries, and then integrate them into your projects. Fractal can be run from the command line or integrated into your project via its API. 7 | tags: 8 | - frameworks 9 | - development 10 | - documentation 11 | # ================================ 12 | # TOOLS CATEGORIES AVAILABLE 13 | # ================================ 14 | # - design 15 | # - development 16 | # - documentation 17 | # - frameworks 18 | # - sketch 19 | # type: Plugin 20 | # type: Sketch File 21 | # ================================ 22 | --- 23 | -------------------------------------------------------------------------------- /content/tools/framer.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Framer 4 | link: https://framer.com/ 5 | image: /uploads/framer.jpg 6 | description: Design anything for every platform. Yes, anything. Framer is the only tool you need to design for iOS, Android, and web. Switch devices and watch as Framer automatically adapts your layout to every screen size. 7 | tags: 8 | - design 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/gitbook.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-02 3 | title: Gitbook 4 | link: https://www.gitbook.com/ 5 | image: /uploads/gitbook.jpg 6 | description: Gitbook is a modern and simple solution to documentation, digital writing and publishing. It helps your team write, collaborate and publish content online. 7 | tags: 8 | - development 9 | - documentation 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/html-sketchapp.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-05 3 | title: HTML-sketchapp 4 | link: https://github.com/brainly/html-sketchapp 5 | image: /uploads/html-sketchapp.jpg 6 | description: HTML-sketchapp turns HTML nodes into Sketch layers or symbols. Additionally, it allows to export shared text styles and document colors. 7 | tags: 8 | - sketch 9 | type: Plugin 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/invision-dsm.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-03 3 | title: InVision Design System Manager 4 | link: https://www.invisionapp.com/blog/announcing-invision-design-system-manager/ 5 | image: /uploads/dsm.jpg 6 | description: InVision DSM makes it possible for every product team to create and maintain a design system at scale—allowing teams to maintain a consistent user experience across every digital interface. 7 | tags: 8 | - design 9 | - sketch 10 | type: Plugin 11 | # ================================ 12 | # TOOLS CATEGORIES AVAILABLE 13 | # ================================ 14 | # - design 15 | # - development 16 | # - documentation 17 | # - frameworks 18 | # - sketch 19 | # type: Plugin 20 | # type: Sketch File 21 | # ================================ 22 | --- 23 | -------------------------------------------------------------------------------- /content/tools/jan-losert-nested-symbols.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 01-5-2018 3 | title: Nested Symbols & Styleguides 4 | link: http://janlosert.com/store/symbols-styleguides.html 5 | image: /uploads/jan-losert.jpg 6 | description: Stop wasting your time by crafting the same design systems and elements from scratch over and over and over again - and let the magic of this template’s nested symbols begin! 7 | tags: 8 | - sketch 9 | type: Sketch File 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/lingo.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Lingo 4 | link: https://www.lingoapp.com/use-cases/design-system-manager/ 5 | image: /uploads/lingo.jpg 6 | description: Lingo helps you build and share a design system that will empower your entire team to build better products and experiences faster. 7 | tags: 8 | - design 9 | - sketch 10 | type: Plugin 11 | # ================================ 12 | # TOOLS CATEGORIES AVAILABLE 13 | # ================================ 14 | # - design 15 | # - development 16 | # - documentation 17 | # - frameworks 18 | # - sketch 19 | # type: Plugin 20 | # type: Sketch File 21 | # ================================ 22 | --- 23 | -------------------------------------------------------------------------------- /content/tools/lucid.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-08 3 | title: Lucid 4 | link: https://lucid.style/ 5 | image: /uploads/lucid.jpg 6 | description: Lucid is a tool for creating, managing and sharing design systems. From a simple component library through to detailed descriptions of your styles, Lucid makes it easy. 7 | tags: 8 | - documentation 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/modulator.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-11 3 | title: Modulator 4 | link: https://hihayk.github.io/modulator/ 5 | image: /uploads/modulator.jpg 6 | description: Modulator was created to experiment with spacing in design systems. Modulator helps designers define a base unit size and create preset spaces. 7 | tags: 8 | - development 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/pattern-lab.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-21 3 | title: Pattern Lab 4 | link: http://patternlab.io/ 5 | image: /uploads/pattern-lab.jpg 6 | description: Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles. 7 | tags: 8 | - documentation 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/patternplate.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-02 3 | title: Patternplate 4 | link: https://patternplate.github.io/ 5 | image: /uploads/patternplate.jpg 6 | description: Patternplate is a documentation and development interface for component libraries. Connect the dots with patternplate and stop getting lost in inconsistency. 7 | tags: 8 | - development 9 | - documentation 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/plant.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Plant 4 | link: https://plantapp.io/ 5 | image: /uploads/plant.jpg 6 | description: Plant is a powerful, yet versatile version control app and plugin for Sketch. Plant keeps all versions you sync to it, and makes version details available to all members. 7 | tags: 8 | - design 9 | - sketch 10 | type: Plugin 11 | # ================================ 12 | # TOOLS CATEGORIES AVAILABLE 13 | # ================================ 14 | # - design 15 | # - development 16 | # - documentation 17 | # - frameworks 18 | # - sketch 19 | # type: Plugin 20 | # type: Sketch File 21 | # ================================ 22 | --- 23 | -------------------------------------------------------------------------------- /content/tools/react-sketch.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-05 3 | title: React Sketch.app 4 | link: http://airbnb.io/react-sketchapp/ 5 | image: /uploads/react-sketch.jpg 6 | description: React Sketch.app enables you to render React components to Sketch. It was built for Airbnb’s design system. This is the easiest way to manage Sketch assets in a large design system. 7 | tags: 8 | - sketch 9 | type: Plugin 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/react-symbols.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: React Symbols 4 | link: https://reactsymbols.com/ 5 | image: /uploads/react-symbols.jpg 6 | description: Ready-to-use components for the fastest growing JS framework. All UI components you can think of with properties ready to match your brand within seconds. Take your projects to the next level with React Symbols. 7 | tags: 8 | - development 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/rename-it.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-09 3 | title: Rename It 4 | link: http://rodi01.github.io/RenameIt/ 5 | image: /uploads/rename-it.jpg 6 | description: Keep your Sketch files organized, batch rename layers and artboards. Sequentially rename layers in either ascending or descending order. Rename Multiple layers at once. 7 | tags: 8 | - sketch 9 | type: Plugin 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/sketch-app.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-01 3 | title: Sketch 4 | link: https://sketchapp.com/ 5 | image: /uploads/sketch.jpg 6 | description: Sketch is built for designers like you. With useful features, an intuitive interface and powerful plugins built by a community of developers, it helps you focus on what you do best. 7 | tags: 8 | - design 9 | # ================================ 10 | # TOOLS CATEGORIES AVAILABLE 11 | # ================================ 12 | # - design 13 | # - development 14 | # - documentation 15 | # - frameworks 16 | # - sketch 17 | # type: Plugin 18 | # type: Sketch File 19 | # ================================ 20 | --- 21 | -------------------------------------------------------------------------------- /content/tools/sketch-icons.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-11 3 | title: Sketch Icons 4 | link: https://github.com/AMoreaux/Sketch-Icons 5 | image: /uploads/sketch-icons.jpg 6 | description: A Sketch plugin that allows you to create a dynamic icon library for your UI kit. Just import a set of icons and automatically apply a color mask. 7 | tags: 8 | - sketch 9 | type: Plugin 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/storybook.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-02 3 | title: Storybook 4 | link: https://storybook.js.org/ 5 | image: /uploads/storybook.jpg 6 | description: Storybook is the UI development environment You'll love to use. You can use it with any kind of React or Vue or Angular project. 7 | tags: 8 | - development 9 | - documentation 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/straple.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: Straple Design System 4 | link: https://www.straple.co/#/ 5 | image: /uploads/straple.jpg 6 | description: Work faster. Work better. Work smarter. Straple is a full end to end design system, empowering you from brand to design, code and application. 7 | tags: 8 | - development 9 | - sketch 10 | type: Sketch File 11 | # ================================ 12 | # TOOLS CATEGORIES AVAILABLE 13 | # ================================ 14 | # - design 15 | # - development 16 | # - documentation 17 | # - frameworks 18 | # - sketch 19 | # type: Plugin 20 | # type: Sketch File 21 | # ================================ 22 | --- 23 | -------------------------------------------------------------------------------- /content/tools/symbol-ds.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-12 3 | title: Symbol Design System 4 | link: https://symboldesign.co/ 5 | image: /uploads/symbol-ds.jpg 6 | description: Symbol is an advanced web-design system based on Sketch nested symbols. Every component can be easily customized via overrides. 7 | tags: 8 | - sketch 9 | type: Sketch File 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/symbol-organizer.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-01-05 3 | title: Symbol Organizer 4 | link: https://github.com/sonburn/symbol-organizer 5 | image: /uploads/symbol-organizer.jpg 6 | description: Organize your symbols page alphabetically (including layer list) and into groupings determined by your symbol names. Also provides the ability to gather symbols from other pages, and remove unused symbols. 7 | tags: 8 | - sketch 9 | type: Plugin 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/symbols-manager.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 04-9-2018 3 | title: Symbols Manager 4 | link: https://gumroad.com/l/sketch-symbols-manager 5 | image: /uploads/symbols-manager.jpg 6 | description: Keep your symbols clean and tidy. A fast and easy way to manage all your symbols. No more hassle with long and complex symbols name, or renaming tons of symbols because you misspelled a folder name. 7 | tags: 8 | - sketch 9 | type: Plugin 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/text-styles-manager.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 04-9-2018 3 | title: Text Styles Manager 4 | link: https://gumroad.com/l/sketch-text-styles-manager 5 | image: /uploads/text-styles-manager.jpg 6 | description: Here is a fast and easy way to manage all your Sketch text styles. No more hassle with long and complex names, or renaming tons of styles because you misspelled a folder name. 7 | tags: 8 | - sketch 9 | type: Plugin 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/toolabs.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: Atomize Design System 4 | link: https://gumroad.com/l/atomize 5 | image: /uploads/atomize-ds.jpg 6 | description: Atomize is a UI design framework that helps designers and developers design well-structured, scalable and more consistent interfaces for the web. It is based on Atomic design methodology which has atoms and molecules. 7 | tags: 8 | - sketch 9 | type: Sketch File 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/ux-power-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-10 3 | title: UX Power Tools 4 | link: https://www.uxpower.tools/ 5 | image: /uploads/ux-power-tools.jpg 6 | description: UX Power Tools are kinda like Bootstrap, but for Sketch. They’re sophisticated design systems of common components for crafting world-class products. Use them as boilerplates on every project to save yourself time. 7 | tags: 8 | - sketch 9 | type: Sketch File 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/vue.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-03-02 3 | title: Vue Design System 4 | link: https://vueds.com/ 5 | image: /uploads/vue.jpg 6 | description: Vue Design System provides you and your team a set of organized tools, patterns & practices. It works as the foundation for your application development. 7 | tags: 8 | - documentation 9 | - development 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /content/tools/zeplin.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 04-9-2018 3 | title: Zeplin 4 | link: https://zeplin.io/ 5 | image: /uploads/zeplin.jpg 6 | description: Design hand-off has never been easier. Zeplin is the ultimate collaboration tool between designers and developers. It cuts meetings in half and ensures that designs are implemented perfectly. 7 | tags: 8 | - design 9 | - sketch 10 | type: Plugin 11 | # ================================ 12 | # TOOLS CATEGORIES AVAILABLE 13 | # ================================ 14 | # - design 15 | # - development 16 | # - documentation 17 | # - frameworks 18 | # - sketch 19 | # type: Plugin 20 | # type: Sketch File 21 | # ================================ 22 | --- 23 | -------------------------------------------------------------------------------- /content/tools/zeroheight.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2018-04-12 3 | title: zeroheight 4 | link: https://zeroheight.com/ 5 | image: /uploads/zero-height.jpg 6 | description: zeroheight brings design systems to life with beautiful, sophisticated and up-to-date styleguides synced with design and development. 7 | tags: 8 | - documentation 9 | - Sketch 10 | type: Plugin 11 | # ================================ 12 | # TOOLS CATEGORIES AVAILABLE 13 | # ================================ 14 | # - design 15 | # - development 16 | # - documentation 17 | # - frameworks 18 | # - sketch 19 | # type: Plugin 20 | # type: Sketch File 21 | # ================================ 22 | --- 23 | -------------------------------------------------------------------------------- /content/tools/zurb-foundation.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: 2017-12-11 3 | title: Zurb Foundation 4 | link: https://foundation.zurb.com/ 5 | image: /uploads/foundation.jpg 6 | description: Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. 7 | tags: 8 | - frameworks 9 | - development 10 | # ================================ 11 | # TOOLS CATEGORIES AVAILABLE 12 | # ================================ 13 | # - design 14 | # - development 15 | # - documentation 16 | # - frameworks 17 | # - sketch 18 | # type: Plugin 19 | # type: Sketch File 20 | # ================================ 21 | --- 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "design-systems-repo", 3 | "private": true, 4 | "description": "Welcome to the Design Systems Repo. A frequently updated and growing collection of Design System examples, articles, tools and talks.", 5 | "version": "1.0.0", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/jadlimcaco/design-systems-repo.git" 9 | }, 10 | "keywords": [ 11 | "design", 12 | "system", 13 | "styleguide", 14 | "component", 15 | "library" 16 | ], 17 | "author": "Jad Limcaco", 18 | "scripts": { 19 | "build": "gridsome build", 20 | "develop": "gridsome develop", 21 | "explore": "gridsome explore" 22 | }, 23 | "dependencies": { 24 | "@gridsome/plugin-google-analytics": "^0.1.0", 25 | "@gridsome/source-filesystem": "^0.6.2", 26 | "@gridsome/transformer-remark": "^0.5.0", 27 | "gridsome": "^0.7.14", 28 | "gridsome-plugin-netlify-cms": "^1.0.9", 29 | "gridsome-plugin-netlify-cms-paths": "^0.3.1", 30 | "netlify-cms": "^2.10.47" 31 | }, 32 | "devDependencies": { 33 | "babel-eslint": "^10.0.3", 34 | "gridsome-plugin-purgecss": "^1.0.12", 35 | "eslint": "^6.7.2", 36 | "eslint-plugin-vue": "^6.1.2" 37 | }, 38 | "eslintConfig": { 39 | "root": true, 40 | "env": { 41 | "node": true 42 | }, 43 | "extends": [ 44 | "plugin:vue/essential", 45 | "eslint:recommended" 46 | ], 47 | "parserOptions": { 48 | "parser": "babel-eslint" 49 | }, 50 | "rules": {} 51 | }, 52 | "browserslist": [ 53 | "> 1%", 54 | "last 2 versions" 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /src/admin/config.yml: -------------------------------------------------------------------------------- 1 | backend: 2 | name: github 3 | repo: jadlimcaco/design-systems-repo 4 | 5 | media_folder: 'static/uploads' 6 | public_folder: '/uploads' 7 | 8 | collections: 9 | - name: 'design-systems' 10 | label: 'Systems' 11 | folder: 'content/design-systems' 12 | create: true 13 | slug: '{{slug}}' 14 | fields: 15 | - { label: 'Title', name: 'title', widget: 'string' } 16 | - { label: 'Company', name: 'company', widget: 'string' } 17 | - { label: 'Link', name: 'link', widget: 'string' } 18 | - { label: 'Image', name: 'image', widget: 'image' } 19 | - { label: 'Date', name: 'date', widget: 'date' } 20 | - { label: 'Description', name: 'description', widget: 'text' } 21 | - name: 'articles' 22 | label: 'Articles' 23 | folder: 'content/articles' 24 | create: true 25 | slug: '{{slug}}' 26 | fields: 27 | - { label: 'Title', name: 'title', widget: 'string' } 28 | - { label: 'Author', name: 'author', widget: 'string' } 29 | - { label: 'Link', name: 'link', widget: 'string' } 30 | - { label: 'Date', name: 'date', widget: 'date' } 31 | - { label: 'Description', name: 'description', widget: 'text' } 32 | - label: 'Tags' 33 | name: 'tags' 34 | multiple: true 35 | widget: 'select' 36 | options: 37 | - animation 38 | - code 39 | - contribution 40 | - design-tokens 41 | - figma 42 | - leadership 43 | - patterns 44 | - process 45 | - sketch 46 | - name: 'books' 47 | label: 'Books' 48 | folder: 'content/books' 49 | create: true 50 | slug: '{{slug}}' 51 | fields: 52 | - { label: 'Title', name: 'title', widget: 'string' } 53 | - { label: 'Author', name: 'author', widget: 'string' } 54 | - { label: 'Link', name: 'link', widget: 'string' } 55 | - { label: 'Image', name: 'image', widget: 'image' } 56 | - { label: 'Date', name: 'date', widget: 'date' } 57 | - { label: 'Description', name: 'description', widget: 'text' } 58 | - name: 'talks' 59 | label: 'Talks' 60 | folder: 'content/talks' 61 | create: true 62 | slug: '{{slug}}' 63 | fields: 64 | - { label: 'Title', name: 'title', widget: 'string' } 65 | - { label: 'Speaker', name: 'speaker', widget: 'string' } 66 | - { label: 'Link', name: 'link', widget: 'string' } 67 | - { label: 'Image', name: 'image', widget: 'image' } 68 | - { label: 'Date', name: 'date', widget: 'date' } 69 | - { label: 'Description', name: 'description', widget: 'text' } 70 | - name: 'tools' 71 | label: 'Tools' 72 | folder: 'content/tools' 73 | create: true 74 | slug: '{{slug}}' 75 | fields: 76 | - { label: 'Title', name: 'title', widget: 'string' } 77 | - { label: 'Link', name: 'link', widget: 'string' } 78 | - { label: 'Image', name: 'image', widget: 'image' } 79 | - { label: 'Date', name: 'date', widget: 'date' } 80 | - { label: 'Description', name: 'description', widget: 'text' } 81 | - label: 'Tags' 82 | name: 'tags' 83 | multiple: true 84 | widget: 'select' 85 | options: 86 | - design 87 | - development 88 | - documentation 89 | - frameworks 90 | - sketch 91 | - label: 'If Sketch (Type)' 92 | name: 'type' 93 | widget: 'select' 94 | options: 95 | - Plugin 96 | - Sketch File 97 | -------------------------------------------------------------------------------- /src/admin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |An index of insightful articles about design systems. If you've written an article that you want to add here, just tweet me at @jadlimcaco.
10 |A list of good books on the subject of design systems. If you have any recommendations, please send me a tweet at @jadlimcaco and I will add it to the list.
10 |A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.
10 |A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.
10 |Helpful talks and presentations from the best in the industry. Learn more about the innovation that is happening in design systems and design tooling.
10 |An ever growing list of design and development tools and plugins to help you build, maintain, and organize your own design system.
10 |