diff --git a/components/search/forms/simple.jsx b/components/search/forms/simple.jsx
index 6088018d..8bfc4d79 100644
--- a/components/search/forms/simple.jsx
+++ b/components/search/forms/simple.jsx
@@ -1,24 +1,75 @@
-import React from 'react'
-import { Button, InputGroup, InputGroupAddon, Input } from 'reactstrap'
+import React, { useRef } from 'react'
+import { Select } from '@oacore/design'
 
-const SearchField = ({
-  size = '',
-  id = 'search-form-field',
-  label = 'Search in CORE',
-  ...fieldProps
-}) => (
-  <>
-    <label className="sr-only" htmlFor={id}>
-      {label}
-    </label>
-    <InputGroup size={size}>
-      <Input type="search" id={id} {...fieldProps} />
-      <InputGroupAddon addonType="append">
-        <Button color="primary">Search</Button>
-      </InputGroupAddon>
-    </InputGroup>
-  </>
-)
+import styles from './styles.module.css'
+
+const options = [
+  { id: 1, icon: '#magnify', value: 'Option A' },
+  { id: 2, icon: '#magnify', value: 'Option B' },
+  { id: 3, icon: '#magnify', value: 'Option C' },
+  { id: 4, icon: '#magnify', value: 'Option D' },
+  { id: 5, icon: '#magnify', value: 'Option E' },
+]
+
+const SearchAutocompletion = ({ formRef, ...passProps }) => {
+  const [suggestions, setSuggestions] = React.useState(options)
+  const [value, setValue] = React.useState('')
+
+  const handleOnChange = data => {
+    if (data.value === '') return
+    formRef.current.submit()
+  }
+
+  const handleOnInput = data => {
+    // if id doesn't exists it means user type own text
+    // and didn't use suggestion
+    if (!data.id) {
+      setSuggestions(
+        options.slice(0, Math.max(0, options.length - data.value.length))
+      )
+    }
+
+    setValue(data.value)
+  }
+
+  return (
+    <Select
+      id="search-select"
+      value={value}
+      onChange={handleOnChange}
+      onInput={handleOnInput}
+      prependIcon="#magnify"
+      className={styles.searchBox}
+      clearButtonClassName={styles.clearButton}
+      selectMenuClassName={styles.selectMenu}
+      changeOnBlur={false}
+      {...passProps}
+    >
+      {suggestions.map(el => (
+        <Select.Option
+          key={el.id}
+          id={el.id}
+          value={el.value}
+          icon={el.icon}
+          className={styles.option}
+        >
+          {el.value}
+        </Select.Option>
+      ))}
+      {value !== '' && (
+        <Select.Option
+          key={6}
+          id={6}
+          value={value}
+          icon="#magnify"
+          className={`${styles.option} ${styles.lastOption}`}
+        >
+          {`All results for "${value}"`}
+        </Select.Option>
+      )}
+    </Select>
+  )
+}
 
 const SearchForm = ({
   action,
@@ -26,10 +77,13 @@ const SearchForm = ({
   onSubmit,
   id = 'search-form',
   ...fieldProps
-}) => (
-  <form id={id} action={action} method={method} onSubmit={onSubmit}>
-    <SearchField id={`${id}-field`} size="lg" {...fieldProps} />
-  </form>
-)
+}) => {
+  const ref = useRef(null)
+  return (
+    <form ref={ref} id={id} action={action} method={method} onSubmit={onSubmit}>
+      <SearchAutocompletion id={`${id}-field`} {...fieldProps} formRef={ref} />
+    </form>
+  )
+}
 
 export default SearchForm
diff --git a/components/search/forms/styles.module.css b/components/search/forms/styles.module.css
new file mode 100644
index 00000000..c7aad500
--- /dev/null
+++ b/components/search/forms/styles.module.css
@@ -0,0 +1,64 @@
+.search-box {
+  --form-control-corner-radius: 0.3rem;
+  --form-control-color: var(--gray-500);
+  --form-label-color: var(--gray-500);
+  --select-option-color: var(--gray-700);
+  --select-option-icon-color: var(--gray-700);
+
+  border-bottom: 1px solid transparent;
+}
+
+.search-box:focus-within {
+  --form-control-color: var(--gray-700);
+  --form-control-padding-x: 0rem;
+}
+
+.search-box:focus-within input,
+.search-box:focus-within .option span:nth-child(2){
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.search-box:focus-within,
+.search-box .option {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.search-box:focus-within div:nth-child(2) {
+  border-bottom: 1px solid var(--primary);
+}
+
+.search-box:focus-within .clear-button{
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.search-box:focus-within div:nth-child(2) span,
+.search-box:focus-within .option span:first-child {
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.search-box:focus-within {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.search-box:focus-within div:nth-child(2) > * {
+  border-color: transparent;
+}
+
+.search-box:focus-within .select-menu {
+  color: var(--gray-500)
+}
+
+.search-box:focus-within .last-option {
+  position: relative;
+}
+.search-box:focus-within .last-option::after {
+  content: '';
+  left: 1rem;
+  right: 1rem;
+  position: absolute;
+  border-top: 1px solid var(--gray-300);
+}
diff --git a/design.config.js b/design.config.js
new file mode 100644
index 00000000..e83b2602
--- /dev/null
+++ b/design.config.js
@@ -0,0 +1,26 @@
+const path = require('path')
+
+const icons = ['magnify']
+
+const iconsRoot = path.join(
+  path.dirname(require.resolve('@mdi/svg/package.json')),
+  './svg'
+)
+
+const config = {
+  icons: {
+    path: iconsRoot,
+    files: icons,
+  },
+
+  output: {
+    path: path.join(__dirname, 'public/design'),
+    publicPath: '/design',
+    icons: {
+      files: 'icons',
+      sprite: 'icons.svg',
+    },
+  },
+}
+
+module.exports = config
diff --git a/next.config.js b/next.config.js
index c42ac8dd..4f07c05a 100644
--- a/next.config.js
+++ b/next.config.js
@@ -18,33 +18,38 @@ const nextConfig = {
     // This is the array of webpack rules that:
     // - is inside a 'oneOf' block
     // - contains a rule that matches 'file.css'
-    const styleRules = (
-      rules.find(
-        m => m.oneOf && m.oneOf.find(({ test: reg }) => reg.test('file.scss'))
-      ) || {}
-    ).oneOf
-    if (!styleRules) return config
-    // Find all the webpack rules that handle CSS modules
-    // Look for rules that match '.module.css'
-    // but aren't being used to generate
-    // error messages.
-    const cssModuleRules = [
-      styleRules.find(
-        ({ test: reg, use }) =>
-          reg.test('file.module.scss') && use.loader !== 'error-loader'
-      ),
-    ].filter(n => n) // remove 'undefined' values
-    // Add the 'localsConvention' config option to the CSS loader config
-    // in each of these rules.
-    cssModuleRules.forEach(cmr => {
-      // Find the item inside the 'use' list that defines css-loader
-      const cssLoaderConfig = cmr.use.find(({ loader }) =>
-        loader.includes('css-loader')
-      )
-      if (cssLoaderConfig && cssLoaderConfig.options) {
-        // Patch it with the new config
-        cssLoaderConfig.options.localsConvention = 'camelCase'
-      }
+    const suffixes = ['css', 'scss']
+    suffixes.forEach(suffix => {
+      const styleRules = (
+        rules.find(
+          m =>
+            m.oneOf &&
+            m.oneOf.find(({ test: reg }) => reg.test(`file.${suffix}`))
+        ) || {}
+      ).oneOf
+      if (!styleRules) return
+      // Find all the webpack rules that handle CSS modules
+      // Look for rules that match '.module.css'
+      // but aren't being used to generate
+      // error messages.
+      const cssModuleRules = [
+        styleRules.find(
+          ({ test: reg, use }) =>
+            reg.test(`file.module.${suffix}`) && use.loader !== 'error-loader'
+        ),
+      ].filter(n => n) // remove 'undefined' values
+      // Add the 'localsConvention' config option to the CSS loader config
+      // in each of these rules.
+      cssModuleRules.forEach(cmr => {
+        // Find the item inside the 'use' list that defines css-loader
+        const cssLoaderConfig = cmr.use.find(({ loader }) =>
+          loader.includes('css-loader')
+        )
+        if (cssLoaderConfig && cssLoaderConfig.options) {
+          // Patch it with the new config
+          cssLoaderConfig.options.localsConvention = 'camelCase'
+        }
+      })
     })
 
     Object.assign(config.resolve.alias, {
diff --git a/package-lock.json b/package-lock.json
index f18261e8..08eef5ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3000,6 +3000,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@mdi/svg": {
+      "version": "5.5.55",
+      "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.5.55.tgz",
+      "integrity": "sha512-6IMyytWUsCOOgKqxBronThVrtHDbxinDtfDFl6RL26vy/L+x5jWGqYSHbMEgamtquWOy8EAV0AJXUlUHp1tamg=="
+    },
     "@next/react-dev-overlay": {
       "version": "9.5.3",
       "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-9.5.3.tgz",
@@ -3142,6 +3147,77 @@
       "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-9.5.3.tgz",
       "integrity": "sha512-W3VKOqbg+4Kw+k6M/SODf+WIzwcx60nAemGV1nNPa/yrDtAS2YcJfqiswrJ3+2nJHzqefAFWn4XOfM0fy8ww2Q=="
     },
+    "@oacore/design": {
+      "version": "3.0.0",
+      "resolved": "https://npm.pkg.github.com/download/@oacore/design/3.0.0/bd677cd54be7517919f129e3cfb5376822866fcfc34f8d241acef6517a843e1b",
+      "integrity": "sha512-Srgc70t/EBvRlXypCFvUTZTuuS2KPnaCIoDwbMOH6yk3rSeT5Um50MT9QqwmQTcOr+Fhp72e/5SnoWgScklZhw==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@mdi/svg": "^5.5.55",
+        "@tippyjs/react": "^4.1.0",
+        "babel-plugin-add-react-displayname": "0.0.5",
+        "classnames": "^2.2.6",
+        "cosmiconfig": "^7.0.0",
+        "deepmerge": "^4.2.2",
+        "prop-types": "^15.7.2",
+        "sanitize.css": "^12.0.1",
+        "svgo": "^1.3.2",
+        "svgstore": "^3.0.0-2",
+        "yargs": "^15.4.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "cosmiconfig": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+          "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "import-fresh": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
+          "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
     "@oacore/eslint-config-base": {
       "version": "1.0.6",
       "resolved": "https://npm.pkg.github.com/download/@oacore/eslint-config-base/1.0.6/0a06345c103dbc45ce77b0075d0d5bcc204734b64819f4cef9bb4dbd375fe794",
@@ -3169,6 +3245,19 @@
       "integrity": "sha512-vTpvXlRNCd3amUo3wpCVfRzNob+wNjLCWA+sENO9jvM6A9kNMZbclyA+9Di5lMhr180IezIF1xpwsZNBpxC2UQ==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.4.tgz",
+      "integrity": "sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg=="
+    },
+    "@tippyjs/react": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.1.0.tgz",
+      "integrity": "sha512-g6Dpm46edr9T9z+BYxd/eJZa6QMFc4T4z5xrztxVlkti7AhNYf7OaE6b3Nh+boUZZ9wn8xkNq9VrQM5K4huwnQ==",
+      "requires": {
+        "tippy.js": "^6.2.0"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -3194,8 +3283,7 @@
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "@types/q": {
       "version": "1.5.4",
@@ -3822,6 +3910,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-plugin-add-react-displayname": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
+      "integrity": "sha1-M51M3be2X9YtHfnbn+BN4TQSK9U="
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -4345,6 +4438,106 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "cheerio": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-0.22.0.tgz",
+      "integrity": "sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=",
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.0",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash.assignin": "^4.0.9",
+        "lodash.bind": "^4.1.4",
+        "lodash.defaults": "^4.0.1",
+        "lodash.filter": "^4.4.0",
+        "lodash.flatten": "^4.2.0",
+        "lodash.foreach": "^4.3.0",
+        "lodash.map": "^4.4.0",
+        "lodash.merge": "^4.4.0",
+        "lodash.pick": "^4.2.1",
+        "lodash.reduce": "^4.4.0",
+        "lodash.reject": "^4.4.0",
+        "lodash.some": "^4.4.0"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+          "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+          "requires": {
+            "boolbase": "~1.0.0",
+            "css-what": "2.1",
+            "domutils": "1.5.1",
+            "nth-check": "~1.0.1"
+          }
+        },
+        "css-what": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+          "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
+        },
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "entities": "^1.1.1"
+          }
+        },
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+        },
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "domutils": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+          "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        },
+        "htmlparser2": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+          "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+          "requires": {
+            "domelementtype": "^1.3.1",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^3.1.1"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -4583,6 +4776,31 @@
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
       "dev": true
     },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
     "clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -5298,6 +5516,11 @@
         "ms": "^2.1.1"
       }
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
     "decko": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decko/-/decko-1.2.0.tgz",
@@ -5333,6 +5556,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "default-user-agent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-user-agent/-/default-user-agent-1.0.0.tgz",
@@ -6716,6 +6944,11 @@
       "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==",
       "dev": true
     },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
     "get-own-enumerable-property-symbols": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
@@ -7553,8 +7786,7 @@
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
     },
     "is-glob": {
       "version": "4.0.1",
@@ -7753,6 +7985,11 @@
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -7851,8 +8088,7 @@
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
     },
     "link-types": {
       "version": "1.1.0",
@@ -8123,6 +8359,16 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.assignin": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz",
+      "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI="
+    },
+    "lodash.bind": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-4.2.1.tgz",
+      "integrity": "sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU="
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -8134,6 +8380,31 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
+    "lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
+    },
+    "lodash.filter": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.filter/-/lodash.filter-4.6.0.tgz",
+      "integrity": "sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4="
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
+    },
+    "lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
+    },
+    "lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8142,8 +8413,27 @@
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM="
+    },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
+    "lodash.reject": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reject/-/lodash.reject-4.6.0.tgz",
+      "integrity": "sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU="
+    },
+    "lodash.some": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
+      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0="
     },
     "lodash.sortby": {
       "version": "4.7.0",
@@ -9650,7 +9940,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       },
@@ -9658,8 +9947,7 @@
         "callsites": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-          "dev": true
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
         }
       }
     },
@@ -11257,6 +11545,16 @@
       "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
       "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs="
     },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
     "resolve": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
@@ -11498,6 +11796,11 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sanitize.css": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-12.0.1.tgz",
+      "integrity": "sha512-QbusSBnWHaRBZeTxsJyknwI0q+q6m1NtLBmB76JfW/rdVN7Ws6Zz70w65+430/ouVcdNVT3qwrDgrM6PaYyRtw=="
+    },
     "sass": {
       "version": "1.26.9",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.9.tgz",
@@ -11573,6 +11876,11 @@
         "randombytes": "^2.1.0"
       }
     },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -12056,7 +12364,6 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
       "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-      "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -12066,20 +12373,17 @@
         "ansi-regex": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-          "dev": true
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "emoji-regex": {
           "version": "8.0.0",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
         },
         "strip-ansi": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
           "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
           "requires": {
             "ansi-regex": "^5.0.0"
           }
@@ -12418,6 +12722,15 @@
         }
       }
     },
+    "svgstore": {
+      "version": "3.0.0-2",
+      "resolved": "https://registry.npmjs.org/svgstore/-/svgstore-3.0.0-2.tgz",
+      "integrity": "sha512-qiR9MvGgCWLuuspa9wFkafE1BrwrtsoFwhsWHt6zFK7vq3TcYKPCKFOVDBa0rAflF7/GI3SFIE+h38l8vFCFgQ==",
+      "requires": {
+        "cheerio": "^0.22.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -12765,6 +13078,14 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tippy.js": {
+      "version": "6.2.6",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.2.6.tgz",
+      "integrity": "sha512-0tTL3WQNT0nWmpslhDryRahoBm6PT9fh1xXyDfOsvZpDzq52by2rF2nvsW0WX2j9nUZP/jSGDqfKJGjCtoGFKg==",
+      "requires": {
+        "@popperjs/core": "^2.4.4"
+      }
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -13607,6 +13928,11 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
     "which-pm-runs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
@@ -13640,7 +13966,6 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -13650,14 +13975,12 @@
         "ansi-regex": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-          "dev": true
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "ansi-styles": {
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
           "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
           "requires": {
             "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
@@ -13667,7 +13990,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -13675,14 +13997,12 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "strip-ansi": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
           "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
           "requires": {
             "ansi-regex": "^5.0.0"
           }
@@ -13726,8 +14046,7 @@
     "yaml": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
-      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
-      "dev": true
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
     },
     "yaml-frontmatter-loader": {
       "version": "0.1.0",
@@ -13745,6 +14064,78 @@
         "js-yaml": "^3.10.0",
         "loader-utils": "^1.1.0"
       }
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e73e9991..454389ba 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "prettier": "^1.19.1"
   },
   "dependencies": {
+    "@oacore/design": "^3.0.0",
     "bootstrap": "^4.5.0",
     "core-js": "^3.6.5",
     "cssnano": "^4.1.10",
@@ -71,7 +72,7 @@
     "test-staging": "blc https://${CORE_STAGING_AREA}core.ac.uk -ro --exclude='/browse' --exclude='/search' --exclude='/public'",
     "test": "npm run test-dev",
     "dev": "next",
-    "build": "next build",
+    "build": "node ./node_modules/.bin/design build icons && next build",
     "export": "next build && next export",
     "start": "next start"
   }
diff --git a/pages/_app.jsx b/pages/_app.jsx
index 7b984721..fe1e2e13 100644
--- a/pages/_app.jsx
+++ b/pages/_app.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import Router from 'next/router'
 import withGA from 'next-ga'
+import '@oacore/design/lib/index.css'
 
 import {
   isCookiesAccepted,
diff --git a/pages/index.jsx b/pages/index.jsx
index 5106ebea..6464b444 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -85,7 +85,9 @@ const IndexPage = () => (
         <SearchForm
           action="/search"
           name="q"
-          placeholder={patchStats(page.searchPlaceholder, page.statistics)}
+          label={patchStats(page.searchPlaceholder, page.statistics)}
+          placeholder="e.g. article title or author name"
+          variant="pure"
         />
         <SearchIntro>
           <Markdown>{page.covid19Notice}</Markdown>