{"id":16092,"date":"2017-12-07T18:49:55","date_gmt":"2017-12-08T02:49:55","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16092"},"modified":"2024-05-19T23:48:27","modified_gmt":"2024-05-20T06:48:27","slug":"creating-context-design-systems-comprehensive-approach-documentation","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/creating-context-design-systems-comprehensive-approach-documentation\/","title":{"rendered":"Creating Context for Design Systems: A Comprehensive Approach to Documentation"},"content":{"rendered":"

You\u2019ve heard of design systems. <\/span><\/p>\n

You likely have one. And if you don\u2019t, you probably should. <\/span><\/p>\n

But along for the ride are other names that may have been reasonably well defined within the context of your project, client or organization. They even have solid definitions outside \u2013 across the industry. Names like: frameworks, software design guides, pattern libraries, component systems, UI kits, style guides, and design tokens. <\/span><\/p>\n

There are no universal and agreed upon definitions. And there’s a lot of grey areas, overlaps, and gaps between them. However, there is at least a widely accepted premise that the phrase \u201cdesign system\u201d is intended to be the highest level all-inclusive descriptor.<\/span><\/p>\n

Let\u2019s explore how to close the gaps with a more complete structure for the design system and its supporting documents.<\/span><\/p>\n

Minding the Gap<\/b><\/h2>\n

Here\u2019s the general hierarchy of the typical design system that I encounter:<\/span><\/p>\n

Design System<\/span><\/p>\n

    \n
  1. Principles<\/strong><\/span><\/li>\n
  2. Accessibility<\/strong><\/li>\n
  3. UI
    \u00a0 \u00a0 \u00a0\u2022 Global Styles
    \u00a0 \u00a0 \u00a0\u2022 Templates
    \u00a0 \u00a0 \u00a0\u2022 Components
    \u00a0 \u00a0 \u00a0\u2022 Styles<\/strong><\/li>\n<\/ol>\n

    But that\u2019s not always enough. We need to dive much further than just the surface of our product. For example, for certain elements, we should also define: <\/span><\/p>\n