diff --git a/astro.config.mjs b/astro.config.mjs
index ad6900c49..707a2f54d 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -36,6 +36,7 @@ export default defineConfig({
         tabNameAutoImport,
         tabContentAutoImport,
         "@components/Aside.astro",
+        "@components/Callout.astro",
       ],
     }),
     // Enable Preact to support Preact JSX components.
diff --git a/src/components/Callout.astro b/src/components/Callout.astro
new file mode 100644
index 000000000..823e6c17f
--- /dev/null
+++ b/src/components/Callout.astro
@@ -0,0 +1,99 @@
+---
+export interface Props {
+  type?: "info" | "note" | "tip" | "warning" | "important" | "seealso";
+  title?: string;
+}
+
+const { type = "info", title = `${type}` } = Astro.props as Props;
+
+// SVG icon paths based on GitHub Octicons
+const icons: Record<
+  NonNullable<Props["type"]>,
+  { viewBox: string; d: string }
+> = {
+  note: {
+    viewBox: "0 0 24 24",
+    d: "M12.75 8.5a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM14 16h-4v-1h1.5v-3H10v-1h2.5v4H14v1zM12 3c-4.962 0-9 4.038-9 9 0 4.963 4.038 9 9 9 4.963 0 9-4.037 9-9 0-4.962-4.037-9-9-9z",
+  },
+  info: {
+    viewBox: "0 0 24 24",
+    d: "M12.75 8.5a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM14 16h-4v-1h1.5v-3H10v-1h2.5v4H14v1zM12 3c-4.962 0-9 4.038-9 9 0 4.963 4.038 9 9 9 4.963 0 9-4.037 9-9 0-4.962-4.037-9-9-9z",
+  },
+  tip: {
+    viewBox: "0 0 24 24",
+    d: "M11.031 15.739l-2.884-2.886.707-.707 2.115 2.116 5.149-6.085.764.645-5.851 6.917zM12 3a9 9 0 100 18 9 9 0 000-18z",
+  },
+  warning: {
+    viewBox: "0 0 24 24",
+    d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9.5 3.5V15h1v1h-1v-.5zm1-2.5V8h-1v5h1z",
+  },
+  important: {
+    viewBox: "0 0 24 24",
+    d: "M12.75 16.5a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM11.5 14h1V9h-1v5zm9.252 3.636l-7.366-13.65C13.047 3.359 12.543 3 12 3c-.543.001-1.048.36-1.386.987L3.27 17.638c-.317.589-.34 1.19-.067 1.649.271.453.8.713 1.453.713h14.711c.655 0 1.185-.261 1.455-.714.274-.46.248-1.061-.069-1.65z",
+  },
+  seealso: {
+    viewBox: "0 0 24 24",
+    d: "M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z",
+  },
+};
+const { viewBox, d } = icons[type];
+---
+
+<aside
+  aria-label={type}
+  class:list={[
+    "relative flex rounded-[12px] items-baseline",
+    {
+      "bg-primary": type === "note",
+      "bg-neutral": type === "info",
+      "bg-warning": type === "important",
+      "bg-negative": type === "warning",
+      "bg-success": type === "seealso" || type === "tip",
+    },
+  ]}
+>
+  <div class:list={["pl-[16px] pr-[12px] pt-[16px] pb-0 block"]}>
+    <div class:list={["inline-flex align-middle"]}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={viewBox}
+        width={24}
+        height={24}
+        class:list={[
+          "w-[24px] h-[24px]",
+          {
+            "text-icons-primary": type === "note",
+            "text-icons-neutral": type === "info",
+            "text-icons-warning": type === "important",
+            "text-icons-negative": type === "warning",
+            "text-icons-success": type === "seealso" || type === "tip",
+          },
+        ]}
+      >
+        <path fill="currentColor" fill-rule="evenodd" d={d}></path>
+      </svg>
+    </div>
+  </div>
+  <div
+    class:list={[
+      "flex flex-col flex-grow items-baseline pl-0 pt-[16px] pr-[16px] pb-[8px]",
+    ]}
+  >
+    <span
+      class:list={[
+        "mb-[8px] font-medium tracking-normal leading-[20px] text-[14px]",
+        {
+          "text-headers-primary": type === "note",
+          "text-headers-neutral": type === "info",
+          "text-headers-warning": type === "important",
+          "text-headers-negative": type === "warning",
+          "text-headers-success": type === "seealso" || type === "tip",
+        },
+      ]}>{title}</span
+    >
+    <slot />
+  </div>
+</aside>
+
+<style>
+</style>
diff --git a/src/content/docs/en/kitchen-sink/index.mdx b/src/content/docs/en/kitchen-sink/index.mdx
index 6ac9abf84..8d8cdb184 100644
--- a/src/content/docs/en/kitchen-sink/index.mdx
+++ b/src/content/docs/en/kitchen-sink/index.mdx
@@ -13,79 +13,79 @@ Callouts are `<aside>` components which display additional information in visual
 
 ### Props
 
-| Prop    | Data type | Values                                                                                                                                             | Required               |
-| ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| `type`  | String    | <ul><li><code>note</code></li><li><code>tip</code></li><li><code>caution</code></li><li><code>danger</code></li><li><code>seealso</code></li></ul> | No. Defaults to `note` |
-| `title` | String    | The title of the callout                                                                                                                           | No. Defaults to `type` |
+| Prop    | Data type | Values                                                                                                                                                                          | Required               |
+| ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| `type`  | String    | <ul><li><code>info</code></li><li><code>note</code></li><li><code>tip</code></li><li><code>warning</code></li><li><code>important</code></li><li><code>seealso</code></li></ul> | No. Defaults to `info` |
+| `title` | String    | The title of the callout                                                                                                                                                        | No. Defaults to `type` |
 
 ### Examples
 
 #### Note callout
 
 ```mdx
-<Aside type="note" title="A note callout">
+<Callout type="note" title="sA note callout">
    This is a *note* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 ```
 
-<Aside type="note" title="A note callout">
+<Callout type="note" title="A note callout">
    This is a *note* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 
 #### Tip callout
 
 ```mdx
-<Aside type="tip" title="A tip callout">
+<Callout type="tip" title="A tip callout">
    This is a *tip* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 ```
 
-<Aside type="tip" title="A tip callout">
+<Callout type="tip" title="A tip callout">
    This is a *tip* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 
-#### Caution callout
+#### Warning callout
 
 ```mdx
-<Aside type="caution" title="A caution callout">
-   This is a *caution* callout. It **renders**
+<Callout type="warning" title="A warning callout">
+   This is a *warning* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 ```
 
-<Aside type="caution" title="A caution callout">
-   This is a *caution* callout. It **renders**
+<Callout type="warning" title="A warning callout">
+   This is a *warning* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 
 #### Danger callout
 
 ```mdx
-<Aside type="danger" title="A danger callout">
-   This is a *danger* callout. It **renders**
+<Callout type="important" title="A important callout">
+   This is a *important* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 ```
 
-<Aside type="danger" title="A danger callout">
-   This is a *danger* callout. It **renders**
+<Callout type="important" title="A important callout">
+   This is a *important* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 
 #### Seealso callout
 
 ```mdx
-<Aside type="seealso" title="A seealso callout">
+<Callout type="seealso" title="A seealso callout">
    This is a *seealso* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
 ```
 
-<Aside type="seealso" title="A seealso callout">
+<Callout type="seealso" title="A seealso callout">
    This is a *seealso* callout. It **renders**
    [Markdown](https://www.markdownguide.org/).
-</Aside>
+</Callout>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f5368a76a..8e2d7e2bf 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,8 +1,32 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+    backgroundColor: (theme) => ({
+      ...theme("colors"),
+      success: "#d4f8f2",
+      primary: "#ddebf9",
+      neutral: "#eceef4",
+      negative: "#ffe8ee",
+      warning: "#f9ebd6",
+    }),
+    colors: {
+      headers: {
+        success: "#04585c",
+        primary: "#0c2663",
+        neutral: "#21253a",
+        negative: "#660835",
+        warning: "#664b29",
+      },
+      icons: {
+        success: "rgb(6, 166, 147);",
+        primary: "rgb(31, 81, 217)",
+        neutral: "rgb(86, 92, 120)",
+        negative: "rgb(203, 55, 99)",
+        warning: "rgb(193, 134, 47)",
+      },
+    },
+  },
+  plugins: [],
+};