{"componentChunkName":"component---src-templates-posts-js","path":"/foundations/colour","result":{"data":{"mdx":{"id":"21bd9676-d343-56d2-9c74-ed0f240d218b","body":"function _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/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Colour\",\n  \"path\": \"/foundations/colour\",\n  \"excerpt\": \"Our colour guide will help you apply color to your UI in a meaningful way. This helps us create visual patterns that can make interacting with our website easier and more predictable for customers.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Masthead = makeShortcode(\"Masthead\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Masthead, {\n    title: \"Colour\",\n    subheader: \"Our colour guide will help you apply color to your UI in a meaningful way. This helps us create visual patterns that can make interacting with our website easier and more predictable for customers.\\nThe use of colour should help bring attention to what matters most. Colour should support the hierarchy of the page.\",\n    mdxType: \"Masthead\"\n  }), mdx(\"h2\", null, \"Common Colour Palette\"), mdx(\"h3\", null, \"Main Colours\"), mdx(\"p\", null, \"You can click on any colour to copy it to the clipboard.\"), mdx(ColourBlock, {\n    clrDarkest: \"#082a1f\",\n    clrDarker: \"#10543e\",\n    clrDark: \"#1a8561\",\n    clrPrimary: \"#20a77c\",\n    clrLight: \"#4db996\",\n    clrLighter: \"#79cab0\",\n    clrLightest: \"#d2ede5\",\n    mdxType: \"ColourBlock\"\n  }, \"Primary\"), mdx(ColourBlock, {\n    clrDarkest: \"#380022\",\n    clrDarker: \"#700044\",\n    clrDark: \"#a80065\",\n    clrPrimary: \"#e00087\",\n    clrLight: \"#e6339f\",\n    clrLighter: \"#ec66b7\",\n    clrLightest: \"#fff4fa\",\n    mdxType: \"ColourBlock\"\n  }, \"Secondary\"), mdx(\"h3\", null, \"Indicator Colours\"), mdx(ColourBlock, {\n    clrDarkest: \"#00202a\",\n    clrDarker: \"#003f54\",\n    clrDark: \"#005f7e\",\n    clrPrimary: \"#007ea8\",\n    clrLight: \"#3398b9\",\n    clrLighter: \"#66b2cb\",\n    clrLightest: \"#cce5ee\",\n    mdxType: \"ColourBlock\"\n  }, \"Information\"), mdx(ColourBlock, {\n    clrDarkest: \"#280808\",\n    clrDarker: \"#4f1111\",\n    clrDark: \"#9e2121\",\n    clrPrimary: \"#d32c2c\",\n    clrLight: \"#dc5656\",\n    clrLighter: \"#e58080\",\n    clrLightest: \"#f6d5d5\",\n    mdxType: \"ColourBlock\"\n  }, \"Error\"), mdx(ColourBlock, {\n    clrDarkest: \"#280808\",\n    clrDarker: \"#783600\",\n    clrDark: \"#b45100\",\n    clrPrimary: \"#f06c00\",\n    clrLight: \"#f38933\",\n    clrLighter: \"#f6a766\",\n    clrLightest: \"#f9e8dc\",\n    mdxType: \"ColourBlock\"\n  }, \"Caution\"), mdx(\"hr\", null), mdx(\"h3\", null, \"Colours & Accessibility\"), mdx(\"p\", null, \"We are committed to complying with AA standard contrast ratios. To do this, we choose primary, secondary and extended colors that support usability. This ensures sufficient color contrast between elements so that users with low vision can see and use our products.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"../principles/Accessibility\"\n  }), \"See our Accessibility page for more details\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Colour"}}},"pageContext":{"id":"21bd9676-d343-56d2-9c74-ed0f240d218b"}}}