diff --git a/assets/styles/base/_color.scss b/assets/styles/base/_color.scss
index 4124c64bd4..f0cd9e3cbe 100644
--- a/assets/styles/base/_color.scss
+++ b/assets/styles/base/_color.scss
@@ -15,6 +15,7 @@
     $hover-text:   get-or-def($color, "hover-text",   saturate($link, 20%));
     $active-text:  get-or-def($color, "active-text",  contrast-color($active-bg));
     $border:       get-or-def($color, "border",       $color);
+    $banner-bg:    get-or-def($color, "banner",      rgba($default, 0.15));
 
     --#{$name}:             #{$default};
     --#{$name}-text:        #{$default-text};
@@ -23,6 +24,7 @@
     --#{$name}-active-bg:   #{$active-bg};
     --#{$name}-active-text: #{$active-text};
     --#{$name}-border:      #{$border};
+    --#{$name}-banner-bg:   #{$banner-bg};
 
     @if $write-classes {
       .text-#{$name} {
diff --git a/assets/styles/base/_helpers.scss b/assets/styles/base/_helpers.scss
index 785243e9ed..d12fbcbc04 100644
--- a/assets/styles/base/_helpers.scss
+++ b/assets/styles/base/_helpers.scss
@@ -30,7 +30,7 @@ $spacing-property-map: (
 }
 
 .spacer {
-  padding: 20px 0 0 0;
+  padding: 40px 0 0 0;
 }
 
 .pull-right {
diff --git a/assets/styles/base/_typography.scss b/assets/styles/base/_typography.scss
index 8fd8a59da4..a0a803958d 100644
--- a/assets/styles/base/_typography.scss
+++ b/assets/styles/base/_typography.scss
@@ -7,7 +7,7 @@ H1, H2, H3, H4, H5, H6 {
   font-style: normal;
   font-weight: 400;
   letter-spacing: 0em;
-  margin: 0;
+  margin: 0 0 10px 0;
 }
 
 H1 {
@@ -24,19 +24,16 @@ H3 {
 
 H4 {
   font-size: 16px;
-  font-weight: 300;
 }
 
 H5 {
   font-size: 14px;
-  font-weight: 300;
 }
 
 H6 {
   font-size: 12px;
   letter-spacing: .25em;
   text-transform: uppercase;
-  font-weight: 300;
 }
 
 P {
diff --git a/assets/styles/global/_form.scss b/assets/styles/global/_form.scss
index 1678e07f2d..7514559c1f 100644
--- a/assets/styles/global/_form.scss
+++ b/assets/styles/global/_form.scss
@@ -36,6 +36,7 @@ TEXTAREA,
   &.view {
     border: none;
     background-color: transparent;
+    padding: 0;
   }
 
   &::placeholder {
@@ -57,9 +58,9 @@ TEXTAREA,
     margin: $spacing 0 $spacing 0;
   }
 
-  &.no-resize::placeholder {
-    padding-top: 8px;
-  }
+  // &.no-resize::placeholder {
+  //   padding-top: 8px;
+  // }
 }
 
 TEXTAREA {
diff --git a/assets/styles/themes/_light.scss b/assets/styles/themes/_light.scss
index b25567f2ef..c88e078d44 100644
--- a/assets/styles/themes/_light.scss
+++ b/assets/styles/themes/_light.scss
@@ -20,14 +20,14 @@ $lighter   : #F4F5FA;
 //light body bg
 $lightest  : #FFFFFF;
 
-$primary   : #3D98D3;
-$secondary : $darker;
-$link      : $primary;
-$disabled  : $dark;
-$success   : #5D995D;
-$warning   : #DAC342;
-$error     : #F64747;
-$info      : #213444;
+$primary         : #3D98D3;
+$secondary       : $darker;
+$link            : $primary;
+$disabled        : $dark;
+$success         : #5D995D;
+$warning         : #DAC342;
+$error           : #F64747;
+$info            : #213444;
 
 $contrasted-dark: $darkest !default;
 $contrasted-light: $lightest !default;
diff --git a/components/Banner.vue b/components/Banner.vue
new file mode 100644
index 0000000000..f1f871a703
--- /dev/null
+++ b/components/Banner.vue
@@ -0,0 +1,74 @@
+<script>
+export default {
+  props: {
+    color: {
+      type:    String,
+      default: 'secondary'
+    },
+    label: {
+      type:    String,
+      default: null,
+    },
+    labelKey: {
+      type:    String,
+      default: null,
+    },
+  }
+};
+</script>
+<template>
+  <div class="banner" :class="{[color]: true}">
+    <slot>
+      <t v-if="labelKey" :k="labelKey" />
+      <template v-else>
+        {{ label }}
+      </template>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .banner {
+    padding: 10px;
+    margin: 15px 0;
+    width: 100%;
+    border-radius: var(--border-radius);
+    transition: all 0.2s ease;
+
+    &.primary {
+      background: var(--primary);
+      border: solid 1px var(--primary);
+      color: var(--body-text);
+    }
+
+    &.secondary {
+      background: var(--secondary-banner-bg);
+      border: solid 1px var(--secondary);
+      color: var(--body-text);
+    }
+
+    &.success {
+      background: var(--success-banner-bg);
+      border: solid 1px var(--success);
+      color: var(--body-text);
+    }
+
+    &.info {
+      background: var(--info-banner-bg);
+      border: solid 1px var(--info);
+      color: var(--body-text);
+    }
+
+    &.warning {
+      background: var(--warning-banner-bg);
+      border: solid 1px var(--warning);
+      color: var(--body-text);
+    }
+
+    &.error {
+      background: var(--error-banner-bg);
+      border: solid 1px (--error);
+      color: var(--error);
+    }
+  }
+</style>
diff --git a/components/ContainerResourceLimit.vue b/components/ContainerResourceLimit.vue
index 48204efc99..9ff71516e5 100644
--- a/components/ContainerResourceLimit.vue
+++ b/components/ContainerResourceLimit.vue
@@ -102,11 +102,9 @@ export default {
 <template>
   <div>
     <div class="row mb-5 pl-10">
-      <div class="col span-12">
-        <p class="helper-text mb-10">
-          <t v-if="mode === viewMode" k="containerResourceLimit.helpTextDetail" />
-          <t v-else k="containerResourceLimit.helpText" />
-        </p>
+      <div class="banner secondary">
+        <t v-if="mode === viewMode" k="containerResourceLimit.helpTextDetail" />
+        <t v-else k="containerResourceLimit.helpText" />
       </div>
     </div>
     <div class="row">
diff --git a/components/InfoBoxCluster.vue b/components/InfoBoxCluster.vue
index b4d934aa91..e67f11a23b 100644
--- a/components/InfoBoxCluster.vue
+++ b/components/InfoBoxCluster.vue
@@ -169,7 +169,7 @@ export default {
         </label>
         <PercentageBar :value="nodeUsageReserved.percentage" />
       </div>
-      <div class="info-column-data mb-10">
+      <div class="info-column-data">
         <label>
           <t
             k="infoBoxCluster.used"
@@ -196,7 +196,7 @@ export default {
         </label>
         <PercentageBar :value="nodeUsageMemReserved.percentage" />
       </div>
-      <div class="info-column-data mb-10">
+      <div class="info-column-data">
         <label>
           <t
             k="infoBoxCluster.used"
diff --git a/components/PercentageBar.vue b/components/PercentageBar.vue
index c995eacbd2..6b86ec9715 100644
--- a/components/PercentageBar.vue
+++ b/components/PercentageBar.vue
@@ -64,6 +64,7 @@ export default {
     .percentage {
       vertical-align: middle;
       width: 32px;
+      display: inline-block;
     }
     .bar {
       vertical-align: -5px; // this will align percentage-text in the center without having to change the line height
diff --git a/components/RbacPermissions.vue b/components/RbacPermissions.vue
index abed31fe59..376bb1f76d 100644
--- a/components/RbacPermissions.vue
+++ b/components/RbacPermissions.vue
@@ -160,7 +160,7 @@ export default {
 
 <template>
   <div>
-    <div class="title clearfix">
+    <div class="clearfix">
       <h4>{{ label }}</h4>
     </div>
 
diff --git a/components/Tabbed/index.vue b/components/Tabbed/index.vue
index fca82881b3..aa0f765db2 100644
--- a/components/Tabbed/index.vue
+++ b/components/Tabbed/index.vue
@@ -126,7 +126,6 @@ export default {
 
 <template>
   <div>
-    <div class="spacer"></div>
     <ul
       ref="tablist"
       role="tablist"
diff --git a/components/TabbedLinks/index.vue b/components/TabbedLinks/index.vue
index 3b4ff61848..7029ca48e7 100644
--- a/components/TabbedLinks/index.vue
+++ b/components/TabbedLinks/index.vue
@@ -32,7 +32,6 @@ export default {
 
 <template>
   <div>
-    <div class="spacer"></div>
     <ul
       v-if="tabs !== null && tabs.length > 0"
       role="tablist"
diff --git a/components/form/ArrayList.vue b/components/form/ArrayList.vue
index 53a3e27e01..d50040314c 100644
--- a/components/form/ArrayList.vue
+++ b/components/form/ArrayList.vue
@@ -181,7 +181,7 @@ export default {
 
 <template>
   <div>
-    <div v-if="title" class="title clearfix">
+    <div v-if="title" class="clearfix">
       <h4>{{ title }} <i v-if="protip" v-tooltip="protip" class="icon icon-info" style="font-size: 12px" /></h4>
     </div>
 
diff --git a/components/form/KeyValue.vue b/components/form/KeyValue.vue
index cb12032f4a..232818f4d0 100644
--- a/components/form/KeyValue.vue
+++ b/components/form/KeyValue.vue
@@ -352,7 +352,7 @@ export default {
 
 <template>
   <div class="key-value" :class="mode">
-    <div v-if="title" class="title clearfix">
+    <div v-if="title" class="clearfix">
       <h4 :style="{'display':'flex'}">
         {{ title }} <i v-if="protip" v-tooltip="protip" class="icon icon-info" style="font-size: 12px" />
       </h4>
@@ -493,7 +493,6 @@ export default {
 
     TD, TH {
       padding-right: $spacing;
-      padding-bottom: $spacing;
 
       &:last-of-type {
         padding-right: 0;
@@ -526,6 +525,7 @@ export default {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
+      display: inline;
     }
 
     label {
diff --git a/components/form/Ports.vue b/components/form/Ports.vue
index a8f6d4fe85..644b3f1f4a 100644
--- a/components/form/Ports.vue
+++ b/components/form/Ports.vue
@@ -107,7 +107,7 @@ export default {
 <template>
   <div>
     <div class="spacer"></div>
-    <div class="title clearfix">
+    <div class="clearfix">
       <h4>Ports</h4>
     </div>
 
diff --git a/components/form/Probe.vue b/components/form/Probe.vue
index a4aa85f0eb..0875d99500 100644
--- a/components/form/Probe.vue
+++ b/components/form/Probe.vue
@@ -153,7 +153,7 @@ export default {
 
 <template>
   <div>
-    <div class="title clearfix">
+    <div class="clearfix">
       <h4 :style="{'display':'flex'}">
         {{ label }}
         <i v-if="description" v-tooltip="description" class="icon icon-info" style="font-size: 12px" />
diff --git a/components/form/ServicePorts.vue b/components/form/ServicePorts.vue
index 322c8caa40..5847540522 100644
--- a/components/form/ServicePorts.vue
+++ b/components/form/ServicePorts.vue
@@ -108,7 +108,7 @@ export default {
 
 <template>
   <div>
-    <div class="title clearfix">
+    <div class="clearfix">
       <h4>
         <t k="servicePorts.header.label" />
       </h4>
diff --git a/components/form/Target.vue b/components/form/Target.vue
index 79b17da3ac..87845627db 100644
--- a/components/form/Target.vue
+++ b/components/form/Target.vue
@@ -180,7 +180,7 @@ export default {
       <div class="spacer"></div>
 
       <div>
-        <div class="title clearfix">
+        <div class="clearfix">
           <h4>Target</h4>
         </div>
         <div v-if="mode === 'view'">
diff --git a/components/form/TextAreaAutoGrow.vue b/components/form/TextAreaAutoGrow.vue
index 753d1e3e1e..edf44d72a2 100644
--- a/components/form/TextAreaAutoGrow.vue
+++ b/components/form/TextAreaAutoGrow.vue
@@ -8,7 +8,7 @@ export default {
   props: {
     minHeight: {
       type:    Number,
-      default: 44,
+      default: 55,
     },
     maxHeight: {
       type:    Number,
diff --git a/components/nav/WindowManager/Window.vue b/components/nav/WindowManager/Window.vue
index 25e33178a3..e737d1d8da 100644
--- a/components/nav/WindowManager/Window.vue
+++ b/components/nav/WindowManager/Window.vue
@@ -55,7 +55,7 @@ export default {
 
 <template>
   <div class="window">
-    <div class="title clearfix">
+    <div class="clearfix">
       <slot name="title" />
     </div>
     <div class="body clearfix">
diff --git a/edit/rio.cattle.io.service/Permissions.vue b/edit/rio.cattle.io.service/Permissions.vue
index d8ea0c3c0d..59761ab9d7 100644
--- a/edit/rio.cattle.io.service/Permissions.vue
+++ b/edit/rio.cattle.io.service/Permissions.vue
@@ -122,7 +122,7 @@ export default {
 
 <template>
   <div>
-    <div class="title clearfix">
+    <div class="clearfix">
       <h4>{{ label }}</h4>
     </div>
 
diff --git a/edit/service.vue b/edit/service.vue
index 79475238ba..fc549374df 100644
--- a/edit/service.vue
+++ b/edit/service.vue
@@ -167,7 +167,7 @@ export default {
       <div class="spacer"></div>
 
       <div v-if="checkTypeIs('ExternalName')">
-        <div class="title clearfix">
+        <div class="clearfix">
           <h4>
             <t k="servicesPage.externalName.label" />
           </h4>
diff --git a/edit/workload/WorkloadPorts.vue b/edit/workload/WorkloadPorts.vue
index 9e7dc92529..3766dcb45e 100644
--- a/edit/workload/WorkloadPorts.vue
+++ b/edit/workload/WorkloadPorts.vue
@@ -104,7 +104,7 @@ export default {
 <template>
   <div>
     <div class="spacer"></div>
-    <div class="title clearfix">
+    <div class="clearfix">
       <h4>Ports</h4>
     </div>
 
diff --git a/shared/gatekeeper-constraint.vue b/shared/gatekeeper-constraint.vue
index 52e9cd4a90..870ce05305 100644
--- a/shared/gatekeeper-constraint.vue
+++ b/shared/gatekeeper-constraint.vue
@@ -212,11 +212,10 @@ export default {
         </template>
       </NameNsDescription>
     </div>
-    <br />
+    <div class="spacer"></div>
     <div v-if="isView">
       <h2>{{ t('gatekeeperConstraint.violations.title') }}</h2>
       <GatekeeperViolationsTable :constraint="value" />
-      <br />
     </div>
     <div>
       <h2 class="parameters">
@@ -243,7 +242,7 @@ export default {
         :protip="false"
       />
     </div>
-    <br />
+    <div class="spacer"></div>
     <div>
       <h2>{{ t('gatekeeperConstraint.enforcementAction.title') }}</h2>
       <RadioGroup
@@ -255,11 +254,9 @@ export default {
         @input="e=>value.spec.enforcementAction = e"
       />
     </div>
-    <br />
-    <br />
+    <div class="spacer"></div>
     <div class="match">
       <h2>{{ t('gatekeeperConstraint.match.title') }}</h2>
-
       <ResourceTabs v-model="value" :mode="mode" default-tab="labels">
         <template #before>
           <Tab name="namespaces" :label="t('gatekeeperConstraint.tab.namespaces.title')">
diff --git a/shared/networking.k8s.io.ingress/DefaultBackend.vue b/shared/networking.k8s.io.ingress/DefaultBackend.vue
index 7174a08b37..630640cfbb 100644
--- a/shared/networking.k8s.io.ingress/DefaultBackend.vue
+++ b/shared/networking.k8s.io.ingress/DefaultBackend.vue
@@ -2,9 +2,12 @@
 import LabeledInput from '@/components/form/LabeledInput';
 import LabeledSelect from '@/components/form/LabeledSelect';
 import { _VIEW } from '@/config/query-params';
+import Banner from '@/components/Banner';
 
 export default {
-  components: { LabeledInput, LabeledSelect },
+  components: {
+    LabeledInput, LabeledSelect, Banner
+  },
 
   props:      {
     value: {
@@ -48,9 +51,7 @@ export default {
 
 <template>
   <div>
-    <div class="row text-warning" :class="{'pl-10': isView}">
-      Warning: Default backend is used globally for the entire cluster.
-    </div>
+    <Banner color="warning" label="Warning: Default backend is used globally for the entire cluster." />
     <div class="row">
       <div class="col span-4">
         <LabeledSelect v-model="serviceName" :mode="mode" label="Target Service" :options="targets" @input="update" />
diff --git a/stories/DesignSystemsAlertBanners.stories.mdx b/stories/DesignSystemsAlertBanners.stories.mdx
new file mode 100644
index 0000000000..816eaed29c
--- /dev/null
+++ b/stories/DesignSystemsAlertBanners.stories.mdx
@@ -0,0 +1,29 @@
+import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
+
+<Meta title='Design Systems' />
+
+# Alerts: Banners
+
+<Preview>
+  <Story name="Alerts: Banners">
+  {{
+      components: {},
+      template: `
+      <div class="banner primary">
+        This is a banner
+      </div>
+      <div class="banner secondary">
+        This is a banner
+      </div>
+      <div class="banner success">
+        This is a banner
+      </div>
+      <div class="banner warning">
+        This is a banner
+      </div>
+      <div class="banner error">
+        This is a banner
+      </div>`
+    }}
+  </Story>
+</Preview>
\ No newline at end of file
diff --git a/stories/DesignSystemsGrid.stories.mdx b/stories/DesignSystemsGrid.stories.mdx
new file mode 100644
index 0000000000..321dbd3ea2
--- /dev/null
+++ b/stories/DesignSystemsGrid.stories.mdx
@@ -0,0 +1,44 @@
+import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'
+
+<Meta title='Design Systems' />
+
+# Grid System
+
+<Preview>
+  <Story name="Grid System">
+  {{
+      components: {},
+      template: `
+      <div class="row">
+        <div class="col span-2">
+          This is a column
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-2">
+          This is a column
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-2">
+          This is a column
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-2">
+          This is a column
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-2">
+          This is a column
+        </div>
+      </div>
+      <div class="row">
+        <div class="col span-2">
+          This is a column
+        </div>
+      </div>`
+    }}
+  </Story>
+</Preview>
\ No newline at end of file