{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/a-simple-guide-to-naming-colors/",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"A simple guide to naming UI colors\",\n  \"date\": \"2020-04-29T00:00:00.000Z\",\n  \"summary\": \"User-defined experiences are making a comeback. In this post, we look at how we can easily name and expand color palettes in our design system to handle any color mode.\",\n  \"tags\": [\"color\", \"design systems\", \"css properties\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"If you\\u2019re like me, you\\u2019ve devoured every article about color that\\u2019s come out to try and apply anything to make this process more pragmatic, easier to write, conceptulize, and maintain. However, once color modes became more popular with the rise of dark mode we\\u2019re faced with a challenge of creating semantic names that work across different color modes. It\\u2019s also important to note that it\\u2019s not just dark mode we should worry about, accessibility plays an important role here and you should offer additional modes like high-contrast.\"), mdx(\"p\", null, \"First, let\\u2019s look at how color is used across a variety of tools and industries and see if we can pull a common thread through them.\"), mdx(\"h2\", {\n    \"id\": \"scales\"\n  }, \"Scales\"), mdx(\"p\", null, \"If you aren\\u2019t familiar with color scales these are usually the basis for any color palette. We create tints and shades based on a hue to produce a harmony of colors we can use throughout our UI designs. \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://yeun.github.io/open-color/\"\n  }, \"Open color\"), \" was my first exposure to this sort of scale and using a constrained palette from 0-9 to name the different hues used throughout UI. Material Design also popularized the way in which we use scales taking a different approach and using values ranging from 50-900.\"), mdx(\"h2\", {\n    \"id\": \"abstract\"\n  }, \"Abstract\"), mdx(\"p\", null, \"Then there are more abstract names like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"primary\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"secondary\"), \" that are usually used for naming variations of brand colors.\"), mdx(\"p\", null, \"show graphic similar to this for naming: (context-value-state)\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://redd.gitbook.io/atomic-layout/fundamentals/responsive-props\"\n  }, \"https://redd.gitbook.io/atomic-layout/fundamentals/responsive-props\")), mdx(\"p\", null, \"describing universal color palettes that scale between color modes.\"), mdx(\"p\", null, \"primary/secondary/tertiary (Apple)\"), mdx(\"p\", null, \"h1/h2/h3/etc\"), mdx(\"p\", null, \"encoding heiarchy into our naming methodology\"), mdx(\"h2\", {\n    \"id\": \"weights\"\n  }, \"Weights\"), mdx(\"p\", null, \"In design, in order to add interest and break elements up we add varying \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"weights\"), \" to introduce contrast. By thinking about are scales this way we can dramatically simplify the language around colors in design systems. Similar to how heading elements work, we start with our first heading this is the main heading used to distguish \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"groups\"), \" of writings. We use smaller headings as we enter a topic further. Interestingly enough, we only need about three headings to write about broad topics. We should never need to drill into a topic so much that we get lost, the same rule applies to color.\"), mdx(\"p\", null, \"While guidelines like Material use scales there is a bit lost.\"), mdx(\"h2\", {\n    \"id\": \"levels\"\n  }, \"Levels\"), mdx(\"p\", null, \"By breaking up our colors into more distinct categories we can create any palette we need while keeping things systematic and easy to follow:\"), mdx(\"p\", null, \"We just need a formula:\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Element|State|Base\")), mdx(\"p\", null, \"Element - card, sidebar, menu, button\\nState - hovered, pressed, error, success\\nBase - foreground, background, surface, separator\"), mdx(\"p\", null, \"As we\\u2019ve found with HTML building UI heiarchically works well. The same rules should apply to our color palette. We start at a high level and work our way down into specific pieces of UI. This could be considered the good parts of CSS. Contextual styling is extremely powerful, but paried with any ever growing API it gets harder to know what to do.\"), mdx(\"p\", null, \"These can expand and be mixed/matched as needed. Similar to CSS we can work our way into multiple states:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const colors = {\\n  foreground: 'white',\\n  background: 'black',\\n\\n  card: {\\n    foreground: 'inherit',\\n    background: 'inherit',\\n    variants: {\\n      error: {\\n        foreground: 'white',\\n        background: 'red',\\n      },\\n    },\\n  },\\n\\n  [Menu]: {},\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Box separator=\\\"error\\\" variants={{ small: { separator: 'success' } }} />\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"<Card variant=\\\"error\\\" />\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"If you're like me, you've devoured every article about color that's come out to try and apply anything to make this process more pragmatic…","fields":{"readingTime":{"text":"3 min read"},"slug":"/a-simple-guide-to-naming-colors/"},"frontmatter":{"date":"04/29/2020","summary":"User-defined experiences are making a comeback. In this post, we look at how we can easily name and expand color palettes in our design system to handle any color mode.","tags":["color","design systems","css properties"],"title":"A simple guide to naming UI colors","image":null}},"previous":null,"next":null},"pageContext":{"id":"4662748c-a4fe-55aa-8ed9-39f6f3773ae8"}},
    "staticQueryHashes": ["3764592887"]}