- 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
courses
books
Tools
Examples
- Lists
- https://f36.contentful.com/
- 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
- https://github.com/MaximeHeckel/design-system
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