{"id":82309,"url":"https://github.com/chrisuser/design-systems-diary","name":"design-systems-diary","description":"A collection of notes, tips and links regarding design systems and UI/UX development","projects_count":59,"last_synced_at":"2026-07-31T10:00:24.192Z","repository":{"id":231766139,"uuid":"578118838","full_name":"ChrisUser/design-systems-diary","owner":"ChrisUser","description":"A collection of notes, tips and links regarding design systems and UI/UX development","archived":false,"fork":false,"pushed_at":"2024-05-01T20:34:10.000Z","size":622,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-07-12T08:05:16.385Z","etag":null,"topics":["awesome","awesome-list","design-systems","from-zero-to-hero","pattern-library","ui","ui-library","ux-design"],"latest_commit_sha":null,"homepage":"","language":"Markdown","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChrisUser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-14T09:55:45.000Z","updated_at":"2024-12-20T16:19:59.000Z","dependencies_parsed_at":"2024-04-05T20:29:35.962Z","dependency_job_id":"5708352c-5157-4f0e-99ed-c63962a0e3e7","html_url":"https://github.com/ChrisUser/design-systems-diary","commit_stats":null,"previous_names":["chrisuser/design-systems-diary"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ChrisUser/design-systems-diary","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fdesign-systems-diary","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fdesign-systems-diary/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fdesign-systems-diary/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fdesign-systems-diary/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChrisUser","download_url":"https://codeload.github.com/ChrisUser/design-systems-diary/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisUser%2Fdesign-systems-diary/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":36114483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-31T02:00:06.731Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-12-30T22:20:25.898Z","updated_at":"2026-07-31T10:00:24.192Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Maintenance","Standards","Animations","Accessibility","Colors","Uncategorized","Feedback","Best practices"],"sub_categories":["Color palette","Documentation","Uncategorized","Customer journey map","Testing","Finally, a little \"best practice dump\":"],"readme":"\u003ch1 align=center\u003eA design systems diary\u003c/h1\u003e\n\n![Topic: design](https://img.shields.io/badge/Topic-UI/UX_Design-blue.svg)\n\n```diff\n+ This is an ongoing project that needs constant revision so: contributions are welcome!\n```\n\n**How to contribute?**\n\nIf you know a resource or an interesting topic that isn't listed below nor detailed enough feel free to fork the project and to create a new [pull request](https://github.com/ChrisUser/design-systems-diary/pulls).\n\n**Basic info**\n\nAll the provided links have been reviewed following this system:\n\n|     😍      |       😮        |    😉    |\n| :---------: | :-------------: | :------: |\n| **Awesome** | **Interesting** | **Good** |\n\nFor some topics you will find the 🎁 icon indicating some fun practical resources[^1] to learn/understand faster the subject in question. Enjoy them and remember to **support the authors** if you can!\n\n[^1]: If you are the creator/owner of a specific resource listed in this project and you wish to have the link removed you can open an issue with the **invalid** tag. Thank you in advance.\n\n**What can be found inside this project?**\n\n- [Colors](#colors)\n- [Standards](#standards)\n- [Accessibility](#accessibility)\n- [Animations](#animations)\n- [Documentation](#documentation)\n- [Maintenance](#maintenance)\n- [Feedback](#feedback)\n- [Best practices](#best-practices)\n\n**Articles that inspired this work:**\n\n- [The self-taught UI/UX designer roadmap in 2021](https://bootcamp.uxdesign.cc/the-self-taught-ui-ux-designer-roadmap-in-2021-aa0f5b62cecb)\n- [Atomic design by Brad Frost](https://bradfrost.com/blog/post/atomic-web-design/)\n- [CSS architecture for design systems](https://bradfrost.com/blog/post/css-architecture-for-design-systems/)\n\n\u003cbr/\u003e\n\n---\n\n## Colors\n\n🎁 **Resources**\n\n- [Create a palette with Coolors](https://coolors.co/generate)\n- [Check your colors' contrast](https://contrastchecker.com/)\n\n### Color meanings\n\nThe following table describes the positive and negative things associated[^2] with each listed color:\n\n| **Color** | **Positive feeling / things**                                                 | **Negative feeling / things**                       |\n| :-------: | :---------------------------------------------------------------------------- | :-------------------------------------------------- |\n|    Red    | Power, passion, energy and excitement                                         | Anger, emergency and rage                           |\n|  Orange   | Happiness, sunshine and joy                                                   | Aggressivity, ignorance and deceit                  |\n|  Yellow   | Happiness, intelligence and optimism                                          | Caution, criticism, laziness and jealousy           |\n|   Green   | Nature, growth, harmony and money                                             | Greed and lack of experience                        |\n|   Blue    | Peace, calm, stability, expertise, trust and dependability                    | Depression, coldness and passiveness                |\n|  Purple   | Royalty, sophistication, luxury, wealth, spirituality, creativity and healing | Gloominess and sadness                              |\n|   Black   | Power, elegance, professionalism and depth                                    | Death, unknown, mystery, grief, mourning and sorrow |\n|   White   | Purity, innocence, cleanliness and safety                                     | Coldness and distance                               |\n\n[^2]: Those are just a few of the possible associations. You can also find the same sentiment associated with more than one color.\n\n\u003cbr/\u003e\n\n### Color palette\n\n\u003e **Note**: A color palette, in the digital world, refers to the **full range of colors** that can be displayed on a device screen or other interface. The color palette **reveals a lot** about the electronic design of the device or technology, and its visual capabilities for human users.\n\n\u003cbr /\u003e\n\n\u003cdiv align=center\u003e\n\n![Various color palettes](https://github.com/ChrisUser/design-systems-diary/blob/main/images/color_palettes.jpg?raw=true)\n\n_Here you can see various examples of web color palettes with dark and light colors, ranging from blue to green and a little bit of red._\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n- [How to make your own color palettes](https://medium.com/@greggunn/how-to-make-your-own-color-palettes-712959fbf021)\n- [How to Not Suck at Color](https://modus.medium.com/how-to-not-suck-at-color-b3980ee8084a)\n\n---\n\n## Standards\n\nStandard and styleguides should be learned, understood, and implemented at **all times** on a project, and any deviation must be fully justified.\n\n**Learn styleguides and standards:**\n\n- [😍] [High-level advice and guidelines for writing sane, manageable, scalable CSS](https://cssguidelin.es/)\n- [😍] [Schema.org - Create, maintain, and promote schemas for structured data on the internet](https://schema.org/docs/documents.html)\n- [😮] [IEC - Product symbols standards](https://webstore.iec.ch/preview/info_iec60417iso7000_DB.pdf)\n\n\u003cbr /\u003e\n\n---\n\n## Accessibility\n\n\u003e **Note**: \"_Accessibility (often abbreviated to A11y — as in, \"a\", then 11 characters, and then \"y\") in web development means enabling as many people as possible to use websites, even when those people's abilities are limited in some way._\" - [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility)\n\n\u003e **Note**: \"_The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability._\" - [W3C - Accessibility](https://www.w3.org/standards/webdesign/accessibility)\n\n🎁 **Resources**\n\n- [Apple developer - Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility)\n- [A11y Mockups annotation kit](https://www.figma.com/community/file/953682768192596304)\n\n\u003cbr /\u003e\n\n**Learn accessibility standards:**\n\n- [😍] [MDN - ARIA Attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes)\n- [😍] [MDN - WAI-ARIA Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)\n- [😍] [HTML : Importance of role for better voice-overs \u0026 accessibility](https://dev.to/rajeshkumaryadavdotcom/html-importance-of-role-for-better-voice-overs-accessibility-122a)\n- [😮] [a11y-101](https://a11y-101.com/)\n- [😮] [How to Create a “Skip to Content” Link for accessibility](https://css-tricks.com/how-to-create-a-skip-to-content-link/)\n- [😉] [EAA Compliance for Websites:\n  The Definitive Guide](https://www.accessibilitychecker.org/guides/eaa-compliance/)\n- [😉] [7 Ways to Make Your Website More Accessible](https://www.adaptworldwide.com/insights/2021/make-website-more-accessible)\n\n\u003cbr /\u003e\n\n**Best practices**\n\n- Use a label with a `for` attribute for all the inputs in a form and show input's relative examples in the placeholders.\n- Use a `\u003cfieldset\u003e` element to wrap radio buttons and a `\u003clegend\u003e` one to describe the choice.\n- Use `\u003cbutton\u003e` each time you want to have a button on the screen; try not to replace it with a generic `\u003cdiv\u003e` or other non specific elements.\n- Use `\u003cnav\u003e`, `\u003cheader\u003e`, `\u003cmain\u003e`, `\u003csection\u003e` and `\u003cfooter\u003e` to define landmark regions inside your layouts.\n- If you have a list of points/items in a page you should use `\u003cul\u003e` or `\u003col\u003e` element to wrap each item and `\u003cli\u003e` for every single child inside the list.\n- `font-size` defined in rem is a better choice in terms of responsiveness and accessibility.\n- Structure each section with headings using only one `\u003ch1\u003e` item per page and using consecutive headings numbers (`\u003ch2\u003e`, `\u003ch3\u003e`, ...) inside each section.\n- ARIA attributes could be used to fill the gap of accessibility features, interactions and roles (eg. if you use a `\u003cspan\u003e` instead of a `\u003cbutton\u003e` to add a button inside a page); But: **Avoid using ARIA if a native HTML element can do the same job.**\n- `aria-live` and `aria-controls` can be used to alert screen readers that something, after a user action, has been updated inside the current page; (see [MDN - aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) \u0026 [MDN - aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) to learn more).\n- Programmable focus management is used to direct screen readers, or users in general, to a page update: opening of a modal, update of a previously disabled button after an action was performed, ...\n- Use a \"Skip to main content\" link with a tabindex of 0 to be the first focusable element in a page full of text to make the user flow directly into the content.\n\n---\n\n## Animations\n\n\u003e **Note**: \"_Not everyone likes decorative animations or transitions, and some users outright experience motion sickness when faced with parallax scrolling, zooming effects, and so on._\" - [Thomas Steiner](https://web.dev/authors/thomassteiner/)\n\n🎁 **Resources**\n\n- [Easing functions](https://easings.net/)\n- [bendc/easing.css](https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d)\n- [Web Animation API - Browser support test](https://codepen.io/danwilson/pen/xGBKVq)\n- [Web Animation API - caniuse](https://caniuse.com/web-animation)\n\n\u003cbr /\u003e\n\n- [😍] [MDN - Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)\n- [😍] [JavaScript Scroll Animation Tutorial: Web Animations API](https://www.youtube.com/watch?v=ZRCzvK4DnlA)\n- [😍] [Animating Layouts with the FLIP Technique](https://css-tricks.com/animating-layouts-with-the-flip-technique/)\n- [😮] [How to create high-performance CSS animations](https://web.dev/animations-guide/)\n- [😮] [prefers-reduced-motion: Sometimes less movement is more](https://web.dev/prefers-reduced-motion/)\n- [😉] [The Web Animations API vs. CSS](https://blog.logrocket.com/the-web-animations-api-vs-css/)\n- [😉] [Orchestrating Complexity With Web Animations API](https://www.smashingmagazine.com/2021/09/orchestrating-complexity-web-animations-api/)\n\n---\n\n## Maintenance\n\n🎁 **Resources**\n\n- [Storybook](https://storybook.js.org/)\n- [Storybook knobs - Dynamic props for your components](https://storybook.js.org/addons/storybook-addon-knobs-color-options)\n- [Bit](https://bit.cloud/frontend-teams)\n\n### Customer journey map\n\n\u003e **Note**: A customer journey map is a **diagram** (or several diagrams) that depict the stages customers go through when **interacting** with a company product or platform.\n\n\u003cbr /\u003e\n\n\u003cdiv align=center\u003e\n\n![BrightVessel's customer journey layers map](https://github.com/ChrisUser/design-systems-diary/blob/main/images/customer_journey_layers_brightvessel.jpg?raw=true)\n\n_Here you can see an example of a customer journey for an E-Commerce platform: the largest number of interactions are in the \"Acquisition\" stage. It also considers future user engagement touchpoints such as a newsletter._\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n- [😍] [User Journey vs User Flow: What’s the Difference and Why You Need Both?](https://userpilot.com/blog/user-journey-vs-user-flow/)\n- [😍] [How to understand, use, and build customer journey maps](https://www.fullstory.com/customer-journey-maps/)\n- [😍] [Don’t Make a Journey Map: 9 archetypes of good / bad, and how to decide what to use](https://medium.com/@shahrsays/dont-make-a-journey-map-9-archetypes-of-good-bad-and-how-to-decide-what-to-use-d65abd30ec6f)\n- [😮] [The Practice of Customer-Journey Management](https://www.nngroup.com/articles/customer-journey-management/)\n- [😮] [The Benefits and Disadvantages of Customer Journey Mapping](https://www.genroe.com/blog/benefits-and-disadvantages-of-customer-journey-mapping/15321)\n- [😉] [Coursera - Creating User Journey Maps: A Guide](https://www.coursera.org/articles/creating-user-journey-maps-a-guide)\n- [😉] [Techtarget - customer journey map](https://www.techtarget.com/searchcustomerexperience/definition/customer-journey-map)\n\n**Pros**:\n\n1. Gives us insight into users’ needs and which features to prioritize\n2. Can be used as a **communication tool** across all the business teams\n3. Decreases customer churn and increases customer lifetime value\n\n**Cons**:\n\n1. Needs to have very clear intent and a well defined scope level\n2. Needs **cross-teams effort** and support to be implemented\n3. Needs - \"_quite a lot of_\" - customers data to rely on\n\n\u003cbr/\u003e\n\n### Documentation\n\n\u003e **Note**: Documenting is a fundamental act to make sure that project requirements are **fulfilled** and to establish traceability concerning **what** has been done, **who** has done it, and **when** it has been done.\n\n\u003e 😉 **\u003cins\u003eHint\u003c/ins\u003e**: To keep a history of the changes made on a project you should create a [CHANGELOG.md](https://github.com/ChrisUser/design-systems-diary/blob/main/CHANGELOG.md) file and keep it in the root folder of the project itself.\n\n\u003cbr/\u003e\n\n- [😍] [15 Essential Project Documents](https://www.projectmanager.com/blog/great-project-documentation)\n- [😍] [Material UI (MUI) Official Website](https://mui.com/)\n- [😍] [Storybook - How to document components](https://storybook.js.org/docs/react/writing-docs/introduction)\n- [😮] [Project Documentation and Its Importance in 2023](https://www.simplilearn.com/project-documentation-article)\n- [😮] [5 Ways to Document React Components in 2020](https://blog.bitsrc.io/5-ways-to-document-react-components-in-2020-ecf60f24dee8)\n- [😉] [My component library documentation page](https://chrisuser.github.io/react-usage-bar/docs/)\n\n**Pros**:\n\n1. Gives all the designers and frontend devs a full comprehensive guide to use and understand the best scenarios for each component\n2. Works as a **dynamic database** of assets, illustrations, components and compositions\n\n**Cons**:\n\n1. Needs to be maintained constantly over time for each small change made by everyone in the dev or design team\n2. Can become too specific or complicated if there's **lack of communication** between the parts\n\n\u003cbr/\u003e\n\n### Testing\n\n\u003e **Note**: Without UX testing, it’s impossible to know if your products are **really meeting** the user’s needs and providing a positive experience.\n\n\u003cbr/\u003e\n\n- [😍] [15 Essential Project Documents](https://www.projectmanager.com/blog/great-project-documentation)\n- [😮] [Project Documentation and Its Importance in 2023](https://www.simplilearn.com/project-documentation-article)\n- [😮] [How to test UI components?](https://www.browserstack.com/guide/test-ui-components)\n\n---\n\n## Feedback\n\n\u003e _There’s no better time than now to start thinking about how happy your customers, clients, or your staff (or whoever you’re surveying) really are._\n\n**Create a customer satisfaction survey:**\n\n- [😍] [4 steps to customer survey design](https://getthematic.com/insights/customer-survey-design/)\n- [😍] [Creating Customer Feedback Systems: A Step-By-Step Guide](https://userpilot.com/blog/customer-feedback-systems/)\n- [😮] [Gathering feedback on your design system](https://zeroheight.com/help/guides/gathering-feedback-on-your-design-system/)\n\n---\n\n## Best practices\n\n### Finally, a little \"best practice dump\":\n\n- Always put lables or tooltips next to or near by icons in UI;\n- Best text input width should be 80 characters;\n- When designing a mobile UI adjust text size according to user distance from display;\n- For long dropdowns add a filter box to the top so users can type and find elements quicker;\n- Don’t force the user to search through a whole list of options, show the most popular choices at the top of the list;\n- Avoid dropdowns if you only have 3-5 options available, a better solution is to use Radio buttons;\n- Use `margin-inline-end` instead of `margin-right` to support rtl and ltr directions properties;\n- To make gradients look subtle and **realistic**, you can use just one color on both ends. Then make one of the ends brighter by increasing Brightness (around 5 points) and decrease Hue (5 to 10 points);\n- In dark mode avoid darker objects as top-layers. Anything that’s \"closer\" to the user should be lighter to show depth;\n- Brightness difference between background and container should be: within _12%_ for dark interfaces and _7%_ for light ones;\n- When having two buttons on a row: if you read left-to-right place the main action on the **right**;\n- When having two buttons on a column: place the main action on the **bottom**;\n- Always align the checkboxes to the top or bottom of the first line of text;\n- ...\n\n[⬆️ Back to top](https://github.com/ChrisUser/design-systems-diary?tab=readme-ov-file#a-design-systems-diary)\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/chrisuser%2Fdesign-systems-diary/projects"}