diff --git a/src-docs/src/images/figma.svg b/src-docs/src/images/figma.svg
new file mode 100644
index 0000000000..933ff82826
--- /dev/null
+++ b/src-docs/src/images/figma.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-label="FigmaLogo" alt="FigmaLogo">
+  <path fill="#1ABCFE" d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z"></path><path fill="#0ACF83" d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z"></path><path fill="#FF7262" d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z"></path><path fill="#F24E1E" d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z"></path><path fill="#A259FF" d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z"></path>
+</svg>
\ No newline at end of file
diff --git a/src-docs/src/views/card/card.js b/src-docs/src/views/card/card.js
index 2595e1114f..3543c58322 100644
--- a/src-docs/src/views/card/card.js
+++ b/src-docs/src/views/card/card.js
@@ -18,14 +18,31 @@ import {
   OuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
+const cards = {
+  Beats: {
+    title: 'Dashboards',
+    iconType: 'dashboardApp',
+  },
+  Cloud: {
+    title: 'Visualize',
+    iconType: 'visualizeApp',
+  },
+  Logging: {
+    title: 'Discover',
+    iconType: 'discoverApp',
+  },
+  Kibana: {
+    title: 'Search',
+    iconType: 'search',
+  },
+};
 
-const cardNodes = icons.map(function (item, index) {
+const cardNodes = Object.keys(cards).map(function (item, index) {
   return (
     <OuiFlexItem key={index}>
       <OuiCard
-        icon={<OuiIcon size="xxl" type={`logo${item}`} />}
-        title={`Elastic ${item}`}
+        icon={<OuiIcon size="xxl" type={cards[item].iconType} />}
+        title={cards[item].title}
         isDisabled={item === 'Kibana' ? true : false}
         description="Example of a card's description. Stick to one or two sentences."
         onClick={() => {}}
diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js
index 1bf49c5551..1c9322e644 100644
--- a/src-docs/src/views/card/card_beta.js
+++ b/src-docs/src/views/card/card_beta.js
@@ -18,15 +18,25 @@ import {
   OuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['dashboard', 'monitoring'];
-const badges = [null, 'Beta'];
+const badges = [null, 'Experimental'];
 
-const cardNodes = icons.map(function (item, index) {
+const cards = {
+  dashboard: {
+    title: 'Dashboards',
+    icon: 'dashboardApp',
+  },
+  monitoring: {
+    title: 'Discover',
+    icon: 'discoverApp',
+  },
+};
+
+const cardNodes = Object.keys(cards).map(function (item, index) {
   return (
     <OuiFlexItem key={index}>
       <OuiCard
-        icon={<OuiIcon size="xxl" type={`${item}App`} />}
-        title={`Kibana ${item}`}
+        icon={<OuiIcon size="xxl" type={cards[item].icon} />}
+        title={cards[item].title}
         description="Example of a card's description. Stick to one or two sentences."
         betaBadgeLabel={badges[index]}
         betaBadgeTooltipContent={
@@ -40,23 +50,4 @@ const cardNodes = icons.map(function (item, index) {
   );
 });
 
-export default () => (
-  <OuiFlexGroup gutterSize="l">
-    {cardNodes}
-    <OuiFlexItem>
-      <OuiCard
-        icon={<OuiIcon size="xxl" type="lensApp" />}
-        title="Lens"
-        isDisabled
-        description="Disabled cards can have active links using OuiBetaBadge."
-        betaBadgeProps={{
-          href: 'http://www.elastic.co/subscriptions',
-          target: '_blank',
-        }}
-        betaBadgeLabel="Basic"
-        betaBadgeTooltipContent="This feature requires a Basic License"
-        onClick={() => {}}
-      />
-    </OuiFlexItem>
-  </OuiFlexGroup>
-);
+export default () => <OuiFlexGroup gutterSize="l">{cardNodes}</OuiFlexGroup>;
diff --git a/src-docs/src/views/card/card_children.js b/src-docs/src/views/card/card_children.js
index fb71dbba6f..3470afd0bd 100644
--- a/src-docs/src/views/card/card_children.js
+++ b/src-docs/src/views/card/card_children.js
@@ -84,7 +84,7 @@ export default () => {
       <OuiFlexItem>
         <OuiCard
           textAlign="left"
-          title="Just about anything"
+          title="Written content"
           description={
             <span>
               Just be sure not to add any <OuiCode>onClick</OuiCode> handler to
@@ -92,7 +92,7 @@ export default () => {
             </span>
           }>
           <OuiCodeBlock language="html" paddingSize="s">
-            {'<yoda>Hello, young Skywalker</yoda>'}
+            {'<yoda>Hello, world!</yoda>'}
           </OuiCodeBlock>
         </OuiCard>
       </OuiFlexItem>
diff --git a/src-docs/src/views/card/card_display.js b/src-docs/src/views/card/card_display.js
index 311f9f94af..7d82fec650 100644
--- a/src-docs/src/views/card/card_display.js
+++ b/src-docs/src/views/card/card_display.js
@@ -15,7 +15,6 @@ import {
   OuiCard,
   OuiFlexGroup,
   OuiFlexItem,
-  OuiIcon,
   OuiSpacer,
 } from '../../../../src/components';
 
@@ -26,7 +25,6 @@ export default () => (
       <OuiFlexItem>
         <OuiCard
           layout="horizontal"
-          icon={<OuiIcon size="xl" type="logoLogging" />}
           onClick={() => {}}
           title="Plain"
           display="plain"
@@ -35,7 +33,6 @@ export default () => (
       </OuiFlexItem>
       <OuiFlexItem>
         <OuiCard
-          icon={<OuiIcon size="xl" type="logoLogging" />}
           title="Subdued"
           display="subdued"
           description="This one has a subdued background color."
@@ -45,11 +42,10 @@ export default () => (
       <OuiFlexItem>
         <OuiCard
           layout="horizontal"
-          icon={<OuiIcon size="xl" type="logoLogging" />}
           title="Transparent"
           display="transparent"
           description="This one doesn't have a background color anymore."
-          betaBadgeLabel="Beta"
+          betaBadgeLabel="experimental"
           betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs."
           onClick={() => {}}
         />
diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js
index 7aa2944a80..2ce66ba994 100644
--- a/src-docs/src/views/card/card_example.js
+++ b/src-docs/src/views/card/card_example.js
@@ -242,7 +242,7 @@ export const CardExample = {
 />`,
     },
     {
-      title: 'Beta badge',
+      title: 'Experimental badge',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -252,11 +252,12 @@ export const CardExample = {
       text: (
         <p>
           If the card links to or references a module that is not GA (beta, lab,
-          etc), you can add a <OuiCode>betaBadgeLabel</OuiCode> and{' '}
-          <OuiCode>betaBadgeTooltipContent</OuiCode> to the card and it will
-          properly create and position an <strong>OuiBetaBadge</strong>. If you
-          want to change the title of the tooltip, supply a{' '}
-          <OuiCode>betaBadgeTitle</OuiCode> prop.
+          etc), you can add a <OuiCode>ExperimentalBadgeLabel</OuiCode> and{' '}
+          <OuiCode>experimentalBadgeTooltipContent</OuiCode> to the card and it
+          will properly create and position an{' '}
+          <strong>OuiExperimentalBadge</strong>. If you want to change the title
+          of the tooltip, supply a <OuiCode>experimentalBadgeTitle</OuiCode>{' '}
+          prop.
         </p>
       ),
       props: { OuiCard },
diff --git a/src-docs/src/views/card/card_footer.js b/src-docs/src/views/card/card_footer.js
index 7932a4116e..69ffae5da3 100644
--- a/src-docs/src/views/card/card_footer.js
+++ b/src-docs/src/views/card/card_footer.js
@@ -31,11 +31,13 @@ export default () => (
         description="Example of a short card description."
         footer={
           <div>
-            <OuiButton aria-label="Go to Developers Tools">Go for it</OuiButton>
+            <OuiButton aria-label="Go to Developers Tools">
+              Choice One
+            </OuiButton>
             <OuiSpacer size="xs" />
             <OuiText size="s">
               <p>
-                Or try <OuiLink href="http://google.com">this</OuiLink>
+                Choice <OuiLink href="https://opensearch.org">Two</OuiLink>
               </p>
             </OuiText>
           </div>
@@ -49,11 +51,11 @@ export default () => (
         description="Example of a longer card description. See how the footers stay lined up."
         footer={
           <div>
-            <OuiButton aria-label="Go to Dashboards">Go for it</OuiButton>
+            <OuiButton aria-label="Go to Dashboards">Choice One</OuiButton>
             <OuiSpacer size="xs" />
             <OuiText size="s">
               <p>
-                Or try <OuiLink href="http://google.com">this</OuiLink>
+                Choice <OuiLink href="https://opensearch.org">Two</OuiLink>
               </p>
             </OuiText>
           </div>
@@ -67,11 +69,11 @@ export default () => (
         description="Example of a short card description."
         footer={
           <div>
-            <OuiButton aria-label="Go to Save Objects">Go for it</OuiButton>
+            <OuiButton aria-label="Go to Save Objects">Choice One</OuiButton>
             <OuiSpacer size="xs" />
             <OuiText size="s">
               <p>
-                Or try <OuiLink href="http://google.com">this</OuiLink>
+                Choice <OuiLink href="https://opensearch.org">Two</OuiLink>
               </p>
             </OuiText>
           </div>
diff --git a/src-docs/src/views/card/card_image.js b/src-docs/src/views/card/card_image.js
index 1ec60a2bc8..5d9a9611f9 100644
--- a/src-docs/src/views/card/card_image.js
+++ b/src-docs/src/views/card/card_image.js
@@ -22,7 +22,7 @@ import {
 const cardFooterContent = (
   <OuiFlexGroup justifyContent="flexEnd">
     <OuiFlexItem grow={false}>
-      <OuiButton>Go for it</OuiButton>
+      <OuiButton>View Details</OuiButton>
     </OuiFlexItem>
   </OuiFlexGroup>
 );
@@ -40,7 +40,7 @@ export default () => (
             />
           </div>
         }
-        title="Elastic in Nature"
+        title="Title"
         description="Example of a card's description. Stick to one or two sentences."
         footer={cardFooterContent}
       />
@@ -49,7 +49,7 @@ export default () => (
       <OuiCard
         textAlign="left"
         image="https://source.unsplash.com/400x200/?Water"
-        title="Elastic in Water"
+        title="Title"
         description="Example of a card's description. Stick to one or two sentences."
         footer={cardFooterContent}
       />
@@ -60,7 +60,7 @@ export default () => (
         href="https://elastic.github.io/eui/"
         image="https://source.unsplash.com/400x200/?City"
         icon={<OuiIcon size="xxl" type="logoBeats" />}
-        title={'Beats in the City'}
+        title={'Title'}
         description="This card has an href and should be a link."
       />
     </OuiFlexItem>
diff --git a/src-docs/src/views/card/card_layout.js b/src-docs/src/views/card/card_layout.js
index ae3e39dc29..4429611dfd 100644
--- a/src-docs/src/views/card/card_layout.js
+++ b/src-docs/src/views/card/card_layout.js
@@ -23,8 +23,8 @@ export default () => (
     <OuiFlexItem>
       <OuiCard
         layout="horizontal"
-        icon={<OuiIcon size="xl" type={'logoBeats'} />}
-        title={'Elastic Beats'}
+        icon={<OuiIcon size="xl" type="dashboardApp" />}
+        title={'Dashboards'}
         description="This card adds uses an 'xl' size icon which works well in a horizontal layout."
         onClick={() => {}}
       />
@@ -32,9 +32,9 @@ export default () => (
     <OuiFlexItem>
       <OuiCard
         layout="horizontal"
-        icon={<OuiIcon size="l" type={'logoCloud'} />}
+        icon={<OuiIcon size="l" type="visualizeApp" />}
         titleSize="xs"
-        title={'Elastic Cloud'}
+        title={'Visualize'}
         description="This card uses an 'l' size icon but also shrinks the 'titleSize' to 'xs'."
         onClick={() => {}}
       />
diff --git a/src-docs/src/views/card/card_selectable.js b/src-docs/src/views/card/card_selectable.js
index 0a5faa2825..5b94d031b9 100644
--- a/src-docs/src/views/card/card_selectable.js
+++ b/src-docs/src/views/card/card_selectable.js
@@ -19,6 +19,8 @@ import {
   OuiFlexItem,
 } from '../../../../src/components';
 
+import figmaSvg from '../../images/figma.svg';
+
 export default () => {
   const [card1Selected, setCard1] = useState(true);
   const [card2Selected, setCard2] = useState(false);
@@ -79,8 +81,8 @@ export default () => {
       </OuiFlexItem>
       <OuiFlexItem>
         <OuiCard
-          icon={<OuiIcon size="xxl" type="logoAerospike" />}
-          title="Not Adobe"
+          icon={<OuiIcon size="xxl" type={figmaSvg} />}
+          title="Figma"
           description="Example of a short card description."
           footer={
             <OuiButtonEmpty