• micro design systems

Colors

• conventions of color-palettes

  • primary, secondary, tertiary, accent, dark, light
  • primary, gray, error, warning, success, info, transparence
    • primary can consist of two brand colors which are context dependent combined (dark/light theme)
  • brand, functional(status, success, error, failure, reminder, etc.), neutral

• Links

  • https://www.radix-ui.com/colors
  • https://uxdesign.cc/defining-colors-in-your-design-system-828148e6210a
  • https://ant.design/docs/spec/colors
  • https://eightshapes.com/articles/color-in-design-systems
  • https://committed.io/components/?path=/docs/design-system-colour--page
  • https://mineral-ui.netlify.app/tokens
  • https://chakra-ui.com/docs/theming/theme#colors
  • Naming Convention for colors

Motion

• https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
• https://medium.com/google-design/motion-design-doesnt-have-to-be-hard-33089196e6c2
• https://pricelinelabs.github.io/design-system/Motion/
• https://www.smashingmagazine.com/2019/02/animation-design-system/

Typography

• textStyles might also be scales

• https://medium.com/eightshapes-llc/typography-in-design-systems-6ed771432f1e

• https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

Talks

• Design Systems Aren’t Hard (But They Are Complex)

courses

• https://www.leveluptutorials.com/tutorials/modern-css-design-systems

books

• https://www.designbetter.co/design-systems-handbook

Tools

• https://interplayapp.com/
• https://github.com/souporserious/documenting-systems-in-nextjs

Examples

• Lists
  • https://adele.uxpin.com/
  • https://designsystemsrepo.com/
• https://f36.contentful.com/
  • https://onfido.com/component-library
• https://wiki.nikitavoloboev.xyz/design/design-systems
• https://protocol.mozilla.org
• https://github.com/bumbag/bumbag-ui
• https://boundless.js.org/
• https://github.com/pinterest/gestalt
• https://github.com/napagroup/grape-ui-react
• https://github.com/iamshadmirza/react-native-design-system
• https://react-ui.dev
• https://github.com/priceline/design-system
• https://github.com/mineral-ui/mineral-ui
• https://github.com/reakit/reakit
• https://primer.style/components
• https://baseui.design/
• https://palette.artsy.net
• http://uniform.hudl.com/components
• https://ui.reach.tech/
• https://design.acl.com/
• https://canvas.hubspot.com/
• https://seek-oss.github.io/braid-design-system
• https://smooth-ui.smooth-code.com
• https://github.com/stardust-ui/react
• https://design-system.pluralsight.com/
• https://fannypack.style/
• https://github.com/bumbag/bumbag-ui
• https://react.semantic-ui.com/
• https://orbit.kiwi/
• https://rmwc.io
• https://rimble.consensys.design/components
• https://ui.quid.com
• https://nordnet.github.io/ui/
• https://circuit.sumup.com
• https://chakra-ui.com
• https://openpatch.github.io/patches
• https://github.com/Liinkiing/klee
• https://github.com/hfellerhoff/pterrific-ui
• https://mantine.dev/
• https://github.com/LexSwed/fxtrot-ui
• https://arcade.design/docs/overview/
• https://mantine.dev/
• Universal React design systems that optimize for native & web
• https://github.com/marklawlor/nativewind
• https://rysana.com/docs/ui

Links

• https://www.designsystems.com/
• https://sid.st/blog/
• https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935
• https://uxdesign.cc/yes-your-startup-is-ready-for-a-design-system-7c50d13e1516
• https://medium.com/design-paperless-post/when-your-design-system-fails-f035041ad6d2
• https://ux.shopify.com/the-system-always-kicks-back-d94b945407f2
• https://blog.hichroma.com/why-design-systems-are-a-single-point-of-failure-ec9d30c107c2
• https://medium.com/hubspot-product/how-to-gain-widespread-adoption-of-your-design-system-29d1b142b158
• https://blog.hichroma.com/why-design-systems-are-a-single-point-of-failure-ec9d30c107c2
• Design Systems Aren’t Hard (But They Are Complex)
• Good css defaults
• Everything I Know About Style Guides, Design Systems, and Component Libraries
• Design Systems For Smaller Organisations - Design Systems London #2 - September 2022