diff --git a/libs/web-components/src/components/accordion/Accordion.svelte b/libs/web-components/src/components/accordion/Accordion.svelte
index 12c70b975..4fefe5d9b 100644
--- a/libs/web-components/src/components/accordion/Accordion.svelte
+++ b/libs/web-components/src/components/accordion/Accordion.svelte
@@ -58,7 +58,7 @@
     validateRequired("GoAAccordion", { heading });
     validateHeadingSize(headingsize);
     ensureSlotExists(_slotEl);
-    
+
     _headingSlotChildren = getHeadingChildren();
     _accordionId = `accordion-${generateRandomId()}`;
   });
@@ -117,8 +117,8 @@
         <goa-icon
           type="chevron-forward"
           fillcolor={_hovering
-      ? "var(--goa-color-interactive-hover)"
-      : "var(--goa-color-interactive-default)"}
+            ? "var(--goa-accordion-icon-color-hover, var(--goa-color-interactive-hover))"
+            : "var(--goa-accordion-icon-color, var(--goa-color-interactive-default))"}
         ></goa-icon>
       {/if}
 
@@ -142,8 +142,8 @@
         <goa-icon
           type="chevron-down"
           fillcolor={_hovering
-      ? "var(--goa-color-interactive-hover)"
-      : "var(--goa-color-interactive-default)"}
+            ? "var(--goa-accordion-icon-color-hover, var(--goa-color-interactive-hover))"
+            : "var(--goa-accordion-icon-color, var(--goa-color-interactive-default))"}
         ></goa-icon>
       {/if}
     </summary>
@@ -182,7 +182,7 @@
   }
 
   summary {
-    min-height: 3.5rem;
+    min-height: var(--goa-accordion-heading-min-height, 3.5rem);
     padding: var(--goa-accordion-padding-heading-icon-left);
     border: var(--goa-accordion-border);
     border-radius: var(--goa-accordion-border-radius);
@@ -203,6 +203,7 @@
 
   summary:hover {
     background-color: var(--goa-accordion-color-bg-heading-hover);
+    border: var(--goa-accordion-border-hover, var(--goa-accordion-border));
     color: var(--goa-accordion-color-heading-hover);
   }
   summary:focus-visible,
@@ -242,16 +243,16 @@
   }
 
   .heading {
-    font: var(--goa-accordion-heading-s);
+    font: var(--goa-accordion-heading);
     padding-right: 1rem;
   }
 
   .secondary-text {
-    font: var(--goa-typography-body-s);
+    font: var(--goa-accordion-heading-secondary-text, var(--goa-typography-body-s));
+    color: var(--goa-accordion-heading-secondary-text-color, var(--goa-color-text-default));
     line-height: 1.5rem;
     padding-right: 1rem;
   }
-
   .heading-content {
     flex: 1;
   }
@@ -261,7 +262,7 @@
   }
 
   .container-medium {
-    min-height: 4rem;
+    min-height: var(--goa-accordion-heading-m-min-height, 4rem);
   }
 
   .container-medium goa-icon {
@@ -291,12 +292,33 @@
     border-bottom: var(--goa-accordion-divider);
   }
 
+  details[open] summary:hover {
+    border-bottom: var(--goa-accordion-divider-hover, var(--goa-accordion-divider));
+  }
+
+  details[open] summary:focus-visible::before {
+    border-radius: var(--goa-accordion-border-radius-focus, var(--goa-accordion-border-radius));
+  }
+
+
   /* Sizes */
   .heading-medium {
     line-height: 2rem;
     font: var(--goa-accordion-heading-m);
   }
 
+  .heading-medium + .secondary-text {
+    font: var(--goa-accordion-heading-m-secondary-text, var(--goa-typography-body-s));
+  }
+
+  .container-medium {
+    padding: var(--goa-accordion-padding-heading-m-icon-left, var(--goa-accordion-padding-heading-icon-left));
+  }
+
+  .container-medium.iconRight {
+    padding: var(--goa-accordion-padding-heading-m-icon-right, var(--goa-accordion-padding-heading-icon-right));
+  }
+
   @container self (--mobile) {
     .content {
       padding: var(--goa-accordion-padding-content-narrow);
diff --git a/libs/web-components/src/components/callout/Callout.svelte b/libs/web-components/src/components/callout/Callout.svelte
index 8784830b7..394226a1c 100644
--- a/libs/web-components/src/components/callout/Callout.svelte
+++ b/libs/web-components/src/components/callout/Callout.svelte
@@ -19,16 +19,23 @@
     "medium",
     "large",
   ]);
+  const [CalloutEmphasis, validateCalloutEmphasis] = typeValidator(
+    "Callout emphasis",
+    ["high", "medium", "low"],
+  );
   const [AriaLive, validateAriaLive] = typeValidator("Aria live", [
     "off",
     "assertive",
     "polite",
   ]);
+  const [Version, validateVersion] = typeValidator("Version", ["1", "2"]);
 
   // Types
   type CalloutType = (typeof Types)[number];
   type CalloutSize = (typeof CalloutSizes)[number];
+  type CalloutEmphasisType = (typeof CalloutEmphasis)[number];
   type AriaLiveType = (typeof AriaLive)[number];
+  type VersionType = (typeof Version)[number];
 
   // margin
   export let mt: Spacing = null;
@@ -38,11 +45,13 @@
 
   export let size: CalloutSize = "large";
   export let type: CalloutType;
+  export let emphasis: CalloutEmphasisType = "medium";
   export let heading: string = "";
   export let maxwidth: string = "none";
   export let testid: string = "";
   export let arialive: AriaLiveType = "off";
   export let icontheme: IconTheme = "outline";
+  export let version: VersionType = "1";
 
   // Private
 
@@ -68,7 +77,9 @@
 
   onMount(() => {
     validateCalloutSize(size);
+    validateCalloutEmphasis(emphasis);
     validateAriaLive(arialive);
+    validateVersion(version);
 
     setTimeout(() => {
       validateType(type);
@@ -85,24 +96,35 @@
     ${calculateMargin(mt, mr, mb, ml)};
     max-width: ${maxwidth};
   `}
-  class="notification {type}"
+  class="notification {type} emphasis-{emphasis}"
   class:medium={isMediumCallout}
+  class:v2={version === "2"}
   data-testid={testid}
   aria-live={arialive}
 >
-  <span class="icon {type}">
-    <goa-icon
-      type={iconType}
-      size={iconSize}
-      theme={icontheme}
-    />
-  </span>
-  <span class="content {type}">
-    {#if heading}
-      <h3 class:medium={isMediumCallout}>{heading}</h3>
-    {/if}
-    <slot />
-  </span>
+  {#if version === "2"}
+    <div class="heading">
+      <goa-icon
+        type={iconType}
+        size={iconSize}
+        theme={emphasis === "high" ? "outline" : "filled"}
+      />
+      <h3 class="heading-label">{heading}</h3>
+    </div>
+    <div class="body">
+      <slot />
+    </div>
+  {:else}
+    <span class="icon {type}">
+      <goa-icon type={iconType} size={iconSize} theme={icontheme} />
+    </span>
+    <span class="content {type}">
+      {#if heading}
+        <h3 class:medium={isMediumCallout}>{heading}</h3>
+      {/if}
+      <slot />
+    </span>
+  {/if}
 </div>
 
 <!-- Style -->
@@ -221,4 +243,164 @@
   .notification.medium .icon {
     padding: var(--goa-callout-m-statusbar-padding);
   }
+
+  /* Version two: Layout */
+
+  .v2.notification {
+    flex-direction: column;
+    border: var(--goa-callout-border);
+  }
+
+  .v2.notification .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: var(--goa-callout-heading-padding);
+    gap: var(--goa-callout-heading-gap);
+    color: var(--goa-callout-heading-color);
+  }
+
+  .v2.notification .heading-label {
+    margin-top: var(--goa-space-3xs);
+    margin-bottom: var(--goa-space-3xs);
+    font: var(--goa-callout-heading-typography);
+  }
+
+  .v2.notification .body {
+    padding: var(--goa-callout-body-padding);
+    color: var(--goa-callout-body-color);
+    font: var(--goa-callout-body-typography);
+  }
+
+  /* Version two: Low emphasis layout */
+
+  .v2.emphasis-low .body {
+    padding: var(--goa-callout-l-with-heading-body-padding);
+  }
+
+  .v2.emphasis-low:has(.heading-label:empty) {
+    flex-direction: row;
+    align-items: start;
+  }
+
+  .v2.emphasis-low .heading-label:empty {
+    display: none;
+  }
+
+  .v2.emphasis-low:has(.heading-label:empty) .heading {
+    padding-right: var(--goa-space-xs);
+  }
+
+  .v2.emphasis-low:has(.heading-label:empty) .body {
+    padding: var(--goa-callout-l-without-heading-body-padding);
+  }
+
+  .v2.information {
+    background-color: var(--goa-callout-info-content-bg-color);
+  }
+
+  /* Version two: Types */
+
+  .v2.information .heading {
+    background-color: var(--goa-callout-info-heading-bg-color);
+    --fill-color: var(--goa-callout-info-icon-color);
+  }
+
+  .v2.information.emphasis-low {
+    border-color: var(--goa-callout-l-info-border-color);
+    background-color: var(--goa-callout-l-info-content-bg-color);
+  }
+
+  .v2.information.emphasis-high {
+    border-color: var(--goa-callout-h-info-border-color);
+    background-color: var(--goa-callout-h-info-content-bg-color);
+  }
+
+  .v2.information.emphasis-high .heading {
+    background-color: var(--goa-callout-h-info-heading-bg-color);
+    color: var(--goa-callout-h-info-heading-color);
+    --fill-color: var(--goa-callout-h-info-icon-color);
+  }
+
+  .v2.emergency {
+    background-color: var(--goa-callout-emergency-content-bg-color);
+  }
+
+  .v2.emergency .heading {
+    background-color: var(--goa-callout-emergency-heading-bg-color);
+    --fill-color: var(--goa-callout-emergency-icon-color);
+  }
+
+  .v2.emergency.emphasis-low {
+    border-color: var(--goa-callout-l-emergency-border-color);
+    background-color: var(--goa-callout-l-emergency-content-bg-color);
+  }
+
+  .v2.emergency.emphasis-high {
+    border-color: var(--goa-callout-h-emergency-border-color);
+    background-color: var(--goa-callout-h-emergency-content-bg-color);
+  }
+
+  .v2.emergency.emphasis-high .heading {
+    background-color: var(--goa-callout-h-emergency-heading-bg-color);
+    color: var(--goa-callout-h-emergency-heading-color);
+    --fill-color: var(--goa-callout-h-emergency-icon-color);
+  }
+
+  .v2.important {
+    background-color: var(--goa-callout-important-content-bg-color);
+  }
+
+  .v2.important .heading {
+    background-color: var(--goa-callout-important-heading-bg-color);
+    --fill-color: var(--goa-callout-important-icon-color);
+  }
+
+  .v2.important.emphasis-low {
+    border-color: var(--goa-callout-l-important-border-color);
+    background-color: var(--goa-callout-l-important-content-bg-color);
+  }
+
+  .v2.important.emphasis-high {
+    border-color: var(--goa-callout-h-important-border-color);
+    background-color: var(--goa-callout-h-important-content-bg-color);
+  }
+
+  .v2.important.emphasis-high .heading {
+    background-color: var(--goa-callout-h-important-heading-bg-color);
+    color: var(--goa-callout-h-important-heading-color);
+    --fill-color: var(--goa-callout-h-important-icon-color);
+  }
+
+  .v2.success {
+    background-color: var(--goa-callout-success-content-bg-color);
+  }
+
+  .v2.success .heading {
+    background-color: var(--goa-callout-success-heading-bg-color);
+    --fill-color: var(--goa-callout-success-icon-color);
+  }
+
+  .v2.success.emphasis-low {
+    border-color: var(--goa-callout-l-success-border-color);
+    background-color: var(--goa-callout-l-success-content-bg-color);
+  }
+
+  .v2.success.emphasis-high {
+    border-color: var(--goa-callout-h-success-border-color);
+    background-color: var(--goa-callout-h-success-content-bg-color);
+  }
+
+  .v2.success.emphasis-high .heading {
+    background-color: var(--goa-callout-h-success-heading-bg-color);
+    color: var(--goa-callout-h-success-heading-color);
+    --fill-color: var(--goa-callout-h-success-icon-color);
+  }
+
+  .v2.information.emphasis-low .heading,
+  .v2.important.emphasis-low .heading,
+  .v2.emergency.emphasis-low .heading,
+  .v2.success.emphasis-low .heading {
+    background-color: transparent;
+  }
 </style>