diff --git a/packages/docusaurus-theme/src/components/figma_embed/index.tsx b/packages/docusaurus-theme/src/components/figma_embed/index.tsx
new file mode 100644
index 00000000000..9522b55ac77
--- /dev/null
+++ b/packages/docusaurus-theme/src/components/figma_embed/index.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { IframeHTMLAttributes, useMemo } from 'react';
+import { useEuiMemoizedStyles, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+export interface FigmaEmbedProps
+  extends IframeHTMLAttributes<HTMLIFrameElement> {
+  url: string;
+}
+
+const getFigmaEmbedStyles = (euiTheme: UseEuiTheme) => ({
+  wrapper: css`
+    border: 1px solid ${euiTheme.euiTheme.colors.lightShade};
+    border-radius: ${euiTheme.euiTheme.size.s};
+    margin: ${euiTheme.euiTheme.size.xl} 0;
+  `,
+  iframe: css`
+    border-radius: ${euiTheme.euiTheme.size.s};
+    display: block;
+  `,
+});
+
+export const FigmaEmbed = ({ url, ...rest }: FigmaEmbedProps) => {
+  const baseUrl = useBaseUrl('/', { absolute: true });
+  const styles = useEuiMemoizedStyles(getFigmaEmbedStyles);
+
+  const src = useMemo(() => {
+    const params = new URLSearchParams({
+      embed_host: 'eui.elastic.co',
+      embed_origin: baseUrl,
+      url,
+    });
+
+    return `https://www.figma.com/embed?${params.toString()}`;
+  }, [url, baseUrl]);
+
+  return (
+    <div css={styles.wrapper}>
+      <iframe
+        {...rest}
+        css={styles.iframe}
+        height="450"
+        width="100%"
+        src={src}
+        allowFullScreen
+      />
+    </div>
+  );
+};
diff --git a/packages/docusaurus-theme/src/components/icon/index.ts b/packages/docusaurus-theme/src/components/icon/index.ts
new file mode 100644
index 00000000000..2b5b8f54f34
--- /dev/null
+++ b/packages/docusaurus-theme/src/components/icon/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiIcon } from '@elastic/eui';
+
+export const Icon = EuiIcon;
diff --git a/packages/docusaurus-theme/src/theme/MDXComponents/index.ts b/packages/docusaurus-theme/src/theme/MDXComponents/index.ts
index 2cec1d9100e..3db17981ea2 100644
--- a/packages/docusaurus-theme/src/theme/MDXComponents/index.ts
+++ b/packages/docusaurus-theme/src/theme/MDXComponents/index.ts
@@ -8,10 +8,14 @@
 
 import OriginalMDXComponents from '@theme-init/MDXComponents';
 import { Badge } from '../../components/badge';
+import { Icon } from '../../components/icon';
+import { FigmaEmbed } from '../../components/figma_embed';
 
 const MDXComponents = {
   ...OriginalMDXComponents,
   Badge,
+  FigmaEmbed,
+  Icon,
 };
 
 export default MDXComponents;
diff --git a/packages/website/docs/patterns/error_messages/_category_.yml b/packages/website/docs/patterns/error_messages/_category_.yml
new file mode 100644
index 00000000000..50e41420748
--- /dev/null
+++ b/packages/website/docs/patterns/error_messages/_category_.yml
@@ -0,0 +1,4 @@
+label: Error messages
+link:
+  type: doc
+  id: patterns_error_messages_overview
diff --git a/packages/website/docs/patterns/error_messages/error_banners.mdx b/packages/website/docs/patterns/error_messages/error_banners.mdx
new file mode 100644
index 00000000000..b8957f3eef9
--- /dev/null
+++ b/packages/website/docs/patterns/error_messages/error_banners.mdx
@@ -0,0 +1,6 @@
+---
+id: patterns_error_messages_banners
+slug: /patterns/error-messages/error-banners
+---
+
+# Error banner
diff --git a/packages/website/docs/patterns/error_messages/error_pages.mdx b/packages/website/docs/patterns/error_messages/error_pages.mdx
new file mode 100644
index 00000000000..d0270df72cf
--- /dev/null
+++ b/packages/website/docs/patterns/error_messages/error_pages.mdx
@@ -0,0 +1,6 @@
+---
+id: patterns_error_messages_error_pages
+slug: /patterns/error-messages/error-pages
+---
+
+# Error page
diff --git a/packages/website/docs/patterns/error_messages/examples.mdx b/packages/website/docs/patterns/error_messages/examples.mdx
new file mode 100644
index 00000000000..9612ed15da3
--- /dev/null
+++ b/packages/website/docs/patterns/error_messages/examples.mdx
@@ -0,0 +1,109 @@
+---
+id: patterns_error_messages_examples
+slug: /patterns/error-messages/examples
+---
+
+# Error examples
+
+## 400: Bad request
+The server can’t process the information because it’s not complete or is in the wrong format.
+
+Use the [error page pattern](./error_pages.mdx) for `400` errors.
+
+Good example:
+> **You must fix the following**
+> Your email must contain an @ character
+> The date you registered must be in the past
+
+## 401: Unauthorized
+Do not use error pages for authentication errors (`401` error codes). Instead, if the user is logged out automatically, actively redirect them to the login page when it happens and explain why they were logged out using the [error banner pattern](./error_banners.mdx).
+
+## 403: Forbidden
+The user doesn’t have permissions to do what they’re trying to do.
+
+Use the [error page pattern](./error_pages.mdx) for `403` errors.
+
+Good example:
+> **You can’t access this page**
+> You don’t have permission. If you think this is a mistake, contact your administrator: [admin@example.co](#).
+
+## 404: Not found
+The page is missing. This is when the user typed a bad URL or clicked on a broken link. It’s different from `410 Gone` where we know that the page has been deleted.
+
+Use the [error page pattern](./error_pages.mdx) for `404` errors.
+
+Good example:
+> **We can’t find the page you’re looking for**
+> If you typed in the URL, check it’s correct. If you clicked a link, contact your administrator and tell them it’s broken: [admin@example.co](#).
+
+## 408: Request timeout
+The server did not respond after an acceptable amount of time.
+
+Use the [error page pattern](./error_pages.mdx) for `408` errors.
+
+Good example:
+> **The page took too long to load**
+> This is probably temporary. Wait 1 minute and try again. If this keeps happening, contact your administrator: admin@example.co.
+
+## 410: Gone
+Similar to `404`, but instead of being missing we know it’s been deleted.
+
+Use the [error page pattern](./error_pages.mdx) for `404` errors.
+
+Good example:
+> **This page has been permanently deleted**
+> You can go back, or go home.
+
+## 429: Too many requests
+The user has tried too many actions in a short space of time.
+
+Use the [error page pattern](./error_pages.mdx) for `429` errors.
+
+Good example:
+> **We’ve temporary limited what you can do**
+> We have a limit of 30 actions per minute, per user. Wait 1 minute and then try again. If this keeps happening contact your administrator: [admin@example.co](#).
+
+## 500: Internal server error
+A generic status code, usually used when the application crashes for some unknown reason. It is acceptable to apologize when handling a `500` error.
+
+Use the [error page pattern](./error_pages.mdx) for `500` errors.
+
+Good example:
+> **Sorry, there’s a problem with the application**
+> We aren’t sure what went wrong. If this keeps happening, contact your administrator: admin@example.co with the error code: 0x000345.
+
+## 502: Bad gateway
+The server reached out to another system and got a response, but could not complete the action for some reason..
+
+Use the [error banner pattern](./error_banners.mdx) for `502` errors.
+
+Good example:
+> **We could not save your data to AWS**
+> We don’t know what went wrong. You can try again. If this keeps happening, contact your administrator: [admin@example.co](#).
+
+## 503: Service unavailable
+The server can’t do what you asked it to do. It may be overloaded or offline for maintenance. It is acceptable to apologize when handling a `503` error.
+
+Use the [error page pattern](./error_pages.mdx) for `503` errors.
+
+Good example:
+> **Sorry, there’s a problem with the application**
+> It might just be busy. Wait for 1 minute and try again. If this keeps happening, contact your administrator: [admin@example.co](#).
+
+## 504: Gateway timeout
+The server reached out to another system, but the other system took too long to respond.
+
+Use the [error banner pattern](./error_banners.mdx) for `504` errors.
+
+Good example:
+> **We could not save your data to AWS**
+> AWS took too long to respond. It might just be busy. Wait 1 minute and try again. If this keeps happening, contact your administrator: [admin@example.co](#).
+
+## 507: Insufficient storage
+The storage space on the server has run out.
+
+Use the [error banner pattern](./error_banners.mdx) for `507` errors.
+
+Good example:
+> **We could not save your dashboard**
+> Your storage is full. You can delete some data and try again, or you can contact your administrator to upgrade your storage: [admin@example.co](#).
diff --git a/packages/website/docs/patterns/error_messages/help_users_avoid_errors.mdx b/packages/website/docs/patterns/error_messages/help_users_avoid_errors.mdx
new file mode 100644
index 00000000000..828131cc60c
--- /dev/null
+++ b/packages/website/docs/patterns/error_messages/help_users_avoid_errors.mdx
@@ -0,0 +1,6 @@
+---
+id: patterns_error_messages_avoid
+slug: /patterns/error-messages/help-users-avoid-errors
+---
+
+# Help users avoid errors
diff --git a/packages/website/docs/patterns/error_messages/overview.mdx b/packages/website/docs/patterns/error_messages/overview.mdx
new file mode 100644
index 00000000000..2c37683c3db
--- /dev/null
+++ b/packages/website/docs/patterns/error_messages/overview.mdx
@@ -0,0 +1,63 @@
+---
+id: patterns_error_messages_overview
+slug: /patterns/error-messages
+---
+
+# Error messages
+
+## What is an error?
+An error happens when the system couldn’t do something it was trying to do.
+
+There are lots of reasons why errors happen, but they’re not always obvious to the user. It could be because instructions were not clear, data is missing, or there are bugs in the application.
+
+We should do everything we can to [help users to avoid errors](./help_users_avoid_errors.mdx). When an error occurs, we **must** tell the user. You should tell them exactly what went wrong, and any actions they can take to fix it.
+
+Missing or badly written error messages can be frustrating, time consuming and difficult to recover from. They can also make the user believe the task is more complex than it is, and can give the impression that our product is low quality.
+
+We have written guidance on <a id="patternsErrorsWriting">how to write good error messages</a>.
+
+### Primary errors
+Primary errors are as bad as it gets. They block the user from completing the current task, and we can’t even show them the page they expected. For example, when a user does not have permission to view a page, error code 403. A primary error should redirect the user to an error page.
+
+Read more about the <a id="patternsErrorPage">error page pattern</a>.
+
+### Secondary errors
+Secondary errors happen when there is an error which blocks the current task, but we can still show them the page they expected. For example, an API or cluster that is not responding, error code `504`. A secondary error should reload the page without the user losing any information, and display an error banner.
+
+Read more about the <a id="patternsErrorBanner">error banner pattern</a>.
+
+### Validation errors
+Validation errors happen when the user enters information in a different format than expected, blocking the current task, error code `400`. Validation errors should reload the page without the user losing any information, display an error summary, and highlight any fields which caused errors.
+
+Read more about the <a id="patternsErrorValidation">validation errors pattern</a>.
+
+### Unrelated errors (Warnings)
+Unrelated errors are warnings. They don’t impact the user right now, but they’re useful to know. For example, there may be an error in another part of the application, but it’s not blocking the current task.
+
+Read more about the <a id="patternsErrorWarning">error warning pattern</a>.
+
+## Error codes
+When an error happens, there is usually an error code provided by the client (browser) or the server, which can help us to explain to the user what went wrong.
+
+It can be tempting to just tell the user, ‘hey, error 504’. But, most users won’t know what that means. Rather than just quoting the error code, we should translate what it means to the user in plain language.
+
+See examples for common error codes:
+- [400: Bad request](./examples#400-bad-request)
+- [401: Unauthorized](./examples#401-unauthorized)
+- [403: Forbidden](./examples#403-forbidden)
+- [404: Not found](./examples#404-not-found)
+- [408: Request timeout](./examples#408-request-timeout)
+- [410: Gone](./examples#410-gone)
+- [429: Too many requests](./examples#429-too-many-requests)
+- [500: Internal server error](./examples#500-internal-server-error)
+- [502: Bad gateway](./examples#502-bad-gateway)
+- [503: Service unavailable](./examples#503-service-unavailable)
+- [504: Gateway timeout](./examples#504-gateway-timeout)
+- [507: Insufficient storage](./examples#507-insufficient-storage)
+
+
+You can read in-depth about all the different [client errors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#client_error_responses) and [server errors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#server_error_responses) on [MDN Web Docs](https://developer.mozilla.org/en-US/).
+
+## Related patterns and documentation
+- <a id="patternsConfirmationPrompts">Confirmation prompts</a>
+- <a id="patternsHelpContent" section="fields-and-settings">Content patterns</a>
diff --git a/packages/website/docs/patterns/help_content.mdx b/packages/website/docs/patterns/help_content.mdx
new file mode 100644
index 00000000000..badd22c8b5f
--- /dev/null
+++ b/packages/website/docs/patterns/help_content.mdx
@@ -0,0 +1,168 @@
+---
+id: patterns_help_content
+slug: /patterns/help-content
+---
+
+# Help content
+
+Help content includes any copy added to the product experience to help users understand a concept or complete a task. It can be definitions, context, explanations, hints, references, and more.
+
+## Considering help content
+
+Before thinking about how to display and write help content, it's important to consider the messaging, importance, scope and role of that content in the user experience.
+
+- **The right content at the right time**. Focus on what users need to reach their next step. They don't need to know everything from the start. If anything, too much information will confuse them. Consider what you're sure they know, and what they may not know that they need.
+- **Be intentional**. Don't push everything to the user's face. While some information is absolutely critical, some might be useful for specific cases or for a particular type of users only. Some might even just be additional context that would digress from the user's flow. Consider letting users choose to consume or not that non-critical, yet useful, content through a simple and recognizable interaction.
+- **Anticipate errors and questions**. Don't wait for errors or questions to provide guidance. We help users avoid them, and when they happen, [we're here](./error_messages/overview.mdx) for them.
+
+
+## Short definitions
+Defining terms is particularly useful in onboarding experiences or in the first few steps that users go through when using a feature.
+
+<FigmaEmbed url="https://www.figma.com/file/1ryJM0lhbUopALKHwPUhFC/Help-content?type=design&node-id=6-343&mode=design&t=vZqFprizypJOJryZ-0" />
+
+**Interaction**
+- Question mark icon <Icon type="questionInCircle" title="question mark in a circle" /> with the `primary` color directly following the term to explain.
+- On hover, a [tooltip](https://eui.elastic.co/#/display/tooltip) appears.
+- Use it anywhere needed: navigation, titles, or inline.
+
+**Tooltip content**
+- Body
+  - Less than 40 words (that’s about 2 short sentences).
+    > If you need more, you are likely [explaining a concept](#concepts) instead.
+  - Sentence case.
+  - Full punctuation.
+  - Start the definition with the full term you are defining to leave no ambiguity.
+  - Audience level: beginners.
+  - Don’t include interactions inside of the tooltip (like links). If you need some or rich formatting, you're likely not just providing a simple definition and are instead [explaining a concept](#concepts).
+- No header, title, footer or call to action.
+
+
+## Concepts
+Concepts are more than quick definitions. They help users understand how something works, why they should or shouldn't use something, and can include resources or links with further details.
+
+### For a specific setting or group
+
+<FigmaEmbed url="https://www.figma.com/file/1ryJM0lhbUopALKHwPUhFC/Help-content?type=design&node-id=1-192&mode=design&t=vZqFprizypJOJryZ-0" title="Help popover with additional context" />
+
+
+**Interaction**
+- Information icon <Icon type="iInCircle" title="information icon" /> with the `primary` color directly following the setting to explain.
+- On click, a [popover](https://eui.elastic.co/#/layout/popover) appears. It is dismissed by a second click outside of the popover area.
+
+**Popover content**
+- Header _required_
+  - Be explicit about what users are about to read.
+  - Sentence case.
+  - No punctuation.
+- Body _required_
+  - If necessary, structure the content into sections. It should be no more than 2 to 3 short paragraphs. If the content is longer than that, use a flyout to avoid disrupting the user from their main task.
+  - Format keywords, code blocks, input examples, links, etc.
+  - You can add images or gifs.
+  - Sentence case.
+  - Full punctuation.
+  - Audience level: beginners.
+- Footer _optional_
+  - For any call to action.
+
+### For an entire page or app
+
+<FigmaEmbed url="https://www.figma.com/file/1ryJM0lhbUopALKHwPUhFC/Help-content?type=design&node-id=6-278&mode=design&t=vZqFprizypJOJryZ-0" title="Help flyout with additional information" />
+
+_Note: the formatting of the flyout here is just an example._
+
+
+**Interaction**
+- Use a [Flyout](https://eui.elastic.co/#/layout/flyout), in `push` mode if possible, as overlays can be disruptive.
+- Locate the interaction to open the flyout somewhere visible and that matches with the context of the content:
+  - If that is for an entire app, use the help button from the header
+  - If that is for a significant section or area of the UI, use an explicit link near the top of the area or section or a button.
+- Add an explicit **Close** action to the footer as a way to dismiss the flyout.
+
+**Flyout content**
+- Header
+  - Action-oriented title
+  - Sentence case
+  - No punctuation
+- Body
+  - Structure content to help users scan.
+  - Keep it short, it doesn't have to be the fully-detailed documentation. Keep the most important to keep it readable.
+  - Format keywords, code blocks, input examples, etc.
+  - You can add images or gifs.
+  - Sentence case.
+  - Full punctuation.
+  - Audience: all levels.
+- Footer
+  - Call to action to **Close** the flyout.
+  - If necessary, add another call to action to read the full documentation.
+
+## Fields and settings
+Several mechanisms exist to provide additional help around a specific field. All of these mechanisms are **optional**.
+
+<FigmaEmbed url="https://www.figma.com/file/1ryJM0lhbUopALKHwPUhFC/Help-content?type=design&node-id=60-6885&mode=design&t=vZqFprizypJOJryZ-0" title="Different types of help for form controls and fields" />
+
+
+**Hint text (shows below a field)**
+- Use it for explaining:
+  - the accepted syntax, the format, range or number of accepted values, or how to enter multiple values if needed.
+  - the consequences of changing the value or enabling the setting if they're critical to know.
+- Hint text should be short. If the text is more than 2 lines, there might be an underlying design issue, or you need a different help mechanism like a [syntax reference](#syntax-references).
+
+**Placeholder text**
+- Important help should show outside of a field, not as placeholder, as the information will disapear as soon as users start typing.
+- Use it for input examples.
+- Exception: in search and filter bars, use it to guide users on what they can search for or filter.
+- Defaults are different from placeholders and shouldn't look like placeholders. They should pre-populate the field.
+
+**Additional information**
+
+Add a tooltip or popover next to the label of a field to provide additional context on the concept or to provide usage guidance. For example, "When should I use this?".
+
+<FigmaEmbed url="https://www.figma.com/file/1ryJM0lhbUopALKHwPUhFC/Help-content?type=design&node-id=617-386&mode=design&t=gMQHqaXMvQB3A4BX-0" title="Additional information" />
+
+
+## Syntax references
+Providing reference docs directly in the product can help users stay focused on filling any field requiring functions or advanced syntax.
+
+<FigmaEmbed url="https://www.figma.com/file/1ryJM0lhbUopALKHwPUhFC/Help-content?type=design&node-id=65-56594&mode=design&t=o9mXncfMtIGAHvEG-0" title="Syntax reference best practices" />
+
+**Interaction**
+- Use the <Icon type="documentation" title="book icon" /> icon with the `primary` color to indicate a reference. When possible, add an explicit link text.
+- Locate the interaction for opening the reference right next to or under the field, depending on the UI layout.
+- On click, a [Flyout](https://eui.elastic.co/#/layout/flyout) in `push` mode or a [popover](https://eui.elastic.co/#/layout/popover) opens.
+- For popovers, clicking outside closes the help.
+- For flyouts, add an explicit Close button to the footer.
+
+
+**Reference content**
+- Header
+  - Make the scope of the reference content clear to users.
+- Body
+  - Structure content to help users scan. Use sections or pages depending on the size of the reference.
+  - Format the content so that code samples and input text are easy to identify and copy.
+  - Sentence case.
+  - Full punctuation.
+- Functionality
+  - For large sets of functions, make it browsable using navigation and a search or nav filter.
+
+
+## Legends for graphs and tables
+Elastic visualizations often show acronyms or depths of details that require legends.
+
+<FigmaEmbed url="https://www.figma.com/file/1ryJM0lhbUopALKHwPUhFC/Help-content?type=design&node-id=121-56743&mode=design&t=o9mXncfMtIGAHvEG-0" title="Legend and definitions for visualisations" />
+
+**Interaction**
+- Use an explicit text link with the <Icon type="list" title="list icon" /> icon with the `primary` color to indicate a list of definitions.
+- This link must be within the context of what it applies to, generally near the upper right corner of the visualization or UI section.
+- On click, a [popover](https://eui.elastic.co/#/layout/popover) appears.
+
+**Legend content**
+- Header
+  - Use the same word as the link text used to open the popover.
+- Body
+  - Format the content of the popover in a way that helps users scan. It can be a simple definition list, or a table with one icon and definition per row, etc.
+  - For acronyms, make sure to repeat them as they appear on the visualization, acommpanied by their full form.
+
+## Other forms of in-product help
+More forms of indirect ways to help users exist in the product experience and have their own dedicated patterns. Related patterns:
+* [Error messages](./error_messages/overview.mdx)
diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
index bdec4dbc64a..5529f51b2df 100644
--- a/packages/website/docusaurus.config.ts
+++ b/packages/website/docusaurus.config.ts
@@ -71,6 +71,12 @@ const config: Config = {
           position: 'left',
           label: 'Documentation',
         },
+        {
+          type: 'docSidebar',
+          sidebarId: 'patternsSidebar',
+          position: 'left',
+          label: 'Patterns',
+        },
         {
           href: 'https://github.com/elastic/eui',
           label: 'GitHub',
diff --git a/packages/website/sidebars.ts b/packages/website/sidebars.ts
index d06a91831a4..32ad60b3da3 100644
--- a/packages/website/sidebars.ts
+++ b/packages/website/sidebars.ts
@@ -20,6 +20,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  */
 const sidebars: SidebarsConfig = {
   rootSidebar: [{type: 'autogenerated', dirName: '.'}],
+  patternsSidebar: [{ type: 'autogenerated', dirName: 'patterns' }],
 };
 
 export default sidebars;