diff --git a/packages/venia-ui/lib/components/Button/button.css b/packages/venia-ui/lib/components/Button/button.css
index 9793a3054f..259c7e58c1 100644
--- a/packages/venia-ui/lib/components/Button/button.css
+++ b/packages/venia-ui/lib/components/Button/button.css
@@ -26,7 +26,7 @@
 }
 
 .root:focus {
-    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
+    box-shadow: -6px 6px rgb(var(--venia-brand-color-1-100));
 }
 
 .root:active {
diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap b/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap
index fb19f42763..5ef10ab5a0 100644
--- a/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/__snapshots__/giftCards.spec.js.snap
@@ -1,20 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`it renders correctly when it has cards 1`] = `
-<div>
-  <div>
+<div
+  className="root"
+>
+  <div
+    className="entryForm"
+  >
     <form
       onKeyDown={[Function]}
       onReset={[Function]}
       onSubmit={[Function]}
     >
-      <div>
-        <div>
-          <label>
+      <div
+        className="card"
+      >
+        <div
+          className="root"
+        >
+          <label
+            className="label"
+            htmlFor="card"
+          >
             Gift Card Number
           </label>
-          <div>
+          <div
+            className="card_input_container"
+          >
             <span
+              className="root"
               style={
                 Object {
                   "--iconsAfter": 0,
@@ -22,9 +36,13 @@ exports[`it renders correctly when it has cards 1`] = `
                 }
               }
             >
-              <span>
+              <span
+                className="input"
+              >
                 <input
+                  className="input"
                   disabled={false}
+                  id="card"
                   name="card"
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -32,42 +50,66 @@ exports[`it renders correctly when it has cards 1`] = `
                   value=""
                 />
               </span>
-              <span />
-              <span />
+              <span
+                className="before"
+              />
+              <span
+                className="after"
+              />
             </span>
-            <p />
+            <p
+              className="root"
+            />
           </div>
         </div>
-        <div>
-          <label />
+        <div
+          className="root"
+        >
+          <label
+            className="label"
+          />
           <button
+            className="root_normalPriority"
             disabled={false}
             onClick={[MockFunction]}
             type="button"
           >
-            <span>
+            <span
+              className="content"
+            >
               Apply
             </span>
           </button>
         </div>
         <button
+          className="check_balance_button"
           disabled={false}
           onClick={[MockFunction]}
           type="button"
         >
-          <span>
+          <span
+            className="content"
+          >
             Check balance
           </span>
         </button>
       </div>
     </form>
   </div>
-  <div>
-    <div>
-      <span>
+  <div
+    className="cards_container"
+  >
+    <div
+      className="card_info"
+    >
+      <span
+        className="code"
+      >
         unit test code 1
       </span>
-      <span>
+      <span
+        className="balance"
+      >
         Balance: 
         <span>
           $
@@ -84,19 +126,28 @@ exports[`it renders correctly when it has cards 1`] = `
       </span>
     </div>
     <button
+      className="root_normalPriority"
       disabled={false}
       onClick={[Function]}
       type="button"
     >
-      <span>
+      <span
+        className="content"
+      >
         Remove
       </span>
     </button>
-    <div>
-      <span>
+    <div
+      className="card_info"
+    >
+      <span
+        className="code"
+      >
         unit test code 2
       </span>
-      <span>
+      <span
+        className="balance"
+      >
         Balance: 
         <span>
           $
@@ -113,11 +164,14 @@ exports[`it renders correctly when it has cards 1`] = `
       </span>
     </div>
     <button
+      className="root_normalPriority"
       disabled={false}
       onClick={[Function]}
       type="button"
     >
-      <span>
+      <span
+        className="content"
+      >
         Remove
       </span>
     </button>
@@ -126,20 +180,34 @@ exports[`it renders correctly when it has cards 1`] = `
 `;
 
 exports[`it renders correctly with no cards 1`] = `
-<div>
-  <div>
+<div
+  className="root"
+>
+  <div
+    className="entryForm"
+  >
     <form
       onKeyDown={[Function]}
       onReset={[Function]}
       onSubmit={[Function]}
     >
-      <div>
-        <div>
-          <label>
+      <div
+        className="card"
+      >
+        <div
+          className="root"
+        >
+          <label
+            className="label"
+            htmlFor="card"
+          >
             Gift Card Number
           </label>
-          <div>
+          <div
+            className="card_input_container"
+          >
             <span
+              className="root"
               style={
                 Object {
                   "--iconsAfter": 0,
@@ -147,9 +215,13 @@ exports[`it renders correctly with no cards 1`] = `
                 }
               }
             >
-              <span>
+              <span
+                className="input"
+              >
                 <input
+                  className="input"
                   disabled={false}
+                  id="card"
                   name="card"
                   onBlur={[Function]}
                   onChange={[Function]}
@@ -157,30 +229,46 @@ exports[`it renders correctly with no cards 1`] = `
                   value=""
                 />
               </span>
-              <span />
-              <span />
+              <span
+                className="before"
+              />
+              <span
+                className="after"
+              />
             </span>
-            <p />
+            <p
+              className="root"
+            />
           </div>
         </div>
-        <div>
-          <label />
+        <div
+          className="root"
+        >
+          <label
+            className="label"
+          />
           <button
+            className="root_normalPriority"
             disabled={false}
             onClick={[MockFunction]}
             type="button"
           >
-            <span>
+            <span
+              className="content"
+            >
               Apply
             </span>
           </button>
         </div>
         <button
+          className="check_balance_button"
           disabled={false}
           onClick={[MockFunction]}
           type="button"
         >
-          <span>
+          <span
+            className="content"
+          >
             Check balance
           </span>
         </button>
diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/giftCards.spec.js b/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/giftCards.spec.js
index 31b6a5582a..206f9814e4 100644
--- a/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/giftCards.spec.js
+++ b/packages/venia-ui/lib/components/CartPage/GiftCards/__tests__/giftCards.spec.js
@@ -4,6 +4,8 @@ import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards/u
 
 import GiftCards from '../giftCards';
 
+jest.mock('../../../../classify');
+
 /*
  *  Mock talon.
  */
diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.css b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.css
index 330de4e1e0..253c6cbcf8 100644
--- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.css
+++ b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.css
@@ -15,7 +15,7 @@
 .card {
     align-items: start;
     display: grid;
-    gap: 1rem;
+    gap: 1.5rem;
     grid-template-columns: 1fr auto;
     grid-template-areas:
         'card_entry apply_button'
@@ -25,6 +25,19 @@
 .card_input_container {
 }
 
+.card_input_container_error input {
+    border-color: rgb(var(--venia-global-color-red-400));
+}
+
+.card_input_container_error input:focus {
+    border-color: rgb(var(--venia-global-color-gray-600));
+}
+
+.card_input_container_error p {
+    color: rgb(var(--venia-global-color-error));
+    font-weight: var(--venia-global-fontWeight-semibold);
+}
+
 .cards_container {
     align-items: baseline;
     display: grid;
diff --git a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js
index 69d9694a0a..d8e0d42901 100644
--- a/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js
+++ b/packages/venia-ui/lib/components/CartPage/GiftCards/giftCards.js
@@ -116,6 +116,10 @@ const GiftCards = props => {
         </div>
     );
 
+    const containerClass = shouldDisplayCardError
+        ? classes.card_input_container_error
+        : classes.card_input_container;
+
     const cardEntryContents = (
         <div className={classes.card}>
             <Field
@@ -123,7 +127,7 @@ const GiftCards = props => {
                 id={classes.card}
                 label="Gift Card Number"
             >
-                <div className={classes.card_input_container}>
+                <div className={containerClass}>
                     <TextInput
                         id={classes.card}
                         disabled={isApplyingCard || isCheckingBalance}
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/__snapshots__/couponCode.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/__snapshots__/couponCode.spec.js.snap
index 6118125683..a16d4258f1 100644
--- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/__snapshots__/couponCode.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/__snapshots__/couponCode.spec.js.snap
@@ -120,7 +120,6 @@ exports[`renders CouponCode input and submit button 1`] = `
 
 exports[`renders an error message if an error occurs on code entry 1`] = `
 <form
-  className="entryForm"
   onKeyDown={[Function]}
   onReset={[Function]}
   onSubmit={[Function]}
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.css b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.css
index 51ae053962..d0e107df83 100644
--- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.css
+++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.css
@@ -1,13 +1,28 @@
 /* Styles for "add" view. */
-.entryForm {
+.entryForm,
+.entryFormError {
     display: grid;
     grid-template-columns: 1fr auto;
-    grid-column-gap: 1rem;
+    grid-column-gap: 1.5rem;
+}
+
+.entryFormError input {
+    border-color: rgb(var(--venia-global-color-red-400));
+}
+
+.entryFormError input:focus {
+    border-color: rgb(var(--venia-global-color-gray-600));
+}
+
+.entryFormError p {
+    color: rgb(var(--venia-global-color-error));
+    font-weight: var(--venia-global-fontWeight-semibold);
 }
 
 /* on mobile... */
 @media (max-width: 960px) {
-    .entryForm {
+    .entryForm,
+    .entryFormError {
         /* switch to rows. */
         grid-template-columns: unset;
         grid-template-rows: 1fr 1fr;
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js
index 1085f24b4c..01756ac6ad 100644
--- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js
+++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js
@@ -93,6 +93,8 @@ const CouponCode = props => {
         return 'Something went wrong. Refresh and try again.';
     }
 
+    const formClass = errorMessage ? classes.entryFormError : classes.entryForm;
+
     if (data.cart.applied_coupons) {
         const codes = data.cart.applied_coupons.map(({ code }) => {
             return (
@@ -114,7 +116,7 @@ const CouponCode = props => {
         return <div>{codes}</div>;
     } else {
         return (
-            <Form className={classes.entryForm} onSubmit={handleApplyCoupon}>
+            <Form className={formClass} onSubmit={handleApplyCoupon}>
                 <Field id="couponCode" label="Coupon Code">
                     <TextInput
                         field="couponCode"
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/__tests__/__snapshots__/giftOptions.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/__tests__/__snapshots__/giftOptions.spec.js.snap
index be68599cea..8428db4bb8 100644
--- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/__tests__/__snapshots__/giftOptions.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/GiftOptions/__tests__/__snapshots__/giftOptions.spec.js.snap
@@ -16,23 +16,24 @@ exports[`it renders gift options in venia cart page 1`] = `
         type="checkbox"
       />
       <span>
-        <span>
-          <svg
-            fill="none"
-            height={18}
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            viewBox="0 0 24 24"
-            width={18}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <polyline
-              points="20 6 9 17 4 12"
-            />
-          </svg>
-        </span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polyline
+            points="9 11 12 14 22 4"
+          />
+          <path
+            d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+          />
+        </svg>
       </span>
       <span>
         Include gift receipt
@@ -53,7 +54,28 @@ exports[`it renders gift options in venia cart page 1`] = `
         onClick={[Function]}
         type="checkbox"
       />
-      <span />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            height="18"
+            rx="2"
+            ry="2"
+            width="18"
+            x="3"
+            y="3"
+          />
+        </svg>
+      </span>
       <span>
         Include printed card
       </span>
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingForm.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingForm.spec.js.snap
index 285614e8db..197937ffcb 100644
--- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingForm.spec.js.snap
@@ -63,13 +63,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
@@ -255,13 +255,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
@@ -447,13 +447,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
@@ -530,13 +530,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
@@ -682,13 +682,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
@@ -765,13 +765,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
@@ -906,13 +906,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
@@ -989,13 +989,13 @@ Array [
             <svg
               className="icon"
               fill="none"
-              height={18}
+              height={24}
               stroke="currentColor"
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth="2"
               viewBox="0 0 24 24"
-              width={18}
+              width={24}
               xmlns="http://www.w3.org/2000/svg"
             >
               <polyline
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingRadios.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingRadios.spec.js.snap
index 5e1385dfb3..cace810347 100644
--- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingRadios.spec.js.snap
+++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/__tests__/__snapshots__/shippingRadios.spec.js.snap
@@ -20,6 +20,27 @@ exports[`automatically selects first option when none selected 1`] = `
         type="radio"
         value="usps|priority"
       />
+      <span
+        className="icon"
+      >
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span
         className="label"
       >
@@ -46,6 +67,27 @@ exports[`automatically selects first option when none selected 1`] = `
         type="radio"
         value="fedex|nextday"
       />
+      <span
+        className="icon"
+      >
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span
         className="label"
       >
@@ -88,6 +130,27 @@ exports[`renders list of shipping methods 1`] = `
         type="radio"
         value="usps|priority"
       />
+      <span
+        className="icon"
+      >
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span
         className="label"
       >
@@ -114,6 +177,27 @@ exports[`renders list of shipping methods 1`] = `
         type="radio"
         value="fedex|nextday"
       />
+      <span
+        className="icon"
+      >
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span
         className="label"
       >
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.css b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.css
index 7014febc26..2c99abe547 100644
--- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.css
+++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.css
@@ -1,6 +1,6 @@
 .root {
     display: grid;
-    gap: 1rem 2rem;
+    gap: 0.9375rem 1.5rem;
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
         'country country'
diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css b/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css
index c562f08c42..e4e280dff6 100644
--- a/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css
+++ b/packages/venia-ui/lib/components/CartPage/ProductListing/quantity.css
@@ -1,4 +1,5 @@
 .root {
+    --stroke: var(--venia-global-color-gray-600);
     text-align: center;
     display: grid;
     grid-template-columns: 1fr 4rem 1fr;
@@ -25,33 +26,33 @@
 
 .button {
     align-items: center;
-    background-color: white;
-    border: 1px solid rgb(var(--venia-global-color-gray-darker));
+    background-color: rgb(var(--venia-global-color-gray-50));
+    border: 2px solid rgb(var(--venia-global-color-gray-600));
     border-radius: 50%;
     display: inline-flex;
-    height: 2.25rem;
+    height: 2rem;
     justify-content: center;
-    width: 2.25rem;
+    stroke: rgb(var(--stroke));
+    width: 2rem;
 }
 
-.button:disabled {
-    border-color: rgb(var(--venia-global-color-gray-darker)) !important;
-    background-color: #d0d0d0 !important;
-    opacity: 0.5;
-    cursor: not-allowed;
+.button:hover {
+    --stroke: rgb(var(--venia-global-color-gray-900));
+    border-color: rgb(var(--stroke));
 }
 
-.button:focus {
-    border-color: rgb(var(--venia-global-color-teal));
-    outline: none;
+.button:disabled,
+.button:disabled:hover {
+    --stroke: rgb(var(--venia-global-color-gray-400));
+    border-color: rgb(var(--venia-global-color-gray-400));
 }
 
-.button:hover {
-    border-color: rgb(var(--venia-global-color-teal));
+.button:disabled {
+    cursor: not-allowed;
 }
 
-.button:active {
-    border-color: rgb(var(--venia-global-color-teal));
+.button:focus {
+    outline: none;
 }
 
 .button_decrement {
@@ -63,7 +64,10 @@
 }
 
 .icon {
-    composes: root from '../../Icon/icon.css';
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    touch-action: manipulation;
 }
 
 .input {
diff --git a/packages/venia-ui/lib/components/Checkbox/__tests__/__snapshots__/checkbox.spec.js.snap b/packages/venia-ui/lib/components/Checkbox/__tests__/__snapshots__/checkbox.spec.js.snap
index 368a54cc0d..0440f6f934 100644
--- a/packages/venia-ui/lib/components/Checkbox/__tests__/__snapshots__/checkbox.spec.js.snap
+++ b/packages/venia-ui/lib/components/Checkbox/__tests__/__snapshots__/checkbox.spec.js.snap
@@ -19,7 +19,28 @@ exports[`renders the correct tree 1`] = `
     />
     <span
       className="icon"
-    />
+    >
+      <svg
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          height="18"
+          rx="2"
+          ry="2"
+          width="18"
+          x="3"
+          y="3"
+        />
+      </svg>
+    </span>
     <span
       className="label"
     >
diff --git a/packages/venia-ui/lib/components/Checkbox/checkbox.css b/packages/venia-ui/lib/components/Checkbox/checkbox.css
index 6d8f02b08b..96f8d5b3e2 100644
--- a/packages/venia-ui/lib/components/Checkbox/checkbox.css
+++ b/packages/venia-ui/lib/components/Checkbox/checkbox.css
@@ -1,55 +1,54 @@
 .root {
+    --stroke: var(--venia-global-color-gray-600);
     align-items: center;
-    color: rgb(var(--venia-global-color-text));
-    display: inline-grid;
-    font-size: 1rem;
-    font-weight: 400;
-    gap: 0.5rem;
+    color: rgb(var(--venia-global-color-gray-900));
+    display: grid;
+    gap: calc(0.875rem - 5px);
     grid-auto-flow: column;
-    grid-template-columns: auto;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
     justify-items: center;
-    margin: 0.5rem;
-    vertical-align: top;
+    line-height: 1.5rem;
+}
+
+.input {
+    -webkit-appearance: none;
+    background: none;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    grid-area: input;
+    height: 1.5rem;
+    width: 1.5rem;
 }
 
 .icon {
-    align-items: center;
-    display: inline-flex;
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-    height: 1.25rem;
-    justify-content: center;
+    grid-area: input;
+    height: 1.5rem;
     pointer-events: none;
-    width: 1.25rem;
+    width: 1.5rem;
 }
 
-.input {
-    background: none;
-    border: 1px solid rgb(var(--venia-global-color-text));
-    border-radius: 2px;
-    cursor: pointer;
-    display: inline-flex;
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-    height: 1.25rem;
-    margin: 0;
-    width: 1.25rem;
-    -webkit-appearance: none;
+.icon svg {
+    stroke: rgb(var(--stroke));
+}
+
+.label {
+    font-size: var(--venia-typography-body-M-fontSize);
+    grid-area: label;
+    justify-self: start;
 }
 
 .input:disabled {
     cursor: default;
 }
 
-.input:focus {
-    border-color: rgb(var(--venia-global-color-teal));
-    box-shadow: 0 0 0 2px rgb(var(--venia-global-color-teal-light)),
-        0 0 0.5rem 2px rgb(var(--venia-global-color-teal) / 0.2);
-    outline: none;
+.input:checked + .icon {
+    --stroke: var(--venia-brand-color-1-700);
 }
 
-.label {
-    font-size: 1rem;
-    grid-column: 2 / span 1;
-    grid-row: 1 / span 1;
+.input:active,
+.input:focus {
+    box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
+    outline: none;
 }
diff --git a/packages/venia-ui/lib/components/Checkbox/checkbox.js b/packages/venia-ui/lib/components/Checkbox/checkbox.js
index c0a2c2b2e6..41f5e56806 100644
--- a/packages/venia-ui/lib/components/Checkbox/checkbox.js
+++ b/packages/venia-ui/lib/components/Checkbox/checkbox.js
@@ -5,13 +5,15 @@ import { compose } from 'redux';
 
 import classify from '../../classify';
 import { Message } from '../Field';
-import Icon from '../Icon';
-import { Check as CheckIcon } from 'react-feather';
+import { CheckSquare, Square } from 'react-feather';
 import defaultClasses from './checkbox.css';
 
 /* TODO: change lint config to use `label-has-associated-control` */
 /* eslint-disable jsx-a11y/label-has-for */
 
+const checkedIcon = <CheckSquare />;
+const uncheckedIcon = <Square />;
+
 export class Checkbox extends Component {
     static propTypes = {
         classes: shape({
@@ -33,6 +35,7 @@ export class Checkbox extends Component {
     render() {
         const { classes, fieldState, id, label, message, ...rest } = this.props;
         const { value: checked } = fieldState;
+        const icon = checked ? checkedIcon : uncheckedIcon;
 
         return (
             <Fragment>
@@ -43,9 +46,7 @@ export class Checkbox extends Component {
                         fieldState={fieldState}
                         id={id}
                     />
-                    <span className={classes.icon}>
-                        {checked && <Icon src={CheckIcon} size={18} />}
-                    </span>
+                    <span className={classes.icon}>{icon}</span>
                     <span className={classes.label}>{label}</span>
                 </label>
                 <Message fieldState={fieldState}>{message}</Message>
diff --git a/packages/venia-ui/lib/components/Checkout/__tests__/__snapshots__/paymentsForm.spec.js.snap b/packages/venia-ui/lib/components/Checkout/__tests__/__snapshots__/paymentsForm.spec.js.snap
index 8c2b78e5ec..f5039c7cb6 100644
--- a/packages/venia-ui/lib/components/Checkout/__tests__/__snapshots__/paymentsForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/Checkout/__tests__/__snapshots__/paymentsForm.spec.js.snap
@@ -42,26 +42,24 @@ exports[`renders a PaymentsForm component 1`] = `
         <span
           className="icon"
         >
-          <span
-            className="root"
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              className="icon"
-              fill="none"
-              height={18}
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              width={18}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <polyline
-                points="20 6 9 17 4 12"
-              />
-            </svg>
-          </span>
+            <polyline
+              points="9 11 12 14 22 4"
+            />
+            <path
+              d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+            />
+          </svg>
         </span>
         <span
           className="label"
@@ -145,7 +143,28 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
         />
         <span
           className="icon"
-        />
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="18"
+              rx="2"
+              ry="2"
+              width="18"
+              x="3"
+              y="3"
+            />
+          </svg>
+        </span>
         <span
           className="label"
         >
diff --git a/packages/venia-ui/lib/components/Checkout/flow.css b/packages/venia-ui/lib/components/Checkout/flow.css
index f63ea54ae3..e2f38766dd 100644
--- a/packages/venia-ui/lib/components/Checkout/flow.css
+++ b/packages/venia-ui/lib/components/Checkout/flow.css
@@ -28,7 +28,7 @@
     left: 0;
     max-height: calc(100vh - 8.5rem);
     overflow: auto;
-    padding: 0 1.5rem;
+    padding: 0 1.5rem 0.5rem;
     position: absolute;
     right: 0;
 }
diff --git a/packages/venia-ui/lib/components/Checkout/paymentsForm.css b/packages/venia-ui/lib/components/Checkout/paymentsForm.css
index e80c17078c..24ef13cf53 100644
--- a/packages/venia-ui/lib/components/Checkout/paymentsForm.css
+++ b/packages/venia-ui/lib/components/Checkout/paymentsForm.css
@@ -47,6 +47,10 @@
     grid-column-end: span 2;
 }
 
+.postcode {
+    margin-bottom: 6px;
+}
+
 .braintree {
     min-height: 356px;
 }
diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap
index 1b72342f1c..5d0f5d1f71 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/createAccount.spec.js.snap
@@ -127,7 +127,28 @@ exports[`CreateAccount renders CreateAccount component 1`] = `
           onChange={[Function]}
           type="checkbox"
         />
-        <span />
+        <span>
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="18"
+              rx="2"
+              ry="2"
+              width="18"
+              x="3"
+              y="3"
+            />
+          </svg>
+        </span>
         <span>
           Subscribe to news and updates
         </span>
@@ -276,7 +297,28 @@ exports[`CreateAccount renders errors 1`] = `
           onChange={[Function]}
           type="checkbox"
         />
-        <span />
+        <span>
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="18"
+              rx="2"
+              ry="2"
+              width="18"
+              x="3"
+              y="3"
+            />
+          </svg>
+        </span>
         <span>
           Subscribe to news and updates
         </span>
diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/creditCard.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/creditCard.spec.js.snap
index d3d3d3c4a3..bfa7e1f028 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/creditCard.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/creditCard.spec.js.snap
@@ -76,6 +76,7 @@ exports[`Should return correct shape 1`] = `
           }
         }
         label="Street Address 2"
+        optional={true}
       >
         Field Component
       </div>
diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.css
index c00ab973fa..0f646c21c0 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.css
+++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.css
@@ -22,7 +22,7 @@
 
 .billing_address_fields_root {
     display: grid;
-    gap: 0.5rem;
+    gap: 0.9375rem 1.5rem;
     padding: 1rem 0rem;
 }
 
diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.js b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.js
index 513ee31b79..3b8827b95d 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard.js
@@ -204,6 +204,7 @@ const CreditCard = props => {
                     <Field
                         classes={fieldClasses.street2}
                         label="Street Address 2"
+                        optional={true}
                     >
                         <TextInput
                             field="street2"
diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.css
index 8cf48cd0c0..75dfb10c4d 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.css
+++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.css
@@ -13,5 +13,6 @@
 
 .radio_label {
     font-weight: 600;
+    justify-self: start;
     min-width: 16rem;
 }
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
index cfc905a66f..42869e5a8d 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
@@ -240,6 +240,11 @@ Array [
           htmlFor="street1"
         >
           Street Address 2
+          <span
+            className="optional"
+          >
+            Optional
+          </span>
         </label>
         <span
           className="root"
@@ -432,7 +437,28 @@ Array [
         />
         <span
           className="icon"
-        />
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect
+              height="18"
+              rx="2"
+              ry="2"
+              width="18"
+              x="3"
+              y="3"
+            />
+          </svg>
+        </span>
         <span
           className="label"
         >
@@ -637,6 +663,11 @@ Array [
           htmlFor="street1"
         >
           Street Address 2
+          <span
+            className="optional"
+          >
+            Optional
+          </span>
         </label>
         <span
           className="root"
@@ -830,26 +861,24 @@ Array [
         <span
           className="icon"
         >
-          <span
-            className="root"
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              className="icon"
-              fill="none"
-              height={18}
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              width={18}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <polyline
-                points="20 6 9 17 4 12"
-              />
-            </svg>
-          </span>
+            <polyline
+              points="9 11 12 14 22 4"
+            />
+            <path
+              d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"
+            />
+          </svg>
         </span>
         <span
           className="label"
@@ -1115,6 +1144,11 @@ Array [
           htmlFor="street1"
         >
           Street Address 2
+          <span
+            className="optional"
+          >
+            Optional
+          </span>
         </label>
         <span
           className="root"
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
index 14d1437e27..2cdd039c22 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
@@ -210,6 +210,11 @@ Array [
           htmlFor="street1"
         >
           Street Address 2
+          <span
+            className="optional"
+          >
+            Optional
+          </span>
         </label>
         <span
           className="root"
@@ -617,6 +622,11 @@ Array [
           htmlFor="street1"
         >
           Street Address 2
+          <span
+            className="optional"
+          >
+            Optional
+          </span>
         </label>
         <span
           className="root"
@@ -1013,6 +1023,11 @@ Array [
           htmlFor="street1"
         >
           Street Address 2
+          <span
+            className="optional"
+          >
+            Optional
+          </span>
         </label>
         <span
           className="root"
@@ -1421,6 +1436,11 @@ Array [
           htmlFor="street1"
         >
           Street Address 2
+          <span
+            className="optional"
+          >
+            Optional
+          </span>
         </label>
         <span
           className="root"
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.css
index 20d153d80e..ddeb8dee6a 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.css
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.css
@@ -1,6 +1,6 @@
 .root {
     display: grid;
-    gap: 0.5rem 1.5rem;
+    gap: 0.9375rem 1.5rem;
     grid-template-columns: 1fr 1fr;
     width: 100%;
 }
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
index 62f681d964..113ba99289 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
@@ -134,7 +134,11 @@ const CustomerForm = props => {
                     </Field>
                 </div>
                 <div className={classes.street1}>
-                    <Field id="street1" label="Street Address 2">
+                    <Field
+                        id="street1"
+                        label="Street Address 2"
+                        optional={true}
+                    >
                         <TextInput field="street[1]" />
                     </Field>
                 </div>
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
index efbdbb6635..13ec2c3316 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
@@ -91,7 +91,11 @@ const GuestForm = props => {
                     </Field>
                 </div>
                 <div className={classes.street1}>
-                    <Field id="street1" label="Street Address 2">
+                    <Field
+                        id="street1"
+                        label="Street Address 2"
+                        optional={true}
+                    >
                         <TextInput field="street[1]" />
                     </Field>
                 </div>
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap
index 7ee97627a9..ce7355066e 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap
@@ -33,6 +33,27 @@ exports[`it disables inputs when the page is updating 1`] = `
           type="radio"
           value="flatrate|flatrate"
         />
+        <span
+          className="icon"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+            />
+          </svg>
+        </span>
         <span
           className="label"
         >
@@ -102,6 +123,27 @@ exports[`it renders correctly 1`] = `
           type="radio"
           value="flatrate|flatrate"
         />
+        <span
+          className="icon"
+        >
+          <svg
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+            />
+          </svg>
+        </span>
         <span
           className="label"
         >
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap
index baa2b07cd3..14f881ccec 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap
@@ -100,6 +100,27 @@ exports[`it disables the submit button while loading 1`] = `
                   type="radio"
                   value="flatrate|flatrate"
                 />
+                <span
+                  className="icon"
+                >
+                  <svg
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                  </svg>
+                </span>
                 <span
                   className="label"
                 >
@@ -246,6 +267,27 @@ exports[`it renders correctly 1`] = `
                   type="radio"
                   value="flatrate|flatrate"
                 />
+                <span
+                  className="icon"
+                >
+                  <svg
+                    fill="none"
+                    height="24"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                  </svg>
+                </span>
                 <span
                   className="label"
                 >
diff --git a/packages/venia-ui/lib/components/Country/__tests__/__snapshots__/country.spec.js.snap b/packages/venia-ui/lib/components/Country/__tests__/__snapshots__/country.spec.js.snap
index 264ce57df9..2b4c924555 100644
--- a/packages/venia-ui/lib/components/Country/__tests__/__snapshots__/country.spec.js.snap
+++ b/packages/venia-ui/lib/components/Country/__tests__/__snapshots__/country.spec.js.snap
@@ -43,13 +43,13 @@ exports[`renders a disabled dropdown while loading 1`] = `
         <svg
           className="icon"
           fill="none"
-          height={18}
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width={18}
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <polyline
@@ -123,13 +123,13 @@ exports[`renders dropdown with country data 1`] = `
         <svg
           className="icon"
           fill="none"
-          height={18}
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width={18}
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <polyline
diff --git a/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap b/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap
index 91161e2d3e..bbf5c30c84 100644
--- a/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap
+++ b/packages/venia-ui/lib/components/CreateAccount/__tests__/__snapshots__/createAccount.spec.js.snap
@@ -11,7 +11,6 @@ exports[`renders the correct tree 1`] = `
   </p>
   <div>
     <label>
-      <span />
       First Name
     </label>
     <span
@@ -38,7 +37,6 @@ exports[`renders the correct tree 1`] = `
   </div>
   <div>
     <label>
-      <span />
       Last Name
     </label>
     <span
@@ -65,7 +63,6 @@ exports[`renders the correct tree 1`] = `
   </div>
   <div>
     <label>
-      <span />
       Email
     </label>
     <span
@@ -92,7 +89,6 @@ exports[`renders the correct tree 1`] = `
   </div>
   <div>
     <label>
-      <span />
       Password
     </label>
     <span
@@ -120,7 +116,6 @@ exports[`renders the correct tree 1`] = `
   </div>
   <div>
     <label>
-      <span />
       Confirm Password
     </label>
     <span
@@ -154,7 +149,28 @@ exports[`renders the correct tree 1`] = `
         onChange={[Function]}
         type="checkbox"
       />
-      <span />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect
+            height="18"
+            rx="2"
+            ry="2"
+            width="18"
+            x="3"
+            y="3"
+          />
+        </svg>
+      </span>
       <span>
         Subscribe to news and updates
       </span>
diff --git a/packages/venia-ui/lib/components/CreateAccount/createAccount.css b/packages/venia-ui/lib/components/CreateAccount/createAccount.css
index 78b81e0ada..d044f10814 100644
--- a/packages/venia-ui/lib/components/CreateAccount/createAccount.css
+++ b/packages/venia-ui/lib/components/CreateAccount/createAccount.css
@@ -1,6 +1,6 @@
 .root {
     display: grid;
-    gap: 1rem;
+    gap: 0.9375rem;
     justify-items: stretch;
     padding: 1rem 1.5rem;
 }
@@ -33,5 +33,5 @@
 }
 
 .subscribe {
-    margin-left: -0.5rem;
+    margin-left: -0.375rem;
 }
diff --git a/packages/venia-ui/lib/components/CreateAccount/createAccount.js b/packages/venia-ui/lib/components/CreateAccount/createAccount.js
index 25fa7ea79a..25c33fce01 100644
--- a/packages/venia-ui/lib/components/CreateAccount/createAccount.js
+++ b/packages/venia-ui/lib/components/CreateAccount/createAccount.js
@@ -71,7 +71,7 @@ const CreateAccount = props => {
             onSubmit={handleSubmit}
         >
             <p className={classes.lead}>{LEAD}</p>
-            <Field label="First Name" required={true}>
+            <Field label="First Name">
                 <TextInput
                     field="customer.firstname"
                     autoComplete="given-name"
@@ -79,7 +79,7 @@ const CreateAccount = props => {
                     validateOnBlur
                 />
             </Field>
-            <Field label="Last Name" required={true}>
+            <Field label="Last Name">
                 <TextInput
                     field="customer.lastname"
                     autoComplete="family-name"
@@ -87,7 +87,7 @@ const CreateAccount = props => {
                     validateOnBlur
                 />
             </Field>
-            <Field label="Email" required={true}>
+            <Field label="Email">
                 <TextInput
                     field="customer.email"
                     autoComplete="email"
@@ -95,7 +95,7 @@ const CreateAccount = props => {
                     validateOnBlur
                 />
             </Field>
-            <Field label="Password" required={true}>
+            <Field label="Password">
                 <TextInput
                     field="password"
                     type="password"
@@ -108,7 +108,7 @@ const CreateAccount = props => {
                     validateOnBlur
                 />
             </Field>
-            <Field label="Confirm Password" required={true}>
+            <Field label="Confirm Password">
                 <TextInput
                     field="confirm"
                     type="password"
diff --git a/packages/venia-ui/lib/components/Field/field.css b/packages/venia-ui/lib/components/Field/field.css
index 579969babb..b5d3511ee3 100644
--- a/packages/venia-ui/lib/components/Field/field.css
+++ b/packages/venia-ui/lib/components/Field/field.css
@@ -7,21 +7,23 @@
 .label {
     align-items: center;
     display: flex;
-    font-size: 0.875rem;
+    font-size: 1rem;
+    font-weight: var(--venia-global-fontWeight-semibold);
+    justify-content: space-between;
     line-height: 1rem;
-    padding: 0.375rem 0.125rem;
-    min-height: 1.75rem;
+    padding: 0.5625rem 0.125rem;
+    min-height: 2.125rem;
 }
 
 .input {
     background: white;
-    border: 1px solid rgb(var(--venia-global-color-text-alt));
-    border-radius: 2px;
+    border: 2px solid rgb(var(--venia-global-color-gray-600));
+    border-radius: 6px;
     color: rgb(var(--venia-global-color-text));
     display: inline-flex;
     flex: 0 0 100%;
     font-size: 1rem;
-    height: 2.25rem;
+    height: 2.5rem;
     margin: 0;
     max-width: 100%;
     padding: calc(0.375rem - 1px) calc(0.625rem - 1px);
@@ -30,16 +32,12 @@
 }
 
 .input:focus {
-    border-color: rgb(var(--venia-global-color-teal));
-    box-shadow: 0 0 0 2px rgb(var(--venia-global-color-teal-light)),
-        0 0 0.5rem 2px rgb(var(--venia-global-color-teal) / 0.2);
+    box-shadow: -6px 6px rgb(var(--venia-brand-color-1-100));
     outline: none;
 }
 
-.requiredSymbol {
-    background-color: black;
-    width: 0.4rem;
-    height: 0.4rem;
-    border-radius: 50%;
-    margin-right: 0.4rem;
+.optional {
+    color: rgb(var(--venia-global-color-gray-700));
+    font-size: var(--venia-global-fontSize-100);
+    font-weight: var(--venia-global-fontWeight-normal);
 }
diff --git a/packages/venia-ui/lib/components/Field/field.js b/packages/venia-ui/lib/components/Field/field.js
index a3a8b8677c..4af823b0b3 100644
--- a/packages/venia-ui/lib/components/Field/field.js
+++ b/packages/venia-ui/lib/components/Field/field.js
@@ -5,17 +5,17 @@ import { mergeClasses } from '../../classify';
 import defaultClasses from './field.css';
 
 const Field = props => {
-    const { children, id, label, required } = props;
+    const { children, id, label, optional } = props;
     const classes = mergeClasses(defaultClasses, props.classes);
-    const requiredSymbol = required ? (
-        <span className={classes.requiredSymbol} />
+    const optionalSymbol = optional ? (
+        <span className={classes.optional}>Optional</span>
     ) : null;
 
     return (
         <div className={classes.root}>
             <label className={classes.label} htmlFor={id}>
-                {requiredSymbol}
                 {label}
+                {optionalSymbol}
             </label>
             {children}
         </div>
@@ -30,7 +30,7 @@ Field.propTypes = {
     }),
     id: string,
     label: node,
-    required: bool
+    optional: bool
 };
 
 export default Field;
diff --git a/packages/venia-ui/lib/components/Field/fieldIcons.css b/packages/venia-ui/lib/components/Field/fieldIcons.css
index cee7be44f2..0674741035 100644
--- a/packages/venia-ui/lib/components/Field/fieldIcons.css
+++ b/packages/venia-ui/lib/components/Field/fieldIcons.css
@@ -3,7 +3,7 @@
     grid-auto-flow: column;
     grid-template-areas: 'before input after';
     grid-template-columns: auto 1fr auto;
-    height: 2.25rem;
+    height: 2.5rem;
     width: 100%;
 }
 
@@ -15,8 +15,8 @@
 }
 
 .input > input {
-    padding-left: calc(1.875rem * var(--iconsBefore) + 0.375rem - 1px);
-    padding-right: calc(1.875rem * var(--iconsAfter) + 0.375rem - 1px);
+    padding-left: calc(1.875rem * var(--iconsBefore) + 0.625rem);
+    padding-right: calc(1.875rem * var(--iconsAfter) + 0.625rem);
 }
 
 .before,
@@ -24,8 +24,9 @@
     align-items: center;
     display: flex;
     justify-content: center;
+    margin: 0 2px;
     pointer-events: none;
-    width: 2.25rem;
+    width: 2.5rem;
     z-index: 1;
 }
 
@@ -41,3 +42,7 @@
 .after {
     grid-area: after;
 }
+
+.before svg {
+    stroke: rgb(var(--venia-global-color-gray-600));
+}
diff --git a/packages/venia-ui/lib/components/Field/message.css b/packages/venia-ui/lib/components/Field/message.css
index 8e17eebfd4..e32192bb68 100644
--- a/packages/venia-ui/lib/components/Field/message.css
+++ b/packages/venia-ui/lib/components/Field/message.css
@@ -3,7 +3,7 @@
     font-size: 0.875rem;
     font-weight: 400;
     line-height: 1rem;
-    padding: 0.375rem 0.125rem 0.125rem;
+    padding: 0.625rem 0.125rem 0.125rem;
 }
 
 .root:empty {
@@ -13,4 +13,5 @@
 .root_error {
     composes: root;
     color: rgb(var(--venia-global-color-error));
+    font-weight: var(--venia-global-fontWeight-semibold);
 }
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.css b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.css
index f5f7ed8dd3..ebc1920a4d 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.css
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.css
@@ -1,13 +1,39 @@
 .root {
-    display: inline-flex;
     align-items: center;
+    color: rgb(var(--venia-global-color-gray-900));
+    display: grid;
+    gap: 0.75rem;
+    grid-auto-flow: column;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+    justify-items: center;
+    line-height: 1.5rem;
     outline: 0;
 }
 
+.root:active .icon,
+.root:focus .icon {
+    box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
+    outline: none;
+}
+
+.root.checked .icon svg {
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
 .icon {
-    width: 1rem;
-    height: 1rem;
-    display: inline-flex;
-    border-radius: 3px;
-    margin-right: 1rem;
+    border-radius: 4px;
+    grid-area: input;
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
+.icon svg {
+    stroke: rgb(var(--venia-global-color-gray-600));
+}
+
+.label {
+    font-size: var(--venia-typography-body-S-fontSize);
+    grid-area: label;
+    justify-self: start;
 }
diff --git a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
index ccd562b792..717857227d 100644
--- a/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
+++ b/packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js
@@ -13,11 +13,14 @@ const FilterDefault = props => {
     const iconSrc = isSelected ? CheckSquare : Square;
 
     return (
-        <button className={classes.root} {...restProps}>
+        <button
+            className={`${classes.root} ${isSelected ? classes.checked : ''}`}
+            {...restProps}
+        >
             <span className={classes.icon}>
-                <Icon src={iconSrc} size={20} />
+                <Icon src={iconSrc} size={24} />
             </span>
-            <span>{label}</span>
+            <span className={classes.label}>{label}</span>
         </button>
     );
 };
@@ -27,7 +30,9 @@ export default FilterDefault;
 FilterDefault.propTypes = {
     classes: shape({
         root: string,
-        icon: string
+        icon: string,
+        label: string,
+        checked: string
     }),
     group: string,
     isSelected: bool,
diff --git a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap
index 06095228ed..080047048a 100644
--- a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap
+++ b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/__snapshots__/forgotPasswordForm.spec.js.snap
@@ -2,16 +2,21 @@
 
 exports[`renders correctly 1`] = `
 <form
+  className="root"
   onKeyDown={[Function]}
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div>
-    <label>
-      <span />
+  <div
+    className="root"
+  >
+    <label
+      className="label"
+    >
       Email Address
     </label>
     <span
+      className="root"
       style={
         Object {
           "--iconsAfter": 0,
@@ -19,26 +24,40 @@ exports[`renders correctly 1`] = `
         }
       }
     >
-      <span>
+      <span
+        className="input"
+      >
         <input
           autoComplete="email"
+          className="input"
           name="email"
           onBlur={[Function]}
           onChange={[Function]}
           value=""
         />
       </span>
-      <span />
-      <span />
+      <span
+        className="before"
+      />
+      <span
+        className="after"
+      />
     </span>
-    <p />
+    <p
+      className="root"
+    />
   </div>
-  <div>
+  <div
+    className="buttonContainer"
+  >
     <button
+      className="root_highPriority"
       disabled={false}
       type="submit"
     >
-      <span>
+      <span
+        className="content"
+      >
         Submit
       </span>
     </button>
diff --git a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/forgotPasswordForm.spec.js b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/forgotPasswordForm.spec.js
index 2204a3f9b0..aad435b36b 100644
--- a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/forgotPasswordForm.spec.js
+++ b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/__tests__/forgotPasswordForm.spec.js
@@ -4,6 +4,8 @@ import { Form } from 'informed';
 
 import ForgotPasswordForm from '../forgotPasswordForm';
 
+jest.mock('../../../../classify');
+
 test('renders correctly', () => {
     const wrapper = createTestInstance(
         <ForgotPasswordForm onSubmit={() => {}} />
diff --git a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js
index 8ab4e8b608..62462928f9 100644
--- a/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js
+++ b/packages/venia-ui/lib/components/ForgotPassword/ForgotPasswordForm/forgotPasswordForm.js
@@ -19,7 +19,7 @@ const ForgotPasswordForm = props => {
             initialValues={initialValues}
             onSubmit={onSubmit}
         >
-            <Field label="Email Address" required={true}>
+            <Field label="Email Address">
                 <TextInput
                     autoComplete="email"
                     field="email"
diff --git a/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap b/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap
index 656d1e7e53..d4f197e186 100644
--- a/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap
+++ b/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap
@@ -12,6 +12,25 @@ Array [
         type="radio"
         value="1"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         one
       </span>
@@ -25,6 +44,25 @@ Array [
         type="radio"
         value="2"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         holy moly two has a lot of content
       </span>
@@ -38,6 +76,25 @@ Array [
         type="radio"
         value="3"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         three
       </span>
@@ -51,6 +108,25 @@ Array [
         type="radio"
         value="4"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         four
       </span>
@@ -64,6 +140,25 @@ Array [
         type="radio"
         value="5"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         five
       </span>
@@ -77,6 +172,25 @@ Array [
         type="radio"
         value="6"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         six six six six six
       </span>
@@ -90,6 +204,25 @@ Array [
         type="radio"
         value="7"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         this 7th one
       </span>
@@ -103,6 +236,25 @@ Array [
         type="radio"
         value="whatever"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         disabled
       </span>
@@ -123,6 +275,25 @@ Array [
         type="radio"
         value="1"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         one
       </span>
@@ -135,6 +306,25 @@ Array [
         type="radio"
         value="2"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         holy moly two has a lot of content
       </span>
@@ -147,6 +337,25 @@ Array [
         type="radio"
         value="3"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         three
       </span>
@@ -159,6 +368,25 @@ Array [
         type="radio"
         value="4"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         four
       </span>
@@ -171,6 +399,25 @@ Array [
         type="radio"
         value="5"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         five
       </span>
@@ -183,6 +430,25 @@ Array [
         type="radio"
         value="6"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         six six six six six
       </span>
@@ -195,6 +461,25 @@ Array [
         type="radio"
         value="7"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         this 7th one
       </span>
@@ -208,6 +493,25 @@ Array [
         type="radio"
         value="whatever"
       />
+      <span>
+        <svg
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </span>
       <span>
         disabled
       </span>
diff --git a/packages/venia-ui/lib/components/RadioGroup/radio.css b/packages/venia-ui/lib/components/RadioGroup/radio.css
index 2816935200..4ca7efe8ed 100644
--- a/packages/venia-ui/lib/components/RadioGroup/radio.css
+++ b/packages/venia-ui/lib/components/RadioGroup/radio.css
@@ -1,45 +1,56 @@
 .root {
     align-items: center;
-    color: rgb(var(--venia-global-color-text));
-    display: inline-grid;
-    font-size: 1rem;
-    font-weight: 400;
-    gap: 0.5rem;
+    color: rgb(var(--venia-global-color-gray-900));
+    display: grid;
+    gap: 0.75rem;
     grid-auto-flow: column;
-    grid-template-columns: auto min-content;
-    margin: 0.5rem;
-    vertical-align: top;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+    margin: 0;
+    justify-items: center;
+    line-height: 1.5rem;
 }
 
 .input {
+    -webkit-appearance: none;
     background: none;
     background-clip: content-box;
-    border: 1px solid rgb(var(--venia-global-color-text-alt));
+    border: 7px solid transparent;
     border-radius: 50%;
-    height: 1.25rem;
+    grid-area: input;
+    height: 1.5rem;
     margin: 0;
-    padding: 5px;
-    position: relative;
-    width: 1.25rem;
-    -webkit-appearance: none;
+    width: 1.5rem;
+    z-index: 2;
 }
 
-.input:checked {
-    background-color: rgb(var(--venia-global-color-text));
-    border-color: rgb(var(--venia-global-color-text));
+.icon {
+    grid-area: input;
+    height: 1.5rem;
+    width: 1.5rem;
+    z-index: 1;
 }
 
-.input:focus {
-    border-color: rgb(var(--venia-global-color-teal));
-    box-shadow: 0 0 0 2px rgb(var(--venia-global-color-teal-light)),
-        0 0 0.5rem 2px rgb(var(--venia-global-color-teal) / 0.2);
-    outline: none;
+.icon svg {
+    stroke: rgb(var(--venia-global-color-gray-600));
 }
 
 .label {
-    align-items: center;
-    color: currentColor;
-    display: inline-flex;
-    font-size: 1rem;
-    line-height: 1rem;
+    font-size: var(--venia-typography-body-S-fontSize);
+    grid-area: label;
+    justify-self: start;
+}
+
+.input:checked {
+    background-color: rgb(var(--venia-brand-color-1-700));
+}
+
+.input:checked + .icon svg {
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
+.input:active,
+.input:focus {
+    box-shadow: -3px 3px rgb(var(--venia-brand-color-1-100));
+    outline: none;
 }
diff --git a/packages/venia-ui/lib/components/RadioGroup/radio.js b/packages/venia-ui/lib/components/RadioGroup/radio.js
index a9ee7ee8fd..b35af84b03 100644
--- a/packages/venia-ui/lib/components/RadioGroup/radio.js
+++ b/packages/venia-ui/lib/components/RadioGroup/radio.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Circle } from 'react-feather';
 import { node, shape, string } from 'prop-types';
 import { Radio } from 'informed';
 
@@ -13,7 +14,8 @@ export class RadioOption extends Component {
         classes: shape({
             input: string,
             label: string,
-            root: string
+            root: string,
+            icon: string
         }),
         label: node.isRequired,
         value: node.isRequired
@@ -31,6 +33,9 @@ export class RadioOption extends Component {
                     id={id}
                     value={value}
                 />
+                <span className={classes.icon}>
+                    <Circle />
+                </span>
                 <span className={classes.label}>
                     {label || (value != null ? value : '')}
                 </span>
diff --git a/packages/venia-ui/lib/components/RadioGroup/radioGroup.css b/packages/venia-ui/lib/components/RadioGroup/radioGroup.css
index cb0d339e16..e31bb5dc48 100644
--- a/packages/venia-ui/lib/components/RadioGroup/radioGroup.css
+++ b/packages/venia-ui/lib/components/RadioGroup/radioGroup.css
@@ -10,9 +10,12 @@
 
 .radioContainer {
     display: grid;
-    gap: 0.5rem;
-    grid-template-columns: auto auto;
-    justify-content: start;
+    gap: 0.75rem;
+    grid-auto-flow: column;
+    grid-template-areas: 'input label';
+    grid-template-columns: min-content 1fr;
+    justify-content: center;
+    line-height: 1.5rem;
 }
 
 .message {
diff --git a/packages/venia-ui/lib/components/Region/__tests__/__snapshots__/region.spec.js.snap b/packages/venia-ui/lib/components/Region/__tests__/__snapshots__/region.spec.js.snap
index ff8294d8cc..c4f5726662 100644
--- a/packages/venia-ui/lib/components/Region/__tests__/__snapshots__/region.spec.js.snap
+++ b/packages/venia-ui/lib/components/Region/__tests__/__snapshots__/region.spec.js.snap
@@ -51,13 +51,13 @@ exports[`renders disabled dropdown while loading 1`] = `
         <svg
           className="icon"
           fill="none"
-          height={18}
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width={18}
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <polyline
@@ -131,13 +131,13 @@ exports[`renders dropdown with regions 1`] = `
         <svg
           className="icon"
           fill="none"
-          height={18}
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width={18}
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <polyline
diff --git a/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap b/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap
index d4b696c32d..9ead995178 100644
--- a/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap
+++ b/packages/venia-ui/lib/components/SearchBar/__tests__/__snapshots__/searchField.spec.js.snap
@@ -36,13 +36,13 @@ exports[`renders correctly 1`] = `
         <svg
           className="icon"
           fill="none"
-          height={18}
+          height={24}
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
           viewBox="0 0 24 24"
-          width={18}
+          width={24}
           xmlns="http://www.w3.org/2000/svg"
         >
           <circle
diff --git a/packages/venia-ui/lib/components/SearchBar/autocomplete.css b/packages/venia-ui/lib/components/SearchBar/autocomplete.css
index 468696c41a..e62db69229 100644
--- a/packages/venia-ui/lib/components/SearchBar/autocomplete.css
+++ b/packages/venia-ui/lib/components/SearchBar/autocomplete.css
@@ -16,8 +16,10 @@
 
 .root {
     background-color: white;
-    border: 1px solid rgb(var(--venia-global-color-border));
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+    border: 2px solid rgb(var(--venia-global-color-gray-600));
+    border-radius: 0 0 6px 6px;
+    border-top-style: none;
+    box-shadow: -6px 6px rgb(var(--venia-brand-color-1-100));
     display: grid;
     font-size: 0.8125rem;
     gap: 0.75rem;
@@ -25,6 +27,7 @@
     padding: 1rem 1rem;
     position: absolute;
     right: 0;
+    top: 2.25rem;
     transition-property: opacity, transform, visibility;
     z-index: 2;
 }
diff --git a/packages/venia-ui/lib/components/SearchBar/searchBar.css b/packages/venia-ui/lib/components/SearchBar/searchBar.css
index 985d00d9df..8a1a26636d 100644
--- a/packages/venia-ui/lib/components/SearchBar/searchBar.css
+++ b/packages/venia-ui/lib/components/SearchBar/searchBar.css
@@ -30,7 +30,6 @@
 .search {
     display: grid;
     position: relative;
-    z-index: 2;
 }
 
 .autocomplete {
diff --git a/packages/venia-ui/lib/components/SearchBar/searchBar.js b/packages/venia-ui/lib/components/SearchBar/searchBar.js
index 8b0a5956b2..1535447e38 100644
--- a/packages/venia-ui/lib/components/SearchBar/searchBar.js
+++ b/packages/venia-ui/lib/components/SearchBar/searchBar.js
@@ -34,12 +34,6 @@ const SearchBar = props => {
                     initialValues={initialValues}
                     onSubmit={handleSubmit}
                 >
-                    <div className={classes.search}>
-                        <SearchField
-                            onChange={handleChange}
-                            onFocus={handleFocus}
-                        />
-                    </div>
                     <div className={classes.autocomplete}>
                         <Autocomplete
                             setVisible={setExpanded}
@@ -47,6 +41,12 @@ const SearchBar = props => {
                             visible={expanded}
                         />
                     </div>
+                    <div className={classes.search}>
+                        <SearchField
+                            onChange={handleChange}
+                            onFocus={handleFocus}
+                        />
+                    </div>
                 </Form>
             </div>
         </div>
diff --git a/packages/venia-ui/lib/components/SearchBar/searchField.js b/packages/venia-ui/lib/components/SearchBar/searchField.js
index ce2021e120..23b7304328 100644
--- a/packages/venia-ui/lib/components/SearchBar/searchField.js
+++ b/packages/venia-ui/lib/components/SearchBar/searchField.js
@@ -7,8 +7,8 @@ import Icon from '../Icon';
 import TextInput from '../TextInput';
 import Trigger from '../Trigger';
 
-const clearIcon = <Icon src={ClearIcon} size={18} />;
-const searchIcon = <Icon src={SearchIcon} size={18} />;
+const clearIcon = <Icon src={ClearIcon} size={24} />;
+const searchIcon = <Icon src={SearchIcon} size={24} />;
 
 const SearchField = props => {
     const { onChange, onFocus } = props;
diff --git a/packages/venia-ui/lib/components/Select/select.css b/packages/venia-ui/lib/components/Select/select.css
index 53b3d4584f..c8a2052849 100644
--- a/packages/venia-ui/lib/components/Select/select.css
+++ b/packages/venia-ui/lib/components/Select/select.css
@@ -6,7 +6,8 @@
     height: 2.25rem;
 }
 
-.input {
+.input,
+.input_error {
     composes: input from '../Field/field.css';
     grid-area: input-start / input-start / input-end / icon-end;
     padding-right: calc(2.25rem - 1px);
@@ -16,3 +17,7 @@
     pointer-events: none;
     color: rgb(var(--venia-global-color-gray-darker));
 }
+
+.input_error {
+    border-color: rgb(var(--venia-global-color-red-400));
+}
diff --git a/packages/venia-ui/lib/components/Select/select.js b/packages/venia-ui/lib/components/Select/select.js
index 8772768eb7..88a207f242 100644
--- a/packages/venia-ui/lib/components/Select/select.js
+++ b/packages/venia-ui/lib/components/Select/select.js
@@ -10,7 +10,7 @@ import defaultClasses from './select.css';
 import Icon from '../Icon';
 import { ChevronDown as ChevronDownIcon } from 'react-feather';
 
-const arrow = <Icon src={ChevronDownIcon} size={18} />;
+const arrow = <Icon src={ChevronDownIcon} size={24} />;
 
 class Select extends Component {
     static propTypes = {
@@ -46,13 +46,17 @@ class Select extends Component {
             )
         );
 
+        const inputClass = fieldState.error
+            ? classes.input_error
+            : classes.input;
+
         return (
             <Fragment>
                 <FieldIcons after={arrow}>
                     <BasicSelect
                         {...rest}
                         fieldState={fieldState}
-                        className={classes.input}
+                        className={inputClass}
                     >
                         {options}
                     </BasicSelect>
diff --git a/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap b/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap
index cb0a9ae9bf..b874d3ef3d 100644
--- a/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap
+++ b/packages/venia-ui/lib/components/SignIn/__tests__/__snapshots__/signIn.spec.js.snap
@@ -16,9 +16,6 @@ exports[`displays an error message if there is a sign in error 1`] = `
       <label
         className="label"
       >
-        <span
-          className="requiredSymbol"
-        />
         Email
       </label>
       <span
@@ -59,9 +56,6 @@ exports[`displays an error message if there is a sign in error 1`] = `
       <label
         className="label"
       >
-        <span
-          className="requiredSymbol"
-        />
         Password
       </label>
       <span
@@ -141,9 +135,6 @@ exports[`renders correctly 1`] = `
       <label
         className="label"
       >
-        <span
-          className="requiredSymbol"
-        />
         Email
       </label>
       <span
@@ -184,9 +175,6 @@ exports[`renders correctly 1`] = `
       <label
         className="label"
       >
-        <span
-          className="requiredSymbol"
-        />
         Password
       </label>
       <span
diff --git a/packages/venia-ui/lib/components/SignIn/signIn.css b/packages/venia-ui/lib/components/SignIn/signIn.css
index c4cc1cf84d..2a69c9d9af 100644
--- a/packages/venia-ui/lib/components/SignIn/signIn.css
+++ b/packages/venia-ui/lib/components/SignIn/signIn.css
@@ -14,7 +14,7 @@
 
 .form {
     display: grid;
-    row-gap: 1rem;
+    row-gap: 0.9375rem;
 }
 
 .modal {
diff --git a/packages/venia-ui/lib/components/SignIn/signIn.js b/packages/venia-ui/lib/components/SignIn/signIn.js
index 63a3c153a3..a8a2904fe8 100644
--- a/packages/venia-ui/lib/components/SignIn/signIn.js
+++ b/packages/venia-ui/lib/components/SignIn/signIn.js
@@ -62,14 +62,14 @@ const SignIn = props => {
                 className={classes.form}
                 onSubmit={handleSubmit}
             >
-                <Field label="Email" required={true}>
+                <Field label="Email">
                     <TextInput
                         autoComplete="email"
                         field="email"
                         validate={isRequired}
                     />
                 </Field>
-                <Field label="Password" required={true}>
+                <Field label="Password">
                     <TextInput
                         autoComplete="current-password"
                         field="password"
diff --git a/packages/venia-ui/lib/components/TextArea/textArea.css b/packages/venia-ui/lib/components/TextArea/textArea.css
index ae3cb7a05d..d14c321d6e 100644
--- a/packages/venia-ui/lib/components/TextArea/textArea.css
+++ b/packages/venia-ui/lib/components/TextArea/textArea.css
@@ -3,11 +3,5 @@
     height: auto;
     max-width: 100%;
     min-width: 100%;
-}
-
-.input:focus {
-    border-color: rgb(var(--venia-global-color-teal));
-    box-shadow: 0 0 0 2px rgb(var(--venia-global-color-teal-light)),
-        0 0 0.5rem 2px rgb(var(--venia-global-color-teal) / 0.2);
-    outline: none;
+    padding: 12px 15px;
 }
diff --git a/packages/venia-ui/lib/components/TextInput/textInput.css b/packages/venia-ui/lib/components/TextInput/textInput.css
index 864c150db7..6e759bbb5b 100644
--- a/packages/venia-ui/lib/components/TextInput/textInput.css
+++ b/packages/venia-ui/lib/components/TextInput/textInput.css
@@ -5,3 +5,8 @@
 .input:disabled {
     color: rgb(var(--venia-global-color-gray-darker));
 }
+
+.input_error {
+    composes: input from '../Field/field.css';
+    border-color: rgb(var(--venia-global-color-red-400));
+}
diff --git a/packages/venia-ui/lib/components/TextInput/textInput.js b/packages/venia-ui/lib/components/TextInput/textInput.js
index 9c70ccc5ab..0d27287d84 100644
--- a/packages/venia-ui/lib/components/TextInput/textInput.js
+++ b/packages/venia-ui/lib/components/TextInput/textInput.js
@@ -30,13 +30,16 @@ export class TextInput extends Component {
             ...rest
         } = this.props;
 
+        const inputClass = fieldState.error
+            ? classes.input_error
+            : classes.input;
         return (
             <Fragment>
                 <FieldIcons after={after} before={before}>
                     <BasicText
                         {...rest}
                         fieldState={fieldState}
-                        className={classes.input}
+                        className={inputClass}
                     />
                 </FieldIcons>
                 <Message fieldState={fieldState}>{message}</Message>
diff --git a/packages/venia-ui/lib/tokens.css b/packages/venia-ui/lib/tokens.css
index efa8738eca..85d4df1bc6 100644
--- a/packages/venia-ui/lib/tokens.css
+++ b/packages/venia-ui/lib/tokens.css
@@ -7,6 +7,7 @@
     --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
 
     /* color */
+    --venia-global-color-blue-100: 194 200 255;
     --venia-global-color-blue-400: 61 132 255;
     --venia-global-color-blue-500: 51 109 255;
     --venia-global-color-blue-600: 41 84 255;
@@ -86,6 +87,7 @@
 /* alias tokens */
 :global(:root) {
     /* colors */
+    --venia-brand-color-1-100: var(--venia-global-color-blue-100);
     --venia-brand-color-1-400: var(--venia-global-color-blue-400);
     --venia-brand-color-1-500: var(--venia-global-color-blue-500);
     --venia-brand-color-1-600: var(--venia-global-color-blue-600);