diff --git a/package-lock.json b/package-lock.json
index 6d1a9a28c..c9823ebb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34509,6 +34509,18 @@
       "integrity": "sha512-oaqDlrGz0dhBvNlt6iEtWWs6zFSodhxPlYzK3gDoEBTAQvImWipOqeb4u2XI77sY+UZkS1wu6kAxJYUMySJ+iQ==",
       "dev": true
     },
+    "typeface-nunito": {
+      "version": "0.0.72",
+      "resolved": "https://registry.npmjs.org/typeface-nunito/-/typeface-nunito-0.0.72.tgz",
+      "integrity": "sha512-id43vYQiM9emQ6sbysLDRp8fb39Dk5yW/q6uSPHJnE1XVDSfrxYWFg/YiSoiaK+kO7wbuWb2HSjCAfH96Mabvg==",
+      "dev": true
+    },
+    "typeface-open-sans": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmjs.org/typeface-open-sans/-/typeface-open-sans-0.0.75.tgz",
+      "integrity": "sha512-0lLmB7pfj113OP4T78SbpSmC4OCdFQ0vUxdSXQccsSb6qF76F92iEuC/DghFgmPswTyidk8+Hwf+PS/htiJoRQ==",
+      "dev": true
+    },
     "typeface-source-sans-pro": {
       "version": "0.0.54",
       "resolved": "https://registry.npmjs.org/typeface-source-sans-pro/-/typeface-source-sans-pro-0.0.54.tgz",
diff --git a/package.json b/package.json
index 415595e35..776c8bb13 100644
--- a/package.json
+++ b/package.json
@@ -365,6 +365,8 @@
     "typeface-source-sans-pro": "^0.0.54",
     "typescript": "3.3.4000",
     "typescript-snapshots-plugin": "^1.6.0",
+    "typeface-nunito": "0.0.72",
+    "typeface-open-sans": "0.0.75",
     "wait-for-expect": "^1.1.1",
     "webpack": "^4.30.0",
     "webpack-assets-manifest": "^3.1.1",
diff --git a/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx b/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx
index a8f3cf3f8..a23651f5d 100644
--- a/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx
+++ b/src/core/client/admin/App/DecisionHistory/ApprovedComment.tsx
@@ -1,8 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import ApprovedIcon from "./ApprovedIcon";
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
@@ -10,6 +8,7 @@ import Footer from "./Footer";
 import GoToCommentLink from "./GoToCommentLink";
 import Info from "./Info";
 import Timestamp from "./Timestamp";
+import Username from "./Username";
 
 interface Props {
   href: string;
@@ -18,10 +17,6 @@ interface Props {
   onGotoComment?: React.EventHandler<React.MouseEvent>;
 }
 
-const Username: FunctionComponent<{ username: string }> = ({ username }) => (
-  <strong>{username}</strong>
-);
-
 const ApprovedComment: FunctionComponent<Props> = props => (
   <DecisionItem icon={<ApprovedIcon />}>
     <Localized
@@ -31,9 +26,7 @@ const ApprovedComment: FunctionComponent<Props> = props => (
       <Info>{"Approved comment by <Username></Username>"}</Info>
     </Localized>
     <Footer>
-      <Typography variant="timestamp">
-        <Timestamp>{props.date}</Timestamp>
-      </Typography>
+      <Timestamp>{props.date}</Timestamp>
       <DotDivider />
       <GoToCommentLink href={props.href} onClick={props.onGotoComment} />
     </Footer>
diff --git a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css
index 50efdc1dc..f9cae42f2 100644
--- a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css
+++ b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css
@@ -1,3 +1,3 @@
 .root {
-  color: var(--palette-success-main);
+  color: var(--v2-palette-success-main);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx
index 03f80790b..3c6b1b255 100644
--- a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx
+++ b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.tsx
@@ -1,11 +1,13 @@
 import React, { FunctionComponent } from "react";
 
-import { Icon } from "coral-ui/components";
+import { Icon } from "coral-ui/components/v2";
 
 import styles from "./ApprovedIcon.css";
 
 const ApprovedIcon: FunctionComponent = () => (
-  <Icon className={styles.root}>check</Icon>
+  <Icon size="md" className={styles.root}>
+    check_circled
+  </Icon>
 );
 
 export default ApprovedIcon;
diff --git a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css
index 84f602e5d..91a29eff9 100644
--- a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css
+++ b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css
@@ -3,6 +3,6 @@
 }
 
 .historyIcon {
-  color: var(--palette-text-secondary);
-  margin-right: calc(1.5 * var(--mini-unit));
+  color: var(--v2-palette-text-secondary);
+  margin-right: 10px;
 }
diff --git a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx
index e712722c9..15dfc595c 100644
--- a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx
+++ b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.tsx
@@ -1,7 +1,12 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { BaseButton, ClickOutside, Icon, Popover } from "coral-ui/components";
+import {
+  BaseButton,
+  ClickOutside,
+  Icon,
+  Popover,
+} from "coral-ui/components/v2";
 
 import DecisionHistoryQuery from "./DecisionHistoryQuery";
 
diff --git a/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx b/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx
index 61f3dacf7..939bf45db 100644
--- a/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx
+++ b/src/core/client/admin/App/DecisionHistory/DecisionHistoryLoading.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Delay, Flex, Spinner } from "coral-ui/components";
+import { Delay, Flex, Spinner } from "coral-ui/components/v2";
 
 import Main from "./Main";
 import Title from "./Title";
diff --git a/src/core/client/admin/App/DecisionHistory/DecisionItem.css b/src/core/client/admin/App/DecisionHistory/DecisionItem.css
index ceb23e4be..de4a66b9f 100644
--- a/src/core/client/admin/App/DecisionHistory/DecisionItem.css
+++ b/src/core/client/admin/App/DecisionHistory/DecisionItem.css
@@ -1,6 +1,5 @@
 .root {
-  padding: calc(0.5 * var(--mini-unit)) calc(0.5 * var(--mini-unit))
-    calc(0.5 * var(--mini-unit)) 0;
+  padding: var(--v2-spacing-2) var(--v2-spacing-1);
 }
 
 .leftCol {
@@ -8,6 +7,6 @@
   justify-content: center;
   flex-grow: 0;
   flex-shrink: 0;
-  width: calc(3 * var(--mini-unit));
   padding-top: 3px;
+  margin-right: var(--v2-spacing-2);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx b/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx
index 562e2da39..04476663c 100644
--- a/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx
+++ b/src/core/client/admin/App/DecisionHistory/DecisionItem.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
 
 import styles from "./DecisionItem.css";
 
diff --git a/src/core/client/admin/App/DecisionHistory/DecisionList.css b/src/core/client/admin/App/DecisionHistory/DecisionList.css
index 92219280f..388876150 100644
--- a/src/core/client/admin/App/DecisionHistory/DecisionList.css
+++ b/src/core/client/admin/App/DecisionHistory/DecisionList.css
@@ -4,7 +4,7 @@
   list-style-type: none;
 
   & > * {
-    border-bottom: 1px solid var(--palette-divider);
+    border-bottom: 1px solid var(--v2-palette-decision-history-border);
   }
   & > *:last-child {
     border-bottom: 0;
diff --git a/src/core/client/admin/App/DecisionHistory/DotDivider.css b/src/core/client/admin/App/DecisionHistory/DotDivider.css
index 8df5fc9aa..090adbdbb 100644
--- a/src/core/client/admin/App/DecisionHistory/DotDivider.css
+++ b/src/core/client/admin/App/DecisionHistory/DotDivider.css
@@ -1,7 +1,7 @@
 .root {
   height: 100%;
-  font-size: calc(12rem / var(--rem-base));
-  line-height: calc(12em / 12);
-  color: var(--palette-divider);
-  padding: 0 calc(0.5 * var(--mini-unit));
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-palette-timestamp);
+  padding: 0 var(--v2-spacing-1);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/Empty.css b/src/core/client/admin/App/DecisionHistory/Empty.css
index e50019701..79dc92187 100644
--- a/src/core/client/admin/App/DecisionHistory/Empty.css
+++ b/src/core/client/admin/App/DecisionHistory/Empty.css
@@ -1,3 +1,10 @@
 .root {
   padding: calc(1.5 * var(--mini-unit)) calc(2 * var(--mini-unit));
 }
+
+.text {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-body-short);
+}
diff --git a/src/core/client/admin/App/DecisionHistory/Empty.tsx b/src/core/client/admin/App/DecisionHistory/Empty.tsx
index 1c3b83a98..d88e7e268 100644
--- a/src/core/client/admin/App/DecisionHistory/Empty.tsx
+++ b/src/core/client/admin/App/DecisionHistory/Empty.tsx
@@ -1,16 +1,16 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Flex, Typography } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
 
 import styles from "./Empty.css";
 
 const Empty: FunctionComponent<{}> = () => (
   <Flex justifyContent="center" alignItems="center" className={styles.root}>
     <Localized id="decisionHistory-youWillSeeAList">
-      <Typography>
+      <div className={styles.text}>
         You will see a list of your post moderation actions here.
-      </Typography>
+      </div>
     </Localized>
   </Flex>
 );
diff --git a/src/core/client/admin/App/DecisionHistory/Footer.css b/src/core/client/admin/App/DecisionHistory/Footer.css
index c3a2af639..0dbf825ea 100644
--- a/src/core/client/admin/App/DecisionHistory/Footer.css
+++ b/src/core/client/admin/App/DecisionHistory/Footer.css
@@ -1,2 +1,3 @@
 .root {
+  margin-top: var(--v2-spacing-1);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/Footer.tsx b/src/core/client/admin/App/DecisionHistory/Footer.tsx
index c1e50a899..a83a1f2d6 100644
--- a/src/core/client/admin/App/DecisionHistory/Footer.tsx
+++ b/src/core/client/admin/App/DecisionHistory/Footer.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
 
 import styles from "./Footer.css";
 
diff --git a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css
index 519ed50fb..38e560e48 100644
--- a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css
+++ b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css
@@ -1,9 +1,8 @@
 .root {
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-regular);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(14em / 12);
-  letter-spacing: calc(0.2em / 12);
-  color: var(--palette-primary-main);
-  text-decoration: none;
+  line-height: var(--v2-line-height-reset);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  font-size: var(--v2-font-size-1);
+  color: var(--v2-palette-link-text);
+  font-style: var(--v2-font-style-underline);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx
index edb689e99..aeed3bac1 100644
--- a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx
+++ b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import { Link } from "found";
 import React, { FunctionComponent } from "react";
 
-import { Icon, TextLink } from "coral-ui/components";
+import { Icon, TextLink } from "coral-ui/components/v2";
 
 import styles from "./GoToCommentLink.css";
 
diff --git a/src/core/client/admin/App/DecisionHistory/Info.css b/src/core/client/admin/App/DecisionHistory/Info.css
index daa3c0e8f..942637a82 100644
--- a/src/core/client/admin/App/DecisionHistory/Info.css
+++ b/src/core/client/admin/App/DecisionHistory/Info.css
@@ -1,6 +1,4 @@
 .root {
-  font-size: calc(14rem / var(--rem-base));
-  line-height: calc(16em / 12);
   /*
     Fallback begin
 
@@ -10,4 +8,9 @@
   word-break: break-all;
   /* Fallback end */
   word-break: break-word;
+  color: var(--v2-palette-text-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-body-short);
+  font-size: var(--v2-font-size-2);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/Info.tsx b/src/core/client/admin/App/DecisionHistory/Info.tsx
index 452eda05f..d4832915f 100644
--- a/src/core/client/admin/App/DecisionHistory/Info.tsx
+++ b/src/core/client/admin/App/DecisionHistory/Info.tsx
@@ -1,7 +1,5 @@
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import styles from "./Info.css";
 
 interface Props {
@@ -9,7 +7,7 @@ interface Props {
 }
 
 const Info: FunctionComponent<Props> = props => (
-  <Typography className={styles.root}>{props.children}</Typography>
+  <span className={styles.root}>{props.children}</span>
 );
 
 export default Info;
diff --git a/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx b/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx
index 017698356..f2fc6f6c8 100644
--- a/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx
+++ b/src/core/client/admin/App/DecisionHistory/RejectedComment.tsx
@@ -1,8 +1,6 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import DecisionItem from "./DecisionItem";
 import DotDivider from "./DotDivider";
 import Footer from "./Footer";
@@ -10,6 +8,7 @@ import GoToCommentLink from "./GoToCommentLink";
 import Info from "./Info";
 import RejectedIcon from "./RejectedIcon";
 import Timestamp from "./Timestamp";
+import Username from "./Username";
 
 interface Props {
   href: string;
@@ -18,10 +17,6 @@ interface Props {
   onGotoComment?: React.EventHandler<React.MouseEvent>;
 }
 
-const Username: FunctionComponent<{ username: string }> = ({ username }) => (
-  <strong>{username}</strong>
-);
-
 const RejectedComment: FunctionComponent<Props> = props => (
   <DecisionItem icon={<RejectedIcon />}>
     <Localized
@@ -31,9 +26,7 @@ const RejectedComment: FunctionComponent<Props> = props => (
       <Info>{"Rejected comment by <Username></Username>"}</Info>
     </Localized>
     <Footer>
-      <Typography variant="timestamp">
-        <Timestamp>{props.date}</Timestamp>
-      </Typography>
+      <Timestamp>{props.date}</Timestamp>
       <DotDivider />
       <GoToCommentLink href={props.href} onClick={props.onGotoComment} />
     </Footer>
diff --git a/src/core/client/admin/App/DecisionHistory/RejectedIcon.css b/src/core/client/admin/App/DecisionHistory/RejectedIcon.css
index 488befa65..c5bddba45 100644
--- a/src/core/client/admin/App/DecisionHistory/RejectedIcon.css
+++ b/src/core/client/admin/App/DecisionHistory/RejectedIcon.css
@@ -1,3 +1,3 @@
 .root {
-  color: var(--palette-error-main);
+  color: var(--v2-palette-error-main);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx b/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx
index 1dde0162f..38f0818f5 100644
--- a/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx
+++ b/src/core/client/admin/App/DecisionHistory/RejectedIcon.tsx
@@ -1,11 +1,13 @@
 import React, { FunctionComponent } from "react";
 
-import { Icon } from "coral-ui/components";
+import { Icon } from "coral-ui/components/v2";
 
 import styles from "./RejectedIcon.css";
 
 const RejectedIcon: FunctionComponent = () => (
-  <Icon className={styles.root}>cancel</Icon>
+  <Icon size="md" className={styles.root}>
+    cancel
+  </Icon>
 );
 
 export default RejectedIcon;
diff --git a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css
index 87c94f276..81935a4d1 100644
--- a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css
+++ b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css
@@ -1,16 +1,17 @@
 .root {
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
   text-transform: uppercase;
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(2 * var(--mini-unit));
-  letter-spacing: calc(0.2em / 12);
-  color: var(--palette-grey-main);
+  color: var(--v2-palette-link-text);
   width: 100%;
-  border-top: 1px solid var(--palette-divider);
+  border-top: 1px solid var(--v2-palette-decision-history-border);
   text-align: center;
+  padding-top: var(--v2-spacing-1);
+  padding-bottom: var(--v2-spacing-1);
 
   &:disabled {
-    color: var(--palette-grey-lighter);
+    color: var(--v2-palette-grey-lighter);
   }
 }
diff --git a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx
index 4cdf8bc7e..646244f57 100644
--- a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx
+++ b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { BaseButton } from "coral-ui/components";
+import { BaseButton } from "coral-ui/components/v2";
 
 import styles from "./ShowMoreButton.css";
 
diff --git a/src/core/client/admin/App/DecisionHistory/Timestamp.css b/src/core/client/admin/App/DecisionHistory/Timestamp.css
index 45c88b4cf..1035d2ee9 100644
--- a/src/core/client/admin/App/DecisionHistory/Timestamp.css
+++ b/src/core/client/admin/App/DecisionHistory/Timestamp.css
@@ -1,8 +1,7 @@
 .root {
-  color: var(--palette-text-secondary);
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(12rem / var(--rem-base));
-  line-height: calc(14em / 12);
-  letter-spacing: 0;
+  color: var(--v2-palette-timestamp);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/Timestamp.tsx b/src/core/client/admin/App/DecisionHistory/Timestamp.tsx
index 881e41ca8..a476021e8 100644
--- a/src/core/client/admin/App/DecisionHistory/Timestamp.tsx
+++ b/src/core/client/admin/App/DecisionHistory/Timestamp.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { RelativeTime } from "coral-ui/components";
+import { RelativeTime } from "coral-ui/components/v2";
 
 import styles from "./Timestamp.css";
 
diff --git a/src/core/client/admin/App/DecisionHistory/Title.css b/src/core/client/admin/App/DecisionHistory/Title.css
index 48e9ebba3..abe310699 100644
--- a/src/core/client/admin/App/DecisionHistory/Title.css
+++ b/src/core/client/admin/App/DecisionHistory/Title.css
@@ -1,16 +1,20 @@
 .root {
-  padding: 0 calc(0.5 * var(--mini-unit));
-  background-color: #f2f2f2;
-  color: var(--palette-text-primary);
-  border-bottom: 1px solid var(--palette-grey-lighter);
+  background: var(--v2-palette-decision-history-title-background);
+  padding: var(--v2-spacing-1);
+  color: var(--v2-palette-text-primary);
+  border-bottom: 1px solid var(--v2-palette-decision-history-border);
+  font-size: var(--v2-font-size-icon-medium);
+}
+
+.icon {
+  margin-right: var(--v2-spacing-2);
 }
 
 .text {
   text-transform: uppercase;
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(12em / 12);
-  letter-spacing: calc(0.2em / 12);
-  color: var(--palette-text-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  color: var(--v2-palette-text-primary);
+  font-size: var(--v2-font-size-2);
+  line-height: 1;
+  font-family: var(--v2-font-family-primary);
 }
diff --git a/src/core/client/admin/App/DecisionHistory/Title.tsx b/src/core/client/admin/App/DecisionHistory/Title.tsx
index d56a34daf..f72cfc295 100644
--- a/src/core/client/admin/App/DecisionHistory/Title.tsx
+++ b/src/core/client/admin/App/DecisionHistory/Title.tsx
@@ -1,17 +1,17 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Flex, Icon, Typography } from "coral-ui/components";
+import { Flex, Icon } from "coral-ui/components/v2";
 
 import styles from "./Title.css";
 
 const Title: FunctionComponent = () => (
   <Flex className={styles.root} alignItems="center">
-    <Icon>history</Icon>{" "}
+    <Icon className={styles.icon} size="md">
+      history
+    </Icon>
     <Localized id="decisionHistory-yourDecisionHistory">
-      <Typography container="span" className={styles.text}>
-        Your Decision History
-      </Typography>
+      <span className={styles.text}>Your Decision History</span>
     </Localized>
   </Flex>
 );
diff --git a/src/core/client/admin/App/DecisionHistory/Username.css b/src/core/client/admin/App/DecisionHistory/Username.css
new file mode 100644
index 000000000..fa7603d5d
--- /dev/null
+++ b/src/core/client/admin/App/DecisionHistory/Username.css
@@ -0,0 +1,7 @@
+.root {
+  color: var(--v2-palette-username-emphasis);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  line-height: var(--v2-line-height-body-short);
+  font-size: var(--v2-font-size-3);
+}
diff --git a/src/core/client/admin/App/DecisionHistory/Username.tsx b/src/core/client/admin/App/DecisionHistory/Username.tsx
new file mode 100644
index 000000000..9e98a5839
--- /dev/null
+++ b/src/core/client/admin/App/DecisionHistory/Username.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from "react";
+
+import styles from "./Username.css";
+
+interface Props {
+  username: string;
+}
+
+const Username: FunctionComponent<Props> = ({ username }) => (
+  <strong className={styles.root}>{username}</strong>
+);
+
+export default Username;
diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap
index 41e70e055..bcd6da0b9 100644
--- a/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap
+++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedComment.spec.tsx.snap
@@ -17,13 +17,9 @@ exports[`renders correctly 1`] = `
     </Info>
   </Localized>
   <Footer>
-    <ForwardRef(forwardRef)
-      variant="timestamp"
-    >
-      <DecisionHistory>
-        2018-07-06T18:24:00.000Z
-      </DecisionHistory>
-    </ForwardRef(forwardRef)>
+    <DecisionHistory>
+      2018-07-06T18:24:00.000Z
+    </DecisionHistory>
     <Footer />
     <GoToCommentLink
       href="#"
diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedIcon.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedIcon.spec.tsx.snap
index 85e50bb6a..2f4a971e9 100644
--- a/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedIcon.spec.tsx.snap
+++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/ApprovedIcon.spec.tsx.snap
@@ -3,7 +3,8 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   className="ApprovedIcon-root"
+  size="md"
 >
-  check
+  check_circled
 </ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/Empty.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/Empty.spec.tsx.snap
index 37fe9cb3c..c0c373140 100644
--- a/src/core/client/admin/App/DecisionHistory/__snapshots__/Empty.spec.tsx.snap
+++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/Empty.spec.tsx.snap
@@ -9,9 +9,11 @@ exports[`renders correctly 1`] = `
   <Localized
     id="decisionHistory-youWillSeeAList"
   >
-    <ForwardRef(forwardRef)>
+    <div
+      className="Empty-text"
+    >
       You will see a list of your post moderation actions here.
-    </ForwardRef(forwardRef)>
+    </div>
   </Localized>
 </ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/Info.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/Info.spec.tsx.snap
index 74ef09e04..d9c3b286c 100644
--- a/src/core/client/admin/App/DecisionHistory/__snapshots__/Info.spec.tsx.snap
+++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/Info.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<ForwardRef(forwardRef)
+<span
   className="Info-root"
 >
   children
-</ForwardRef(forwardRef)>
+</span>
 `;
diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedComment.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedComment.spec.tsx.snap
index 7bed59997..2e1bd35f2 100644
--- a/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedComment.spec.tsx.snap
+++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedComment.spec.tsx.snap
@@ -17,13 +17,9 @@ exports[`renders correctly 1`] = `
     </Info>
   </Localized>
   <Footer>
-    <ForwardRef(forwardRef)
-      variant="timestamp"
-    >
-      <DecisionHistory>
-        2018-07-06T18:24:00.000Z
-      </DecisionHistory>
-    </ForwardRef(forwardRef)>
+    <DecisionHistory>
+      2018-07-06T18:24:00.000Z
+    </DecisionHistory>
     <Footer />
     <GoToCommentLink
       href="#"
diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedIcon.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedIcon.spec.tsx.snap
index 47084b73c..2e38d6182 100644
--- a/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedIcon.spec.tsx.snap
+++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/RejectedIcon.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`renders correctly 1`] = `
 <ForwardRef(forwardRef)
   className="RejectedIcon-root"
+  size="md"
 >
   cancel
 </ForwardRef(forwardRef)>
diff --git a/src/core/client/admin/App/DecisionHistory/__snapshots__/Title.spec.tsx.snap b/src/core/client/admin/App/DecisionHistory/__snapshots__/Title.spec.tsx.snap
index 9670cf1dd..3a0b23ed5 100644
--- a/src/core/client/admin/App/DecisionHistory/__snapshots__/Title.spec.tsx.snap
+++ b/src/core/client/admin/App/DecisionHistory/__snapshots__/Title.spec.tsx.snap
@@ -5,19 +5,20 @@ exports[`renders correctly 1`] = `
   alignItems="center"
   className="Title-root"
 >
-  <ForwardRef(forwardRef)>
+  <ForwardRef(forwardRef)
+    className="Title-icon"
+    size="md"
+  >
     history
   </ForwardRef(forwardRef)>
-   
   <Localized
     id="decisionHistory-yourDecisionHistory"
   >
-    <ForwardRef(forwardRef)
+    <span
       className="Title-text"
-      container="span"
     >
       Your Decision History
-    </ForwardRef(forwardRef)>
+    </span>
   </Localized>
 </ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/admin/App/Main.tsx b/src/core/client/admin/App/Main.tsx
index fa2ba2a5d..28cd1a922 100644
--- a/src/core/client/admin/App/Main.tsx
+++ b/src/core/client/admin/App/Main.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
 import { LogoHorizontal } from "coral-ui/components";
-import { AppBar, Begin, Divider, End } from "coral-ui/components/AppBar";
+import { AppBar, Begin, Divider, End } from "coral-ui/components/v2/AppBar";
 
 import { DecisionHistoryButton } from "./DecisionHistory";
 import NavigationContainer from "./Navigation";
diff --git a/src/core/client/admin/App/Navigation/Navigation.tsx b/src/core/client/admin/App/Navigation/Navigation.tsx
index 0a8de2169..c53f5e0f3 100644
--- a/src/core/client/admin/App/Navigation/Navigation.tsx
+++ b/src/core/client/admin/App/Navigation/Navigation.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { AppBarNavigation } from "coral-ui/components";
+import { AppBarNavigation } from "coral-ui/components/v2";
 
 import NavigationLink from "./NavigationLink";
 
diff --git a/src/core/client/admin/App/Navigation/NavigationLink.tsx b/src/core/client/admin/App/Navigation/NavigationLink.tsx
index daa9b4026..8057f862e 100644
--- a/src/core/client/admin/App/Navigation/NavigationLink.tsx
+++ b/src/core/client/admin/App/Navigation/NavigationLink.tsx
@@ -1,7 +1,7 @@
 import { Link, LocationDescriptor } from "found";
 import React, { FunctionComponent } from "react";
 
-import { AppBarNavigationItem } from "coral-ui/components";
+import { AppBarNavigationItem } from "coral-ui/components/v2";
 
 interface Props {
   children: React.ReactNode;
diff --git a/src/core/client/admin/App/UserMenu/UserMenu.css b/src/core/client/admin/App/UserMenu/UserMenu.css
index 278978da0..42f0848f1 100644
--- a/src/core/client/admin/App/UserMenu/UserMenu.css
+++ b/src/core/client/admin/App/UserMenu/UserMenu.css
@@ -1,11 +1,17 @@
 .button {
   padding-top: 0;
   padding-bottom: 0;
-  margin-left: 5px;
+  margin-left: 15px;
 }
+
+.icon {
+  color: var(--v2-palette-user-menu-button);
+}
+
 .buttonText {
-  font-size: calc(18rem / var(--rem-base));
-  letter-spacing: calc(-0.2em / 18);
+  font-family: var(--v2-font-family-secondary);
+  color: var(--v2-palette-user-menu-button);
+  font-size: var(--v2-font-size-4);
   margin-left: 2px;
   margin-right: 1px;
 }
diff --git a/src/core/client/admin/App/UserMenu/UserMenu.tsx b/src/core/client/admin/App/UserMenu/UserMenu.tsx
index 462ec283e..3499b0b85 100644
--- a/src/core/client/admin/App/UserMenu/UserMenu.tsx
+++ b/src/core/client/admin/App/UserMenu/UserMenu.tsx
@@ -9,7 +9,7 @@ import {
   DropdownButton,
   DropdownDivider,
   Popover,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import styles from "./UserMenu.css";
 
@@ -60,13 +60,16 @@ const UserMenu: FunctionComponent<Props> = props => (
           className={styles.button}
           onClick={toggleVisibility}
           ref={ref}
-          variant="regular"
+          variant="plain"
+          uppercase={false}
           size="small"
         >
-          <ButtonIcon size="lg">account_circle</ButtonIcon>
+          <ButtonIcon className={styles.icon} size="lg">
+            account_circle
+          </ButtonIcon>
           <span className={styles.buttonText}>{props.username}</span>
           {
-            <ButtonIcon size="lg">
+            <ButtonIcon className={styles.icon} size="lg">
               {visible ? "arrow_drop_up" : "arrow_drop_down"}
             </ButtonIcon>
           }
diff --git a/src/core/client/admin/components/AutoLoadMore.tsx b/src/core/client/admin/components/AutoLoadMore.tsx
index 86cb1f6a9..9c429e431 100644
--- a/src/core/client/admin/components/AutoLoadMore.tsx
+++ b/src/core/client/admin/components/AutoLoadMore.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { withInView } from "coral-framework/lib/intersection";
-import { BaseButton, Spinner } from "coral-ui/components";
+import { BaseButton, Spinner } from "coral-ui/components/v2";
 
 interface Props {
   inView: boolean | undefined;
diff --git a/src/core/client/admin/components/ModerateCard/ApproveButton.css b/src/core/client/admin/components/ModerateCard/ApproveButton.css
index cf2ff389b..b01f55290 100644
--- a/src/core/client/admin/components/ModerateCard/ApproveButton.css
+++ b/src/core/client/admin/components/ModerateCard/ApproveButton.css
@@ -1,25 +1,25 @@
 .root {
-  border: 1px solid var(--palette-success-main);
+  border: 1px solid var(--v2-palette-button-outline-approve);
   box-sizing: border-box;
-  border-radius: var(--round-corners);
+  border-radius: var(--v2-round-corners);
   width: 65px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--palette-success-main);
+  color: var(--v2-palette-button-outline-approve);
   &:not(:disabled):active {
-    background-color: var(--palette-success-main);
-    color: var(--palette-common-white);
+    background-color: var(--v2-palette-button-outline-approve);
+    color: var(--v2-colors-pure-white);
   }
 }
 
 .invert {
-  background-color: var(--palette-success-main);
-  color: var(--palette-common-white);
+  background-color: var(--v2-palette-button-outline-approve);
+  color: var(--v2-colors-pure-white);
 }
 
 .icon {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
   color: inherit;
 }
diff --git a/src/core/client/admin/components/ModerateCard/ApproveButton.tsx b/src/core/client/admin/components/ModerateCard/ApproveButton.tsx
index 8be2ef2ac..6c38a52c1 100644
--- a/src/core/client/admin/components/ModerateCard/ApproveButton.tsx
+++ b/src/core/client/admin/components/ModerateCard/ApproveButton.tsx
@@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { BaseButton, Icon } from "coral-ui/components";
+import { BaseButton, Icon } from "coral-ui/components/v2";
 
 import styles from "./ApproveButton.css";
 
diff --git a/src/core/client/admin/components/ModerateCard/BanCommentUserMutation.ts b/src/core/client/admin/components/ModerateCard/BanCommentUserMutation.ts
index fe4858f15..b10d78a06 100644
--- a/src/core/client/admin/components/ModerateCard/BanCommentUserMutation.ts
+++ b/src/core/client/admin/components/ModerateCard/BanCommentUserMutation.ts
@@ -1,13 +1,14 @@
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { BanCommentUserMutation as MutationTypes } from "coral-admin/__generated__/BanCommentUserMutation.graphql";
 import {
   commitMutationPromiseNormalized,
   createMutation,
   MutationInput,
 } from "coral-framework/lib/relay";
 
+import { BanCommentUserMutation as MutationTypes } from "coral-admin/__generated__/BanCommentUserMutation.graphql";
+
 const clientMutationId = 0;
 
 const BanCommentUserMutation = createMutation(
diff --git a/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx b/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx
index 98aaf0ee1..ba07eeb43 100644
--- a/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.tsx
@@ -1,9 +1,10 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { CommentAuthorContainer_comment as CommentData } from "coral-admin/__generated__/CommentAuthorContainer_comment.graphql";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
-import { Tag } from "coral-ui/components";
+import { Tag } from "coral-ui/components/v2";
+
+import { CommentAuthorContainer_comment as CommentData } from "coral-admin/__generated__/CommentAuthorContainer_comment.graphql";
 
 import styles from "./CommentAuthorContainer.css";
 
diff --git a/src/core/client/admin/components/ModerateCard/CommentContent.css b/src/core/client/admin/components/ModerateCard/CommentContent.css
index 0d59c0902..285d85278 100644
--- a/src/core/client/admin/components/ModerateCard/CommentContent.css
+++ b/src/core/client/admin/components/ModerateCard/CommentContent.css
@@ -1,13 +1,52 @@
+$comment-content: var(--v2-colors-mono-900);
+$comment-blockquote-bg: var(--v2-colors-grey-100);
+$comment-highlight-bg: var(--v2-colors-yellow-500);
+$comment-link: var(--v2-palette-primary-main);
+$comment-link-active: var(--v2-palette-primary-darkest);
+
 .root {
-  composes: root from "coral-stream/shared/htmlContent.css";
+  composes: bodyCommentV2 from "coral-ui/shared/typography.css";
+  font-family: var(--v2-font-family-primary);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-body-comment);
+  color: $comment-content;
+  overflow-wrap: break-word;
+
+  & * bold,
+  & * strong {
+    font-weight: var(--v2-font-weight-primary-bold);
+  }
+  & * italic,
+  & * em {
+    font-style: italic;
+  }
+  blockquote {
+    background-color: $comment-blockquote-bg;
+    padding: var(--mini-unit);
+    margin: calc(2 * var(--mini-unit)) 0 calc(2 * var(--mini-unit))
+      var(--mini-unit);
+    border-radius: var(--round-corners);
+    &::after {
+      content: none;
+    }
+    &::before {
+      content: none;
+    }
+  }
 
   mark {
-    background-color: var(--palette-highlight);
+    background-color: $comment-highlight-bg;
     padding: 0 2px;
+    a {
+      color: $comment-link;
+    }
   }
   a {
-    color: var(--palette-primary-dark);
-    background-color: var(--palette-highlight);
+    color: $comment-link;
+    background-color: $comment-highlight-bg;
     padding: 0 2px;
+    &:hover {
+      color: $comment-link-active;
+    }
   }
 }
diff --git a/src/core/client/admin/components/ModerateCard/CommentContent.tsx b/src/core/client/admin/components/ModerateCard/CommentContent.tsx
index 0b878e747..252e546de 100644
--- a/src/core/client/admin/components/ModerateCard/CommentContent.tsx
+++ b/src/core/client/admin/components/ModerateCard/CommentContent.tsx
@@ -3,7 +3,6 @@ import { memoize } from "lodash";
 import React, { FunctionComponent } from "react";
 
 import { createPurify } from "coral-common/utils/purify";
-import { Typography } from "coral-ui/components";
 
 import styles from "./CommentContent.css";
 
@@ -131,10 +130,9 @@ const CommentContent: FunctionComponent<Props> = ({
 
     // Finally we render the content of the Shadow DOM Tree
     return (
-      <Typography
+      <div
         className={cn(className, styles.root)}
         dangerouslySetInnerHTML={{ __html: node.innerHTML }}
-        container="div"
       />
     );
   }
diff --git a/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx b/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx
index 1dadd742e..9a3c6fd31 100644
--- a/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/CommentRevisionContainer.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
-import { HorizontalGutter, Timestamp } from "coral-ui/components";
+import { HorizontalGutter, Timestamp } from "coral-ui/components/v2";
 
 import { CommentRevisionContainer_comment as CommentData } from "coral-admin/__generated__/CommentRevisionContainer_comment.graphql";
 import { CommentRevisionContainer_settings as SettingsData } from "coral-admin/__generated__/CommentRevisionContainer_settings.graphql";
diff --git a/src/core/client/admin/components/ModerateCard/FeatureButton.css b/src/core/client/admin/components/ModerateCard/FeatureButton.css
index 5fbeb7ecb..0166dd6f0 100644
--- a/src/core/client/admin/components/ModerateCard/FeatureButton.css
+++ b/src/core/client/admin/components/ModerateCard/FeatureButton.css
@@ -3,7 +3,7 @@
   right: 0px;
   top: 2px;
 
-  border: 1px solid var(--palette-grey-lighter);
+  border: 1px solid var(--v2-palette-grey-main);
   box-sizing: border-box;
   border-radius: var(--round-corners);
   padding: 2px var(--spacing-2) 2px var(--spacing-2);
@@ -11,22 +11,21 @@
   justify-content: center;
   align-items: center;
 
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-regular);
-  font-family: var(--font-family-sans-serif);
+  color: var(--v2-palette-grey-main);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
   line-height: 1.2;
-  letter-spacing: calc(0.2em / 14);
-  color: var(--palette-grey-lighter);
-  
+
   &:active {
-    background-color: var(--palette-primary-lightest);
-    border-color: var(--palette-primary-main);
-    color: var(--palette-primary-main);
+    background-color: var(--v2-palette-primary-lightest);
+    border-color: var(--v2-palette-primary-main);
+    color: var(--v2-palette-primary-main);
   }
 }
 
 .invert {
-  background-color: var(--palette-primary-main);
-  border-color: var(--palette-primary-main);
-  color: var(--palette-text-light) ;
-}
\ No newline at end of file
+  background-color: var(--v2-palette-primary-main);
+  border-color: var(--v2-palette-primary-main);
+  color: var(--v2-palette-text-light);
+}
diff --git a/src/core/client/admin/components/ModerateCard/FeatureButton.tsx b/src/core/client/admin/components/ModerateCard/FeatureButton.tsx
index 55f7472a4..fb826bd75 100644
--- a/src/core/client/admin/components/ModerateCard/FeatureButton.tsx
+++ b/src/core/client/admin/components/ModerateCard/FeatureButton.tsx
@@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { BaseButton } from "coral-ui/components";
+import { BaseButton } from "coral-ui/components/v2";
 
 import styles from "./FeatureButton.css";
 
diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css b/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css
index 3ce9c004c..395d5eab6 100644
--- a/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css
+++ b/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css
@@ -1,3 +1,7 @@
 .category {
-  color: var(--palette-error-darkest);
+  font-size: var(--v2-font-size-4);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-body-short);
+  color: var(--v2-palette-accordion-label);
 }
diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.tsx b/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.tsx
index 8f8d58ed9..08d7fc590 100644
--- a/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.tsx
+++ b/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.tsx
@@ -1,6 +1,8 @@
 import React, { FunctionComponent } from "react";
 
-import { HorizontalGutter, Typography } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
+
+import styles from "./FlagDetailsCategory.css";
 
 interface Props {
   category: React.ReactNode;
@@ -13,7 +15,7 @@ const FlagDetailsCategory: FunctionComponent<Props> = ({
 }) => {
   return (
     <HorizontalGutter size="half">
-      <Typography variant="bodyCopyBold">{category}</Typography>
+      <p className={styles.category}>{category}</p>
       <HorizontalGutter size="half">{children}</HorizontalGutter>
     </HorizontalGutter>
   );
diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx b/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx
index 60a782f54..e35b432d9 100644
--- a/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.tsx
@@ -6,7 +6,7 @@ import NotAvailable from "coral-admin/components/NotAvailable";
 import { TOXICITY_THRESHOLD_DEFAULT } from "coral-common/constants";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLCOMMENT_FLAG_REASON } from "coral-framework/schema";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { FlagDetailsContainer_comment } from "coral-admin/__generated__/FlagDetailsContainer_comment.graphql";
 import { FlagDetailsContainer_settings } from "coral-admin/__generated__/FlagDetailsContainer_settings.graphql";
diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css b/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css
index 21ca38fb3..76217b736 100644
--- a/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css
+++ b/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css
@@ -1,37 +1,35 @@
 .user {
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-serif);
-  line-height: calc(16em / 14);
-  letter-spacing: calc(0.2em / 14);
-  color: var(--palette-text-primary);
+  color: var(--v2-palette-username-emphasis);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  line-height: var(--v2-line-height-title);
   padding-right: calc(0.5 * var(--mini-unit));
 }
+
 .details {
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-regular);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(16em / 14);
-  letter-spacing: calc(0.2em / 14);
-  color: var(--palette-text-primary);
-  font-style: italic;
+  color: var(--v2-palette-reason-text);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-title);
 }
 
 .flagger {
+  line-height: var(--v2-line-height-reset);
   margin-right: var(--mini-unit);
-  padding: var(--spacing-1);
-  margin-left: calc(-1 * var(--spacing-1));
-  line-height: calc(16rem / var(--rem-base));
+  padding: var(--v2-spacing-1);
+  margin-left: calc(-1 * var(--v2-spacing-1));
 
   &:hover {
-    background-color: var(--palette-grey-lightest);
-    border-radius: var(--round-corners);
+    background-color: var(--v2-palette-grey-lightest);
+    border-radius: var(--v2-round-corners);
     border-style: none;
   }
 
   &:active {
-    background-color: var(--palette-grey-lighter);
-    border-radius: var(--round-corners);
+    background-color: var(--v2-palette-grey-lighter);
+    border-radius: var(--v2-round-corners);
     border-style: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.tsx b/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.tsx
index e4bc62788..0063feee8 100644
--- a/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.tsx
+++ b/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { BaseButton } from "coral-ui/components";
+import { BaseButton } from "coral-ui/components/v2";
 
 import styles from "./FlagDetailsEntry.css";
 
diff --git a/src/core/client/admin/components/ModerateCard/InReplyTo.css b/src/core/client/admin/components/ModerateCard/InReplyTo.css
index bd62abb8c..7fe840a16 100644
--- a/src/core/client/admin/components/ModerateCard/InReplyTo.css
+++ b/src/core/client/admin/components/ModerateCard/InReplyTo.css
@@ -1,13 +1,37 @@
 .icon {
-  color: var(--palette-grey-main);
+  color: var(--v2-palette-label-regular);
 }
 .inReplyTo {
-  color: var(--palette-grey-main);
+  color: var(--v2-palette-label-regular);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-reset);
 }
 .username {
-  color: var(--palette-grey-main);
+  color: var(--v2-palette-username-regular);
+  font-family: var(--v2-font-family-secondary);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
+
+  padding: var(--spacing-1);
+
+  &:hover {
+    background-color: var(--v2-palette-username-background-hover);
+    border-radius: var(--round-corners);
+    border-style: none;
+  }
+
+  &:active {
+    background-color: var(--v2-palette-username-background-hover);
+    border-radius: var(--round-corners);
+    border-style: none;
+  }
 }
 
 .usernameButton {
-  display: inline-flex;
+  vertical-align: baseline;
+
+  margin-left: calc(-1 * var(--v2-spacing-1));
 }
diff --git a/src/core/client/admin/components/ModerateCard/InReplyTo.spec.tsx b/src/core/client/admin/components/ModerateCard/InReplyTo.spec.tsx
index daeecc37f..194f542a2 100644
--- a/src/core/client/admin/components/ModerateCard/InReplyTo.spec.tsx
+++ b/src/core/client/admin/components/ModerateCard/InReplyTo.spec.tsx
@@ -8,6 +8,9 @@ import InReplyTo from "./InReplyTo";
 it("renders correctly", () => {
   const props: PropTypesOf<typeof InReplyTo> = {
     children: "Username",
+    onUsernameClick: () => {
+      return;
+    },
   };
   const renderer = createRenderer();
   renderer.render(<InReplyTo {...props} />);
diff --git a/src/core/client/admin/components/ModerateCard/InReplyTo.tsx b/src/core/client/admin/components/ModerateCard/InReplyTo.tsx
index 5c7e29c10..428f8eaff 100644
--- a/src/core/client/admin/components/ModerateCard/InReplyTo.tsx
+++ b/src/core/client/admin/components/ModerateCard/InReplyTo.tsx
@@ -1,32 +1,30 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Flex, Icon, Typography } from "coral-ui/components";
+import { BaseButton, Flex, Icon } from "coral-ui/components/v2";
 
 import styles from "./InReplyTo.css";
 
 interface Props {
   children: string;
+  onUsernameClick: () => void;
 }
 
-const InReplyTo: FunctionComponent<Props> = ({ children }) => {
+const InReplyTo: FunctionComponent<Props> = ({ children, onUsernameClick }) => {
   const Username = () => (
-    <Typography variant="heading5" container="span" className={styles.username}>
-      {children}
-    </Typography>
+    <BaseButton onClick={onUsernameClick} className={styles.usernameButton}>
+      <span className={styles.username}>{children}</span>
+    </BaseButton>
   );
 
   return (
     <Flex alignItems="center">
       <Icon className={styles.icon}>reply</Icon>{" "}
       <Localized id="moderate-comment-inReplyTo" Username={<Username />}>
-        <Typography
-          variant="timestamp"
-          container="span"
-          className={styles.inReplyTo}
-        >
-          {"Reply to <Username></Username>"}
-        </Typography>
+        <span className={styles.inReplyTo}>
+          Reply to
+          <Username />
+        </span>
       </Localized>
     </Flex>
   );
diff --git a/src/core/client/admin/components/ModerateCard/Markers.css b/src/core/client/admin/components/ModerateCard/Markers.css
index 8f84cbe58..6946babd1 100644
--- a/src/core/client/admin/components/ModerateCard/Markers.css
+++ b/src/core/client/admin/components/ModerateCard/Markers.css
@@ -1,20 +1,25 @@
 .detailsButton {
+  font-size: var(--v2-font-size-1);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: 1.28;
   height: 100%;
   padding: 2px 0px;
   margin-left: var(--mini-unit);
-  font-size: calc(12rem / var(--rem-base));
-  letter-spacing: calc(-0.1em / 12);
+
   align-self: flex-end;
   text-transform: uppercase;
-  &.detailsButtonColorRegular {
-    color: var(--palette-text-primary);
-  }
+}
+
+.detailsButtonColorRegular {
+  border-color: var(--v2-palette-details-header);
 }
 
 .detailsText {
+  color: var(--v2-palette-details-header);
   margin: 0;
 }
 
 .detailsDivider {
-  border-color: var(--palette-grey-lightest);
+  border-color: var(--v2-palette-details-divider);
 }
diff --git a/src/core/client/admin/components/ModerateCard/Markers.tsx b/src/core/client/admin/components/ModerateCard/Markers.tsx
index 89a6c2b0b..747b6ebae 100644
--- a/src/core/client/admin/components/ModerateCard/Markers.tsx
+++ b/src/core/client/admin/components/ModerateCard/Markers.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
 import { useUUID } from "coral-framework/hooks";
-import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components";
+import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
 
 import styles from "./Markers.css";
 
@@ -25,8 +25,8 @@ const Markers: FunctionComponent<Props> = ({ children, details }) => {
           <Button
             size="small"
             classes={{
-              variantRegular: styles.detailsButton,
-              colorRegular: styles.detailsButtonColorRegular,
+              variantDefault: styles.detailsButton,
+              colorDefault: styles.detailsButtonColorRegular,
             }}
             onClick={toggleDetails}
             aria-controls={uuid}
diff --git a/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx b/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx
index 4143b8c0a..91e438869 100644
--- a/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/MarkersContainer.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
-import { Marker, MarkerCount } from "coral-ui/components";
+import { Marker, MarkerCount } from "coral-ui/components/v2";
 
 import { MarkersContainer_comment } from "coral-admin/__generated__/MarkersContainer_comment.graphql";
 import { MarkersContainer_settings } from "coral-admin/__generated__/MarkersContainer_settings.graphql";
@@ -32,7 +32,7 @@ const markers: Array<
   c =>
     (c.status === "PREMOD" && (
       <Localized id="moderate-marker-preMod" key={keyCounter++}>
-        <Marker color="primary">Pre-mod</Marker>
+        <Marker color="pending">Pre-Mod</Marker>
       </Localized>
     )) ||
     null,
@@ -40,7 +40,7 @@ const markers: Array<
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_LINKS && (
         <Localized id="moderate-marker-link" key={keyCounter++}>
-          <Marker color="primary">Link</Marker>
+          <Marker color="pending">Link</Marker>
         </Localized>
       )) ||
     null,
@@ -48,7 +48,7 @@ const markers: Array<
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_BANNED_WORD && (
         <Localized id="moderate-marker-bannedWord" key={keyCounter++}>
-          <Marker color="error">Banned word</Marker>
+          <Marker color="reported">Banned Word</Marker>
         </Localized>
       )) ||
     null,
@@ -56,8 +56,8 @@ const markers: Array<
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SUSPECT_WORD && (
         <Localized id="moderate-marker-suspectWord" key={keyCounter++}>
-          <Marker color="error" variant="filled">
-            Suspect word
+          <Marker color="reported" variant="filled">
+            Suspect Word
           </Marker>
         </Localized>
       )) ||
@@ -66,7 +66,7 @@ const markers: Array<
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_SPAM && (
         <Localized id="moderate-marker-spamDetected" key={keyCounter++}>
-          <Marker color="error">Spam detected</Marker>
+          <Marker color="reported">Spam Detected</Marker>
         </Localized>
       )) ||
     null,
@@ -74,7 +74,7 @@ const markers: Array<
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_TOXIC && (
         <Localized id="moderate-marker-toxic" key={keyCounter++}>
-          <Marker color="error">Toxic</Marker>
+          <Marker color="reported">Toxic</Marker>
         </Localized>
       )) ||
     null,
@@ -82,7 +82,7 @@ const markers: Array<
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_REPEAT_POST && (
         <Localized id="moderate-marker-repeatPost" key={keyCounter++}>
-          <Marker color="error">Repeat comment</Marker>
+          <Marker color="reported">Repeat comment</Marker>
         </Localized>
       )) ||
     null,
@@ -90,14 +90,14 @@ const markers: Array<
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_DETECTED_RECENT_HISTORY && (
         <Localized id="moderate-marker-recentHistory" key={keyCounter++}>
-          <Marker color="error">Recent history</Marker>
+          <Marker color="reported">Recent History</Marker>
         </Localized>
       )) ||
     null,
   c =>
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_OFFENSIVE && (
-        <Marker key={keyCounter++} color="error">
+        <Marker key={keyCounter++} color="reported">
           <Localized id="moderate-marker-offensive">
             <span>Offensive</span>
           </Localized>{" "}
@@ -110,7 +110,7 @@ const markers: Array<
   c =>
     (c.revision &&
       c.revision.actionCounts.flag.reasons.COMMENT_REPORTED_SPAM && (
-        <Marker key={keyCounter++} color="error">
+        <Marker key={keyCounter++} color="reported">
           <Localized id="moderate-marker-spam">
             <span>Spam</span>
           </Localized>{" "}
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.css b/src/core/client/admin/components/ModerateCard/ModerateCard.css
index 9ffff678f..96fea8824 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCard.css
+++ b/src/core/client/admin/components/ModerateCard/ModerateCard.css
@@ -1,41 +1,51 @@
 .topBar {
   position: relative;
-  margin-bottom: var(--mini-unit);
+  margin-bottom: var(--v2-spacing-1);
 }
 
 .topBarMini {
-  margin-bottom: var(--spacing-4);
+  margin-bottom: var(--v2-spacing-4);
 }
 
-.username {
-  margin-right: var(--spacing-1);
+.usernameButton {
+  margin-right: var(--mini-unit);
   padding: var(--spacing-1);
-  margin-left: calc(-1 * var(--spacing-1));
-  line-height: calc(16rem / var(--rem-base));
+  margin-left: calc(-1 * var(--v2-spacing-1));
+
+  line-height: var(--v2-line-height-reset);
 
   &:hover {
-    background-color: var(--palette-grey-lightest);
-    border-radius: var(--round-corners);
+    background-color: var(--v2-palette-username-background-hover);
+    border-radius: var(--v2-round-corners);
     border-style: none;
   }
 
   &:active {
-    background-color: var(--palette-grey-lighter);
-    border-radius: var(--round-corners);
+    background-color: var(--v2-palette-username-background-hover);
+    border-radius: var(--v2-round-corners);
     border-style: none;
   }
 }
 
+.inReplyTo {
+}
+
 .footer {
   margin-top: calc(2 * var(--mini-unit));
 }
 
-.content {
-  min-height: calc(5.5 * var(--mini-unit));
-}
-
 .mainContainer {
   flex-grow: 1;
+
+  margin-right: calc(2 * var(--v2-spacing-5));
+}
+
+.contentArea {
+  position: relative;
+}
+
+.content {
+  min-height: 3em;
 }
 
 .aside {
@@ -54,7 +64,7 @@
     No reply to field, so we align below the fattest element
     which is the feature button.
   */
-  padding-top: calc((14rem / var(--rem-base)) + 7px + var(--spacing-4));
+  padding-top: calc(var(--v2-font-size-2) + 7px + var(--v2-spacing-4));
 }
 
 .asideMiniWithReplyTo {
@@ -62,27 +72,28 @@
     We have reply to field, so we align below the fattest
     element plus the reply to field.
   */
-  padding-top: calc(2 * (14rem / var(--rem-base)) + 5px + var(--spacing-4));
+  padding-top: calc(2 * var(--v2-font-size-2) + 5px + var(--v2-spacing-4));
 }
 
 .decision {
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(16em / 14);
-  letter-spacing: calc(0.2em / 14);
-  color: var(--palette-text-primary);
+  color: var(--v2-palette-label-emphasis);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: 1.14;
   text-transform: uppercase;
 }
 
 .separator {
-  flex-shrink: 0;
-  flex-grow: 0;
-  margin: 0 calc(2 * var(--mini-unit));
+  position: absolute;
+  top: 0;
+  right: calc(-1 * var(--v2-spacing-5));
+  bottom: 0;
+  width: 2px;
 }
 
 .ruledSeparator {
-  border-right: 1px solid var(--palette-divider);
+  border-right: 1px solid var(--v2-colors-grey-400);
 }
 
 .root {
@@ -94,62 +105,46 @@
 }
 
 .dangling {
-  background-color: var(--palette-grey-lightest);
+  background-color: var(--v2-palette-grey-lightest);
   box-shadow: none;
 }
 
 .link {
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(18em / 12);
-  letter-spacing: calc(0.2em / 12);
+  font-size: var(--v2-font-size-1);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-palette-link-text);
   text-transform: uppercase;
 }
 
-.story {
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(18em / 12);
-  letter-spacing: calc(0.2em / 12);
+.viewContext {
+  padding-bottom: var(--v2-spacing-1);
+}
+
+.storyLabel {
+  color: var(--v2-palette-grey-main);
+  font-size: var(--v2-font-size-1);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  margin-bottom: var(--v2-spacing-1);
   text-transform: uppercase;
-  color: var(--palette-grey-main);
 }
 
 .storyTitle {
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(18em / 12);
-  letter-spacing: calc(0.2em / 12);
-  color: var(--palette-text-primary);
-}
-
-.moderatedBy {
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-regular);
-  font-family: var(--font-family-sans-serif);
-  line-height: 1;
-  letter-spacing: 0;
-  color: var(--palette-text-primary);
-  text-transform: uppercase;
-}
-
-.moderatedByUsername {
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: 1;
-  letter-spacing: 0;
-  color: var(--palette-text-primary);
-  text-align: center;
-  padding-top: 1px;
+  color: var(--v2-palette-story-title);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  margin-bottom: var(--v2-spacing-1);
 }
 
 .borderless {
   border-width: 0px;
   box-shadow: none;
+  padding: var(--v2-spacing-2) 0;
 }
 
 .miniButton {
@@ -158,16 +153,24 @@
 }
 
 .deleted {
-  background: var(--palette-grey-lightest);
+  background: var(--v2-palette-grey-lightest);
 }
 
 .timestamp {
-  color: var(--palette-grey-lighter);
+  color: var(--v2-palette-timestamp);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
 }
 
 .edited {
-  color: var(--palette-grey-lighter);
-  padding-left: var(--spacing-2)
+  color: var(--v2-palette-timestamp);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
+  padding-left: var(--v2-spacing-2);
 }
 
 .selected {
@@ -176,5 +179,17 @@
 
 .authorStatus {
   padding-right: var(--spacing-2);
+  color: var(--v2-palette-timestamp);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-1);
+  line-height: var(--v2-line-height-reset);
+  padding-left: var(--v2-spacing-2);
 }
 
+.deleted {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-body-short);
+}
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
index 8c5a88532..65cf39017 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCard.tsx
@@ -18,8 +18,7 @@ import {
   HorizontalGutter,
   TextLink,
   Timestamp,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import ApproveButton from "./ApproveButton";
 import CommentAuthorContainer from "./CommentAuthorContainer";
@@ -146,10 +145,10 @@ const ModerateCard: FunctionComponent<Props> = ({
   }, [selected]);
   const commentBody = deleted ? (
     <Localized id="moderate-comment-deleted-body">
-      <Typography>
+      <div className={styles.deleted}>
         This comment is no longer available. The commenter has deleted their
         account.
-      </Typography>
+      </div>
     </Localized>
   ) : (
     body
@@ -185,10 +184,10 @@ const ModerateCard: FunctionComponent<Props> = ({
             })}
           >
             <Flex alignItems="center">
-              {!hideUsername && (
+              {!hideUsername && username && (
                 <BaseButton
                   onClick={commentAuthorClick}
-                  className={styles.username}
+                  className={styles.usernameButton}
                 >
                   <Username>{username}</Username>
                 </BaseButton>
@@ -197,9 +196,7 @@ const ModerateCard: FunctionComponent<Props> = ({
               <Timestamp>{createdAt}</Timestamp>
               {edited && (
                 <Localized id="moderate-comment-edited">
-                  <Typography variant="timestamp" className={styles.edited}>
-                    (edited)
-                  </Typography>
+                  <span className={styles.edited}>(edited)</span>
                 </Localized>
               )}
               <FeatureButton
@@ -209,52 +206,60 @@ const ModerateCard: FunctionComponent<Props> = ({
               />
             </Flex>
             {inReplyTo && inReplyTo.username && (
-              <div>
-                <BaseButton
-                  onClick={commentParentAuthorClick}
-                  className={styles.username}
-                >
-                  <InReplyTo>{inReplyTo.username}</InReplyTo>
-                </BaseButton>
+              <div className={styles.inReplyTo}>
+                <InReplyTo onUsernameClick={commentParentAuthorClick}>
+                  {inReplyTo.username}
+                </InReplyTo>
               </div>
             )}
           </div>
-          <CommentContent
-            suspectWords={suspectWords}
-            bannedWords={bannedWords}
-            className={styles.content}
-          >
-            {commentBody}
-          </CommentContent>
+          <div className={styles.contentArea}>
+            <CommentContent
+              suspectWords={suspectWords}
+              bannedWords={bannedWords}
+              className={styles.content}
+            >
+              {commentBody}
+            </CommentContent>
+            <div className={styles.viewContext}>
+              <Localized id="moderate-comment-viewContext">
+                <TextLink
+                  className={styles.link}
+                  href={viewContextHref}
+                  target="_blank"
+                >
+                  View Context
+                </TextLink>
+              </Localized>
+            </div>
+            <div
+              className={cn(styles.separator, {
+                [styles.ruledSeparator]: !mini,
+              })}
+            />
+          </div>
           <div className={styles.footer}>
-            <HorizontalGutter>
-              <div>
-                <Localized id="moderate-comment-viewContext">
-                  <TextLink
-                    className={styles.link}
-                    href={viewContextHref}
-                    target="_blank"
-                  >
-                    View Context
-                  </TextLink>
-                </Localized>
-              </div>
+            <HorizontalGutter spacing={3}>
               {showStory && (
                 <div>
-                  <Localized id="moderate-comment-story">
-                    <span className={styles.story}>Story</span>
-                  </Localized>
-                  {": "}
-                  <span className={styles.storyTitle}>{storyTitle}</span>{" "}
-                  <Localized id="moderate-comment-moderateStory">
-                    <TextLink
-                      className={styles.link}
-                      href={storyHref}
-                      onClick={onModerateStory}
-                    >
-                      Moderate Story
-                    </TextLink>
-                  </Localized>
+                  <div className={styles.storyLabel}>
+                    <Localized id="moderate-comment-storyLabel">
+                      <span>Comment on</span>
+                    </Localized>
+                    <span>:</span>
+                  </div>
+                  <div className={styles.storyTitle}>{storyTitle}</div>
+                  <div>
+                    <Localized id="moderate-comment-moderateStory">
+                      <TextLink
+                        href={storyHref}
+                        onClick={onModerateStory}
+                        className={styles.link}
+                      >
+                        Moderate Story
+                      </TextLink>
+                    </Localized>
+                  </div>
                 </div>
               )}
               <MarkersContainer
@@ -265,9 +270,6 @@ const ModerateCard: FunctionComponent<Props> = ({
             </HorizontalGutter>
           </div>
         </div>
-        <div
-          className={cn(styles.separator, { [styles.ruledSeparator]: !mini })}
-        />
         <Flex
           className={cn(styles.aside, {
             [styles.asideWithoutReplyTo]: !inReplyTo,
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
index 91cc8481c..94c77f45f 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCardContainer.tsx
@@ -15,8 +15,7 @@ import {
   withFragmentContainer,
   withMutation,
 } from "coral-framework/lib/relay";
-import { GQLUSER_STATUS } from "coral-framework/schema";
-import { GQLTAG } from "coral-framework/schema";
+import { GQLTAG, GQLUSER_STATUS } from "coral-framework/schema";
 
 import {
   COMMENT_STATUS,
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css
index b0f863f05..5829d7c28 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css
+++ b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css
@@ -1,4 +1,4 @@
 .button {
-  text-transform: uppercase;  
-  font-size: 14px;
-}
\ No newline at end of file
+  text-transform: uppercase;
+  font-size: var(--v2-font-size-2);
+}
diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
index 5ffb17e8c..9710503c2 100644
--- a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.tsx
@@ -2,11 +2,16 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useState } from "react";
 import { graphql } from "react-relay";
 
-import { withFragmentContainer } from "coral-framework/lib/relay";
-import { Flex, HorizontalGutter, Icon, Tab, TabBar } from "coral-ui/components";
-
 import { ModerateCardDetailsContainer_comment as CommentData } from "coral-admin/__generated__/ModerateCardDetailsContainer_comment.graphql";
 import { ModerateCardDetailsContainer_settings as SettingsData } from "coral-admin/__generated__/ModerateCardDetailsContainer_settings.graphql";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import {
+  Flex,
+  HorizontalGutter,
+  Icon,
+  Tab,
+  TabBar,
+} from "coral-ui/components/v2";
 
 import CommentRevisionContainer from "./CommentRevisionContainer";
 import FlagDetailsContainer from "./FlagDetailsContainer";
@@ -22,6 +27,8 @@ interface Props {
   hasRevisions: boolean;
 }
 
+type DetailsTabs = "DETAILS" | "HISTORY";
+
 const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
   comment,
   onUsernameClick,
@@ -29,23 +36,23 @@ const ModerateCardDetailsContainer: FunctionComponent<Props> = ({
   hasDetails,
   hasRevisions,
 }) => {
-  const [activeTab, setActiveTab] = useState<"DETAILS" | "HISTORY">(
+  const [activeTab, setActiveTab] = useState<DetailsTabs>(
     hasDetails ? "DETAILS" : "HISTORY"
   );
 
   return (
     <HorizontalGutter>
       <TabBar
-        variant="secondary"
+        variant="default"
         activeTab={activeTab}
-        onTabClick={id => setActiveTab(id as "DETAILS" | "HISTORY")}
+        onTabClick={id => setActiveTab(id as DetailsTabs)}
       >
         {hasDetails && (
-          <Tab tabID="DETAILS" classes={styles}>
+          <Tab tabID="INFO" classes={styles}>
             <Flex alignItems="center" itemGutter>
               <Icon size="md">list</Icon>
-              <Localized id="moderateCardDetails-tab-details">
-                <span>Details</span>
+              <Localized id="moderateCardDetails-tab-info">
+                <span>Info</span>
               </Localized>
             </Flex>
           </Tab>
diff --git a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css
index 7decb5934..6ea3d6448 100644
--- a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css
+++ b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css
@@ -1,20 +1,21 @@
+$moderated-by: var(--v2-colors-mono-100);
+$moderated-by-username: var(--v2-colors-mono-900);
+
 .moderatedBy {
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-regular);
-  font-family: var(--font-family-sans-serif);
-  line-height: 1;
-  letter-spacing: 0;
-  color: var(--palette-text-primary);
+  font-size: var(--v2-font-size-1);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  color: $moderated-by;
   text-transform: uppercase;
 }
 
 .moderatedByUsername {
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: 1;
-  letter-spacing: 0;
-  color: var(--palette-text-primary);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  line-height: var(--v2-line-height-reset);
+  color: $moderated-by-username;
   text-align: center;
   padding-top: 1px;
 }
diff --git a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx
index 2f0ddf7f7..c684fefb9 100644
--- a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx
+++ b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.tsx
@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { graphql } from "react-relay";
 
 import { withFragmentContainer } from "coral-framework/lib/relay";
-import { BaseButton } from "coral-ui/components";
+import { BaseButton } from "coral-ui/components/v2";
 
 import { ModeratedByContainer_comment } from "coral-admin/__generated__/ModeratedByContainer_comment.graphql";
 import { ModeratedByContainer_viewer } from "coral-admin/__generated__/ModeratedByContainer_viewer.graphql";
diff --git a/src/core/client/admin/components/ModerateCard/RejectButton.css b/src/core/client/admin/components/ModerateCard/RejectButton.css
index 52ffd5586..229b50328 100644
--- a/src/core/client/admin/components/ModerateCard/RejectButton.css
+++ b/src/core/client/admin/components/ModerateCard/RejectButton.css
@@ -1,22 +1,22 @@
 .root {
-  border: 1px solid var(--palette-error-main);
+  border: 1px solid var(--v2-palette-button-outline-reject);
   box-sizing: border-box;
-  border-radius: var(--round-corners);
+  border-radius: var(--v2-round-corners);
   width: 65px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--palette-error-main);
+  color: var(--v2-palette-button-outline-reject);
   &:not(:disabled):active {
-    background-color: var(--palette-error-main);
-    color: var(--palette-common-white);
+    background-color: var(--v2-palette-button-outline-reject);
+    color: var(--v2-colors-pure-white);
   }
 }
 
 .invert {
-  background-color: var(--palette-error-main);
-  color: var(--palette-common-white);
+  background-color: var(--v2-palette-button-outline-reject);
+  color: var(--v2-colors-pure-white);
 }
 
 .icon {
diff --git a/src/core/client/admin/components/ModerateCard/RejectButton.tsx b/src/core/client/admin/components/ModerateCard/RejectButton.tsx
index 1a3ad1191..20b030036 100644
--- a/src/core/client/admin/components/ModerateCard/RejectButton.tsx
+++ b/src/core/client/admin/components/ModerateCard/RejectButton.tsx
@@ -3,7 +3,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { BaseButton, Icon } from "coral-ui/components";
+import { BaseButton, Icon } from "coral-ui/components/v2";
 
 import styles from "./RejectButton.css";
 
diff --git a/src/core/client/admin/components/ModerateCard/ToxicityLabel.css b/src/core/client/admin/components/ModerateCard/ToxicityLabel.css
index 382b14abc..be0753e1b 100644
--- a/src/core/client/admin/components/ModerateCard/ToxicityLabel.css
+++ b/src/core/client/admin/components/ModerateCard/ToxicityLabel.css
@@ -1,3 +1,11 @@
 .root {
-  font-size: calc(14rem / var(--rem-base));
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-body-short);
+  color: var(--v2-palette-accordion-label);
+}
+
+.likely {
+  color: var(--v2-palette-counter-badge-background-alert);
 }
diff --git a/src/core/client/admin/components/ModerateCard/ToxicityLabel.tsx b/src/core/client/admin/components/ModerateCard/ToxicityLabel.tsx
index 3638447e2..a5cd1d5dd 100644
--- a/src/core/client/admin/components/ModerateCard/ToxicityLabel.tsx
+++ b/src/core/client/admin/components/ModerateCard/ToxicityLabel.tsx
@@ -1,12 +1,13 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Counter, Typography } from "coral-ui/components";
+import { Counter } from "coral-ui/components/v2";
 
 import styles from "./ToxicityLabel.css";
 
 const ToxicityCounter: FunctionComponent<{ score: number }> = ({ score }) => (
-  <Counter>{Math.round(score * 100)}%</Counter>
+  <Counter color="inherit">{Math.round(score * 100)}%</Counter>
 );
 
 const ToxicityLabel: FunctionComponent<{
@@ -18,26 +19,20 @@ const ToxicityLabel: FunctionComponent<{
   if (score > threshold) {
     return (
       <Localized id="moderate-toxicityLabel-likely" score={counter}>
-        <Typography
-          className={styles.root}
-          variant="bodyCopy"
-          color="errorDark"
-        >
-          Likely
-        </Typography>
+        <p className={cn(styles.root, styles.likely)}>Likely</p>
       </Localized>
     );
   } else if (score <= 0.5) {
     return (
       <Localized id="moderate-toxicityLabel-unlikely" score={counter}>
-        <Typography className={styles.root}>Unlikely</Typography>
+        <p className={styles.root}>Unlikely</p>
       </Localized>
     );
   }
 
   return (
     <Localized id="moderate-toxicityLabel-maybe" score={counter}>
-      <Typography className={styles.root}>Maybe</Typography>
+      <p className={styles.root}>Maybe</p>
     </Localized>
   );
 };
diff --git a/src/core/client/admin/components/ModerateCard/Username.css b/src/core/client/admin/components/ModerateCard/Username.css
index c3bd53ac0..8a586caf1 100644
--- a/src/core/client/admin/components/ModerateCard/Username.css
+++ b/src/core/client/admin/components/ModerateCard/Username.css
@@ -1,4 +1,7 @@
 .root {
-  line-height: 1;
-  color: var(--palette-grey-dark);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  line-height: var(--v2-line-height-reset);
+  color: var(--v2-palette-username-emphasis);
 }
diff --git a/src/core/client/admin/components/ModerateCard/Username.tsx b/src/core/client/admin/components/ModerateCard/Username.tsx
index 7a9f336cb..2318b37d4 100644
--- a/src/core/client/admin/components/ModerateCard/Username.tsx
+++ b/src/core/client/admin/components/ModerateCard/Username.tsx
@@ -1,8 +1,6 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import styles from "./Username.css";
 
 export interface UsernameProps {
@@ -12,13 +10,7 @@ export interface UsernameProps {
 
 const Username: FunctionComponent<UsernameProps> = props => {
   return (
-    <Typography
-      variant="heading4"
-      className={cn(props.className, styles.root)}
-      container="span"
-    >
-      {props.children}
-    </Typography>
+    <span className={cn(props.className, styles.root)}>{props.children}</span>
   );
 };
 
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/CommentContent.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/CommentContent.spec.tsx.snap
index 7e0e456d7..3a2a72948 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/CommentContent.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/CommentContent.spec.tsx.snap
@@ -1,9 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<ForwardRef(forwardRef)
+<div
   className="custom CommentContent-root"
-  container="div"
   dangerouslySetInnerHTML={
     Object {
       "__html": "Hello <b>Bob</b><span>, you <mark>bad</mark> guy</span>",
@@ -13,9 +12,8 @@ exports[`renders correctly 1`] = `
 `;
 
 exports[`renders empty words correctly 1`] = `
-<ForwardRef(forwardRef)
+<div
   className="custom CommentContent-root"
-  container="div"
   dangerouslySetInnerHTML={
     Object {
       "__html": "Hello <b>Bob</b>, you bad guy",
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/InReplyTo.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/InReplyTo.spec.tsx.snap
index 95f23149b..76107f4ef 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/InReplyTo.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/InReplyTo.spec.tsx.snap
@@ -14,13 +14,12 @@ exports[`renders correctly 1`] = `
     Username={<Username />}
     id="moderate-comment-inReplyTo"
   >
-    <ForwardRef(forwardRef)
+    <span
       className="InReplyTo-inReplyTo"
-      container="span"
-      variant="timestamp"
     >
-      Reply to &lt;Username&gt;&lt;/Username&gt;
-    </ForwardRef(forwardRef)>
+      Reply to
+      <Username />
+    </span>
   </Localized>
 </ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap
index 7d600f664..40019d894 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/MarkersContainer.spec.tsx.snap
@@ -53,16 +53,16 @@ exports[`renders all markers 1`] = `
     id="moderate-marker-preMod"
   >
     <withPropsOnChange(Marker)
-      color="primary"
+      color="pending"
     >
-      Pre-mod
+      Pre-Mod
     </withPropsOnChange(Marker)>
   </Localized>
   <Localized
     id="moderate-marker-link"
   >
     <withPropsOnChange(Marker)
-      color="primary"
+      color="pending"
     >
       Link
     </withPropsOnChange(Marker)>
@@ -71,35 +71,35 @@ exports[`renders all markers 1`] = `
     id="moderate-marker-bannedWord"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
-      Banned word
+      Banned Word
     </withPropsOnChange(Marker)>
   </Localized>
   <Localized
     id="moderate-marker-suspectWord"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
       variant="filled"
     >
-      Suspect word
+      Suspect Word
     </withPropsOnChange(Marker)>
   </Localized>
   <Localized
     id="moderate-marker-spamDetected"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
-      Spam detected
+      Spam Detected
     </withPropsOnChange(Marker)>
   </Localized>
   <Localized
     id="moderate-marker-toxic"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
       Toxic
     </withPropsOnChange(Marker)>
@@ -108,7 +108,7 @@ exports[`renders all markers 1`] = `
     id="moderate-marker-repeatPost"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
       Repeat comment
     </withPropsOnChange(Marker)>
@@ -117,13 +117,13 @@ exports[`renders all markers 1`] = `
     id="moderate-marker-recentHistory"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
-      Recent history
+      Recent History
     </withPropsOnChange(Marker)>
   </Localized>
   <withPropsOnChange(Marker)
-    color="error"
+    color="reported"
   >
     <Localized
       id="moderate-marker-offensive"
@@ -138,7 +138,7 @@ exports[`renders all markers 1`] = `
     </withPropsOnChange(Count)>
   </withPropsOnChange(Marker)>
   <withPropsOnChange(Marker)
-    color="error"
+    color="reported"
   >
     <Localized
       id="moderate-marker-spam"
@@ -208,25 +208,25 @@ exports[`renders some markers 1`] = `
     id="moderate-marker-preMod"
   >
     <withPropsOnChange(Marker)
-      color="primary"
+      color="pending"
     >
-      Pre-mod
+      Pre-Mod
     </withPropsOnChange(Marker)>
   </Localized>
   <Localized
     id="moderate-marker-bannedWord"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
-      Banned word
+      Banned Word
     </withPropsOnChange(Marker)>
   </Localized>
   <Localized
     id="moderate-marker-toxic"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
       Toxic
     </withPropsOnChange(Marker)>
@@ -235,13 +235,13 @@ exports[`renders some markers 1`] = `
     id="moderate-marker-recentHistory"
   >
     <withPropsOnChange(Marker)
-      color="error"
+      color="reported"
     >
-      Recent history
+      Recent History
     </withPropsOnChange(Marker)>
   </Localized>
   <withPropsOnChange(Marker)
-    color="error"
+    color="reported"
   >
     <Localized
       id="moderate-marker-offensive"
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
index d3978292f..2e84ef2d2 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/ModerateCard.spec.tsx.snap
@@ -19,7 +19,7 @@ exports[`renders approved correctly 1`] = `
           alignItems="center"
         >
           <ForwardRef(forwardRef)
-            className="ModerateCard-username"
+            className="ModerateCard-usernameButton"
             onClick={[Function]}
           >
             <Username>
@@ -41,38 +41,49 @@ exports[`renders approved correctly 1`] = `
           />
         </ForwardRef(forwardRef)>
       </div>
-      <CommentContent
-        bannedWords={
-          Array [
-            "banned",
-          ]
-        }
-        className="ModerateCard-content"
-        suspectWords={
-          Array [
-            "suspect",
-          ]
-        }
+      <div
+        className="ModerateCard-contentArea"
       >
-        content
-      </CommentContent>
+        <CommentContent
+          bannedWords={
+            Array [
+              "banned",
+            ]
+          }
+          className="ModerateCard-content"
+          suspectWords={
+            Array [
+              "suspect",
+            ]
+          }
+        >
+          content
+        </CommentContent>
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <Localized
+            id="moderate-comment-viewContext"
+          >
+            <withPropsOnChange(TextLinkProps)
+              className="ModerateCard-link"
+              href="http://localhost/comment"
+              target="_blank"
+            >
+              View Context
+            </withPropsOnChange(TextLinkProps)>
+          </Localized>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)>
-          <div>
-            <Localized
-              id="moderate-comment-viewContext"
-            >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="http://localhost/comment"
-                target="_blank"
-              >
-                View Context
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
-          </div>
+        <ForwardRef(forwardRef)
+          spacing={3}
+        >
           <Relay(MarkersContainer)
             comment={Object {}}
             onUsernameClick={[Function]}
@@ -81,9 +92,6 @@ exports[`renders approved correctly 1`] = `
         </ForwardRef(forwardRef)>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <ForwardRef(forwardRef)
       alignItems="center"
       className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
@@ -139,7 +147,7 @@ exports[`renders correctly 1`] = `
           alignItems="center"
         >
           <ForwardRef(forwardRef)
-            className="ModerateCard-username"
+            className="ModerateCard-usernameButton"
             onClick={[Function]}
           >
             <Username>
@@ -161,38 +169,49 @@ exports[`renders correctly 1`] = `
           />
         </ForwardRef(forwardRef)>
       </div>
-      <CommentContent
-        bannedWords={
-          Array [
-            "banned",
-          ]
-        }
-        className="ModerateCard-content"
-        suspectWords={
-          Array [
-            "suspect",
-          ]
-        }
+      <div
+        className="ModerateCard-contentArea"
       >
-        content
-      </CommentContent>
+        <CommentContent
+          bannedWords={
+            Array [
+              "banned",
+            ]
+          }
+          className="ModerateCard-content"
+          suspectWords={
+            Array [
+              "suspect",
+            ]
+          }
+        >
+          content
+        </CommentContent>
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <Localized
+            id="moderate-comment-viewContext"
+          >
+            <withPropsOnChange(TextLinkProps)
+              className="ModerateCard-link"
+              href="http://localhost/comment"
+              target="_blank"
+            >
+              View Context
+            </withPropsOnChange(TextLinkProps)>
+          </Localized>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)>
-          <div>
-            <Localized
-              id="moderate-comment-viewContext"
-            >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="http://localhost/comment"
-                target="_blank"
-              >
-                View Context
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
-          </div>
+        <ForwardRef(forwardRef)
+          spacing={3}
+        >
           <Relay(MarkersContainer)
             comment={Object {}}
             onUsernameClick={[Function]}
@@ -201,9 +220,6 @@ exports[`renders correctly 1`] = `
         </ForwardRef(forwardRef)>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <ForwardRef(forwardRef)
       alignItems="center"
       className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
@@ -259,7 +275,7 @@ exports[`renders dangling correctly 1`] = `
           alignItems="center"
         >
           <ForwardRef(forwardRef)
-            className="ModerateCard-username"
+            className="ModerateCard-usernameButton"
             onClick={[Function]}
           >
             <Username>
@@ -281,38 +297,49 @@ exports[`renders dangling correctly 1`] = `
           />
         </ForwardRef(forwardRef)>
       </div>
-      <CommentContent
-        bannedWords={
-          Array [
-            "banned",
-          ]
-        }
-        className="ModerateCard-content"
-        suspectWords={
-          Array [
-            "suspect",
-          ]
-        }
+      <div
+        className="ModerateCard-contentArea"
       >
-        content
-      </CommentContent>
+        <CommentContent
+          bannedWords={
+            Array [
+              "banned",
+            ]
+          }
+          className="ModerateCard-content"
+          suspectWords={
+            Array [
+              "suspect",
+            ]
+          }
+        >
+          content
+        </CommentContent>
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <Localized
+            id="moderate-comment-viewContext"
+          >
+            <withPropsOnChange(TextLinkProps)
+              className="ModerateCard-link"
+              href="http://localhost/comment"
+              target="_blank"
+            >
+              View Context
+            </withPropsOnChange(TextLinkProps)>
+          </Localized>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)>
-          <div>
-            <Localized
-              id="moderate-comment-viewContext"
-            >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="http://localhost/comment"
-                target="_blank"
-              >
-                View Context
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
-          </div>
+        <ForwardRef(forwardRef)
+          spacing={3}
+        >
           <Relay(MarkersContainer)
             comment={Object {}}
             onUsernameClick={[Function]}
@@ -321,9 +348,6 @@ exports[`renders dangling correctly 1`] = `
         </ForwardRef(forwardRef)>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <ForwardRef(forwardRef)
       alignItems="center"
       className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
@@ -379,7 +403,7 @@ exports[`renders rejected correctly 1`] = `
           alignItems="center"
         >
           <ForwardRef(forwardRef)
-            className="ModerateCard-username"
+            className="ModerateCard-usernameButton"
             onClick={[Function]}
           >
             <Username>
@@ -401,38 +425,49 @@ exports[`renders rejected correctly 1`] = `
           />
         </ForwardRef(forwardRef)>
       </div>
-      <CommentContent
-        bannedWords={
-          Array [
-            "banned",
-          ]
-        }
-        className="ModerateCard-content"
-        suspectWords={
-          Array [
-            "suspect",
-          ]
-        }
+      <div
+        className="ModerateCard-contentArea"
       >
-        content
-      </CommentContent>
+        <CommentContent
+          bannedWords={
+            Array [
+              "banned",
+            ]
+          }
+          className="ModerateCard-content"
+          suspectWords={
+            Array [
+              "suspect",
+            ]
+          }
+        >
+          content
+        </CommentContent>
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <Localized
+            id="moderate-comment-viewContext"
+          >
+            <withPropsOnChange(TextLinkProps)
+              className="ModerateCard-link"
+              href="http://localhost/comment"
+              target="_blank"
+            >
+              View Context
+            </withPropsOnChange(TextLinkProps)>
+          </Localized>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)>
-          <div>
-            <Localized
-              id="moderate-comment-viewContext"
-            >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="http://localhost/comment"
-                target="_blank"
-              >
-                View Context
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
-          </div>
+        <ForwardRef(forwardRef)
+          spacing={3}
+        >
           <Relay(MarkersContainer)
             comment={Object {}}
             onUsernameClick={[Function]}
@@ -441,9 +476,6 @@ exports[`renders rejected correctly 1`] = `
         </ForwardRef(forwardRef)>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <ForwardRef(forwardRef)
       alignItems="center"
       className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
@@ -499,7 +531,7 @@ exports[`renders reply correctly 1`] = `
           alignItems="center"
         >
           <ForwardRef(forwardRef)
-            className="ModerateCard-username"
+            className="ModerateCard-usernameButton"
             onClick={[Function]}
           >
             <Username>
@@ -520,49 +552,59 @@ exports[`renders reply correctly 1`] = `
             onClick={[Function]}
           />
         </ForwardRef(forwardRef)>
-        <div>
-          <ForwardRef(forwardRef)
-            className="ModerateCard-username"
-            onClick={[Function]}
+        <div
+          className="ModerateCard-inReplyTo"
+        >
+          <InReplyTo
+            onUsernameClick={[Function]}
           >
-            <InReplyTo>
-              Julian
-            </InReplyTo>
-          </ForwardRef(forwardRef)>
+            Julian
+          </InReplyTo>
         </div>
       </div>
-      <CommentContent
-        bannedWords={
-          Array [
-            "banned",
-          ]
-        }
-        className="ModerateCard-content"
-        suspectWords={
-          Array [
-            "suspect",
-          ]
-        }
+      <div
+        className="ModerateCard-contentArea"
       >
-        content
-      </CommentContent>
+        <CommentContent
+          bannedWords={
+            Array [
+              "banned",
+            ]
+          }
+          className="ModerateCard-content"
+          suspectWords={
+            Array [
+              "suspect",
+            ]
+          }
+        >
+          content
+        </CommentContent>
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <Localized
+            id="moderate-comment-viewContext"
+          >
+            <withPropsOnChange(TextLinkProps)
+              className="ModerateCard-link"
+              href="http://localhost/comment"
+              target="_blank"
+            >
+              View Context
+            </withPropsOnChange(TextLinkProps)>
+          </Localized>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)>
-          <div>
-            <Localized
-              id="moderate-comment-viewContext"
-            >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="http://localhost/comment"
-                target="_blank"
-              >
-                View Context
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
-          </div>
+        <ForwardRef(forwardRef)
+          spacing={3}
+        >
           <Relay(MarkersContainer)
             comment={Object {}}
             onUsernameClick={[Function]}
@@ -571,9 +613,6 @@ exports[`renders reply correctly 1`] = `
         </ForwardRef(forwardRef)>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <ForwardRef(forwardRef)
       alignItems="center"
       className="ModerateCard-aside"
@@ -629,7 +668,7 @@ exports[`renders story info 1`] = `
           alignItems="center"
         >
           <ForwardRef(forwardRef)
-            className="ModerateCard-username"
+            className="ModerateCard-usernameButton"
             onClick={[Function]}
           >
             <Username>
@@ -651,66 +690,82 @@ exports[`renders story info 1`] = `
           />
         </ForwardRef(forwardRef)>
       </div>
-      <CommentContent
-        bannedWords={
-          Array [
-            "banned",
-          ]
-        }
-        className="ModerateCard-content"
-        suspectWords={
-          Array [
-            "suspect",
-          ]
-        }
+      <div
+        className="ModerateCard-contentArea"
       >
-        content
-      </CommentContent>
+        <CommentContent
+          bannedWords={
+            Array [
+              "banned",
+            ]
+          }
+          className="ModerateCard-content"
+          suspectWords={
+            Array [
+              "suspect",
+            ]
+          }
+        >
+          content
+        </CommentContent>
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <Localized
+            id="moderate-comment-viewContext"
+          >
+            <withPropsOnChange(TextLinkProps)
+              className="ModerateCard-link"
+              href="http://localhost/comment"
+              target="_blank"
+            >
+              View Context
+            </withPropsOnChange(TextLinkProps)>
+          </Localized>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)>
+        <ForwardRef(forwardRef)
+          spacing={3}
+        >
           <div>
-            <Localized
-              id="moderate-comment-viewContext"
+            <div
+              className="ModerateCard-storyLabel"
             >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="http://localhost/comment"
-                target="_blank"
+              <Localized
+                id="moderate-comment-storyLabel"
               >
-                View Context
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
-          </div>
-          <div>
-            <Localized
-              id="moderate-comment-story"
-            >
-              <span
-                className="ModerateCard-story"
-              >
-                Story
+                <span>
+                  Comment on
+                </span>
+              </Localized>
+              <span>
+                :
               </span>
-            </Localized>
-            : 
-            <span
+            </div>
+            <div
               className="ModerateCard-storyTitle"
             >
               Cancer cured!
-            </span>
-             
-            <Localized
-              id="moderate-comment-moderateStory"
-            >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="/story"
-                onClick={[Function]}
+            </div>
+            <div>
+              <Localized
+                id="moderate-comment-moderateStory"
               >
-                Moderate Story
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
+                <withPropsOnChange(TextLinkProps)
+                  className="ModerateCard-link"
+                  href="/story"
+                  onClick={[Function]}
+                >
+                  Moderate Story
+                </withPropsOnChange(TextLinkProps)>
+              </Localized>
+            </div>
           </div>
           <Relay(MarkersContainer)
             comment={Object {}}
@@ -720,9 +775,6 @@ exports[`renders story info 1`] = `
         </ForwardRef(forwardRef)>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <ForwardRef(forwardRef)
       alignItems="center"
       className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
@@ -778,7 +830,7 @@ exports[`renders tombstoned when comment is deleted 1`] = `
           alignItems="center"
         >
           <ForwardRef(forwardRef)
-            className="ModerateCard-username"
+            className="ModerateCard-usernameButton"
             onClick={[Function]}
           >
             <Username>
@@ -800,44 +852,57 @@ exports[`renders tombstoned when comment is deleted 1`] = `
           />
         </ForwardRef(forwardRef)>
       </div>
-      <CommentContent
-        bannedWords={
-          Array [
-            "banned",
-          ]
-        }
-        className="ModerateCard-content"
-        suspectWords={
-          Array [
-            "suspect",
-          ]
-        }
+      <div
+        className="ModerateCard-contentArea"
       >
-        <Localized
-          id="moderate-comment-deleted-body"
+        <CommentContent
+          bannedWords={
+            Array [
+              "banned",
+            ]
+          }
+          className="ModerateCard-content"
+          suspectWords={
+            Array [
+              "suspect",
+            ]
+          }
         >
-          <ForwardRef(forwardRef)>
-            This comment is no longer available. The commenter has deleted their account.
-          </ForwardRef(forwardRef)>
-        </Localized>
-      </CommentContent>
+          <Localized
+            id="moderate-comment-deleted-body"
+          >
+            <div
+              className="ModerateCard-deleted"
+            >
+              This comment is no longer available. The commenter has deleted their account.
+            </div>
+          </Localized>
+        </CommentContent>
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <Localized
+            id="moderate-comment-viewContext"
+          >
+            <withPropsOnChange(TextLinkProps)
+              className="ModerateCard-link"
+              href="http://localhost/comment"
+              target="_blank"
+            >
+              View Context
+            </withPropsOnChange(TextLinkProps)>
+          </Localized>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
-        <ForwardRef(forwardRef)>
-          <div>
-            <Localized
-              id="moderate-comment-viewContext"
-            >
-              <withPropsOnChange(TextLinkProps)
-                className="ModerateCard-link"
-                href="http://localhost/comment"
-                target="_blank"
-              >
-                View Context
-              </withPropsOnChange(TextLinkProps)>
-            </Localized>
-          </div>
+        <ForwardRef(forwardRef)
+          spacing={3}
+        >
           <Relay(MarkersContainer)
             comment={Object {}}
             onUsernameClick={[Function]}
@@ -846,9 +911,6 @@ exports[`renders tombstoned when comment is deleted 1`] = `
         </ForwardRef(forwardRef)>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <ForwardRef(forwardRef)
       alignItems="center"
       className="ModerateCard-aside ModerateCard-asideWithoutReplyTo"
diff --git a/src/core/client/admin/components/ModerateCard/__snapshots__/Username.spec.tsx.snap b/src/core/client/admin/components/ModerateCard/__snapshots__/Username.spec.tsx.snap
index d994d2a07..27d624f2f 100644
--- a/src/core/client/admin/components/ModerateCard/__snapshots__/Username.spec.tsx.snap
+++ b/src/core/client/admin/components/ModerateCard/__snapshots__/Username.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <span
-  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+  className="Username-root"
 >
   Marvin
 </span>
diff --git a/src/core/client/admin/components/NotAvailable.css b/src/core/client/admin/components/NotAvailable.css
index 4eef434ca..2537c2a91 100644
--- a/src/core/client/admin/components/NotAvailable.css
+++ b/src/core/client/admin/components/NotAvailable.css
@@ -1,3 +1,3 @@
 .root {
-  color: var(--palette-grey-light);
+  color: var(--v2-palette-table-body-disabled);
 }
diff --git a/src/core/client/admin/components/UserHistoryDrawer/CreateModeratorNoteMutation.ts b/src/core/client/admin/components/UserHistoryDrawer/CreateModeratorNoteMutation.ts
index 3523193d1..6eea9f2ef 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/CreateModeratorNoteMutation.ts
+++ b/src/core/client/admin/components/UserHistoryDrawer/CreateModeratorNoteMutation.ts
@@ -2,7 +2,6 @@ import { pick } from "lodash";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { CreateModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/CreateModeratorNoteMutation.graphql";
 import { getViewer } from "coral-framework/helpers";
 import { CoralContext } from "coral-framework/lib/bootstrap";
 import {
@@ -13,6 +12,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser } from "coral-framework/schema";
 
+import { CreateModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/CreateModeratorNoteMutation.graphql";
+
 let clientMutationId = 0;
 
 const CreateModeratorNoteMutation = createMutation(
diff --git a/src/core/client/admin/components/UserHistoryDrawer/DeleteModeratorNoteMutation.ts b/src/core/client/admin/components/UserHistoryDrawer/DeleteModeratorNoteMutation.ts
index 389f638be..dc741c630 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/DeleteModeratorNoteMutation.ts
+++ b/src/core/client/admin/components/UserHistoryDrawer/DeleteModeratorNoteMutation.ts
@@ -2,7 +2,6 @@ import { pick } from "lodash";
 import { graphql } from "react-relay";
 import { Environment } from "relay-runtime";
 
-import { DeleteModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/DeleteModeratorNoteMutation.graphql";
 import { CoralContext } from "coral-framework/lib/bootstrap";
 import {
   commitMutationPromiseNormalized,
@@ -12,6 +11,8 @@ import {
 } from "coral-framework/lib/relay";
 import { GQLUser } from "coral-framework/schema";
 
+import { DeleteModeratorNoteMutation as MutationTypes } from "coral-admin/__generated__/DeleteModeratorNoteMutation.graphql";
+
 let clientMutationId = 0;
 
 const DeleteModeratorNoteMutation = createMutation(
diff --git a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css
index bb157a307..006c84d68 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css
@@ -1,37 +1,57 @@
+$moderator-note-bg: var(--v2-colors-grey-100);
+$moderator-note-body: var(--v2-colors-mono-500);
+$moderator-note-dot: var(--v2-colors-mono-100);
+$moderator-note-username: var(--v2-colors-mono-900);
+
 .root {
-  
 }
 
 .body {
-  background-color: #f2f2f2;
+  font-family: var(--v2-font-family-primary);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  line-height: var(--v2-line-height-body-short);
+  background-color: $moderator-note-bg;
   border-radius: 4px;
-  padding: var(--spacing-4); 
+  padding: var(--v2-spacing-3);
+  color: $moderator-note-body;
+  margin-bottom: var(--v2-spacing-2);
 }
 
 .bodyType {
-  color: var(--palette-text-dark);
 }
 
 .leftBy {
-  padding-left: var(--spacing-4);
-  padding-right: var(--spacing-1);
+  font-family: var(--v2-font-family-primary);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-regular);
+  line-height: var(--v2-line-height-reset);
+  padding-left: var(--v2-spacing-4);
+  padding-right: var(--v2-spacing-1);
   position: relative;
-  color: var(--palette-grey-main);
+  color: $moderator-note-body;
 }
 
 .leftBy:before {
   content: "";
   width: 4px;
   height: 4px;
-  background-color: var(--palette-grey-main); 
+  background-color: ;
   position: absolute;
   border-radius: 50%;
-  left: var(--spacing-1);
+  left: var(--v2-spacing-1);
+  background-color: $moderator-note-dot;
   top: 50%;
 }
 
 .username {
-  font-family: var(--font-family-serif);
-  font-weight: var(--font-weight-medium);
-  color: var(--palette-grey-main); 
-}
\ No newline at end of file
+  font-family: var(--v2-font-family-secondary);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  line-height: var(--v2-line-height-reset);
+  font-size: var(--v2-font-size-3);
+  color: $moderator-note-username;
+}
+
+.footerLeft {
+  padding-left: var(--v2-spacing-3);
+}
diff --git a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx
index 790ae9646..1652176db 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
 
-import { Button, Flex, Icon, Timestamp, Typography } from "coral-ui/components";
+import { Button, Flex, Icon, Timestamp } from "coral-ui/components/v2";
 
 import styles from "./ModeratorNote.css";
 
@@ -27,30 +27,27 @@ const ModeratorNote: FunctionComponent<Props> = ({
   }, [id]);
   return (
     <div>
-      <div className={styles.body}>
-        <Typography variant="bodyCopy" className={styles.bodyType}>
-          {body}
-        </Typography>
-      </div>
+      <div className={styles.body}>{body}</div>
       <Flex justifyContent="space-between">
-        <Flex alignItems="center">
+        <Flex alignItems="center" className={styles.footerLeft}>
           <Timestamp>{createdAt}</Timestamp>
           {moderator && (
-            <>
+            <Flex alignItems="center">
               <Localized id="moderatorNote-left-by">
-                <Typography variant="timestamp" className={styles.leftBy}>
-                  Left by:
-                </Typography>
+                <div className={styles.leftBy}>Left by</div>
               </Localized>
-              <Typography className={styles.username} variant="timestamp">
-                {moderator}
-              </Typography>
-            </>
+              <div className={styles.username}>{moderator}</div>
+            </Flex>
           )}
         </Flex>
         {onDelete && (
           <Localized id="moderatorNote-delete">
-            <Button size="small" color="primary" onClick={deleteNote}>
+            <Button
+              size="small"
+              uppercase={false}
+              variant="plain"
+              onClick={deleteNote}
+            >
               <Icon>delete</Icon>
               <span>Delete</span>
             </Button>
diff --git a/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css b/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css
index a46437fed..481cc7e2b 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css
@@ -1,29 +1,53 @@
+$recent-history-title: var(--v2-colors-mono-500);
+$recent-history-subtitle: var(--v2-colors-mono-100);
+$recent-history-info: var(--v2-colors-mono-500);
+$recent-history-triggered: var(--v2-palette-error-main);
+
 .title {
   text-transform: uppercase;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-3);
+  margin: 0;
+  line-height: var(--v2-line-height-body-short);
+  color: $recent-history-title;
 }
 
 .subTitle {
-  color: var(--palette-grey-main);
-  font-size: calc(14rem / var(--rem-base));
+  color: $recent-history-subtitle;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  margin: 0;
+  line-height: var(--v2-line-height-body-short);
 }
 
 .info {
-  display: inline-block;
 }
 
 .amount {
-  font-size: calc(24rem / var(--rem-base));
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-6);
+  line-height: var(--v2-line-height-reset);
+  line-height: var(--v2-line-height-reset);
+  color: $recent-history-info;
+  margin: 0;
 }
 
 .amountLabel {
-  font-size: calc(14rem / var(--rem-base));
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-2);
+  color: $recent-history-info;
+  margin: 0;
 }
 
 .triggered {
-  color: var(--palette-error-main);
+  color: $recent-history-triggered;
 }
 
 .tooltip {
-  color: var(--palette-text-primary);
+  color: $recent-history-info;
   padding: 3px;
 }
diff --git a/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.tsx b/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.tsx
index 0ff568db7..9f72a35b9 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.tsx
@@ -4,12 +4,11 @@ import React, { FunctionComponent } from "react";
 
 import { reduceSeconds, UNIT } from "coral-common/helpers/i18n";
 import {
-  Box,
   Flex,
+  HorizontalGutter,
   Tooltip,
   TooltipButton,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import styles from "./RecentHistory.css";
 
@@ -29,42 +28,39 @@ const RecentHistory: FunctionComponent<Props> = ({
   const { scaled, unit } = reduceSeconds(timeFrame, [UNIT.DAYS]);
 
   return (
-    <Box mt={3}>
-      <Localized id="moderate-user-drawer-recent-history-title">
-        <Typography className={styles.title} variant="bodyCopyBold">
-          Recent comment history
-        </Typography>
-      </Localized>
-      <Localized
-        id="moderate-user-drawer-recent-history-calculated"
-        $unit={unit}
-        $value={scaled}
-      >
-        <Typography className={styles.subTitle} variant="bodyCopy">
-          Calculated over the last {scaled} {unit}
-        </Typography>
-      </Localized>
-      <Box mt={1}>
-        <Box className={styles.info} mr={4}>
-          <Typography
+    <HorizontalGutter spacing={2}>
+      <div>
+        <Localized id="moderate-user-drawer-recent-history-title">
+          <h3 className={styles.title}>Recent comment history</h3>
+        </Localized>
+        <Localized
+          id="moderate-user-drawer-recent-history-calculated"
+          $unit={unit}
+          $value={scaled}
+        >
+          <p className={styles.subTitle}>
+            Calculated over the last {scaled} {unit}
+          </p>
+        </Localized>
+      </div>
+      <Flex spacing={3}>
+        <div>
+          <p
             className={cn(styles.amount, {
               [styles.triggered]: triggered,
             })}
-            variant="bodyCopyBold"
           >
             {Math.round(rejectionRate * 100)}%
-          </Typography>
-          <Flex alignItems="center">
+          </p>
+          <Flex>
             <Localized id="moderate-user-drawer-recent-history-rejected">
-              <Typography
+              <span
                 className={cn(styles.amountLabel, {
                   [styles.triggered]: triggered,
                 })}
-                variant="bodyCopy"
-                container="span"
               >
                 Rejected
-              </Typography>
+              </span>
             </Localized>
             <Tooltip
               id="recentCommentHistory-rejectionPopover"
@@ -97,19 +93,15 @@ const RecentHistory: FunctionComponent<Props> = ({
               )}
             />
           </Flex>
-        </Box>
-        <Box className={styles.info}>
-          <Typography className={styles.amount} variant="bodyCopyBold">
-            {submitted}
-          </Typography>
+        </div>
+        <div>
+          <p className={styles.amount}>{submitted}</p>
           <Localized id="moderate-user-drawer-recent-history-tooltip-submitted">
-            <Typography className={styles.amountLabel} variant="bodyCopy">
-              Submitted
-            </Typography>
+            <p className={styles.amountLabel}>Submitted</p>
           </Localized>
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </Flex>
+    </HorizontalGutter>
   );
 };
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/Tabs.css b/src/core/client/admin/components/UserHistoryDrawer/Tabs.css
index 5bb53279f..378dcd443 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/Tabs.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/Tabs.css
@@ -1,3 +1,5 @@
+$indicator-dot: var(--v2-colors-blue-400);
+
 .root {
   height: 100%;
 
@@ -15,24 +17,13 @@
 }
 
 .tab {
-  color: var(--palette-grey-dark);
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  text-transform: uppercase;
-  text-decoration: none;
-  box-sizing: border-box;
-  border-bottom: 3px solid transparent;
-
-  font-size: calc(14rem / var(--rem-base));
 }
 
 .activeTab {
-  color: var(--palette-primary-main);
 }
 
 .tabIcon {
-  margin-right: var(--spacing-2);
+  margin-right: var(--v2-spacing-1);
 }
 
 .tabContent {
@@ -41,7 +32,7 @@
 }
 
 .container {
-  height: calc(100% - var(--spacing-2) - var(--spacing-3));
+  height: calc(100% - var(--v2-spacing-2) - var(--v2-spacing-3));
 
   display: flex;
   flex-direction: column;
@@ -50,8 +41,8 @@
 
   overflow: hidden;
 
-  margin-bottom: var(--spacing-2);
-  margin-top: var(--spacing-3);
+  margin-bottom: var(--v2-spacing-2);
+  margin-top: var(--v2-spacing-3);
 }
 
 .scrollable {
@@ -60,9 +51,9 @@
 }
 
 .redDot {
-  background-color: var(--palette-error-main);
+  background-color: $indicator-dot;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   margin-left: 2px;
-}
\ No newline at end of file
+}
diff --git a/src/core/client/admin/components/UserHistoryDrawer/Tabs.tsx b/src/core/client/admin/components/UserHistoryDrawer/Tabs.tsx
index 3e0ef6729..5f626316e 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/Tabs.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/Tabs.tsx
@@ -9,7 +9,7 @@ import {
   TabBar,
   TabContent,
   TabPane,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import UserDrawerAccountHistoryQuery from "./UserDrawerAccountHistoryQuery";
 import UserDrawerNotesQuery from "./UserDrawerNotesQuery";
@@ -48,7 +48,8 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
         className={styles.tabBar}
       >
         <Tab tabID="ALL_COMMENTS" onTabClick={onTabChanged}>
-          <div
+          <Flex
+            alignItems="center"
             className={cn(styles.tab, {
               [styles.activeTab]: currentTab === "ALL_COMMENTS",
             })}
@@ -59,24 +60,26 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
             <Localized id="moderate-user-drawer-tab-all-comments">
               <span>All Comments</span>
             </Localized>
-          </div>
+          </Flex>
         </Tab>
         <Tab tabID="REJECTED_COMMENTS" onTabClick={onTabChanged}>
-          <div
+          <Flex
+            alignItems="center"
             className={cn(styles.tab, {
               [styles.activeTab]: currentTab === "REJECTED_COMMENTS",
             })}
           >
             <Icon size="sm" className={styles.tabIcon}>
-              cancel
+              close
             </Icon>
             <Localized id="moderate-user-drawer-tab-rejected-comments">
               <span>Rejected</span>
             </Localized>
-          </div>
+          </Flex>
         </Tab>
         <Tab tabID="NOTES" onTabClick={onTabChanged}>
-          <div
+          <Flex
+            alignItems="center"
             className={cn(styles.tab, {
               [styles.activeTab]: currentTab === "NOTES",
             })}
@@ -90,13 +93,14 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
               </Localized>
               {notesCount > 0 && <div className={styles.redDot} />}
             </Flex>
-          </div>
+          </Flex>
         </Tab>
         <Tab tabID="ACCOUNT_HISTORY" onTabClick={onTabChanged}>
-          <div
+          <Flex
             className={cn(styles.tab, {
               [styles.activeTab]: currentTab === "ACCOUNT_HISTORY",
             })}
+            alignItems="center"
           >
             <Icon size="sm" className={styles.tabIcon}>
               history
@@ -104,7 +108,7 @@ const UserHistoryTabs: FunctionComponent<Props> = ({ userID, notesCount }) => {
             <Localized id="moderate-user-drawer-tab-account-history">
               <span>Account History</span>
             </Localized>
-          </div>
+          </Flex>
         </Tab>
       </TabBar>
       <TabContent activeTab={currentTab} className={styles.tabContent}>
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx
index 36cc5793a..bdf419266 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserBadgesContainer.tsx
@@ -3,7 +3,7 @@ import { graphql } from "react-relay";
 
 import withFragmentContainer from "coral-framework/lib/relay/withFragmentContainer";
 import CLASSES from "coral-stream/classes";
-import { Tag } from "coral-ui/components";
+import { Tag } from "coral-ui/components/v2";
 
 import { UserBadgesContainer_user as UserData } from "coral-admin/__generated__/UserBadgesContainer_user.graphql";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx
index b81882995..b5b9dd495 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.tsx
@@ -12,7 +12,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import { UserDrawerAccountHistory_user } from "coral-admin/__generated__/UserDrawerAccountHistory_user.graphql";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css
index d488ff572..cbe167f43 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css
@@ -4,7 +4,7 @@
 
 .callout {
   width: 100%;
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--v2-font-family-primary);
   align-content: center;
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.tsx
index 0a0c127fd..6bbd55361 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
-import { CallOut, Spinner } from "coral-ui/components";
+import { CallOut, Spinner } from "coral-ui/components/v2";
 
 import { UserDrawerAccountHistoryQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerAccountHistoryQuery.graphql";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css
index 9b02bb6fe..1014dba9e 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css
@@ -1,23 +1,9 @@
 .root {
-
 }
 
 .textArea {
   width: 100%;
-  box-sizing: border-box;
-  height: calc(12 * var(--mini-unit));
-  border-width: 1px;
-  border-color: var(--palette-grey-main);
-  padding: calc(0.5 * var(--mini-unit));
-  border-radius: 2px;
-  margin-bottom: var(--spacing-2);
-  padding: var(--spacing-3);
-  font-weight: var(--font-weight-regular);
-  font-family: var(--font-family-sans-serif);
-  font-size: calc(16rem / var(--rem-base));
-  line-height: 1;
-  letter-spacing: calc(0.2em / 16);
-  color: var(--palette-text-primary);
+  margin-bottom: var(--v2-spacing-2);
 }
 
 .textArea:focus {
@@ -25,7 +11,6 @@
 }
 
 .form {
-  padding: var(--spacing-2) 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  margin-bottom: var(--spacing-4);
+  padding: var(--v2-spacing-2) 0;
+  margin-bottom: var(--v2-spacing-4);
 }
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx
index 6575efc92..8ff659f86 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx
@@ -1,17 +1,25 @@
+import { FormApi } from "final-form";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback } from "react";
+import { Field, Form } from "react-final-form";
 
-import { UserDrawerNotesContainer_user as UserData } from "coral-admin/__generated__/UserDrawerNotesContainer_user.graphql";
-import { UserDrawerNotesContainer_viewer as ViewerData } from "coral-admin/__generated__/UserDrawerNotesContainer_viewer.graphql";
 import {
   graphql,
   useMutation,
   withFragmentContainer,
 } from "coral-framework/lib/relay";
 import { required } from "coral-framework/lib/validation";
-import { Button, Flex, HorizontalGutter } from "coral-ui/components";
-import { FormApi } from "final-form";
-import { Field, Form } from "react-final-form";
+import {
+  Button,
+  Divider,
+  Flex,
+  HorizontalGutter,
+  Textarea,
+} from "coral-ui/components/v2";
+
+import { UserDrawerNotesContainer_user as UserData } from "coral-admin/__generated__/UserDrawerNotesContainer_user.graphql";
+import { UserDrawerNotesContainer_viewer as ViewerData } from "coral-admin/__generated__/UserDrawerNotesContainer_viewer.graphql";
+
 import CreateModeratorNoteMutation from "./CreateModeratorNoteMutation";
 import DeleteModeratorNoteMutation from "./DeleteModeratorNoteMutation";
 import ModeratorNote from "./ModeratorNote";
@@ -58,18 +66,19 @@ const UserDrawerNotesContainer: FunctionComponent<Props> = ({
             data-testid="userdrawer-notes-form"
           >
             <Localized id="moderate-user-drawer-notes-field">
-              <Field
-                className={styles.textArea}
-                id="suspendModal-message"
-                component="textarea"
-                name="body"
-                validate={required}
-                placeholder="Leave a note..."
-              />
+              <Field id="suspendModal-message" name="body" validate={required}>
+                {({ input }) => (
+                  <Textarea
+                    placeholder="Leave a note..."
+                    {...input}
+                    className={styles.textArea}
+                  />
+                )}
+              </Field>
             </Localized>
             <Flex justifyContent="flex-end">
               <Localized id="moderate-user-drawer-notes-button">
-                <Button variant="filled" color="primary" type="submit">
+                <Button size="medium" type="submit">
                   Add note
                 </Button>
               </Localized>
@@ -77,7 +86,8 @@ const UserDrawerNotesContainer: FunctionComponent<Props> = ({
           </form>
         )}
       </Form>
-      <HorizontalGutter size="double">
+      <Divider />
+      <HorizontalGutter spacing={4}>
         {user.moderatorNotes &&
           user.moderatorNotes
             .concat()
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.tsx
index a0c2b5c1d..6b105d3a4 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.tsx
@@ -1,11 +1,11 @@
-import { graphql, QueryRenderer } from "coral-framework/lib/relay";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
-import { UserDrawerNotesQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerNotesQuery.graphql";
+import { graphql, QueryRenderer } from "coral-framework/lib/relay";
+import { CallOut, Spinner } from "coral-ui/components/v2";
 
-import { CallOut, Spinner } from "coral-ui/components";
+import { UserDrawerNotesQuery as QueryTypes } from "coral-admin/__generated__/UserDrawerNotesQuery.graphql";
 
 import UserDrawerNotesContainer from "./UserDrawerNotesContainer";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css
index cde216310..c47715169 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css
@@ -1,3 +1,5 @@
+$user-drawer-background: var(--v2-colors-pure-white);
+
 .root {
   position: fixed;
   top: 0;
@@ -10,5 +12,5 @@
   flex-flow: column nowrap;
   flex-direction: column;
 
-  background-color: var(--palette-common-white);
+  background-color: $user-drawer-background;
 }
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx
index c8806915a..26adf4170 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from "react";
 
-import { Card, Modal } from "coral-ui/components";
+import { Modal } from "coral-ui/components";
+import { Card } from "coral-ui/components/v2";
 
 import UserHistoryDrawerQuery from "./UserHistoryDrawerQuery";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx
index e91f78d12..1940cfdb2 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.tsx
@@ -7,7 +7,7 @@ import {
   useLoadMore,
   withPaginationContainer,
 } from "coral-framework/lib/relay";
-import { Button, CallOut, Typography } from "coral-ui/components";
+import { Button, CallOut, Divider } from "coral-ui/components/v2";
 
 import { UserHistoryDrawerAllComments_settings } from "coral-admin/__generated__/UserHistoryDrawerAllComments_settings.graphql";
 import { UserHistoryDrawerAllComments_user } from "coral-admin/__generated__/UserHistoryDrawerAllComments_user.graphql";
@@ -46,12 +46,10 @@ const UserHistoryDrawerAllComments: FunctionComponent<Props> = ({
     return (
       <CallOut fullWidth>
         <Localized
-          id="moderate-user-drawer-rejected-no-comments"
+          id="moderate-user-drawer-all-no-comments"
           $username={user.username}
         >
-          <Typography variant="bodyCopy">
-            {user.username} has not submitted any comments.
-          </Typography>
+          <div>{user.username} has not submitted any comments.</div>
         </Localized>
       </CallOut>
     );
@@ -71,7 +69,7 @@ const UserHistoryDrawerAllComments: FunctionComponent<Props> = ({
             mini
           />
           {// Don't show horizontal rule after last comment
-          index !== comments.length - 1 && <hr />}
+          index !== comments.length - 1 && <Divider />}
         </div>
       ))}
       {hasMore && (
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx
index 868fa28d1..f16c1427d 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
-import { CallOut, Spinner } from "coral-ui/components";
+import { CallOut, Spinner } from "coral-ui/components/v2";
 
 import { UserHistoryDrawerAllCommentsQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerAllCommentsQuery.graphql";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css
index dd634a4c2..168e712e4 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css
@@ -1,6 +1,11 @@
+$user-drawer-background: var(--v2-colors-pure-white);
+$user-drawer-account-info: var(--v2-colors-mono-500);
+$user-drawer-divider: var(--v2-colors-grey-300);
+$user-drawer-status-label: var(--v2-colors-mono-500);
+
 .comments {
   flex: auto;
-  overflow: scroll;
+  overflow: auto;
 }
 
 .close {
@@ -11,87 +16,55 @@
 
   padding: 0px;
 
-  background-color: var(--palette-common-white);
+  background-color: $user-drawer-background;
 
-  border-width: 2px;
+  border-width: 1px;
   border-right-width: 0px;
   border-style: solid;
-  border-color: var(--palette-grey-main);
+  border-color: rgba(0, 0, 0, 0.25);
   border-radius: 4px 0px 0px 4px;
 }
 
 .username {
-  font-family: var(--font-family-serif);
-  font-size: calc(24rem / var(--rem-base));
-  font-weight: 500;
-  font-family: var(--font-family-serif);
-  line-height: calc(36em / 24);
-  letter-spacing: calc(0.2em / 24);
-  margin-bottom: var(--spacing-1);
+  font-family: var(--v2-font-family-secondary);
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-size: var(--v2-font-size-6);
+  line-height: var(--v2-line-height-reset);
 }
 
 .userDetail {
-  margin-bottom: var(--spacing-1);
 }
 
 .userDetailValue {
-  margin-right: var(--spacing-2);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
+  color: $user-drawer-account-info;
 }
 
 .icon {
-  margin-right: var(--spacing-2);
+  padding-top: 2px;
 }
 
 .copy {
-  border: 1px solid var(--palette-primary-main);
-  background-color: transparent;
-  color: var(--palette-primary-main);
-  padding-top: 2px;
-  padding-bottom: 2px;
-
-  &:active {
-    background-color: var(--palette-primary-lightest);
-    border-color: var(--palette-primary-main);
-    color: var(--palette-primary-main);
-  }
-}
-
-hr {
-  border: 0;
-  border-bottom: 1px solid var(--palette-divider);
-  padding-top: 1px;
-  width: 100%;
 }
 
 .divider {
-  border-bottom: 1px solid var(--palette-grey-lighter);
+  border-bottom: 1px solid $user-drawer-divider;
 }
 
 .userStatus {
-  margin-top: var(--spacing-1);
-  margin-bottom: var(--spacing-1);
 }
 
 .userStatusLabel {
-  display: inline-block;
-
-  margin-right: var(--spacing-1);
-
-  font-family: var(--font-family-sans-serif);
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 14px;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-reset);
+  color: $user-drawer-status-label;
+  margin-right: var(--v2-spacing-1);
 }
 
 .userStatusChange {
-  display: inline-block;
-  border-style: solid;
-  border-color: var(--palette-grey-lighter);
-  border-width: 1px;
-  border-radius: var(--round-corners);
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
-
-  min-height: 21px;
 }
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
index a07a85f6e..c6ba1dcf2 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
@@ -5,7 +5,13 @@ import { UserStatusChangeContainer } from "coral-admin/components/UserStatus";
 import { CopyButton } from "coral-framework/components";
 import { useCoralContext } from "coral-framework/lib/bootstrap";
 import { graphql, withFragmentContainer } from "coral-framework/lib/relay";
-import { Button, Flex, Icon, Typography } from "coral-ui/components";
+import {
+  Button,
+  Divider,
+  Flex,
+  HorizontalGutter,
+  Icon,
+} from "coral-ui/components/v2";
 
 import { UserHistoryDrawerContainer_settings } from "coral-admin/__generated__/UserHistoryDrawerContainer_settings.graphql";
 import { UserHistoryDrawerContainer_user } from "coral-admin/__generated__/UserHistoryDrawerContainer_user.graphql";
@@ -37,96 +43,83 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
 
   return (
     <>
-      <Button className={styles.close} onClick={onClose}>
+      <Button variant="plain" className={styles.close} onClick={onClose}>
         <Icon size="md">close</Icon>
       </Button>
-      <div>
-        <Flex className={styles.username} itemGutter>
-          <span>{user.username}</span>
-          <div>
-            <UserBadgesContainer user={user} />
-          </div>
-        </Flex>
-        <div className={styles.userStatus}>
-          <Flex alignItems="center" itemGutter="half">
-            <div className={styles.userStatusLabel}>
-              <Typography variant="bodyCopyBold" container="div">
-                <Flex alignItems="center" itemGutter="half">
+      <HorizontalGutter spacing={4}>
+        <HorizontalGutter spacing={3}>
+          <HorizontalGutter spacing={2}>
+            <Flex className={styles.username} spacing={2}>
+              <span>{user.username}</span>
+              <div>
+                <UserBadgesContainer user={user} />
+              </div>
+            </Flex>
+            <Flex alignItems="center" spacing={1}>
+              <div className={styles.userStatusLabel}>
+                <Flex alignItems="center" spacing={1}>
                   <Localized id="moderate-user-drawer-status-label">
                     Status:
                   </Localized>
                 </Flex>
-              </Typography>
-            </div>
-            <div className={styles.userStatusChange}>
-              <UserStatusChangeContainer settings={settings} user={user} />
-            </div>
-            <UserStatusDetailsContainer user={user} />
-          </Flex>
-        </div>
-      </div>
-      <div>
-        <Flex alignItems="center" className={styles.userDetail}>
-          <Localized id="moderate-user-drawer-email" attrs={{ title: true }}>
-            <Icon size="sm" className={styles.icon} title="Email address">
-              mail_outline
-            </Icon>
-          </Localized>
-          <Typography
-            variant="bodyCopy"
-            container="span"
-            className={styles.userDetailValue}
-          >
-            {user.email}
-          </Typography>
-          <CopyButton
-            text={user.email!}
-            variant="regular"
-            className={styles.copy}
-          />
-        </Flex>
-        <Flex alignItems="center" className={styles.userDetail}>
-          <Localized
-            id="moderate-user-drawer-created-at"
-            attrs={{ title: true }}
-          >
-            <Icon
-              size="sm"
-              className={styles.icon}
-              title="Account creation date"
-            >
-              date_range
-            </Icon>
-          </Localized>
-          <Typography variant="bodyCopy" container="span">
-            {formatter.format(new Date(user.createdAt))}
-          </Typography>
-        </Flex>
-        <Flex alignItems="center" className={styles.userDetail}>
-          <Localized
-            id="moderate-user-drawer-member-id"
-            attrs={{ title: true }}
-          >
-            <Icon size="sm" className={styles.icon} title="Member ID">
-              people_outline
-            </Icon>
-          </Localized>
-          <Typography
-            variant="bodyCopy"
-            container="span"
-            className={styles.userDetailValue}
-          >
-            {user.id}
-          </Typography>
-          <CopyButton
-            text={user.id}
-            variant="regular"
-            className={styles.copy}
-          />
-        </Flex>
+              </div>
+              <div className={styles.userStatusChange}>
+                <UserStatusChangeContainer
+                  bordered={true}
+                  settings={settings}
+                  user={user}
+                />
+              </div>
+              <UserStatusDetailsContainer user={user} />
+            </Flex>
+          </HorizontalGutter>
+          <HorizontalGutter spacing={1}>
+            <Flex alignItems="center" spacing={2}>
+              <Localized
+                id="moderate-user-drawer-email"
+                attrs={{ title: true }}
+              >
+                <Icon size="sm" className={styles.icon} title="Email address">
+                  mail_outline
+                </Icon>
+              </Localized>
+              <span className={styles.userDetailValue}>{user.email}</span>
+              <CopyButton text={user.email!} size="small" />
+            </Flex>
+            <Flex alignItems="center" spacing={2}>
+              <Localized
+                id="moderate-user-drawer-created-at"
+                attrs={{ title: true }}
+              >
+                <Icon
+                  size="sm"
+                  className={styles.icon}
+                  title="Account creation date"
+                >
+                  date_range
+                </Icon>
+              </Localized>
+              <span className={styles.userDetailValue}>
+                {formatter.format(new Date(user.createdAt))}
+              </span>
+            </Flex>
+            <Flex alignItems="center" spacing={2}>
+              <Localized
+                id="moderate-user-drawer-member-id"
+                attrs={{ title: true }}
+              >
+                <Icon size="sm" className={styles.icon} title="Member ID">
+                  people_outline
+                </Icon>
+              </Localized>
+              <span className={styles.userDetailValue}>{user.id}</span>
+              <CopyButton text={user.id} size="small" />
+            </Flex>
+          </HorizontalGutter>
+        </HorizontalGutter>
         <RecentHistoryContainer user={user} settings={settings} />
-      </div>
-      <hr className={styles.divider} />
+      </HorizontalGutter>
+      <Divider />
       <div className={styles.comments}>
         <Tabs userID={user.id} notesCount={user.moderatorNotes.length} />
       </div>
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
index cf971bc87..bfca2abf3 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
-import { CallOut, Spinner } from "coral-ui/components";
+import { CallOut, Spinner } from "coral-ui/components/v2";
 
 import { UserHistoryDrawerQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerQuery.graphql";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx
index 236820682..a32899c92 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.tsx
@@ -7,7 +7,7 @@ import {
   useLoadMore,
   withPaginationContainer,
 } from "coral-framework/lib/relay";
-import { Button, CallOut, Typography } from "coral-ui/components";
+import { Button, CallOut, Divider } from "coral-ui/components/v2";
 
 import { UserHistoryDrawerRejectedComments_settings } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_settings.graphql";
 import { UserHistoryDrawerRejectedComments_user } from "coral-admin/__generated__/UserHistoryDrawerRejectedComments_user.graphql";
@@ -51,9 +51,7 @@ const UserHistoryDrawerRejectedComments: FunctionComponent<Props> = ({
           id="moderate-user-drawer-rejected-no-comments"
           $username={user.username}
         >
-          <Typography variant="bodyCopy">
-            {user.username} does not have any rejected comments.
-          </Typography>
+          <div>{user.username} does not have any rejected comments.</div>
         </Localized>
       </CallOut>
     );
@@ -73,7 +71,7 @@ const UserHistoryDrawerRejectedComments: FunctionComponent<Props> = ({
             mini
           />
           {// Don't show horizontal rule after last comment
-          index !== comments.length - 1 && <hr />}
+          index !== comments.length - 1 && <Divider />}
         </div>
       ))}
       {hasMore && (
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx
index 9c73b98d5..7682fce23 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 import { ReadyState } from "react-relay";
 
 import { graphql, QueryRenderer } from "coral-framework/lib/relay";
-import { CallOut, Spinner } from "coral-ui/components";
+import { CallOut, Spinner } from "coral-ui/components/v2";
 
 import { UserHistoryDrawerRejectedCommentsQuery as QueryTypes } from "coral-admin/__generated__/UserHistoryDrawerRejectedCommentsQuery.graphql";
 
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css
index e69de29bb..dfa88f4e3 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css
@@ -0,0 +1,14 @@
+$user-status-details: var(--v2-colors-mono-500);
+
+.root {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  color: $user-status-details;
+  line-height: var(--v2-line-height-body-short);
+  margin: 0 0 var(--v2-spacing-1) 0;
+}
+
+.root strong {
+  font-weight: var(--v2-font-weight-primary-bold);
+}
diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx
index fe96a2317..a665b64ec 100644
--- a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx
+++ b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.tsx
@@ -9,11 +9,12 @@ import {
   ClickOutside,
   Icon,
   Popover,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import { UserStatusDetailsContainer_user as UserData } from "coral-admin/__generated__/UserStatusDetailsContainer_user.graphql";
 
+import styles from "./UserStatusDetailsContainer.css";
+
 interface Props {
   user: UserData;
 }
@@ -56,10 +57,10 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
                     $timestamp={formatter.format(new Date(activeBan.createdAt))}
                     strong={<strong />}
                   >
-                    <Typography>
+                    <p className={styles.root}>
                       <strong>Banned on </strong>{" "}
                       {formatter.format(new Date(activeBan.createdAt))}
-                    </Typography>
+                    </p>
                   </Localized>
                   {activeBan.createdBy && (
                     <Localized
@@ -67,10 +68,10 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
                       strong={<strong />}
                       $username={activeBan.createdBy.username}
                     >
-                      <Typography>
+                      <p className={styles.root}>
                         <strong>by </strong>
                         {activeBan.createdBy.username}
-                      </Typography>
+                      </p>
                     </Localized>
                   )}
                 </div>
@@ -83,10 +84,10 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
                       strong={<strong />}
                       $username={activeSuspension.createdBy.username}
                     >
-                      <Typography>
+                      <p className={styles.root}>
                         <strong>Suspended by </strong>
                         {activeSuspension.createdBy.username}
-                      </Typography>
+                      </p>
                     </Localized>
                   )}
                   <Localized
@@ -96,10 +97,10 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
                       new Date(activeSuspension.from.start)
                     )}
                   >
-                    <Typography>
+                    <p className={styles.root}>
                       <strong>Start: </strong>
                       {formatter.format(new Date(activeSuspension.from.start))}
-                    </Typography>
+                    </p>
                   </Localized>
                   <Localized
                     strong={<strong />}
@@ -108,10 +109,10 @@ const UserStatusDetailsContainer: FunctionComponent<Props> = ({ user }) => {
                     )}
                     id="userDetails-suspension-finish"
                   >
-                    <Typography>
+                    <p className={styles.root}>
                       <strong>End: </strong>
                       {formatter.format(new Date(activeSuspension.from.finish))}
-                    </Typography>
+                    </p>
                   </Localized>
                 </div>
               )}
diff --git a/src/core/client/admin/components/UserRole/UserRoleChange.tsx b/src/core/client/admin/components/UserRole/UserRoleChange.tsx
index 0268203ac..ac982c772 100644
--- a/src/core/client/admin/components/UserRole/UserRoleChange.tsx
+++ b/src/core/client/admin/components/UserRole/UserRoleChange.tsx
@@ -10,7 +10,7 @@ import {
   Dropdown,
   DropdownButton,
   Popover,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import UserRoleText from "./UserRoleText";
 
@@ -60,8 +60,10 @@ const UserRoleChange: FunctionComponent<Props> = props => (
             aria-label="Change role"
             className={styles.button}
             onClick={toggleVisibility}
+            uppercase={false}
+            color="mono"
             ref={ref}
-            variant="regular"
+            variant="plain"
             size="small"
           >
             <UserRoleText>{props.role}</UserRoleText>
diff --git a/src/core/client/admin/components/UserRole/UserRoleText.css b/src/core/client/admin/components/UserRole/UserRoleText.css
index 6d592cea1..f98400fd5 100644
--- a/src/core/client/admin/components/UserRole/UserRoleText.css
+++ b/src/core/client/admin/components/UserRole/UserRoleText.css
@@ -1,9 +1,10 @@
 .root {
-  font-weight: var(--font-weight-regular);
-  color: var(--palette-grey-darkest);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  color: var(--v2-palette-table-body-text);
 }
 
 .commenter {
-  font-weight: var(--font-weight-regular);
-  color: var(--palette-grey-light);
+  color: var(--v2-palette-table-body-text);
+  font-weight: var(--v2-font-weight-primary-regular);
 }
diff --git a/src/core/client/admin/components/UserStatus/BanModal.css b/src/core/client/admin/components/UserStatus/BanModal.css
index f01b54db8..4a4d28e0e 100644
--- a/src/core/client/admin/components/UserStatus/BanModal.css
+++ b/src/core/client/admin/components/UserStatus/BanModal.css
@@ -1,10 +1,13 @@
-.card {
-  max-width: 500px;
+$ban-modal-text: var(--v2-colors-mono-500);
+
+.bodyText {
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  line-height: var(--v2-line-height-body-short);
+  color: $ban-modal-text;
 }
 
 .textArea {
-  width: 100%;
-  box-sizing: border-box;
   height: calc(12 * var(--mini-unit));
-  padding: calc(0.5 * var(--mini-unit));
 }
diff --git a/src/core/client/admin/components/UserStatus/BanModal.tsx b/src/core/client/admin/components/UserStatus/BanModal.tsx
index b6c3cb355..faf2410c9 100644
--- a/src/core/client/admin/components/UserStatus/BanModal.tsx
+++ b/src/core/client/admin/components/UserStatus/BanModal.tsx
@@ -6,14 +6,15 @@ import NotAvailable from "coral-admin/components/NotAvailable";
 import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
 import {
   Button,
-  Card,
-  CardCloseButton,
   CheckBox,
   Flex,
   HorizontalGutter,
-  Modal,
-  Typography,
-} from "coral-ui/components";
+  Textarea,
+} from "coral-ui/components/v2";
+
+import ChangeStatusModal from "./ChangeStatusModal";
+import ChangeStatusModalHeader from "./ChangeStatusModalHeader";
+import ModalHeaderUsername from "./ModalHeaderUsername";
 
 import styles from "./BanModal.css";
 
@@ -50,39 +51,45 @@ const BanModal: FunctionComponent<Props> = ({
   );
 
   return (
-    <Modal open={open} onClose={onClose} aria-labelledby="banModal-title">
-      {({ firstFocusableRef, lastFocusableRef }) => (
-        <Card className={styles.card}>
-          <CardCloseButton onClick={onClose} ref={firstFocusableRef} />
-          <HorizontalGutter size="double">
-            <HorizontalGutter>
-              <Localized
-                id="community-banModal-areYouSure"
-                strong={<strong />}
-                $username={username || <NotAvailable />}
-              >
-                <Typography variant="header2" id="banModal-title">
-                  Are you sure you want to ban{" "}
-                  <strong>{username || <NotAvailable />}</strong>?
-                </Typography>
-              </Localized>
-              <Localized id="community-banModal-consequence">
-                <Typography>
-                  Once banned, this user will no longer be able to comment, use
-                  reactions, or report comments.
-                </Typography>
-              </Localized>
-            </HorizontalGutter>
-            <Form
-              onSubmit={onFormSubmit}
-              initialValues={{
-                showMessage: false,
-                emailMessage: getDefaultMessage,
-              }}
+    <ChangeStatusModal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="banModal-title"
+    >
+      {({ lastFocusableRef }) => (
+        <HorizontalGutter spacing={3}>
+          <HorizontalGutter spacing={2}>
+            <Localized
+              id="community-banModal-areYouSure"
+              strong={<ModalHeaderUsername />}
+              $username={username || <NotAvailable />}
             >
-              {({ handleSubmit }) => (
-                <form onSubmit={handleSubmit}>
-                  <Field name="showMessage">
+              <ChangeStatusModalHeader id="banModal-title">
+                Are you sure you want to ban{" "}
+                <ModalHeaderUsername>
+                  {username || <NotAvailable />}
+                </ModalHeaderUsername>
+                ?
+              </ChangeStatusModalHeader>
+            </Localized>
+            <Localized id="community-banModal-consequence">
+              <p className={styles.bodyText}>
+                Once banned, this user will no longer be able to comment, use
+                reactions, or report comments.
+              </p>
+            </Localized>
+          </HorizontalGutter>
+          <Form
+            onSubmit={onFormSubmit}
+            initialValues={{
+              showMessage: false,
+              emailMessage: getDefaultMessage,
+            }}
+          >
+            {({ handleSubmit }) => (
+              <form onSubmit={handleSubmit}>
+                <HorizontalGutter spacing={3}>
+                  <Field type="checkbox" name="showMessage">
                     {({ input }) => (
                       <Localized id="community-banModal-customize">
                         <CheckBox {...input} id="banModal-showMessage">
@@ -94,26 +101,30 @@ const BanModal: FunctionComponent<Props> = ({
                   <Field name="showMessage" subscription={{ value: true }}>
                     {({ input: { value } }) =>
                       value ? (
-                        <Field
-                          className={styles.textArea}
-                          id="banModal-message"
-                          component="textarea"
-                          name="emailMessage"
-                        />
+                        <Field name="emailMessage">
+                          {({ input }) => (
+                            <Textarea
+                              id="banModal-message"
+                              className={styles.textArea}
+                              fullwidth
+                              {...input}
+                            />
+                          )}
+                        </Field>
                       ) : null
                     }
                   </Field>
 
                   <Flex justifyContent="flex-end" itemGutter="half">
                     <Localized id="community-banModal-cancel">
-                      <Button variant="outlined" onClick={onClose}>
+                      <Button variant="ghost" onClick={onClose}>
                         Cancel
                       </Button>
                     </Localized>
                     <Localized id="community-banModal-banUser">
                       <Button
                         variant="filled"
-                        color="primary"
+                        color="default"
                         type="submit"
                         ref={lastFocusableRef}
                       >
@@ -121,13 +132,13 @@ const BanModal: FunctionComponent<Props> = ({
                       </Button>
                     </Localized>
                   </Flex>
-                </form>
-              )}
-            </Form>
-          </HorizontalGutter>
-        </Card>
+                </HorizontalGutter>
+              </form>
+            )}
+          </Form>
+        </HorizontalGutter>
       )}
-    </Modal>
+    </ChangeStatusModal>
   );
 };
 
diff --git a/src/core/client/admin/components/UserStatus/ChangeStatusModal.css b/src/core/client/admin/components/UserStatus/ChangeStatusModal.css
new file mode 100644
index 000000000..91838626b
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/ChangeStatusModal.css
@@ -0,0 +1,5 @@
+.root {
+  max-width: 500px;
+  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
+    var(--v2-spacing-3);
+}
diff --git a/src/core/client/admin/components/UserStatus/ChangeStatusModal.tsx b/src/core/client/admin/components/UserStatus/ChangeStatusModal.tsx
new file mode 100644
index 000000000..1f102bbf1
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/ChangeStatusModal.tsx
@@ -0,0 +1,51 @@
+import React, { FunctionComponent, RefObject } from "react";
+
+import {
+  Card,
+  CardCloseButton,
+  Flex,
+  Modal,
+  ModalProps,
+} from "coral-ui/components/v2";
+
+import styles from "./ChangeStatusModal.css";
+
+type RenderPropsCallback = (
+  lastFocusableRef: RefObject<any>
+) => React.ReactNode;
+
+function isRenderProp(
+  children: ModalProps["children"]
+): children is RenderPropsCallback {
+  return typeof children === "function";
+}
+
+interface Props extends Partial<ModalProps> {
+  onClose: () => void;
+}
+
+const ChangeStatusModal: FunctionComponent<Props> = ({
+  children,
+  onClose,
+  ...rest
+}) => {
+  return (
+    <Modal {...rest} onClose={onClose}>
+      {renderProps => (
+        <Card className={styles.root}>
+          <Flex justifyContent="flex-end">
+            <CardCloseButton
+              onClick={onClose}
+              ref={renderProps.firstFocusableRef}
+            />
+          </Flex>
+          {isRenderProp(children)
+            ? children.call(null, [renderProps])
+            : children}
+        </Card>
+      )}
+    </Modal>
+  );
+};
+
+export default ChangeStatusModal;
diff --git a/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.css b/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.css
new file mode 100644
index 000000000..8222b9bb7
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.css
@@ -0,0 +1,10 @@
+$status-modal-text: var(--v2-colors-mono-500);
+
+.root {
+  font-size: var(--v2-font-size-5);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-title);
+  color: $status-modal-text;
+  margin: 0;
+}
diff --git a/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.tsx b/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.tsx
new file mode 100644
index 000000000..26eef3fe8
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/ChangeStatusModalHeader.tsx
@@ -0,0 +1,15 @@
+import React, { FunctionComponent, HTMLAttributes } from "react";
+
+import styles from "./ChangeStatusModalHeader.css";
+
+const ChangeStatusModalHeader: FunctionComponent<
+  HTMLAttributes<HTMLHeadingElement>
+> = ({ children, ...rest }) => {
+  return (
+    <h2 {...rest} className={styles.root}>
+      {children}
+    </h2>
+  );
+};
+
+export default ChangeStatusModalHeader;
diff --git a/src/core/client/admin/components/UserStatus/ModalHeaderUsername.css b/src/core/client/admin/components/UserStatus/ModalHeaderUsername.css
new file mode 100644
index 000000000..c2d58ce09
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/ModalHeaderUsername.css
@@ -0,0 +1,8 @@
+$status-modal-username: var(--v2-colors-mono-900);
+
+.root {
+  font-weight: var(--v2-font-weight-secondary-bold);
+  font-family: var(--v2-font-family-secondary);
+  color: $status-modal-username;
+  font-size: 1.4rem;
+}
diff --git a/src/core/client/admin/components/UserStatus/ModalHeaderUsername.tsx b/src/core/client/admin/components/UserStatus/ModalHeaderUsername.tsx
new file mode 100644
index 000000000..0e31e17df
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/ModalHeaderUsername.tsx
@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from "react";
+
+import styles from "./ModalHeaderUsername.css";
+
+const ModalHeaderUsername: FunctionComponent<{}> = ({ children }) => {
+  return <strong className={styles.root}>{children}</strong>;
+};
+
+export default ModalHeaderUsername;
diff --git a/src/core/client/admin/components/UserStatus/PremodModal.css b/src/core/client/admin/components/UserStatus/PremodModal.css
index a85052914..9617ee7a5 100644
--- a/src/core/client/admin/components/UserStatus/PremodModal.css
+++ b/src/core/client/admin/components/UserStatus/PremodModal.css
@@ -1,3 +1,9 @@
-.card {
-  max-width: 500px;
-}
\ No newline at end of file
+$premod-modal-text: var(--v2-colors-mono-500);
+
+.bodyText {
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  line-height: var(--v2-line-height-body-short);
+  color: $premod-modal-text;
+}
diff --git a/src/core/client/admin/components/UserStatus/PremodModal.tsx b/src/core/client/admin/components/UserStatus/PremodModal.tsx
index 0253ddcd6..7bb16c1b8 100644
--- a/src/core/client/admin/components/UserStatus/PremodModal.tsx
+++ b/src/core/client/admin/components/UserStatus/PremodModal.tsx
@@ -2,15 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import NotAvailable from "coral-admin/components/NotAvailable";
-import {
-  Button,
-  Card,
-  CardCloseButton,
-  Flex,
-  HorizontalGutter,
-  Modal,
-  Typography,
-} from "coral-ui/components";
+import { Button, Flex, HorizontalGutter } from "coral-ui/components/v2";
+
+import ChangeStatusModal from "./ChangeStatusModal";
+import ChangeStatusModalHeader from "./ChangeStatusModalHeader";
+import ModalHeaderUsername from "./ModalHeaderUsername";
 
 import styles from "./PremodModal.css";
 
@@ -28,51 +24,53 @@ const PremodModal: FunctionComponent<Props> = ({
   username,
 }) => {
   return (
-    <Modal open={open} onClose={onClose} aria-labelledby="PremodModal-title">
-      {({ firstFocusableRef, lastFocusableRef }) => (
-        <Card className={styles.card}>
-          <CardCloseButton onClick={onClose} ref={firstFocusableRef} />
-          <HorizontalGutter size="double">
-            <HorizontalGutter>
-              <Localized
-                id="community-premodModal-areYouSure"
-                strong={<strong />}
-                $username={username || <NotAvailable />}
-              >
-                <Typography variant="header2" id="PremodModal-title">
-                  Are you sure you want to always premoderate{" "}
-                  <strong>{username || <NotAvailable />}</strong>?
-                </Typography>
-              </Localized>
-              <Localized id="community-premodModal-consequence">
-                <Typography>
-                  Note: Always premoderating this user will place all of their
-                  comments in the Pre-Moderate queue.
-                </Typography>
-              </Localized>
-            </HorizontalGutter>
-            <Flex justifyContent="flex-end" itemGutter>
-              <Localized id="community-premodModal-cancel">
-                <Button variant="outlined" onClick={onClose}>
-                  Cancel
-                </Button>
-              </Localized>
+    <ChangeStatusModal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="PremodModal-title"
+    >
+      {({ lastFocusableRef }) => (
+        <HorizontalGutter spacing={3}>
+          <Localized
+            id="community-premodModal-areYouSure"
+            strong={<ModalHeaderUsername />}
+            $username={username || <NotAvailable />}
+          >
+            <ChangeStatusModalHeader id="PremodModal-title">
+              Are you sure you want to always premoderate{" "}
+              <ModalHeaderUsername>
+                {username || <NotAvailable />}
+              </ModalHeaderUsername>
+              ?
+            </ChangeStatusModalHeader>
+          </Localized>
+          <Localized id="community-premodModal-consequence">
+            <div className={styles.bodyText}>
+              Note: Always premoderating this user will place all of their
+              comments in the Pre-Moderate queue.
+            </div>
+          </Localized>
+          <Flex justifyContent="flex-end" itemGutter>
+            <Localized id="community-premodModal-cancel">
+              <Button variant="ghost" onClick={onClose}>
+                Cancel
+              </Button>
+            </Localized>
 
-              <Localized id="community-premodModal-premodUser">
-                <Button
-                  variant="filled"
-                  color="primary"
-                  onClick={onConfirm}
-                  ref={lastFocusableRef}
-                >
-                  Yes, always premoderate user
-                </Button>
-              </Localized>
-            </Flex>
-          </HorizontalGutter>
-        </Card>
+            <Localized id="community-premodModal-premodUser">
+              <Button
+                variant="filled"
+                color="default"
+                onClick={onConfirm}
+                ref={lastFocusableRef}
+              >
+                Yes, always premoderate user
+              </Button>
+            </Localized>
+          </Flex>
+        </HorizontalGutter>
       )}
-    </Modal>
+    </ChangeStatusModal>
   );
 };
 
diff --git a/src/core/client/admin/components/UserStatus/SuspendForm.css b/src/core/client/admin/components/UserStatus/SuspendForm.css
new file mode 100644
index 000000000..296f41a4a
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/SuspendForm.css
@@ -0,0 +1,12 @@
+.textArea {
+  height: calc(12 * var(--mini-unit));
+}
+
+.subTitle {
+  font-size: var(--v2-font-size-4);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-title);
+  color: $suspend-modal-text;
+  margin: 0;
+}
diff --git a/src/core/client/admin/components/UserStatus/SuspendForm.tsx b/src/core/client/admin/components/UserStatus/SuspendForm.tsx
index 71e9e2343..a6bf533d5 100644
--- a/src/core/client/admin/components/UserStatus/SuspendForm.tsx
+++ b/src/core/client/admin/components/UserStatus/SuspendForm.tsx
@@ -1,6 +1,6 @@
 import { Mutator } from "final-form";
 import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent, useCallback } from "react";
+import React, { FunctionComponent, RefObject, useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
 import { ScaledUnit } from "coral-common/helpers/i18n";
@@ -11,7 +11,8 @@ import {
   Flex,
   HorizontalGutter,
   RadioButton,
-} from "coral-ui/components";
+  Textarea,
+} from "coral-ui/components/v2";
 
 import styles from "./SuspendModal.css";
 
@@ -21,6 +22,7 @@ interface Props {
   getMessage: GetMessage;
   organizationName: string;
   onSubmit: (duration: ScaledUnit, message: string) => void;
+  lastFocusableRef: RefObject<any>;
 }
 
 const DURATIONS: ScaledUnit[] = [
@@ -38,6 +40,7 @@ const SuspendForm: FunctionComponent<Props> = ({
   getMessage,
   onSubmit,
   organizationName,
+  lastFocusableRef,
 }) => {
   const getMessageWithDuration = useCallback(
     ({ scaled, unit }: Pick<ScaledUnit, "scaled" | "unit">): string => {
@@ -107,42 +110,48 @@ const SuspendForm: FunctionComponent<Props> = ({
       >
         {({ handleSubmit, form }) => (
           <form onSubmit={handleSubmit}>
-            <HorizontalGutter spacing={2}>
-              <div>
-                {DURATIONS.map(({ original, value, scaled, unit }) => (
-                  <Field
-                    key={value}
-                    name="duration"
-                    type="radio"
-                    component="input"
-                    value={value}
-                  >
-                    {({ input }) => (
-                      <Localized
-                        id="framework-timeago-time"
-                        $value={scaled}
-                        $unit={unit}
-                      >
-                        <RadioButton
-                          id={`duration-${value}`}
-                          {...input}
-                          onChange={event => {
-                            form.mutators.setMessageValue(
-                              "emailMessage",
-                              getMessageWithDuration({ scaled, unit })
-                            );
-                            input.onChange(event);
-                          }}
+            <HorizontalGutter spacing={3}>
+              <HorizontalGutter spacing={1}>
+                <Localized id="community-suspendModal-selectDuration">
+                  <p className={styles.subTitle}>Select suspension length</p>
+                </Localized>
+
+                <div>
+                  {DURATIONS.map(({ original, value, scaled, unit }) => (
+                    <Field
+                      key={value}
+                      name="duration"
+                      type="radio"
+                      component="input"
+                      value={value}
+                    >
+                      {({ input }) => (
+                        <Localized
+                          id="framework-timeago-time"
+                          $value={scaled}
+                          $unit={unit}
                         >
-                          <span>
-                            {scaled} {unit}
-                          </span>
-                        </RadioButton>
-                      </Localized>
-                    )}
-                  </Field>
-                ))}
-              </div>
+                          <RadioButton
+                            id={`duration-${value}`}
+                            {...input}
+                            onChange={event => {
+                              form.mutators.setMessageValue(
+                                "emailMessage",
+                                getMessageWithDuration({ scaled, unit })
+                              );
+                              input.onChange(event);
+                            }}
+                          >
+                            <span>
+                              {scaled} {unit}
+                            </span>
+                          </RadioButton>
+                        </Localized>
+                      )}
+                    </Field>
+                  ))}
+                </div>
+              </HorizontalGutter>
               <Field type="checkbox" name="editMessage">
                 {({ input }) => (
                   <Localized id="community-suspendModal-customize">
@@ -165,32 +174,37 @@ const SuspendForm: FunctionComponent<Props> = ({
               <Field name="editMessage" subscription={{ value: true }}>
                 {({ input: { value } }) =>
                   value ? (
-                    <Field
-                      className={styles.textArea}
-                      id="suspendModal-message"
-                      component="textarea"
-                      name="emailMessage"
-                    />
+                    <Field component="textarea" name="emailMessage">
+                      {({ input }) => (
+                        <Textarea
+                          id="suspendModal-message"
+                          {...input}
+                          className={styles.textArea}
+                          fullwidth
+                        />
+                      )}
+                    </Field>
                   ) : null
                 }
               </Field>
+              <Flex justifyContent="flex-end" itemGutter="half">
+                <Localized id="community-suspendModal-cancel">
+                  <Button variant="ghost" onClick={onCancel}>
+                    Cancel
+                  </Button>
+                </Localized>
+                <Localized id="community-suspendModal-suspendUser">
+                  <Button
+                    ref={lastFocusableRef}
+                    variant="filled"
+                    color="default"
+                    type="submit"
+                  >
+                    Suspend User
+                  </Button>
+                </Localized>
+              </Flex>
             </HorizontalGutter>
-            <Flex
-              className={styles.footer}
-              justifyContent="flex-end"
-              itemGutter="half"
-            >
-              <Localized id="community-suspendModal-cancel">
-                <Button variant="outlined" onClick={onCancel}>
-                  Cancel
-                </Button>
-              </Localized>
-              <Localized id="community-suspendModal-suspendUser">
-                <Button variant="filled" color="primary" type="submit">
-                  Suspend User
-                </Button>
-              </Localized>
-            </Flex>
           </form>
         )}
       </Form>
diff --git a/src/core/client/admin/components/UserStatus/SuspendModal.css b/src/core/client/admin/components/UserStatus/SuspendModal.css
index 8f0292a1d..350b1036c 100644
--- a/src/core/client/admin/components/UserStatus/SuspendModal.css
+++ b/src/core/client/admin/components/UserStatus/SuspendModal.css
@@ -1,5 +1,20 @@
-.card {
-  max-width: 500px;
+$suspend-modal-text: var(--v2-colors-mono-500);
+
+.bodyText {
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  line-height: var(--v2-line-height-body-short);
+  color: $suspend-modal-text;
+}
+
+.subTitle {
+  font-size: var(--v2-font-size-4);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-title);
+  color: $suspend-modal-text;
+  margin: 0;
 }
 
 .radioButton {
@@ -14,9 +29,9 @@
 }
 
 .header {
-  margin: 0 0 var(--spacing-3) 0  !important;
+  margin: 0 0 var(--spacing-3) 0 !important;
 }
 
 .footer {
   margin-top: var(--spacing-3);
-}
\ No newline at end of file
+}
diff --git a/src/core/client/admin/components/UserStatus/SuspendModal.tsx b/src/core/client/admin/components/UserStatus/SuspendModal.tsx
index c8cd7bdd0..7b1690e7d 100644
--- a/src/core/client/admin/components/UserStatus/SuspendModal.tsx
+++ b/src/core/client/admin/components/UserStatus/SuspendModal.tsx
@@ -4,15 +4,11 @@ import React, { FunctionComponent, useCallback, useState } from "react";
 import NotAvailable from "coral-admin/components/NotAvailable";
 import { ScaledUnit } from "coral-common/helpers/i18n";
 import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
-import {
-  Button,
-  Card,
-  CardCloseButton,
-  Flex,
-  HorizontalGutter,
-  Modal,
-  Typography,
-} from "coral-ui/components";
+import { Button, Flex, HorizontalGutter } from "coral-ui/components/v2";
+
+import ChangeStatusModal from "./ChangeStatusModal";
+import ChangeStatusModalHeader from "./ChangeStatusModalHeader";
+import ModalHeaderUsername from "./ModalHeaderUsername";
 
 import SuspendForm from "./SuspendForm";
 
@@ -52,76 +48,75 @@ const SuspendModal: FunctionComponent<Props> = ({
   );
 
   return (
-    <>
-      <Modal open={open} onClose={onClose} aria-labelledby="suspendModal-title">
-        {({ firstFocusableRef, lastFocusableRef }) => (
-          <Card className={styles.card}>
-            <CardCloseButton onClick={onClose} ref={firstFocusableRef} />
-            {success && (
-              <HorizontalGutter spacing={2}>
-                <HorizontalGutter>
-                  <Localized
-                    id="community-suspendModal-success"
-                    $username={username}
-                    strong={<strong />}
-                    $duration={successDuration}
+    <ChangeStatusModal
+      open={open}
+      onClose={onClose}
+      aria-labelledby="suspendModal-title"
+    >
+      {({ lastFocusableRef }) => (
+        <>
+          {success && (
+            <HorizontalGutter spacing={3}>
+              <Localized
+                id="community-suspendModal-success"
+                $username={username}
+                strong={<ModalHeaderUsername />}
+                $duration={successDuration}
+              >
+                <ChangeStatusModalHeader>
+                  <ModalHeaderUsername>{username}</ModalHeaderUsername> has been
+                  suspended for <strong>{successDuration}</strong>
+                </ChangeStatusModalHeader>
+              </Localized>
+
+              <Flex justifyContent="flex-end" itemGutter="half">
+                <Localized id="community-suspendModal-success-close">
+                  <Button
+                    ref={lastFocusableRef}
+                    variant="filled"
+                    color="default"
+                    onClick={onClose}
                   >
-                    <Typography>
-                      <strong>{username}</strong> has been suspended for{" "}
-                      <strong>{successDuration}</strong>
-                    </Typography>
-                  </Localized>
-                </HorizontalGutter>
-
-                <Flex justifyContent="flex-end" itemGutter="half">
-                  <Localized id="community-suspendModal-success-close">
-                    <Button variant="filled" color="primary" onClick={onClose}>
-                      Ok
-                    </Button>
-                  </Localized>
-                </Flex>
-              </HorizontalGutter>
-            )}
-            {!success && (
-              <HorizontalGutter spacing={2}>
-                <Localized
-                  id="community-suspendModal-areYouSure"
-                  strong={<strong />}
-                  $username={username || <NotAvailable />}
-                >
-                  <Typography
-                    className={styles.header}
-                    variant="header2"
-                    id="suspendModal-title"
-                  >
-                    Suspend <strong>{username || <NotAvailable />}</strong>?
-                  </Typography>
-                </Localized>
-                <Localized id="community-suspendModal-consequence">
-                  <Typography>
-                    While suspended, this user will no longer be able to
-                    comment, use reactions, or report comments.
-                  </Typography>
+                    Ok
+                  </Button>
                 </Localized>
+              </Flex>
+            </HorizontalGutter>
+          )}
+          {!success && (
+            <HorizontalGutter spacing={3}>
+              <Localized
+                id="community-suspendModal-areYouSure"
+                strong={<ModalHeaderUsername />}
+                $username={username || <NotAvailable />}
+              >
+                <ChangeStatusModalHeader id="suspendModal-title">
+                  Suspend{" "}
+                  <ModalHeaderUsername>
+                    {username || <NotAvailable />}
+                  </ModalHeaderUsername>
+                  ?
+                </ChangeStatusModalHeader>
+              </Localized>
+              <Localized id="community-suspendModal-consequence">
+                <div className={styles.bodyText}>
+                  While suspended, this user will no longer be able to comment,
+                  use reactions, or report comments.
+                </div>
+              </Localized>
 
-                <Localized id="community-suspendModal-selectDuration">
-                  <Typography variant="header3">
-                    Select suspension length
-                  </Typography>
-                </Localized>
-
-                <SuspendForm
-                  username={username}
-                  onCancel={onClose}
-                  organizationName={organizationName}
-                  onSubmit={onFormSubmit}
-                />
-              </HorizontalGutter>
-            )}
-          </Card>
-        )}
-      </Modal>
-    </>
+              <SuspendForm
+                username={username}
+                onCancel={onClose}
+                organizationName={organizationName}
+                onSubmit={onFormSubmit}
+                lastFocusableRef={lastFocusableRef}
+              />
+            </HorizontalGutter>
+          )}
+        </>
+      )}
+    </ChangeStatusModal>
   );
 };
 
diff --git a/src/core/client/admin/components/UserStatus/UserStatus.css b/src/core/client/admin/components/UserStatus/UserStatus.css
new file mode 100644
index 000000000..b3c2e614d
--- /dev/null
+++ b/src/core/client/admin/components/UserStatus/UserStatus.css
@@ -0,0 +1,20 @@
+.root {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-reset);
+}
+
+.success {
+  color: var(--v2-palette-success-main);
+}
+
+.warning {
+  color: var(--v2-palette-error-main);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+}
+
+.error {
+  color: var(--v2-palette-error-darkest);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+}
diff --git a/src/core/client/admin/components/UserStatus/UserStatus.tsx b/src/core/client/admin/components/UserStatus/UserStatus.tsx
index 8bd83f077..1866c274e 100644
--- a/src/core/client/admin/components/UserStatus/UserStatus.tsx
+++ b/src/core/client/admin/components/UserStatus/UserStatus.tsx
@@ -1,8 +1,10 @@
+import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Flex, Typography } from "coral-ui/components";
-import { PropTypesOf } from "coral-ui/types";
+import { Flex } from "coral-ui/components/v2";
+
+import styles from "./UserStatus.css";
 
 interface Props {
   banned: boolean;
@@ -10,22 +12,18 @@ interface Props {
   premod: boolean;
 }
 
-const render = (
-  color: PropTypesOf<typeof Typography>["color"],
-  content: React.ReactNode
-) => (
-  <Typography color={color} variant="detail" container="div">
+const render = (className: string, content: React.ReactNode) => (
+  <div className={cn(styles.root, className)}>
     <Flex alignItems="center" itemGutter="half">
       {content}
     </Flex>
-  </Typography>
+  </div>
 );
 
 const UserStatus: FunctionComponent<Props> = props => {
   if (props.banned) {
     return render(
-      "error",
-      // eslint-disable-next-line:jsx-wrap-multiline
+      styles.error,
       <Localized id="userStatus-banned">
         <div>Banned</div>
       </Localized>
@@ -33,8 +31,7 @@ const UserStatus: FunctionComponent<Props> = props => {
   }
   if (props.suspended) {
     return render(
-      "warning",
-      // eslint-disable-next-line:jsx-wrap-multiline
+      styles.warning,
       <Localized id="userStatus-suspended">
         <div>Suspended</div>
       </Localized>
@@ -42,16 +39,14 @@ const UserStatus: FunctionComponent<Props> = props => {
   }
   if (props.premod) {
     return render(
-      "warning",
-      // eslint-disable-next-line:jsx-wrap-multiline
+      styles.warning,
       <Localized id="userStatus-premod">
         <div>Always Premoderated</div>
       </Localized>
     );
   }
   return render(
-    "success",
-    // eslint-disable-next-line:jsx-wrap-multiline
+    styles.success,
     <Localized id="userStatus-active">
       <div>Active</div>
     </Localized>
diff --git a/src/core/client/admin/components/UserStatus/UserStatusChange.css b/src/core/client/admin/components/UserStatus/UserStatusChange.css
index 528966bb2..ef1d4679c 100644
--- a/src/core/client/admin/components/UserStatus/UserStatusChange.css
+++ b/src/core/client/admin/components/UserStatus/UserStatusChange.css
@@ -1,6 +1,13 @@
+$status-change-button-border: var(--v2-colors-grey-400);
+
 .button {
   justify-content: space-between;
-  padding: 0;
+  display: flex;
+}
+
+.bordered {
+  padding: 0 var(--v2-spacing-2);
+  border: 1px solid $status-change-button-border;
 }
 
 .fullWidth {
diff --git a/src/core/client/admin/components/UserStatus/UserStatusChange.tsx b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
index bbbecd6bd..a0d603532 100644
--- a/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
+++ b/src/core/client/admin/components/UserStatus/UserStatusChange.tsx
@@ -9,7 +9,7 @@ import {
   Dropdown,
   DropdownButton,
   Popover,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import styles from "./UserStatusChange.css";
 
@@ -25,6 +25,7 @@ interface Props {
   premod: boolean;
   children: React.ReactNode;
   fullWidth?: boolean;
+  bordered?: boolean;
 }
 
 const UserStatusChange: FunctionComponent<Props> = ({
@@ -39,6 +40,7 @@ const UserStatusChange: FunctionComponent<Props> = ({
   premod,
   children,
   fullWidth = true,
+  bordered = false,
 }) => (
   <Localized id="community-userStatus-popover" attrs={{ description: true }}>
     <Popover
@@ -134,11 +136,15 @@ const UserStatusChange: FunctionComponent<Props> = ({
         >
           <Button
             aria-label="Change user status"
-            className={cn(styles.button, { [styles.fullWidth]: fullWidth })}
+            className={cn(styles.button, {
+              [styles.fullWidth]: fullWidth,
+              [styles.bordered]: bordered,
+            })}
             onClick={toggleVisibility}
             ref={ref}
-            variant="regular"
-            size="small"
+            color="mono"
+            uppercase={false}
+            variant="plain"
           >
             {children}
             {
diff --git a/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx b/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx
index 5b8ef0c5a..bc1366e23 100644
--- a/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx
+++ b/src/core/client/admin/components/UserStatus/UserStatusChangeContainer.tsx
@@ -10,7 +10,6 @@ import { GQLUSER_ROLE } from "coral-framework/schema";
 import { UserStatusChangeContainer_settings as SettingsData } from "coral-admin/__generated__/UserStatusChangeContainer_settings.graphql";
 import { UserStatusChangeContainer_user as UserData } from "coral-admin/__generated__/UserStatusChangeContainer_user.graphql";
 
-import ButtonPadding from "../ButtonPadding";
 import BanModal from "./BanModal";
 import BanUserMutation from "./BanUserMutation";
 import PremodModal from "./PremodModal";
@@ -27,10 +26,11 @@ interface Props {
   user: UserData;
   fullWidth?: boolean;
   settings: SettingsData;
+  bordered?: boolean;
 }
 
 const UserStatusChangeContainer: FunctionComponent<Props> = props => {
-  const { user, settings, fullWidth } = props;
+  const { user, settings, fullWidth, bordered } = props;
   const banUser = useMutation(BanUserMutation);
   const suspendUser = useMutation(SuspendUserMutation);
   const removeUserBan = useMutation(RemoveUserBanMutation);
@@ -119,11 +119,7 @@ const UserStatusChangeContainer: FunctionComponent<Props> = props => {
   );
 
   if (user.role !== GQLUSER_ROLE.COMMENTER) {
-    return (
-      <ButtonPadding>
-        <UserStatusContainer user={user} />
-      </ButtonPadding>
-    );
+    return <UserStatusContainer user={user} />;
   }
 
   return (
@@ -139,6 +135,7 @@ const UserStatusChangeContainer: FunctionComponent<Props> = props => {
         suspended={user.status.suspension.active}
         premod={user.status.premod.active}
         fullWidth={fullWidth}
+        bordered={bordered}
       >
         <UserStatusContainer user={user} />
       </UserStatusChange>
diff --git a/src/core/client/admin/routes/Community/EmptyMessage.css b/src/core/client/admin/routes/Community/EmptyMessage.css
index 7b933aa00..ab1f5bda1 100644
--- a/src/core/client/admin/routes/Community/EmptyMessage.css
+++ b/src/core/client/admin/routes/Community/EmptyMessage.css
@@ -1,3 +1,7 @@
 .root {
-  font-size: calc(18rem / var(--rem-base));
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-body-short);
+  text-align: center;
 }
diff --git a/src/core/client/admin/routes/Community/EmptyMessage.tsx b/src/core/client/admin/routes/Community/EmptyMessage.tsx
index 1d6c3999d..7a84e2fb2 100644
--- a/src/core/client/admin/routes/Community/EmptyMessage.tsx
+++ b/src/core/client/admin/routes/Community/EmptyMessage.tsx
@@ -1,15 +1,13 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import styles from "./EmptyMessage.css";
 
 const EmptyMessage: FunctionComponent = props => (
   <Localized id="community-emptyMessage">
-    <Typography className={styles.root} variant="bodyCopyBold" align="center">
+    <div className={styles.root}>
       We could not find anyone in your community matching your criteria.
-    </Typography>
+    </div>
   </Localized>
 );
 
diff --git a/src/core/client/admin/routes/Community/InviteUsers/EmailField.tsx b/src/core/client/admin/routes/Community/InviteUsers/EmailField.tsx
index 7a89d4d26..2e04108a2 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/EmailField.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/EmailField.tsx
@@ -4,12 +4,7 @@ import { Field } from "react-final-form";
 
 import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import { validateEmail } from "coral-framework/lib/validation";
-import {
-  FieldSet,
-  FormField,
-  InputLabel,
-  TextField,
-} from "coral-ui/components";
+import { FieldSet, FormField, Label, TextField } from "coral-ui/components/v2";
 
 interface Props {
   index: number;
@@ -22,13 +17,7 @@ const EmailField: FunctionComponent<Props> = ({ index, disabled }) => (
       {({ input, meta }) => (
         <FormField>
           <Localized id="community-invite-emailAddressLabel">
-            <InputLabel
-              container="legend"
-              variant="bodyCopyBold"
-              htmlFor={input.name}
-            >
-              Email Address:
-            </InputLabel>
+            <Label htmlFor={input.name}>Email Address:</Label>
           </Localized>
           <TextField
             data-testid={`invite-users-email.${index}`}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css
new file mode 100644
index 000000000..7d0c23f97
--- /dev/null
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css
@@ -0,0 +1,3 @@
+.button {
+  padding: var(--v2-spacing-2);
+}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx
index 8447e289c..a7f79e783 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx
@@ -1,10 +1,12 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
-import { Button, Modal } from "coral-ui/components";
+import { Button, Modal } from "coral-ui/components/v2";
 
 import InviteUsersModal from "./InviteUsersModal";
 
+import styles from "./InviteUsers.css";
+
 const InviteUsers: FunctionComponent = () => {
   const [open, setOpen] = useState(false);
 
@@ -16,7 +18,8 @@ const InviteUsers: FunctionComponent = () => {
       <Localized id="community-invite-invite">
         <Button
           variant="filled"
-          color="primary"
+          color="default"
+          className={styles.button}
           type="button"
           data-testid="invite-users-button"
           onClick={show}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css
new file mode 100644
index 000000000..5daf0aed7
--- /dev/null
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css
@@ -0,0 +1,9 @@
+$invite-form-text: var(--v2-colors-mono-500);
+
+.bodyText {
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  line-height: var(--v2-line-height-body-short);
+  color: $invite-form-text;
+}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx
index ad9c25dbf..36b2822b0 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx
@@ -10,13 +10,14 @@ import {
   CallOut,
   Flex,
   HorizontalGutter,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import EmailField from "./EmailField";
 import InviteUsersMutation from "./InviteUsersMutation";
 import RoleField from "./RoleField";
 
+import styles from "./InviteUsersForm.css";
+
 interface Props {
   onFinish: () => void;
   lastRef?: React.Ref<HTMLButtonElement>;
@@ -64,7 +65,7 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
               <Localized id="community-invite-inviteMore">
                 <Button
                   variant="underlined"
-                  color="primary"
+                  color="default"
                   disabled={submitting}
                   onClick={() => {
                     setEmailFieldCount(emailFieldCount + 1);
@@ -84,11 +85,11 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
                         id="community-invite-role-staff"
                         strong={<strong />}
                       >
-                        <Typography>
+                        <div className={styles.bodyText}>
                           Staff role: Receives a “Staff” badge, and comments are
                           automatically approved. Cannot moderate or change any
                           Coral configuration.
-                        </Typography>
+                        </div>
                       </Localized>
                     );
                   case GQLUSER_ROLE.MODERATOR:
@@ -97,13 +98,13 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
                         id="community-invite-role-moderator"
                         strong={<strong />}
                       >
-                        <Typography>
+                        <div className={styles.bodyText}>
                           Moderator role: Receives a “Staff” badge, and comments
                           are automatically approved. Has full moderation
                           privileges (approve, reject and feature comments). Can
                           configure individual articles but no site-wide
                           configuration privileges.
-                        </Typography>
+                        </div>
                       </Localized>
                     );
                   case GQLUSER_ROLE.ADMIN:
@@ -112,13 +113,13 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
                         id="community-invite-role-admin"
                         strong={<strong />}
                       >
-                        <Typography>
+                        <div className={styles.bodyText}>
                           Admin role: Receives a “Staff” badge, and comments are
                           automatically approved. Has full moderation privileges
                           (approve, reject and feature comments). Can configure
                           individual articles and has site-wide configuration
                           privileges.
-                        </Typography>
+                        </div>
                       </Localized>
                     );
                   default:
@@ -129,7 +130,7 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
             <Flex direction="row" justifyContent="flex-end">
               <Localized id="community-invite-sendInvitations">
                 <Button
-                  color="primary"
+                  color="default"
                   variant="filled"
                   type="submit"
                   disabled={submitting}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css
index 4275b7da7..ca5b60c79 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css
@@ -1,5 +1,18 @@
+$invite-modal-text: var(--v2-colors-mono-500);
+
 .root {
   width: 400px;
+  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3)
+    var(--v2-spacing-3);
+}
+
+.title {
+  font-size: var(--v2-font-size-5);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-title);
+  color: $invite-modal-text;
+  margin: 0;
 }
 
 .clearfix:after {
diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx
index 01d0bf8f2..6acd21571 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.tsx
@@ -1,7 +1,12 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, useCallback, useState } from "react";
 
-import { Box, Card, CardCloseButton, Typography } from "coral-ui/components";
+import {
+  Card,
+  CardCloseButton,
+  Flex,
+  HorizontalGutter,
+} from "coral-ui/components/v2";
 
 import InviteForm from "./InviteUsersForm";
 import Success from "./Success";
@@ -26,15 +31,17 @@ const InviteUsersModal: FunctionComponent<Props> = ({
     <Card className={styles.root} data-testid="invite-users-modal">
       {!finished ? (
         <div>
-          <Box className={styles.clearfix} marginBottom={3}>
+          <Flex justifyContent="flex-end">
             <CardCloseButton onClick={onHide} ref={firstFocusableRef} />
+          </Flex>
+          <HorizontalGutter spacing={3}>
             <Localized id="community-invite-inviteMember">
-              <Typography variant="header2">
+              <h2 className={styles.title}>
                 Invite members to your organization
-              </Typography>
+              </h2>
             </Localized>
-          </Box>
-          <InviteForm onFinish={finish} lastRef={lastFocusableRef} />
+            <InviteForm onFinish={finish} lastRef={lastFocusableRef} />
+          </HorizontalGutter>
         </div>
       ) : (
         <Success onClose={onHide} lastFocusableRef={lastFocusableRef} />
diff --git a/src/core/client/admin/routes/Community/InviteUsers/RoleField.css b/src/core/client/admin/routes/Community/InviteUsers/RoleField.css
new file mode 100644
index 000000000..b2f5bdbbc
--- /dev/null
+++ b/src/core/client/admin/routes/Community/InviteUsers/RoleField.css
@@ -0,0 +1,9 @@
+$role-field-text: var(--v2-colors-mono-500);
+
+.legend {
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-body-short);
+  color: $role-field-text;
+}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx b/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx
index 31d2c5d94..dc206c94e 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx
@@ -3,7 +3,9 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { GQLUSER_ROLE } from "coral-framework/schema";
-import { FieldSet, RadioButton, Typography } from "coral-ui/components";
+import { FieldSet, RadioButton } from "coral-ui/components/v2";
+
+import styles from "./RoleField.css";
 
 interface Props {
   disabled: boolean;
@@ -12,9 +14,7 @@ interface Props {
 const RoleField: FunctionComponent<Props> = ({ disabled }) => (
   <FieldSet>
     <Localized id="community-invite-inviteAsLabel">
-      <Typography container="legend" variant="bodyCopyBold">
-        Invite as:
-      </Typography>
+      <legend className={styles.legend}>Invite as:</legend>
     </Localized>
     <div>
       <Field name="role" type="radio" value={GQLUSER_ROLE.STAFF}>
diff --git a/src/core/client/admin/routes/Community/InviteUsers/Success.css b/src/core/client/admin/routes/Community/InviteUsers/Success.css
index 8eaa4e7ed..71d281861 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/Success.css
+++ b/src/core/client/admin/routes/Community/InviteUsers/Success.css
@@ -1,3 +1,13 @@
+$success-text: var(--v2-colors-mono-500);
+
 .box {
   width: 100%;
 }
+.title {
+  font-size: var(--v2-font-size-5);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-title);
+  color: $success-text;
+  margin: 0;
+}
diff --git a/src/core/client/admin/routes/Community/InviteUsers/Success.tsx b/src/core/client/admin/routes/Community/InviteUsers/Success.tsx
index 5e7b0e6b8..56409ca2a 100644
--- a/src/core/client/admin/routes/Community/InviteUsers/Success.tsx
+++ b/src/core/client/admin/routes/Community/InviteUsers/Success.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Box, Button, CheckIcon, Flex, Typography } from "coral-ui/components";
+import { Box, Button, CheckIcon, Flex } from "coral-ui/components";
 
 import * as styles from "./Success.css";
 
@@ -24,9 +24,7 @@ const Success: FunctionComponent<Props> = ({ lastFocusableRef, onClose }) => (
         </Box>
         <Box marginBottom={7}>
           <Localized id="community-invite-invitationsSent">
-            <Typography variant="header2">
-              Your invitations have been sent!
-            </Typography>
+            <h2 className={styles.title}>Your invitations have been sent!</h2>
           </Localized>
         </Box>
       </Flex>
diff --git a/src/core/client/admin/routes/Community/UserRow.css b/src/core/client/admin/routes/Community/UserRow.css
index 52109dd33..196151bb3 100644
--- a/src/core/client/admin/routes/Community/UserRow.css
+++ b/src/core/client/admin/routes/Community/UserRow.css
@@ -16,18 +16,16 @@
   padding-bottom: 15px;
 }
 .roleColumn {
-  vertical-align: top;
 }
 .statusColumn {
-  vertical-align: top;
 }
 
 .usernameButton {
   padding: 0px;
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-regular);
-  font-size: calc(14rem / var(--rem-base));
-  line-height: calc(16em / 14);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-reset);
+  font-size: var(--v2-font-size-2);
 }
 
 .username {
@@ -37,6 +35,5 @@
 .deleted {
   display: inline-block;
   padding-left: var(--spacing-2);
-
   color: var(--palette-warning-main);
 }
diff --git a/src/core/client/admin/routes/Community/UserRow.tsx b/src/core/client/admin/routes/Community/UserRow.tsx
index 6357d09ac..9d0333679 100644
--- a/src/core/client/admin/routes/Community/UserRow.tsx
+++ b/src/core/client/admin/routes/Community/UserRow.tsx
@@ -5,7 +5,7 @@ import NotAvailable from "coral-admin/components/NotAvailable";
 import UserRole from "coral-admin/components/UserRole";
 import UserStatus from "coral-admin/components/UserStatus";
 import { PropTypesOf } from "coral-framework/types";
-import { Button, TableCell, TableRow, TextLink } from "coral-ui/components";
+import { Button, TableCell, TableRow, TextLink } from "coral-ui/components/v2";
 
 import styles from "./UserRow.css";
 
@@ -57,7 +57,12 @@ const UserRow: FunctionComponent<Props> = ({
           </>
         )}
         {!deletedAt && (
-          <Button onClick={usernameClicked} className={styles.usernameButton}>
+          <Button
+            variant="plain"
+            uppercase={false}
+            onClick={usernameClicked}
+            className={styles.usernameButton}
+          >
             {username || <NotAvailable />}
           </Button>
         )}
diff --git a/src/core/client/admin/routes/Community/UserTable.css b/src/core/client/admin/routes/Community/UserTable.css
index 928c3ac86..9db92578a 100644
--- a/src/core/client/admin/routes/Community/UserTable.css
+++ b/src/core/client/admin/routes/Community/UserTable.css
@@ -1,8 +1,8 @@
 .usernameColumn {
-  width: 25%;
+  width: 20%;
 }
 .emailColumn {
-  width: 30%;
+  width: 35%;
 }
 .memberSinceColumn {
   width: 15%;
diff --git a/src/core/client/admin/routes/Community/UserTable.tsx b/src/core/client/admin/routes/Community/UserTable.tsx
index 1df9cff4b..15152c656 100644
--- a/src/core/client/admin/routes/Community/UserTable.tsx
+++ b/src/core/client/admin/routes/Community/UserTable.tsx
@@ -4,14 +4,16 @@ import React, { FunctionComponent, useCallback, useState } from "react";
 import AutoLoadMore from "coral-admin/components/AutoLoadMore";
 import UserHistoryDrawer from "coral-admin/components/UserHistoryDrawer";
 import { PropTypesOf } from "coral-framework/types";
-import { Flex, HorizontalGutter, Spinner } from "coral-ui/components";
 import {
+  Flex,
+  HorizontalGutter,
+  Spinner,
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
-} from "coral-ui/components/Table";
+} from "coral-ui/components/v2";
 
 import EmptyMessage from "./EmptyMessage";
 import UserRowContainer from "./UserRowContainer";
diff --git a/src/core/client/admin/routes/Community/UserTableContainer.tsx b/src/core/client/admin/routes/Community/UserTableContainer.tsx
index ff612998c..119a64b6a 100644
--- a/src/core/client/admin/routes/Community/UserTableContainer.tsx
+++ b/src/core/client/admin/routes/Community/UserTableContainer.tsx
@@ -8,7 +8,7 @@ import {
   withPaginationContainer,
 } from "coral-framework/lib/relay";
 import { GQLUSER_ROLE_RL, GQLUSER_STATUS_RL } from "coral-framework/schema";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { UserTableContainer_query as QueryData } from "coral-admin/__generated__/UserTableContainer_query.graphql";
 import { UserTableContainerPaginationQueryVariables } from "coral-admin/__generated__/UserTableContainerPaginationQuery.graphql";
diff --git a/src/core/client/admin/routes/Community/UserTableFilter.css b/src/core/client/admin/routes/Community/UserTableFilter.css
index e2a77900e..6d79282de 100644
--- a/src/core/client/admin/routes/Community/UserTableFilter.css
+++ b/src/core/client/admin/routes/Community/UserTableFilter.css
@@ -1,10 +1,4 @@
-.legend {
-  margin-bottom: 2px;
-  text-transform: uppercase;
-}
-
 .textField {
-  height: 31px;
   width: calc(45 * var(--mini-unit));
 }
 
diff --git a/src/core/client/admin/routes/Community/UserTableFilter.tsx b/src/core/client/admin/routes/Community/UserTableFilter.tsx
index 1a87c293b..2633c3afa 100644
--- a/src/core/client/admin/routes/Community/UserTableFilter.tsx
+++ b/src/core/client/admin/routes/Community/UserTableFilter.tsx
@@ -8,17 +8,15 @@ import {
   GQLUSER_STATUS,
   GQLUSER_STATUS_RL,
 } from "coral-framework/schema";
+import { Button, Flex, HorizontalGutter, Icon } from "coral-ui/components/v2";
 import {
-  Button,
   FieldSet,
-  Flex,
-  Icon,
+  Label,
   OptGroup,
   Option,
   SelectField,
   TextField,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 import { PropTypesOf } from "coral-ui/types";
 
 import { InviteUsersContainer } from "./InviteUsers";
@@ -37,155 +35,144 @@ interface Props {
 }
 
 const UserTableFilter: FunctionComponent<Props> = props => (
-  <Flex
-    justifyContent="space-between"
-    alignItems="flex-end"
-    itemGutter="double"
-  >
-    <Flex>
+  <Flex justifyContent="space-between" alignItems="flex-end">
+    <Flex itemGutter="double">
       <FieldSet>
-        <Localized id="community-filter-search">
-          <Typography
-            container="legend"
-            className={styles.legend}
-            variant="bodyCopyBold"
+        <HorizontalGutter spacing={2}>
+          <Localized id="community-filter-search">
+            <Label>Search</Label>
+          </Localized>
+          <Form
+            onSubmit={({ search }: { search: string }) =>
+              props.onSetSearchFilter(search)
+            }
           >
-            Search
-          </Typography>
-        </Localized>
-        <Form
-          onSubmit={({ search }: { search: string }) =>
-            props.onSetSearchFilter(search)
-          }
-        >
-          {({ handleSubmit }) => (
-            <form
-              autoComplete="off"
-              onSubmit={handleSubmit}
-              id="configure-form"
-            >
-              <Field name="search">
-                {({ input }) => (
-                  <Localized
-                    id="community-filter-searchField"
-                    attrs={{ placeholder: true, "aria-label": true }}
-                  >
-                    <TextField
-                      className={styles.textField}
-                      placeholder="Search by username or email address..."
-                      aria-label="Search by username or email address"
-                      variant="seamlessAdornment"
-                      {...input}
-                      adornment={
-                        <Localized
-                          id="community-filter-searchButton"
-                          attrs={{ "aria-label": true }}
-                        >
-                          <Button
-                            className={styles.adornment}
-                            variant="adornment"
-                            type="submit"
-                            color="dark"
-                            aria-label="Search"
+            {({ handleSubmit }) => (
+              <form
+                autoComplete="off"
+                onSubmit={handleSubmit}
+                id="configure-form"
+              >
+                <Field name="search">
+                  {({ input }) => (
+                    <Localized
+                      id="community-filter-searchField"
+                      attrs={{ placeholder: true, "aria-label": true }}
+                    >
+                      <TextField
+                        className={styles.textField}
+                        color="dark"
+                        placeholder="Search by username or email address..."
+                        aria-label="Search by username or email address"
+                        variant="seamlessAdornment"
+                        {...input}
+                        adornment={
+                          <Localized
+                            id="community-filter-searchButton"
+                            attrs={{ "aria-label": true }}
                           >
-                            <Icon size="md">search</Icon>
-                          </Button>
-                        </Localized>
-                      }
-                    />
-                  </Localized>
-                )}
-              </Field>
-            </form>
-          )}
-        </Form>
+                            <Button
+                              className={styles.adornment}
+                              variant="adornment"
+                              type="submit"
+                              color="emphasis"
+                              aria-label="Search"
+                            >
+                              <Icon size="md">search</Icon>
+                            </Button>
+                          </Localized>
+                        }
+                      />
+                    </Localized>
+                  )}
+                </Field>
+              </form>
+            )}
+          </Form>
+        </HorizontalGutter>
       </FieldSet>
       <FieldSet>
-        <Localized id="community-filter-showMe">
-          <Typography
-            className={styles.legend}
-            container="legend"
-            variant="bodyCopyBold"
-          >
-            Show Me
-          </Typography>
-        </Localized>
-        <Flex itemGutter>
-          <Localized
-            id="community-filter-roleSelectField"
-            attrs={{ "aria-label": true }}
-          >
-            <SelectField
-              aria-label="Search by role"
-              value={props.roleFilter || ""}
-              className={styles.selectField}
-              onChange={e =>
-                props.onSetRoleFilter((e.target.value as any) || null)
-              }
-            >
-              <Localized id="community-filter-allRoles">
-                <Option value="">All Roles</Option>
-              </Localized>
-              <Localized
-                id="community-filter-optGroupAudience"
-                attrs={{ label: true }}
-              >
-                <OptGroup label="Audience">
-                  <Localized id="role-plural-commenter">
-                    <Option value={GQLUSER_ROLE.COMMENTER}>Commenters</Option>
-                  </Localized>
-                </OptGroup>
-              </Localized>
-              <Localized
-                id="community-filter-optGroupOrganization"
-                attrs={{ label: true }}
-              >
-                <OptGroup label="Organization">
-                  <Localized id="role-plural-admin">
-                    <Option value={GQLUSER_ROLE.ADMIN}>Admins</Option>
-                  </Localized>
-                  <Localized id="role-plural-moderator">
-                    <Option value={GQLUSER_ROLE.MODERATOR}>Moderators</Option>
-                  </Localized>
-                  <Localized id="role-plural-staff">
-                    <Option value={GQLUSER_ROLE.STAFF}>Staff</Option>
-                  </Localized>
-                </OptGroup>
-              </Localized>
-            </SelectField>
+        <HorizontalGutter spacing={2}>
+          <Localized id="community-filter-showMe">
+            <Label>Show Me</Label>
           </Localized>
-          <Localized
-            id="community-filter-statusSelectField"
-            attrs={{ "aria-label": true }}
-          >
-            <SelectField
-              aria-label="Search by status"
-              value={props.statusFilter || ""}
-              className={styles.selectField}
-              onChange={e =>
-                props.onSetStatusFilter((e.target.value as any) || null)
-              }
+          <Flex itemGutter>
+            <Localized
+              id="community-filter-roleSelectField"
+              attrs={{ "aria-label": true }}
             >
-              <Localized id="community-filter-allStatuses">
-                <Option value="">All Statuses</Option>
-              </Localized>
-              <Localized id="userStatus-active">
-                <Option value={GQLUSER_STATUS.ACTIVE}>Active</Option>
-              </Localized>
-              <Localized id="userStatus-suspended">
-                <Option value={GQLUSER_STATUS.SUSPENDED}>Suspended</Option>
-              </Localized>
-              <Localized id="userStatus-banned">
-                <Option value={GQLUSER_STATUS.BANNED}>Banned</Option>
-              </Localized>
-              <Localized id="userStatus-premod">
-                <Option value={GQLUSER_STATUS.PREMOD}>
-                  Always Premoderate
-                </Option>
-              </Localized>
-            </SelectField>
-          </Localized>
-        </Flex>
+              <SelectField
+                aria-label="Search by role"
+                value={props.roleFilter || ""}
+                className={styles.selectField}
+                onChange={e =>
+                  props.onSetRoleFilter((e.target.value as any) || null)
+                }
+              >
+                <Localized id="community-filter-allRoles">
+                  <Option value="">All Roles</Option>
+                </Localized>
+                <Localized
+                  id="community-filter-optGroupAudience"
+                  attrs={{ label: true }}
+                >
+                  <OptGroup label="Audience">
+                    <Localized id="role-plural-commenter">
+                      <Option value={GQLUSER_ROLE.COMMENTER}>Commenters</Option>
+                    </Localized>
+                  </OptGroup>
+                </Localized>
+                <Localized
+                  id="community-filter-optGroupOrganization"
+                  attrs={{ label: true }}
+                >
+                  <OptGroup label="Organization">
+                    <Localized id="role-plural-admin">
+                      <Option value={GQLUSER_ROLE.ADMIN}>Admins</Option>
+                    </Localized>
+                    <Localized id="role-plural-moderator">
+                      <Option value={GQLUSER_ROLE.MODERATOR}>Moderators</Option>
+                    </Localized>
+                    <Localized id="role-plural-staff">
+                      <Option value={GQLUSER_ROLE.STAFF}>Staff</Option>
+                    </Localized>
+                  </OptGroup>
+                </Localized>
+              </SelectField>
+            </Localized>
+            <Localized
+              id="community-filter-statusSelectField"
+              attrs={{ "aria-label": true }}
+            >
+              <SelectField
+                aria-label="Search by status"
+                value={props.statusFilter || ""}
+                className={styles.selectField}
+                onChange={e =>
+                  props.onSetStatusFilter((e.target.value as any) || null)
+                }
+              >
+                <Localized id="community-filter-allStatuses">
+                  <Option value="">All Statuses</Option>
+                </Localized>
+                <Localized id="userStatus-active">
+                  <Option value={GQLUSER_STATUS.ACTIVE}>Active</Option>
+                </Localized>
+                <Localized id="userStatus-suspended">
+                  <Option value={GQLUSER_STATUS.SUSPENDED}>Suspended</Option>
+                </Localized>
+                <Localized id="userStatus-banned">
+                  <Option value={GQLUSER_STATUS.BANNED}>Banned</Option>
+                </Localized>
+                <Localized id="userStatus-premod">
+                  <Option value={GQLUSER_STATUS.PREMOD}>
+                    Always Premoderate
+                  </Option>
+                </Localized>
+              </SelectField>
+            </Localized>
+          </Flex>
+        </HorizontalGutter>
       </FieldSet>
     </Flex>
     <InviteUsersContainer viewer={props.viewer} settings={props.settings} />
diff --git a/src/core/client/admin/routes/Configure/ConfigBox.css b/src/core/client/admin/routes/Configure/ConfigBox.css
index ab1a6fa2c..c6f35f6a0 100644
--- a/src/core/client/admin/routes/Configure/ConfigBox.css
+++ b/src/core/client/admin/routes/Configure/ConfigBox.css
@@ -1,20 +1,12 @@
 .root {
-  border: 1px solid var(--palette-grey-lighter);
 }
 
 .title {
-  padding: calc(0.5 * var(--mini-unit)) calc(1.5 * var(--mini-unit));
-
-  background-color: var(--palette-text-primary);
-
-  color: var(--palette-text-light);
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(18rem / var(--rem-base));
-  line-height: calc(20em / 18);
-  letter-spacing: calc(-0.1em / 18);
+  background: var(--v2-palette-configure-heading-background);
+  width: calc(100% - 2 * var(--v2-spacing-2));
+  padding: var(--v2-spacing-2);
 }
 
 .content {
-  padding: calc(2 * var(--mini-unit)) calc(3 * var(--mini-unit));
+  padding: var(--v2-spacing-3) var(--v2-spacing-2) 0 var(--v2-spacing-2);
 }
diff --git a/src/core/client/admin/routes/Configure/ConfigBox.tsx b/src/core/client/admin/routes/Configure/ConfigBox.tsx
index 1f89e02d7..f4daf1edf 100644
--- a/src/core/client/admin/routes/Configure/ConfigBox.tsx
+++ b/src/core/client/admin/routes/Configure/ConfigBox.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Flex } from "coral-ui/components";
+import { Box, Flex, HorizontalGutter } from "coral-ui/components/v2";
 
 import styles from "./ConfigBox.css";
 
@@ -9,6 +9,7 @@ interface Props {
   topRight?: React.ReactElement<any>;
   title?: React.ReactNode;
   children: React.ReactNode;
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
 }
 
 const ConfigBox: FunctionComponent<Props> = ({
@@ -16,15 +17,27 @@ const ConfigBox: FunctionComponent<Props> = ({
   title,
   topRight,
   children,
+  container,
   ...rest
-}) => (
-  <div {...rest} className={styles.root} id={id}>
-    <Flex className={styles.title} justifyContent="space-between">
-      <div>{title}</div>
-      <div>{topRight}</div>
-    </Flex>
-    <div className={styles.content}>{children}</div>
-  </div>
-);
+}) => {
+  return (
+    <Box
+      container={container || "div"}
+      {...rest}
+      className={styles.root}
+      id={id}
+    >
+      <Flex className={styles.title} justifyContent="space-between">
+        <div>{title}</div>
+        <div>{topRight}</div>
+      </Flex>
+      <div className={styles.content}>
+        <HorizontalGutter container={container || "div"} spacing={4}>
+          {children}
+        </HorizontalGutter>
+      </div>
+    </Box>
+  );
+};
 
 export default ConfigBox;
diff --git a/src/core/client/admin/routes/Configure/Configure.tsx b/src/core/client/admin/routes/Configure/Configure.tsx
index 407479d99..65a469bf9 100644
--- a/src/core/client/admin/routes/Configure/Configure.tsx
+++ b/src/core/client/admin/routes/Configure/Configure.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent } from "react";
 import { Form, FormSpy } from "react-final-form";
 
 import MainLayout from "coral-admin/components/MainLayout";
-import { Button, CallOut, HorizontalGutter } from "coral-ui/components";
+import { Button, CallOut, HorizontalGutter } from "coral-ui/components/v2";
 
 import Layout from "./Layout";
 import Link from "./Link";
@@ -61,7 +61,6 @@ const Configure: FunctionComponent<Props> = ({
                 <Localized id="configure-sideBar-saveChanges">
                   <Button
                     data-testid="configure-sideBar-saveChanges"
-                    color="success"
                     variant="filled"
                     type="submit"
                     disabled={submitting || pristine}
diff --git a/src/core/client/admin/routes/Configure/Fields/LocaleField.tsx b/src/core/client/admin/routes/Configure/Fields/LocaleField.tsx
new file mode 100644
index 000000000..c9100748c
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/Fields/LocaleField.tsx
@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from "react";
+
+import { LanguageCode, LOCALES_MAP } from "coral-common/helpers/i18n";
+import { PropTypesOf } from "coral-framework/types";
+import { Option, SelectField } from "coral-ui/components/v2";
+
+interface Props extends PropTypesOf<typeof SelectField> {
+  value: LanguageCode;
+}
+
+const LocaleField: FunctionComponent<Props> = props => {
+  return (
+    <SelectField {...props}>
+      {Object.keys(LOCALES_MAP).map((lang: LanguageCode) => {
+        return (
+          <Option value={lang} key={lang}>
+            {LOCALES_MAP[lang]}
+          </Option>
+        );
+      })}
+    </SelectField>
+  );
+};
+
+export default LocaleField;
diff --git a/src/core/client/admin/routes/Configure/Header.css b/src/core/client/admin/routes/Configure/Header.css
index 6459c5f15..95f587615 100644
--- a/src/core/client/admin/routes/Configure/Header.css
+++ b/src/core/client/admin/routes/Configure/Header.css
@@ -1,11 +1,10 @@
 .root {
   border-style: none;
-  border-radius: 1px;
-  background: var(--palette-text-primary);
-  color: var(--palette-text-light);
-  padding: var(--spacing-2);
-  margin-bottom: calc(1.5 * var(--mini-unit));
-  display: block;
-  width: calc(100% - 2 * var(--spacing-2));
-  font-family: var(--font-family-sans-serif);
+  margin: 0;
+  background: var(--v2-palette-configure-heading-background);
+  color: var(--v2-palette-configure-heading-foreground);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-bold);
+  line-height: var(--v2-line-height-reset);
+  font-family: var(--v2-font-family-primary);
 }
diff --git a/src/core/client/admin/routes/Configure/Header.tsx b/src/core/client/admin/routes/Configure/Header.tsx
index ef5f90167..40dfc18e4 100644
--- a/src/core/client/admin/routes/Configure/Header.tsx
+++ b/src/core/client/admin/routes/Configure/Header.tsx
@@ -1,21 +1,39 @@
 import cn from "classnames";
-import React, { FunctionComponent } from "react";
-
-import { Typography } from "coral-ui/components";
-import { PropTypesOf } from "coral-ui/types";
+import React, { FunctionComponent, ReactNode } from "react";
 
 import styles from "./Header.css";
 
-type Props = PropTypesOf<typeof Typography>;
+interface Props {
+  children: ReactNode;
+  className?: string;
+  htmlFor?: string;
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
+}
 
-const Header: FunctionComponent<Props> = ({ children, className, ...rest }) => (
-  <Typography
-    variant="heading3"
-    className={cn(className, styles.root)}
-    {...rest}
-  >
-    {children}
-  </Typography>
-);
+const Header: FunctionComponent<Props> = ({
+  children,
+  container,
+  className,
+  ...rest
+}) => {
+  const Container = container!;
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, {
+      ...rest,
+      className: cn(className, styles.root),
+      children,
+    });
+  } else {
+    return (
+      <Container {...rest} className={cn(className, styles.root)}>
+        {children}
+      </Container>
+    );
+  }
+};
+
+Header.defaultProps = {
+  container: <label />,
+} as Partial<Props>;
 
 export default Header;
diff --git a/src/core/client/admin/routes/Configure/HelperText.css b/src/core/client/admin/routes/Configure/HelperText.css
new file mode 100644
index 000000000..0dd1ce851
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/HelperText.css
@@ -0,0 +1,7 @@
+.root {
+  color: var(--v2-palette-input-helper);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-body-short);
+}
diff --git a/src/core/client/admin/routes/Configure/HelperText.tsx b/src/core/client/admin/routes/Configure/HelperText.tsx
new file mode 100644
index 000000000..790e87a75
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/HelperText.tsx
@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import styles from "./HelperText.css";
+
+interface Props {
+  className?: string;
+}
+
+const HelperText: FunctionComponent<Props> = ({ children, className }) => {
+  return <p className={cn(className, styles.root)}>{children}</p>;
+};
+
+export default HelperText;
diff --git a/src/core/client/admin/routes/Configure/HorizontalRule.css b/src/core/client/admin/routes/Configure/HorizontalRule.css
index f412a976b..16d20a65f 100644
--- a/src/core/client/admin/routes/Configure/HorizontalRule.css
+++ b/src/core/client/admin/routes/Configure/HorizontalRule.css
@@ -1,5 +1,5 @@
 .root {
   border: 0;
-  border-bottom: 1px solid var(--palette-divider);
+  border-bottom: 1px solid var(--v2-palette-config-box-border);
   padding-top: 1px;
 }
diff --git a/src/core/client/admin/routes/Configure/Layout.tsx b/src/core/client/admin/routes/Configure/Layout.tsx
index ca932d866..44281ddd4 100644
--- a/src/core/client/admin/routes/Configure/Layout.tsx
+++ b/src/core/client/admin/routes/Configure/Layout.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Flex } from "coral-ui/components";
+import { Flex } from "coral-ui/components/v2";
 
 import styles from "./Layout.css";
 
diff --git a/src/core/client/admin/routes/Configure/Link.css b/src/core/client/admin/routes/Configure/Link.css
index 7bb7c5bf5..21d9dfa25 100644
--- a/src/core/client/admin/routes/Configure/Link.css
+++ b/src/core/client/admin/routes/Configure/Link.css
@@ -1,28 +1,26 @@
 .link {
-  composes: sideNavigationItem from "coral-ui/shared/typography.css";
+  color: var(--v2-palette-side-nav-item);
+  font-family: var(--v2-font-family-primary);
+  font-size: var(--v2-font-size-4);
+  line-height: var(--v2-line-height-title);
+  font-weight: var(--v2-font-weight-primary-regular);
   display: inline-block;
-  padding: calc(0.5 * var(--mini-unit)) var(--mini-unit)
-    calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) + 2px);
-  margin-left: 2px;
-  border-left: 1px solid var(--palette-grey-lighter);
+  padding: var(--v2-spacing-2) var(--v2-spacing-2)
+    var(--v2-spacing-2) calc(var(--v2-spacing-3) + 4px);
+  border-left: 1px solid var(--v2-palette-side-nav-border);
+  text-decoration: none;
 
   &:hover {
     cursor: pointer;
-    border-left: 2px solid var(--palette-brand-main);
-    padding-left: calc(var(--mini-unit) + 1px);
-    color: var(--palette-text-primary);
+    border-left: 2px solid var(--v2-palette-side-nav-indicator);
+    padding-left: calc(var(--v2-spacing-3) + 3px);
+    color: var(--v2-palette-side-nav-active);
   }
 }
 
-.linkActive {
-  composes: sideNavigationActive from "coral-ui/shared/typography.css";
-  margin-left: 2px;
-  border-left: calc(0.5 * var(--mini-unit)) solid var(--palette-brand-main);
-  padding-left: var(--mini-unit);
-
-  &:hover {
-    border-left: calc(0.5 * var(--mini-unit)) solid var(--palette-brand-main);
-    padding-left: var(--mini-unit);
-    color: var(--palette-text-primary);
-  }
+.linkActive, .linkActive:hover {
+  border-left: 4px solid var(--v2-palette-side-nav-indicator);
+  padding-left: var(--v2-spacing-3);
+  color: var(--v2-palette-side-nav-active);
+  font-weight: var(--v2-font-weight-primary-bold);
 }
diff --git a/src/core/client/admin/routes/Configure/OnOffField.tsx b/src/core/client/admin/routes/Configure/OnOffField.tsx
index 35bd7a7dd..7bd7d1ef9 100644
--- a/src/core/client/admin/routes/Configure/OnOffField.tsx
+++ b/src/core/client/admin/routes/Configure/OnOffField.tsx
@@ -4,7 +4,7 @@ import { Field } from "react-final-form";
 
 import { parseStringBool } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
-import { RadioButton } from "coral-ui/components";
+import { RadioButton } from "coral-ui/components/v2";
 
 interface Props {
   validate?: Validator;
diff --git a/src/core/client/admin/routes/Configure/PermissionField.tsx b/src/core/client/admin/routes/Configure/PermissionField.tsx
index 8415a4da0..3de3c53cd 100644
--- a/src/core/client/admin/routes/Configure/PermissionField.tsx
+++ b/src/core/client/admin/routes/Configure/PermissionField.tsx
@@ -4,7 +4,7 @@ import { Field } from "react-final-form";
 
 import { parseStringBool } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
-import { RadioButton } from "coral-ui/components";
+import { RadioButton } from "coral-ui/components/v2";
 
 interface Props {
   validate?: Validator;
diff --git a/src/core/client/admin/routes/Configure/SectionContent.css b/src/core/client/admin/routes/Configure/SectionContent.css
index 4ec171a81..3748a9663 100644
--- a/src/core/client/admin/routes/Configure/SectionContent.css
+++ b/src/core/client/admin/routes/Configure/SectionContent.css
@@ -1,4 +1,4 @@
 .sectionContent {
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
+  padding-left: var(--v2-spacing-2);
+  padding-right: var(--v2-spacing-2);
 }
diff --git a/src/core/client/admin/routes/Configure/SectionContent.tsx b/src/core/client/admin/routes/Configure/SectionContent.tsx
index 64845d6af..f502f8ea2 100644
--- a/src/core/client/admin/routes/Configure/SectionContent.tsx
+++ b/src/core/client/admin/routes/Configure/SectionContent.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import styles from "./SectionContent.css";
 
@@ -10,7 +10,7 @@ interface Props {
 
 const SectionContent: FunctionComponent<Props> = ({ children }) => {
   return (
-    <HorizontalGutter size="double" className={styles.sectionContent}>
+    <HorizontalGutter spacing={4} className={styles.sectionContent}>
       {children}
     </HorizontalGutter>
   );
diff --git a/src/core/client/admin/routes/Configure/Subheader.css b/src/core/client/admin/routes/Configure/Subheader.css
index 584c8c946..edabaad7e 100644
--- a/src/core/client/admin/routes/Configure/Subheader.css
+++ b/src/core/client/admin/routes/Configure/Subheader.css
@@ -1,5 +1,10 @@
 .root {
-  padding-bottom: calc(0.25 * var(--mini-unit));
-  border-bottom: 1px solid var(--palette-divider);
-  margin-bottom: calc(0.75 * var(--mini-unit));
+  border-bottom: 1px solid var(--v2-palette-configure-sub-heading-border);
+  color: var(--v2-palette-configure-sub-heading-foreground);
+  font-family: var(--v2-font-family-primary);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-bold);
+  padding-bottom: var(--v2-spacing-2);
+  margin: 0;
+  line-height: var(--v2-lh-reset);
 }
diff --git a/src/core/client/admin/routes/Configure/Subheader.tsx b/src/core/client/admin/routes/Configure/Subheader.tsx
index c0dba4908..3d3624d56 100644
--- a/src/core/client/admin/routes/Configure/Subheader.tsx
+++ b/src/core/client/admin/routes/Configure/Subheader.tsx
@@ -1,13 +1,9 @@
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import styles from "./Subheader.css";
 
 const Subheader: FunctionComponent = ({ children }) => (
-  <Typography variant="heading3" className={styles.root}>
-    {children}
-  </Typography>
+  <h3 className={styles.root}>{children}</h3>
 );
 
 export default Subheader;
diff --git a/src/core/client/admin/routes/Configure/TextFieldWithValidation.css b/src/core/client/admin/routes/Configure/TextFieldWithValidation.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/TextFieldWithValidation.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/admin/routes/Configure/TextFieldWithValidation.tsx b/src/core/client/admin/routes/Configure/TextFieldWithValidation.tsx
new file mode 100644
index 000000000..55c2347b9
--- /dev/null
+++ b/src/core/client/admin/routes/Configure/TextFieldWithValidation.tsx
@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from "react";
+
+import { FieldMeta, hasError } from "coral-framework/lib/form/helpers";
+import { DeepPartial, Omit } from "coral-framework/types";
+import HorizontalGutter from "coral-ui/components/HorizontalGutter";
+import TextField, { TextFieldProps } from "coral-ui/components/v2/TextField";
+
+import ValidationMessage from "./ValidationMessage";
+
+type OptionalTextFieldProps = Omit<TextFieldProps, "classes"> &
+  DeepPartial<Pick<TextFieldProps, "classes">>;
+interface Props extends OptionalTextFieldProps {
+  meta: FieldMeta;
+}
+
+const FieldWithValidation: FunctionComponent<Props> = ({ meta, ...rest }) => {
+  return (
+    <HorizontalGutter spacing={2}>
+      <TextField {...rest} color={hasError(meta) ? "error" : "regular"} />
+      <ValidationMessage meta={meta} fullWidth />
+    </HorizontalGutter>
+  );
+};
+
+export default FieldWithValidation;
diff --git a/src/core/client/admin/routes/Configure/ValidationMessage.tsx b/src/core/client/admin/routes/Configure/ValidationMessage.tsx
index 78f2ba30a..492f2a168 100644
--- a/src/core/client/admin/routes/Configure/ValidationMessage.tsx
+++ b/src/core/client/admin/routes/Configure/ValidationMessage.tsx
@@ -1,14 +1,19 @@
 import React, { FunctionComponent } from "react";
 
-import { ValidationMessage as FrameworkValidationMessage } from "coral-framework/lib/form";
-import { PropTypesOf } from "coral-ui/types";
+import { FieldMeta, hasError } from "coral-framework/lib/form/helpers";
+import { Omit } from "coral-framework/types";
+import { ValidationMessage as UIValidationMessage } from "coral-ui/components/v2";
+import { ValidationMessageProps } from "coral-ui/components/v2/ValidationMessage";
 
-import styles from "./ValidationMessage.css";
+interface Props extends Omit<ValidationMessageProps, "children"> {
+  meta: FieldMeta;
+}
 
-type Props = PropTypesOf<typeof FrameworkValidationMessage>;
-
-const ValidationMessage: FunctionComponent<Props> = props => (
-  <FrameworkValidationMessage className={styles.root} {...props} />
-);
+const ValidationMessage: FunctionComponent<Props> = ({ meta, ...rest }) =>
+  hasError(meta) ? (
+    <UIValidationMessage {...rest}>
+      {meta.error || meta.submitError}
+    </UIValidationMessage>
+  ) : null;
 
 export default ValidationMessage;
diff --git a/src/core/client/admin/routes/Configure/__snapshots__/ConfigBox.spec.tsx.snap b/src/core/client/admin/routes/Configure/__snapshots__/ConfigBox.spec.tsx.snap
index e7c90d45d..55d54ce76 100644
--- a/src/core/client/admin/routes/Configure/__snapshots__/ConfigBox.spec.tsx.snap
+++ b/src/core/client/admin/routes/Configure/__snapshots__/ConfigBox.spec.tsx.snap
@@ -1,8 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
+<ForwardRef(forwardRef)
   className="ConfigBox-root"
+  container="div"
 >
   <ForwardRef(forwardRef)
     className="ConfigBox-title"
@@ -22,7 +23,12 @@ exports[`renders correctly 1`] = `
   <div
     className="ConfigBox-content"
   >
-    child
+    <ForwardRef(forwardRef)
+      container="div"
+      spacing={4}
+    >
+      child
+    </ForwardRef(forwardRef)>
   </div>
-</div>
+</ForwardRef(forwardRef)>
 `;
diff --git a/src/core/client/admin/routes/Configure/__snapshots__/Header.spec.tsx.snap b/src/core/client/admin/routes/Configure/__snapshots__/Header.spec.tsx.snap
index 8b1daa60a..56520bdf9 100644
--- a/src/core/client/admin/routes/Configure/__snapshots__/Header.spec.tsx.snap
+++ b/src/core/client/admin/routes/Configure/__snapshots__/Header.spec.tsx.snap
@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<ForwardRef(forwardRef)
+<label
   className="Header-root"
-  variant="heading3"
 >
   child
-</ForwardRef(forwardRef)>
+</label>
 `;
diff --git a/src/core/client/admin/routes/Configure/__snapshots__/Subheader.spec.tsx.snap b/src/core/client/admin/routes/Configure/__snapshots__/Subheader.spec.tsx.snap
index ce973362a..41b013e7a 100644
--- a/src/core/client/admin/routes/Configure/__snapshots__/Subheader.spec.tsx.snap
+++ b/src/core/client/admin/routes/Configure/__snapshots__/Subheader.spec.tsx.snap
@@ -1,10 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<ForwardRef(forwardRef)
+<h3
   className="Subheader-root"
-  variant="heading3"
 >
   child
-</ForwardRef(forwardRef)>
+</h3>
 `;
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfig.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfig.tsx
index 6af1fb294..84f9da319 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import CommentStreamLiveUpdatesContainer from "./CommentStreamLiveUpdatesContainer";
 import CustomCSSConfigContainer from "./CustomCSSConfigContainer";
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigRoute.tsx
index 14af65e6f..39bd0d49d 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigRoute.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/AdvancedConfigRoute.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Delay, Spinner } from "coral-ui/components";
+import { Delay, Spinner } from "coral-ui/components/v2";
 
 import { AdvancedConfigRouteQueryResponse } from "coral-admin/__generated__/AdvancedConfigRouteQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/CommentStreamLiveUpdates.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/CommentStreamLiveUpdates.tsx
index a3556bf25..87c331ec9 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/CommentStreamLiveUpdates.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/CommentStreamLiveUpdates.tsx
@@ -1,38 +1,39 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { FormField, HorizontalGutter, Typography } from "coral-ui/components";
+import { FormField, FormFieldDescription } from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
 
 interface Props {
   disabled: boolean;
 }
 
 const CommentStreamLiveUpdates: FunctionComponent<Props> = ({ disabled }) => (
-  <FormField>
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-advanced-liveUpdates">
-        <Header container={<label htmlFor="configure-advanced-liveUpdates" />}>
+        <Header htmlFor="configure-advanced-liveUpdates">
           Comment stream live updates
         </Header>
       </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-advanced-liveUpdates-explanation"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">
-            When enabled, there will be real-time loading and updating of
-            comments as new comments and replies are published
-          </Typography>
-        </Localized>
-        <OnOffField name="live.enabled" disabled={disabled} />
-      </SectionContent>
-    </HorizontalGutter>
-  </FormField>
+    }
+  >
+    <FormField>
+      <Localized
+        id="configure-advanced-liveUpdates-explanation"
+        strong={<strong />}
+      >
+        <FormFieldDescription>
+          When enabled, there will be real-time loading and updating of comments
+          as new comments and replies are published
+        </FormFieldDescription>
+      </Localized>
+      <OnOffField name="live.enabled" disabled={disabled} />
+    </FormField>
+  </ConfigBox>
 );
 
 export default CommentStreamLiveUpdates;
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/CustomCSSConfig.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/CustomCSSConfig.tsx
index 52fed6edb..ce45949b7 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/CustomCSSConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/CustomCSSConfig.tsx
@@ -2,67 +2,52 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import {
-  formatEmpty,
-  parseEmptyAsNull,
-  ValidationMessage,
-} from "coral-framework/lib/form";
-import {
-  FormField,
-  HorizontalGutter,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+import { formatEmpty, parseEmptyAsNull } from "coral-framework/lib/form";
+import { FormField, FormFieldDescription } from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   disabled: boolean;
 }
 
 const CustomCSSConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <FormField>
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-advanced-customCSS">
-        <Header container={<label htmlFor="configure-advanced-customCSSURL" />}>
-          Custom CSS
-        </Header>
+        <Header htmlFor="configure-advanced-customCSSURL">Custom CSS</Header>
       </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-advanced-customCSS-explanation"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">
-            URL of a CSS stylesheet that will override default Embed Stream
-            styles. Can be internal or external.
-          </Typography>
-        </Localized>
-        <Field
-          name="customCSSURL"
-          parse={parseEmptyAsNull}
-          format={formatEmpty}
-        >
-          {({ input, meta }) => (
-            <>
-              <TextField
-                id={`configure-advanced-${input.name}`}
-                disabled={disabled}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-                fullWidth
-                {...input}
-              />
-              <ValidationMessage meta={meta} fullWidth />
-            </>
-          )}
-        </Field>
-      </SectionContent>
-    </HorizontalGutter>
-  </FormField>
+    }
+  >
+    <FormField>
+      <Localized
+        id="configure-advanced-customCSS-explanation"
+        strong={<strong />}
+      >
+        <FormFieldDescription>
+          URL of a CSS stylesheet that will override default Embed Stream
+          styles. Can be internal or external.
+        </FormFieldDescription>
+      </Localized>
+      <Field name="customCSSURL" parse={parseEmptyAsNull} format={formatEmpty}>
+        {({ input, meta }) => (
+          <TextFieldWithValidation
+            id={`configure-advanced-${input.name}`}
+            disabled={disabled}
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck={false}
+            fullWidth
+            meta={meta}
+            {...input}
+          />
+        )}
+      </Field>
+    </FormField>
+  </ConfigBox>
 );
 
 export default CustomCSSConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.css b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.css
index 7d58b1830..2387d0792 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.css
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.css
@@ -2,7 +2,8 @@
   width: 100%;
   box-sizing: border-box;
   padding: calc(0.5 * var(--mini-unit));
-  resize: none;
+  min-height: 400px;
+  font-family: monospace;
 }
 
 .copyArea {
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx
index 316077851..fced5daf6 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx
@@ -5,10 +5,15 @@ import React, { FunctionComponent, useMemo } from "react";
 import { CopyButton } from "coral-framework/components";
 import { GetMessage, withGetMessage } from "coral-framework/lib/i18n";
 import { getLocationOrigin } from "coral-framework/utils";
-import { HorizontalGutter, Typography } from "coral-ui/components";
+import {
+  FieldSet,
+  FormFieldDescription,
+  HorizontalGutter,
+  Textarea,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
 
 import styles from "./EmbedCode.css";
 
@@ -79,28 +84,30 @@ const EmbedCode: FunctionComponent<Props> = ({ staticURI, getMessage }) => {
   }, [staticURI]);
 
   return (
-    <HorizontalGutter size="oneAndAHalf" container="fieldset">
-      <Localized id="configure-advanced-embedCode-title">
-        <Header container="legend">Embed code</Header>
-      </Localized>
-      <SectionContent>
-        <Localized id="configure-advanced-embedCode-explanation">
-          <Typography variant="bodyShort">
-            Copy and paste the code below into your CMS to embed Coral comment
-            streams in each of your site’s stories.
-          </Typography>
+    <ConfigBox
+      title={
+        <Localized id="configure-advanced-embedCode-title">
+          <Header container={<legend />}>Embed code</Header>
         </Localized>
-        <textarea
-          rows={embed.rows}
-          className={styles.textArea}
-          readOnly
-          value={embed.text}
-        />
-        <HorizontalGutter className={styles.copyArea}>
-          <CopyButton size="regular" text={embed.text} />
-        </HorizontalGutter>
-      </SectionContent>
-    </HorizontalGutter>
+      }
+      container={<FieldSet />}
+    >
+      <Localized id="configure-advanced-embedCode-explanation">
+        <FormFieldDescription>
+          Copy and paste the code below into your CMS to embed Coral comment
+          streams in each of your site’s stories.
+        </FormFieldDescription>
+      </Localized>
+      <Textarea
+        rows={embed.rows}
+        className={styles.textArea}
+        readOnly
+        value={embed.text}
+      />
+      <HorizontalGutter className={styles.copyArea}>
+        <CopyButton size="medium" text={embed.text} />
+      </HorizontalGutter>
+    </ConfigBox>
   );
 };
 
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/PermittedDomainsConfig.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/PermittedDomainsConfig.tsx
index 69b65b9b5..985105ffb 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/PermittedDomainsConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/PermittedDomainsConfig.tsx
@@ -2,75 +2,62 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import {
-  colorFromMeta,
-  formatStringList,
-  parseStringList,
-  ValidationMessage,
-} from "coral-framework/lib/form";
+import { formatStringList, parseStringList } from "coral-framework/lib/form";
 import { validateStrictURLList } from "coral-framework/lib/validation";
-import {
-  FormField,
-  HorizontalGutter,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+import { FormField, FormFieldDescription } from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   disabled: boolean;
 }
 
 const PermittedDomainsConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <FormField>
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-advanced-permittedDomains">
-        <Header
-          container={<label htmlFor="configure-advanced-allowedDomains" />}
-        >
+        <Header htmlFor="configure-advanced-allowedDomains">
           Permitted domains
         </Header>
       </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-advanced-permittedDomains-description"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">
-            The domains you would like to permit for Coral, e.g. your local,
-            staging and production environments including the scheme (ex.
-            http://localhost:3000, https://staging.domain.com,
-            https://domain.com).
-          </Typography>
-        </Localized>
-        <Field
-          name="allowedDomains"
-          parse={parseStringList}
-          format={formatStringList}
-          validate={validateStrictURLList}
-        >
-          {({ input, meta }) => (
-            <>
-              <TextField
-                id={`configure-advanced-${input.name}`}
-                disabled={disabled}
-                color={colorFromMeta(meta)}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-                {...input}
-                fullWidth
-              />
-              <ValidationMessage meta={meta} fullWidth />
-            </>
-          )}
-        </Field>
-      </SectionContent>
-    </HorizontalGutter>
-  </FormField>
+    }
+  >
+    <FormField>
+      <Localized
+        id="configure-advanced-permittedDomains-description"
+        strong={<strong />}
+      >
+        <FormFieldDescription>
+          The domains you would like to permit for Coral, e.g. your local,
+          staging and production environments including the scheme (ex.
+          http://localhost:3000, https://staging.domain.com,
+          https://domain.com).
+        </FormFieldDescription>
+      </Localized>
+      <Field
+        name="allowedDomains"
+        parse={parseStringList}
+        format={formatStringList}
+        validate={validateStrictURLList}
+      >
+        {({ input, meta }) => (
+          <TextFieldWithValidation
+            id={`configure-advanced-${input.name}`}
+            disabled={disabled}
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck={false}
+            meta={meta}
+            {...input}
+            fullWidth
+          />
+        )}
+      </Field>
+    </FormField>
+  </ConfigBox>
 );
 
 export default PermittedDomainsConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx b/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx
index 0c3c63e12..c796b32dd 100644
--- a/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Advanced/StoryCreationConfig.tsx
@@ -2,100 +2,108 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { parseEmptyAsNull, ValidationMessage } from "coral-framework/lib/form";
+import { parseEmptyAsNull } from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import { validateURL } from "coral-framework/lib/validation";
 import {
   FormField,
-  HorizontalGutter,
-  InputLabel,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  FormFieldHeader,
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
+import HelperText from "../../HelperText";
 import OnOffField from "../../OnOffField";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   disabled: boolean;
 }
 
 const StoryCreationConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="double">
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-advanced-stories">
-        <Header>Story Creation</Header>
+        <Header container="h2">Story Creation</Header>
       </Localized>
-      <Localized id="configure-advanced-stories-explanation">
-        <Typography variant="detail">Details</Typography>
-      </Localized>
-    </HorizontalGutter>
-    <HorizontalGutter size="double">
-      <FormField>
-        <HorizontalGutter size="full">
-          <Localized id="configure-advanced-stories-lazy">
-            <InputLabel>Lazy story creation</InputLabel>
-          </Localized>
-          <Localized id="configure-advanced-stories-lazy-detail">
-            <Typography variant="detail">Details</Typography>
-          </Localized>
-          <OnOffField invert name="stories.disableLazy" disabled={disabled} />
-        </HorizontalGutter>
-      </FormField>
-      <FormField>
-        <HorizontalGutter size="full">
-          <Localized id="configure-advanced-stories-scraping">
-            <InputLabel>Story scraping</InputLabel>
-          </Localized>
-          <Localized id="configure-advanced-stories-scraping-detail">
-            <Typography variant="detail">Details</Typography>
-          </Localized>
-          <OnOffField name="stories.scraping.enabled" disabled={disabled} />
-        </HorizontalGutter>
-      </FormField>
-      <FormField>
-        <HorizontalGutter size="full">
-          <Localized id="configure-advanced-stories-proxy">
-            <InputLabel htmlFor="configure-advanced-stories-proxy-url">
-              Scraper proxy URL
-            </InputLabel>
-          </Localized>
-          <Localized
-            id="configure-advanced-stories-proxy-detail"
-            externalLink={
-              <ExternalLink href="https://www.npmjs.com/package/proxy-agent" />
-            }
-          >
-            <Typography variant="detail">
-              When specified, allows scraping requests to use the provided
-              proxy. All requests will then be passed through the appropriote
-              proxy as parsed by the npm proxy-agent package.
-            </Typography>
-          </Localized>
-          <Field
-            name="stories.scraping.proxyURL"
-            parse={parseEmptyAsNull}
-            validate={validateURL}
-          >
-            {({ input, meta }) => (
-              <>
-                <TextField
-                  id="configure-advanced-stories-proxy-url"
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  {...input}
-                />
-                <ValidationMessage meta={meta} />
-              </>
-            )}
-          </Field>
-        </HorizontalGutter>
-      </FormField>
-    </HorizontalGutter>
-  </HorizontalGutter>
+    }
+  >
+    <Localized id="configure-advanced-stories-explanation">
+      <FormFieldDescription>
+        Advanced settings for how stories are created within Coral
+      </FormFieldDescription>
+    </Localized>
+    <FormField>
+      <FormFieldHeader>
+        <Localized id="configure-advanced-stories-lazy">
+          <Label>Lazy story creation</Label>
+        </Localized>
+        <Localized id="configure-advanced-stories-lazy-detail">
+          <HelperText>
+            Enable stories to be automatically created when they are published
+            from your CMS.
+          </HelperText>
+        </Localized>
+      </FormFieldHeader>
+      <OnOffField invert name="stories.disableLazy" disabled={disabled} />
+    </FormField>
+    <FormField>
+      <FormFieldHeader>
+        <Localized id="configure-advanced-stories-scraping">
+          <Label>Story scraping</Label>
+        </Localized>
+        <Localized id="configure-advanced-stories-scraping-detail">
+          <HelperText>
+            Enable story metadata to be automatically scraped when they are
+            published from your CMS.
+          </HelperText>
+        </Localized>
+      </FormFieldHeader>
+      <OnOffField name="stories.scraping.enabled" disabled={disabled} />
+    </FormField>
+    <FormField>
+      <FormFieldHeader>
+        <Localized id="configure-advanced-stories-proxy">
+          <Label htmlFor="configure-advanced-stories-proxy-url">
+            Scraper proxy URL
+          </Label>
+        </Localized>
+        <Localized
+          id="configure-advanced-stories-proxy-detail"
+          externalLink={
+            <ExternalLink href="https://www.npmjs.com/package/proxy-agent" />
+          }
+        >
+          <HelperText>
+            When specified, allows scraping requests to use the provided proxy.
+            All requests will then be passed through the appropriote proxy as
+            parsed by the npm proxy-agent package.
+          </HelperText>
+        </Localized>
+      </FormFieldHeader>
+      <Field
+        name="stories.scraping.proxyURL"
+        parse={parseEmptyAsNull}
+        validate={validateURL}
+      >
+        {({ input, meta }) => (
+          <TextFieldWithValidation
+            id="configure-advanced-stories-proxy-url"
+            disabled={disabled}
+            fullWidth
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck={false}
+            meta={meta}
+            {...input}
+          />
+        )}
+      </Field>
+    </FormField>
+  </ConfigBox>
 );
 
 export default StoryCreationConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfig.tsx
index b299356ba..0f0f39e67 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/AccountFeaturesConfig.tsx
@@ -2,17 +2,17 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import {
-  FieldSet,
   Flex,
   FormField,
-  HorizontalGutter,
-  InputLabel,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  FormFieldHeader,
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
+import HelperText from "../../HelperText";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
 
 import styles from "./AccountFeaturesConfig.css";
 
@@ -22,123 +22,114 @@ interface Props {
 
 const AccountFeaturesConfig: FunctionComponent<Props> = ({ disabled }) => (
   <div>
-    <HorizontalGutter size="oneAndAHalf">
-      <Localized id="configure-account-features-title">
-        <Header container="legend">Commenter account mangement features</Header>
-      </Localized>
-      <SectionContent>
-        <Localized id="configure-account-features-explanation">
-          <Typography variant="bodyShort">
-            You can enable and disable certain features for your commenters to
-            use within their Profile. These features also assist towards GDPR
-            compliance.
-          </Typography>
+    <ConfigBox
+      title={
+        <Localized id="configure-account-features-title">
+          <Header container={<legend />}>
+            Commenter account mangement features
+          </Header>
         </Localized>
-        <HorizontalGutter container={<FieldSet />}>
-          <Localized id="configure-account-features-allow">
-            <Typography variant="heading4">Allow users to:</Typography>
-          </Localized>
-          <FormField container="fieldset">
-            <Flex justifyContent="space-between">
-              <HorizontalGutter size="half">
-                <Localized id="configure-account-features-change-usernames">
-                  <InputLabel container="legend">
-                    Change their usernames
-                  </InputLabel>
-                </Localized>
-                <Localized id="configure-account-features-change-usernames-details">
-                  <Typography>
-                    Usernames can be changed once every 14 days.
-                  </Typography>
-                </Localized>
-              </HorizontalGutter>
-              <OnOffField
-                name="accountFeatures.changeUsername"
-                disabled={disabled || false}
-                className={styles.radioButtons}
-                onLabel={
-                  <Localized id="configure-account-features-yes">
-                    <span>Yes</span>
-                  </Localized>
-                }
-                offLabel={
-                  <Localized id="configure-account-features-no">
-                    <span>No</span>
-                  </Localized>
-                }
-              />
-            </Flex>
-          </FormField>
-        </HorizontalGutter>
-        <HorizontalGutter size="double">
-          <FormField container="fieldset">
-            <Flex justifyContent="space-between">
-              <HorizontalGutter size="half">
-                <Localized id="configure-account-features-download-comments">
-                  <InputLabel container="legend">
-                    Download their comments
-                  </InputLabel>
-                </Localized>
-                <Localized id="configure-account-features-download-comments-details">
-                  <Typography>
-                    Commenters can download a csv of their comment history.
-                  </Typography>
-                </Localized>
-              </HorizontalGutter>
-              <OnOffField
-                name="accountFeatures.downloadComments"
-                disabled={disabled || false}
-                className={styles.radioButtons}
-                onLabel={
-                  <Localized id="configure-account-features-yes">
-                    <span>Yes</span>
-                  </Localized>
-                }
-                offLabel={
-                  <Localized id="configure-account-features-no">
-                    <span>No</span>
-                  </Localized>
-                }
-              />
-            </Flex>
-          </FormField>
-        </HorizontalGutter>
-        <HorizontalGutter size="double">
-          <FormField container="fieldset">
-            <Flex justifyContent="space-between">
-              <HorizontalGutter size="half">
-                <Localized id="configure-account-features-delete-account">
-                  <InputLabel container="legend">
-                    Delete their account
-                  </InputLabel>
-                </Localized>
-                <Localized id="configure-account-features-delete-account-fieldDescriptions">
-                  <Typography>
-                    Removes all of their comment data, username, and email
-                    address from the site and the database.
-                  </Typography>
-                </Localized>
-              </HorizontalGutter>
-              <OnOffField
-                name="accountFeatures.deleteAccount"
-                disabled={disabled || false}
-                className={styles.radioButtons}
-                onLabel={
-                  <Localized id="configure-account-features-yes">
-                    <span>Yes</span>
-                  </Localized>
-                }
-                offLabel={
-                  <Localized id="configure-account-features-no">
-                    <span>No</span>
-                  </Localized>
-                }
-              />
-            </Flex>
-          </FormField>
-        </HorizontalGutter>
-      </SectionContent>
-    </HorizontalGutter>
+      }
+    >
+      <Localized id="configure-account-features-explanation">
+        <FormFieldDescription>
+          You can enable and disable certain features for your commenters to use
+          within their Profile. These features also assist towards GDPR
+          compliance.
+        </FormFieldDescription>
+      </Localized>
+      <FormField container="fieldset">
+        <Localized id="configure-account-features-allow">
+          <FormFieldDescription>Allow users to:</FormFieldDescription>
+        </Localized>
+        <Flex justifyContent="space-between">
+          <FormFieldHeader>
+            <Localized id="configure-account-features-change-usernames">
+              <Label component="legend">Change their usernames</Label>
+            </Localized>
+            <Localized id="configure-account-features-change-usernames-details">
+              <HelperText>
+                Usernames can be changed once every 14 days.
+              </HelperText>
+            </Localized>
+          </FormFieldHeader>
+          <OnOffField
+            name="accountFeatures.changeUsername"
+            disabled={disabled || false}
+            className={styles.radioButtons}
+            onLabel={
+              <Localized id="configure-account-features-yes">
+                <span>Yes</span>
+              </Localized>
+            }
+            offLabel={
+              <Localized id="configure-account-features-no">
+                <span>No</span>
+              </Localized>
+            }
+          />
+        </Flex>
+      </FormField>
+      <FormField container="fieldset">
+        <Flex justifyContent="space-between">
+          <FormFieldHeader>
+            <Localized id="configure-account-features-download-comments">
+              <Label component="legend">Download their comments</Label>
+            </Localized>
+            <Localized id="configure-account-features-download-comments-details">
+              <HelperText>
+                Commenters can download a csv of their comment history.
+              </HelperText>
+            </Localized>
+          </FormFieldHeader>
+          <OnOffField
+            name="accountFeatures.downloadComments"
+            disabled={disabled || false}
+            className={styles.radioButtons}
+            onLabel={
+              <Localized id="configure-account-features-yes">
+                <span>Yes</span>
+              </Localized>
+            }
+            offLabel={
+              <Localized id="configure-account-features-no">
+                <span>No</span>
+              </Localized>
+            }
+          />
+        </Flex>
+      </FormField>
+      <FormField container="fieldset">
+        <Flex justifyContent="space-between">
+          <FormFieldHeader>
+            <Localized id="configure-account-features-delete-account">
+              <Label component="legend">Delete their account</Label>
+            </Localized>
+            <Localized id="configure-account-features-delete-account-fieldDescriptions">
+              <HelperText>
+                Removes all of their comment data, username, and email address
+                from the site and the database.
+              </HelperText>
+            </Localized>
+          </FormFieldHeader>
+          <OnOffField
+            name="accountFeatures.deleteAccount"
+            disabled={disabled || false}
+            className={styles.radioButtons}
+            onLabel={
+              <Localized id="configure-account-features-yes">
+                <span>Yes</span>
+              </Localized>
+            }
+            offLabel={
+              <Localized id="configure-account-features-no">
+                <span>No</span>
+              </Localized>
+            }
+          />
+        </Flex>
+      </FormField>
+    </ConfigBox>
   </div>
 );
 
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfig.tsx
index a640240ec..d665f3075 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { OnInitValuesFct } from "./AuthConfigContainer";
 import AuthIntegrationsConfig from "./AuthIntegrationsConfig";
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx
index 9bc454e3b..2c617665e 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx
@@ -16,7 +16,7 @@ import {
 import { getMessage } from "coral-framework/lib/i18n";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLSettings } from "coral-framework/schema";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { AuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/AuthConfigContainer_auth.graphql";
 import { AuthConfigContainer_settings as SettingsData } from "coral-admin/__generated__/AuthConfigContainer_settings.graphql";
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx
index 46b31c673..9f0fb5ad0 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigRoute.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Delay, Spinner } from "coral-ui/components";
+import { Delay, Spinner } from "coral-ui/components/v2";
 
 import { AuthConfigRouteContainerQueryResponse } from "coral-admin/__generated__/AuthConfigRouteContainerQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/AuthIntegrationsConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/AuthIntegrationsConfig.tsx
index a70850613..5413ac28b 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/AuthIntegrationsConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/AuthIntegrationsConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { OnInitValuesFct } from "./AuthConfigContainer";
 import FacebookConfigContainer from "./FacebookConfigContainer";
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx
index 7fbc5b8c2..2baba48e8 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx
@@ -2,11 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
+import { parseEmptyAsNull } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
-import { FormField, InputLabel, TextField } from "coral-ui/components";
+import { FormField, Label } from "coral-ui/components/v2";
 
-import ValidationMessage from "../../ValidationMessage";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   validate?: Validator;
@@ -21,23 +21,20 @@ const ClientSecretField: FunctionComponent<Props> = ({
 }) => (
   <FormField>
     <Localized id="configure-auth-clientID">
-      <InputLabel>Client ID</InputLabel>
+      <Label>Client ID</Label>
     </Localized>
     <Field name={name} parse={parseEmptyAsNull} validate={validate}>
       {({ input, meta }) => (
-        <>
-          <TextField
-            disabled={disabled}
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            color={colorFromMeta(meta)}
-            {...input}
-            spellCheck={false}
-            fullWidth
-          />
-          <ValidationMessage meta={meta} />
-        </>
+        <TextFieldWithValidation
+          disabled={disabled}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          meta={meta}
+          {...input}
+          spellCheck={false}
+          fullWidth
+        />
       )}
     </Field>
   </FormField>
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
index 4171554ef..f968017ef 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx
@@ -4,7 +4,7 @@ import { Field } from "react-final-form";
 
 import { parseEmptyAsNull, ValidationMessage } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
-import { FormField, InputLabel, PasswordField } from "coral-ui/components";
+import { FormField, Label, PasswordField } from "coral-ui/components/v2";
 
 interface Props {
   validate?: Validator;
@@ -19,7 +19,7 @@ const ClientSecretField: FunctionComponent<Props> = ({
 }) => (
   <FormField>
     <Localized id="configure-auth-clientSecret">
-      <InputLabel>Client secret</InputLabel>
+      <Label>Client secret</Label>
     </Localized>
     <Field
       name={name}
@@ -37,7 +37,7 @@ const ClientSecretField: FunctionComponent<Props> = ({
             fullWidth
             {...input}
           />
-          <ValidationMessage meta={meta} />
+          <ValidationMessage meta={meta} fullWidth />
         </>
       )}
     </Field>
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/ConfigBoxWithToggleField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/ConfigBoxWithToggleField.tsx
index d0c883712..8bf23b25e 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/ConfigBoxWithToggleField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/ConfigBoxWithToggleField.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { parseBool } from "coral-framework/lib/form";
-import { CheckBox, FormField } from "coral-ui/components";
+import { CheckBox, FormField } from "coral-ui/components/v2";
 
 import ConfigBox from "../../ConfigBox";
 
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/ConfigDescription.tsx b/src/core/client/admin/routes/Configure/sections/Auth/ConfigDescription.tsx
deleted file mode 100644
index f3e9b7842..000000000
--- a/src/core/client/admin/routes/Configure/sections/Auth/ConfigDescription.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, { FunctionComponent } from "react";
-
-import { InputDescription } from "coral-ui/components";
-import { PropTypesOf } from "coral-ui/types";
-
-import styles from "./ConfigDescription.css";
-
-interface Props {
-  container?: PropTypesOf<typeof InputDescription>["container"];
-  children: React.ReactNode;
-}
-
-const ConfigDescription: FunctionComponent<Props> = ({
-  children,
-  container,
-}) => (
-  <InputDescription className={styles.description} container={container}>
-    {children}
-  </InputDescription>
-);
-
-export default ConfigDescription;
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/FacebookConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/FacebookConfig.tsx
index 3afd6c81b..f74c6a3a1 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/FacebookConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/FacebookConfig.tsx
@@ -6,8 +6,9 @@ import {
   required,
   validateWhen,
 } from "coral-framework/lib/validation";
-import { HorizontalGutter, TextLink, Typography } from "coral-ui/components";
+import { FormFieldDescription, TextLink } from "coral-ui/components/v2";
 
+import Header from "../../Header";
 import HorizontalRule from "../../HorizontalRule";
 import ClientIDField from "./ClientIDField";
 import ClientSecretField from "./ClientSecretField";
@@ -38,26 +39,26 @@ const FacebookConfig: FunctionComponent<Props> = ({
     data-testid="configure-auth-facebook-container"
     title={
       <Localized id="configure-auth-facebook-loginWith">
-        <span>Login with Facebook</span>
+        <Header container="h2">Login with Facebook</Header>
       </Localized>
     }
     name="auth.integrations.facebook.enabled"
     disabled={disabled}
   >
     {disabledInside => (
-      <HorizontalGutter size="double">
+      <>
         <Localized
           id="configure-auth-facebook-toEnableIntegration"
           Link={<FacebookLink />}
+          br={<br />}
         >
-          <Typography>
+          <FormFieldDescription>
             To enable the integration with Facebook Authentication, you need to
             create and set up a web application. For more information visit:
             <br />
             {"https://developers.facebook.com/docs/facebook-login/web"}
-          </Typography>
+          </FormFieldDescription>
         </Localized>
-        <HorizontalRule />
         <RedirectField url={callbackURL} />
         <HorizontalRule />
         <ClientIDField
@@ -83,7 +84,7 @@ const FacebookConfig: FunctionComponent<Props> = ({
           name="auth.integrations.facebook.allowRegistration"
           disabled={disabledInside}
         />
-      </HorizontalGutter>
+      </>
     )}
   </ConfigBoxWithToggleField>
 );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/GoogleConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/GoogleConfig.tsx
index 47be57f12..14cb1b359 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/GoogleConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/GoogleConfig.tsx
@@ -6,8 +6,9 @@ import {
   required,
   validateWhen,
 } from "coral-framework/lib/validation";
-import { HorizontalGutter, TextLink, Typography } from "coral-ui/components";
+import { FormFieldDescription, TextLink } from "coral-ui/components/v2";
 
+import Header from "../../Header";
 import HorizontalRule from "../../HorizontalRule";
 import ClientIDField from "./ClientIDField";
 import ClientSecretField from "./ClientSecretField";
@@ -36,28 +37,27 @@ const GoogleConfig: FunctionComponent<Props> = ({ disabled, callbackURL }) => (
   <ConfigBoxWithToggleField
     title={
       <Localized id="configure-auth-google-loginWith">
-        <span>Login with Google</span>
+        <Header container="h2">Login with Google</Header>
       </Localized>
     }
     name="auth.integrations.google.enabled"
     disabled={disabled}
   >
     {disabledInside => (
-      <HorizontalGutter size="double">
+      <>
         <Localized
           id="configure-auth-google-toEnableIntegration"
           Link={<GoogleLink />}
         >
-          <Typography>
+          <FormFieldDescription>
             To enable the integration with Google Authentication you need to
             create and set up a web application. For more information visit:
             <br />
             {
               "https://developers.google.com/identity/protocols/OAuth2WebServer#creatingcred"
             }
-          </Typography>
+          </FormFieldDescription>
         </Localized>
-        <HorizontalRule />
         <RedirectField url={callbackURL} />
         <HorizontalRule />
         <ClientIDField
@@ -83,7 +83,7 @@ const GoogleConfig: FunctionComponent<Props> = ({ disabled, callbackURL }) => (
           name="auth.integrations.google.allowRegistration"
           disabled={disabledInside}
         />
-      </HorizontalGutter>
+      </>
     )}
   </ConfigBoxWithToggleField>
 );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/LocalAuthConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/LocalAuthConfig.tsx
index 9bfea91a4..8d996bdf4 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/LocalAuthConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/LocalAuthConfig.tsx
@@ -1,8 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { HorizontalGutter } from "coral-ui/components";
-
+import Header from "../../Header";
 import ConfigBoxWithToggleField from "./ConfigBoxWithToggleField";
 import RegistrationField from "./RegistrationField";
 import TargetFilterField from "./TargetFilterField";
@@ -15,14 +14,14 @@ const LocalAuthConfig: FunctionComponent<Props> = ({ disabled }) => (
   <ConfigBoxWithToggleField
     title={
       <Localized id="configure-auth-local-loginWith">
-        <span>Login with email authentication</span>
+        <Header container="h2">Login with email authentication</Header>
       </Localized>
     }
     name="auth.integrations.local.enabled"
     disabled={disabled}
   >
     {disabledInside => (
-      <HorizontalGutter size="double">
+      <>
         <TargetFilterField
           label={
             <Localized id="configure-auth-local-useLoginOn">
@@ -36,7 +35,7 @@ const LocalAuthConfig: FunctionComponent<Props> = ({ disabled }) => (
           name="auth.integrations.local.allowRegistration"
           disabled={disabledInside}
         />
-      </HorizontalGutter>
+      </>
     )}
   </ConfigBoxWithToggleField>
 );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
index ef3601de3..e0d78c820 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
@@ -2,11 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import {
-  colorFromMeta,
-  parseEmptyAsNull,
-  ValidationMessage,
-} from "coral-framework/lib/form";
+import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
 import {
   composeValidatorsWhen,
   Condition,
@@ -17,15 +13,18 @@ import {
   Button,
   Flex,
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
+  FormFieldDescription,
+  FormFieldHeader,
+  HelperText,
+  Label,
   TextField,
   TextLink,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
+import Header from "../../Header";
 import HorizontalRule from "../../HorizontalRule";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
+import ValidationMessage from "../../ValidationMessage";
 import { FormProps } from "./AuthConfigContainer";
 import ClientIDField from "./ClientIDField";
 import ClientSecretField from "./ClientSecretField";
@@ -59,52 +58,52 @@ const OIDCConfig: FunctionComponent<Props> = ({
       data-testid="configure-auth-oidc-container"
       title={
         <Localized id="configure-auth-oidc-loginWith">
-          <span>Login with OIDC</span>
+          <Header container="h2">Login with OIDC</Header>
         </Localized>
       }
       name="auth.integrations.oidc.enabled"
       disabled={disabled}
     >
       {disabledInside => (
-        <HorizontalGutter size="double">
+        <>
           <Localized id="configure-auth-oidc-toLearnMore" Link={<OIDCLink />}>
-            <Typography>
+            <FormFieldDescription>
               {"To learn more: https://openid.net/connect/"}
-            </Typography>
+            </FormFieldDescription>
           </Localized>
-          <HorizontalRule />
           <RedirectField url={callbackURL} />
           <HorizontalRule />
           <FormField>
-            <Localized id="configure-auth-oidc-providerName">
-              <InputLabel>Provider name</InputLabel>
-            </Localized>
-            <Localized id="configure-auth-oidc-providerNameDescription">
-              <InputDescription>
-                The provider of the OIDC integration. This will be used when the
-                name of the provider needs to be displayed, e.g. “Log in with
-                {" <Facebook>"}”
-              </InputDescription>
-            </Localized>
+            <FormFieldHeader>
+              <Localized id="configure-auth-oidc-providerName">
+                <Label>Provider name</Label>
+              </Localized>
+              <Localized id="configure-auth-oidc-providerNameDescription">
+                <HelperText>
+                  The provider of the OIDC integration. This will be used when
+                  the name of the provider needs to be displayed, e.g. “Log in
+                  with
+                  {" <Facebook>"}”
+                </HelperText>
+              </Localized>
+            </FormFieldHeader>
             <Field
               name="auth.integrations.oidc.name"
               validate={composeValidatorsWhen(isEnabled, required)}
               parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
-                <>
-                  <TextField
-                    disabled={disabledInside}
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck={false}
-                    color={colorFromMeta(meta)}
-                    fullWidth
-                    {...input}
-                  />
-                  <ValidationMessage meta={meta} />
-                </>
+                <TextFieldWithValidation
+                  disabled={disabledInside}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
+                  color={colorFromMeta(meta)}
+                  fullWidth
+                  meta={meta}
+                  {...input}
+                />
               )}
             </Field>
           </FormField>
@@ -119,16 +118,18 @@ const OIDCConfig: FunctionComponent<Props> = ({
             disabled={disabledInside}
           />
           <FormField>
-            <Localized id="configure-auth-oidc-issuer">
-              <InputLabel>Issuer</InputLabel>
-            </Localized>
-            <Localized id="configure-auth-oidc-issuerDescription">
-              <InputDescription>
-                After entering your Issuer information, click the Discover
-                button to have Coral complete the remaining fields. You may also
-                enter the information manually
-              </InputDescription>
-            </Localized>
+            <FormFieldHeader>
+              <Localized id="configure-auth-oidc-issuer">
+                <Label>Issuer</Label>
+              </Localized>
+              <Localized id="configure-auth-oidc-issuerDescription">
+                <HelperText>
+                  After entering your Issuer information, click the Discover
+                  button to have Coral complete the remaining fields. You may
+                  also enter the information manually
+                </HelperText>
+              </Localized>
+            </FormFieldHeader>
             <Field
               name="auth.integrations.oidc.issuer"
               validate={composeValidatorsWhen(isEnabled, required, validateURL)}
@@ -150,7 +151,6 @@ const OIDCConfig: FunctionComponent<Props> = ({
                     <Button
                       id="configure-auth-oidc-discover"
                       variant="filled"
-                      color="primary"
                       size="small"
                       disabled={disabledInside || disableForDiscover}
                       onClick={onDiscover}
@@ -158,14 +158,14 @@ const OIDCConfig: FunctionComponent<Props> = ({
                       Discover
                     </Button>
                   </Flex>
-                  <ValidationMessage meta={meta} />
+                  <ValidationMessage meta={meta} fullWidth />
                 </>
               )}
             </Field>
           </FormField>
           <FormField>
             <Localized id="configure-auth-oidc-authorizationURL">
-              <InputLabel>authorizationURL</InputLabel>
+              <Label>authorizationURL</Label>
             </Localized>
             <Field
               name="auth.integrations.oidc.authorizationURL"
@@ -173,25 +173,22 @@ const OIDCConfig: FunctionComponent<Props> = ({
               parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
-                <>
-                  <TextField
-                    disabled={disabledInside || disableForDiscover}
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck={false}
-                    color={colorFromMeta(meta)}
-                    fullWidth
-                    {...input}
-                  />
-                  <ValidationMessage meta={meta} />
-                </>
+                <TextFieldWithValidation
+                  disabled={disabledInside || disableForDiscover}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
+                  fullWidth
+                  meta={meta}
+                  {...input}
+                />
               )}
             </Field>
           </FormField>
           <FormField>
             <Localized id="configure-auth-oidc-tokenURL">
-              <InputLabel>tokenURL</InputLabel>
+              <Label>tokenURL</Label>
             </Localized>
             <Field
               name="auth.integrations.oidc.tokenURL"
@@ -199,25 +196,22 @@ const OIDCConfig: FunctionComponent<Props> = ({
               parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
-                <>
-                  <TextField
-                    disabled={disabledInside || disableForDiscover}
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck={false}
-                    color={colorFromMeta(meta)}
-                    fullWidth
-                    {...input}
-                  />
-                  <ValidationMessage meta={meta} />
-                </>
+                <TextFieldWithValidation
+                  disabled={disabledInside || disableForDiscover}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
+                  meta={meta}
+                  fullWidth
+                  {...input}
+                />
               )}
             </Field>
           </FormField>
           <FormField>
             <Localized id="configure-auth-oidc-jwksURI">
-              <InputLabel>jwksURI</InputLabel>
+              <Label>jwksURI</Label>
             </Localized>
             <Field
               name="auth.integrations.oidc.jwksURI"
@@ -225,19 +219,16 @@ const OIDCConfig: FunctionComponent<Props> = ({
               parse={parseEmptyAsNull}
             >
               {({ input, meta }) => (
-                <>
-                  <TextField
-                    disabled={disabledInside || disableForDiscover}
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck={false}
-                    color={colorFromMeta(meta)}
-                    fullWidth
-                    {...input}
-                  />
-                  <ValidationMessage meta={meta} />
-                </>
+                <TextFieldWithValidation
+                  disabled={disabledInside || disableForDiscover}
+                  autoComplete="off"
+                  autoCorrect="off"
+                  autoCapitalize="off"
+                  spellCheck={false}
+                  meta={meta}
+                  fullWidth
+                  {...input}
+                />
               )}
             </Field>
           </FormField>
@@ -254,7 +245,7 @@ const OIDCConfig: FunctionComponent<Props> = ({
             name="auth.integrations.oidc.allowRegistration"
             disabled={disabledInside}
           />
-        </HorizontalGutter>
+        </>
       )}
     </ConfigBoxWithToggleField>
   );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx
index 87ee80c09..548c61f64 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { CopyButton } from "coral-framework/components";
-import { Flex, FormField, InputLabel, TextField } from "coral-ui/components";
+import { Flex, FormField, Label, TextField } from "coral-ui/components/v2";
 
 interface Props {
   description?: React.ReactNode;
@@ -12,12 +12,12 @@ interface Props {
 const RedirectField: FunctionComponent<Props> = ({ url, description }) => (
   <FormField>
     <Localized id="configure-auth-redirectURI">
-      <InputLabel>Redirect URI</InputLabel>
+      <Label>Redirect URI</Label>
     </Localized>
     {description}
     <Flex direction="row" itemGutter="half" alignItems="center">
       <TextField name="redirectURI" value={url} fullWidth readOnly />
-      <CopyButton text={url} />
+      <CopyButton size="small" text={url} />
     </Flex>
   </FormField>
 );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/RegistrationField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/RegistrationField.tsx
index 90946b3e8..3c6bcfeae 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/RegistrationField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/RegistrationField.tsx
@@ -5,9 +5,11 @@ import { Field } from "react-final-form";
 import {
   CheckBox,
   FormField,
-  InputDescription,
-  InputLabel,
-} from "coral-ui/components";
+  FormFieldHeader,
+  Label,
+} from "coral-ui/components/v2";
+
+import HelperText from "../../HelperText";
 
 interface Props {
   name: string;
@@ -16,14 +18,16 @@ interface Props {
 
 const RegistrationField: FunctionComponent<Props> = ({ name, disabled }) => (
   <FormField>
-    <Localized id="configure-auth-registration">
-      <InputLabel>Registration</InputLabel>
-    </Localized>
-    <Localized id="configure-auth-registrationDescription">
-      <InputDescription>
-        Allow users to create a new account with this provider.
-      </InputDescription>
-    </Localized>
+    <FormFieldHeader>
+      <Localized id="configure-auth-registration">
+        <Label>Registration</Label>
+      </Localized>
+      <Localized id="configure-auth-registrationDescription">
+        <HelperText>
+          Allow users to create a new account with this provider.
+        </HelperText>
+      </Localized>
+    </FormFieldHeader>
     <FormField>
       <Field name={name} type="checkbox">
         {({ input }) => (
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/SSOConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/SSOConfig.tsx
index 2bca839a8..476acf74a 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/SSOConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/SSOConfig.tsx
@@ -2,8 +2,8 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
 
+import Header from "../../Header";
 import ConfigBoxWithToggleField from "./ConfigBoxWithToggleField";
 import RegistrationField from "./RegistrationField";
 import SSOKeyFieldContainer from "./SSOKeyFieldContainer";
@@ -18,14 +18,14 @@ const SSOConfig: FunctionComponent<Props> = ({ disabled, sso }) => (
   <ConfigBoxWithToggleField
     title={
       <Localized id="configure-auth-sso-loginWith">
-        <span>Login with SSO</span>
+        <Header container="h2">Login with SSO</Header>
       </Localized>
     }
     name="auth.integrations.sso.enabled"
     disabled={disabled}
   >
     {disabledInside => (
-      <HorizontalGutter size="double">
+      <>
         <SSOKeyFieldContainer sso={sso} disabled={disabledInside} />
         <TargetFilterField
           label={
@@ -40,7 +40,7 @@ const SSOConfig: FunctionComponent<Props> = ({ disabled, sso }) => (
           name="auth.integrations.sso.allowRegistration"
           disabled={disabledInside}
         />
-      </HorizontalGutter>
+      </>
     )}
   </ConfigBoxWithToggleField>
 );
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
index 01734f717..866b3dbf6 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
@@ -6,10 +6,11 @@ import {
   Flex,
   FormField,
   Icon,
-  InputLabel,
+  Label,
   PasswordField,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
+
+import HelperText from "../../HelperText";
 
 import styles from "./SSOKeyField.css";
 
@@ -28,7 +29,7 @@ const SSOKeyField: FunctionComponent<Props> = ({
 }) => (
   <FormField className={styles.root} data-testid="configure-auth-sso-key">
     <Localized id="configure-auth-sso-key">
-      <InputLabel>Key</InputLabel>
+      <Label>Key</Label>
     </Localized>
     <PasswordField
       name="key"
@@ -40,18 +41,18 @@ const SSOKeyField: FunctionComponent<Props> = ({
       fullWidth
     />
     <Localized id="configure-auth-sso-regenerateAt" $date={keyGeneratedAt}>
-      <Typography className={styles.keyGenerated}>
+      <HelperText className={styles.keyGenerated}>
         KEY GENERATED AT: {keyGeneratedAt}
-      </Typography>
+      </HelperText>
     </Localized>
     <div className={styles.warningSection}>
       <Flex direction="row" itemGutter="half">
         <Icon className={styles.warnIcon}>warning</Icon>
         <Localized id="configure-auth-sso-regenerateHonoredWarning">
-          <Typography className={styles.warn} variant="bodyShort">
+          <HelperText>
             When regenerating a key, tokens signed with the previous key will be
             honored for 30 days.
-          </Typography>
+          </HelperText>
         </Localized>
       </Flex>
     </div>
@@ -60,7 +61,6 @@ const SSOKeyField: FunctionComponent<Props> = ({
       <Button
         id="configure-auth-sso-regenerate"
         variant="filled"
-        color="primary"
         size="small"
         disabled={disabled}
         onClick={onRegenerate}
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/SessionConfig.tsx b/src/core/client/admin/routes/Configure/sections/Auth/SessionConfig.tsx
index 7a5a558df..65c04c8de 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/SessionConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/SessionConfig.tsx
@@ -2,36 +2,38 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { DurationField } from "coral-framework/components";
-import { ValidationMessage } from "coral-framework/lib/form";
+import { colorFromMeta } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateWholeNumberGreaterThanOrEqual,
 } from "coral-framework/lib/validation";
 import {
+  DurationField,
   FieldSet,
   FormField,
-  HorizontalGutter,
-  InputLabel,
-} from "coral-ui/components";
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled?: boolean;
 }
 
 const SessionConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter>
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-auth-settings">
-        <Header>Session settings</Header>
+        <Header container="h2">Session settings</Header>
       </Localized>
-    </HorizontalGutter>
+    }
+  >
     <FormField container={<FieldSet />}>
       <Localized id="configure-auth-settings-session-duration-label">
-        <InputLabel container="legend">Session Duration</InputLabel>
+        <Label component="legend">Session Duration</Label>
       </Localized>
       <Field
         name="auth.sessionDuration"
@@ -42,13 +44,17 @@ const SessionConfig: FunctionComponent<Props> = ({ disabled }) => (
       >
         {({ input, meta }) => (
           <>
-            <DurationField disabled={!!disabled} {...input} />
-            <ValidationMessage meta={meta} />
+            <DurationField
+              color={colorFromMeta(meta)}
+              disabled={!!disabled}
+              {...input}
+            />
+            <ValidationMessage meta={meta} fullWidth />
           </>
         )}
       </Field>
     </FormField>
-  </HorizontalGutter>
+  </ConfigBox>
 );
 
 export default SessionConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/Auth/TargetFilterField.tsx b/src/core/client/admin/routes/Configure/sections/Auth/TargetFilterField.tsx
index 58e02d95c..a04c46546 100644
--- a/src/core/client/admin/routes/Configure/sections/Auth/TargetFilterField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Auth/TargetFilterField.tsx
@@ -3,7 +3,7 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { parseBool } from "coral-framework/lib/form";
-import { CheckBox, Flex, FormField, InputLabel } from "coral-ui/components";
+import { CheckBox, Flex, FormField, Label } from "coral-ui/components/v2";
 
 interface Props {
   label: React.ReactNode;
@@ -17,7 +17,7 @@ const TargetFilterField: FunctionComponent<Props> = ({
   disabled,
 }) => (
   <FormField>
-    <InputLabel>{label}</InputLabel>
+    <Label>{label}</Label>
     <Flex direction="row" itemGutter="double">
       <Field name={`${name}.admin`} type="checkbox" parse={parseBool}>
         {({ input }) => (
diff --git a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.css b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.css
index 27621d11d..b75ca5c70 100644
--- a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.css
+++ b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.css
@@ -1,3 +1,4 @@
 .title {
   display: flex;
+  justify-content: space-between;
 }
diff --git a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx
index 134390d70..28772b51f 100644
--- a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx
@@ -2,30 +2,20 @@ import { FormApi } from "final-form";
 import { Localized } from "fluent-react/compat";
 import { RouteProps } from "found";
 import React from "react";
-import { Field } from "react-final-form";
 import { graphql } from "react-relay";
 
 import { DeepNullable, DeepPartial } from "coral-common/types";
 import { pureMerge } from "coral-common/utils";
-import { parseBool } from "coral-framework/lib/form";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { GQLSettings } from "coral-framework/schema";
-import {
-  CheckBox,
-  Flex,
-  FormField,
-  HorizontalGutter,
-} from "coral-ui/components";
 
 import { EmailConfigContainer_email } from "coral-admin/__generated__/EmailConfigContainer_email.graphql";
 
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
+import ConfigBoxWithToggleField from "../Auth/ConfigBoxWithToggleField";
 import FromContainer from "./FromContainer";
 import SMTPContainer from "./SMTPContainer";
 
-import styles from "./EmailConfigContainer.css";
-
 interface Props {
   form: FormApi;
   submitting: boolean;
@@ -79,52 +69,30 @@ class EmailConfigContainer extends React.Component<Props> {
     const { email, submitting } = this.props;
 
     return (
-      <HorizontalGutter size="double">
-        <Field name="email.enabled" type="checkbox" parse={parseBool}>
-          {({ input }) => (
-            <Header
-              className={styles.title}
-              container={<Flex justifyContent="space-between" />}
-            >
-              <div>
-                <Localized id="configure-email">
-                  <span>Email settings</span>
-                </Localized>
-              </div>
-              <div>
-                <FormField>
-                  <Localized id="configure-email-configBoxEnabled">
-                    <CheckBox
-                      id={input.name}
-                      {...input}
-                      light
-                      disabled={submitting}
-                    >
-                      Enabled
-                    </CheckBox>
-                  </Localized>
-                </FormField>
-              </div>
-            </Header>
-          )}
-        </Field>
-        <Field name="email.enabled" subscription={{ value: true }}>
-          {({ input: { value } }) => (
-            <SectionContent>
-              <FromContainer
-                email={email}
-                disabled={submitting || !value}
-                onInitValues={this.handleOnInitValues}
-              />
-              <SMTPContainer
-                email={email}
-                disabled={submitting || !value}
-                onInitValues={this.handleOnInitValues}
-              />
-            </SectionContent>
-          )}
-        </Field>
-      </HorizontalGutter>
+      <ConfigBoxWithToggleField
+        disabled={submitting}
+        title={
+          <Localized id="configure-email">
+            <Header container="h2">Email settings</Header>
+          </Localized>
+        }
+        name="email.enabled"
+      >
+        {disabledInside => (
+          <>
+            <FromContainer
+              email={email}
+              disabled={disabledInside}
+              onInitValues={this.handleOnInitValues}
+            />
+            <SMTPContainer
+              email={email}
+              disabled={disabledInside}
+              onInitValues={this.handleOnInitValues}
+            />
+          </>
+        )}
+      </ConfigBoxWithToggleField>
     );
   }
 }
diff --git a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigRoute.tsx
index 73ad3ea00..736f66060 100644
--- a/src/core/client/admin/routes/Configure/sections/Email/EmailConfigRoute.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Email/EmailConfigRoute.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Delay, Spinner } from "coral-ui/components";
+import { Delay, Spinner } from "coral-ui/components/v2";
 
 import { EmailConfigRouteQueryResponse } from "coral-admin/__generated__/EmailConfigRouteQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Configure/sections/Email/From.tsx b/src/core/client/admin/routes/Configure/sections/Email/From.tsx
index 29306270e..c023313fc 100644
--- a/src/core/client/admin/routes/Configure/sections/Email/From.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Email/From.tsx
@@ -2,79 +2,71 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import {
-  colorFromMeta,
-  parseEmptyAsNull,
-  ValidationMessage,
-} from "coral-framework/lib/form";
+import { parseEmptyAsNull } from "coral-framework/lib/form";
 import { validateEmail } from "coral-framework/lib/validation";
 import {
-  FieldSet,
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
-  TextField,
-} from "coral-ui/components";
+  FormFieldHeader,
+  HelperText,
+  Label,
+} from "coral-ui/components/v2";
+
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   disabled: boolean;
 }
 
 const From: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
+  <>
     <FormField>
-      <Localized id="configure-email-fromNameLabel">
-        <InputLabel>From name</InputLabel>
-      </Localized>
-      <Localized id="configure-email-fromNameDescription">
-        <InputDescription>
-          Name as it will appear on all outgoing emails
-        </InputDescription>
-      </Localized>
+      <FormFieldHeader>
+        <Localized id="configure-email-fromNameLabel">
+          <Label>From name</Label>
+        </Localized>
+        <Localized id="configure-email-fromNameDescription">
+          <HelperText>Name as it will appear on all outgoing emails</HelperText>
+        </Localized>
+      </FormFieldHeader>
       <Field name="email.fromName" parse={parseEmptyAsNull}>
         {({ input, meta }) => (
-          <>
-            <TextField
-              fullWidth
-              disabled={disabled}
-              color={colorFromMeta(meta)}
-              {...input}
-            />
-            <ValidationMessage fullWidth meta={meta} />
-          </>
+          <TextFieldWithValidation
+            fullWidth
+            disabled={disabled}
+            meta={meta}
+            {...input}
+          />
         )}
       </Field>
     </FormField>
     <FormField>
-      <Localized id="configure-email-fromEmailLabel">
-        <InputLabel>From email address</InputLabel>
-      </Localized>
-      <Localized id="configure-email-fromEmailDescription">
-        <InputDescription>
-          Email address that will be used to send messages
-        </InputDescription>
-      </Localized>
+      <FormFieldHeader>
+        <Localized id="configure-email-fromEmailLabel">
+          <Label>From email address</Label>
+        </Localized>
+        <Localized id="configure-email-fromEmailDescription">
+          <HelperText>
+            Email address that will be used to send messages
+          </HelperText>
+        </Localized>
+      </FormFieldHeader>
       <Field
         name="email.fromEmail"
         parse={parseEmptyAsNull}
         validate={validateEmail}
       >
         {({ input, meta }) => (
-          <>
-            <TextField
-              type="email"
-              fullWidth
-              color={colorFromMeta(meta)}
-              disabled={disabled}
-              {...input}
-            />
-            <ValidationMessage fullWidth meta={meta} />
-          </>
+          <TextFieldWithValidation
+            type="email"
+            fullWidth
+            meta={meta}
+            disabled={disabled}
+            {...input}
+          />
         )}
       </Field>
     </FormField>
-  </HorizontalGutter>
+  </>
 );
 
 export default From;
diff --git a/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx b/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx
index 73943ae40..70b78db29 100644
--- a/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx
@@ -13,17 +13,16 @@ import {
   required,
 } from "coral-framework/lib/validation";
 import {
-  FieldSet,
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
+  FormFieldHeader,
+  Label,
   PasswordField,
-  TextField,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
+import HelperText from "../../HelperText";
 import OnOffField from "../../OnOffField";
 import Subheader from "../../Subheader";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 import { FormProps } from "./EmailConfigContainer";
 
 interface Props {
@@ -37,61 +36,59 @@ const isAuthenticating: Condition<any, FormProps> = (value, values) =>
   Boolean(values.email.enabled && values.email.smtp.authentication);
 
 const SMTP: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
+  <>
     <FormField>
-      <Localized id="configure-email-smtpHostLabel">
-        <InputLabel>SMTP host</InputLabel>
-      </Localized>
-      <Localized id="configure-email-smtpHostDescription">
-        <InputDescription>(ex. smtp.sendgrid.com)</InputDescription>
-      </Localized>
+      <FormFieldHeader>
+        <Localized id="configure-email-smtpHostLabel">
+          <Label>SMTP host</Label>
+        </Localized>
+        <Localized id="configure-email-smtpHostDescription">
+          <HelperText>(ex. smtp.sendgrid.com)</HelperText>
+        </Localized>
+      </FormFieldHeader>
       <Field
         name="email.smtp.host"
         validate={composeValidatorsWhen(isEnabled, required)}
       >
         {({ input, meta }) => (
-          <>
-            <TextField
-              id={input.name}
-              fullWidth
-              disabled={disabled}
-              color={colorFromMeta(meta)}
-              {...input}
-            />
-            <ValidationMessage fullWidth meta={meta} />
-          </>
+          <TextFieldWithValidation
+            id={input.name}
+            fullWidth
+            disabled={disabled}
+            meta={meta}
+            {...input}
+          />
         )}
       </Field>
     </FormField>
     <FormField>
-      <Localized id="configure-email-smtpPortLabel">
-        <InputLabel>SMTP port</InputLabel>
-      </Localized>
-      <Localized id="configure-email-smtpPortDescription">
-        <InputDescription>(ex. 25)</InputDescription>
-      </Localized>
+      <FormFieldHeader>
+        <Localized id="configure-email-smtpPortLabel">
+          <Label>SMTP port</Label>
+        </Localized>
+        <Localized id="configure-email-smtpPortDescription">
+          <HelperText>(ex. 25)</HelperText>
+        </Localized>
+      </FormFieldHeader>
       <Field
         name="email.smtp.port"
         validate={composeValidatorsWhen(isEnabled, required)}
       >
         {({ input, meta }) => (
-          <>
-            <TextField
-              id={input.name}
-              type="number"
-              fullWidth
-              disabled={disabled}
-              color={colorFromMeta(meta)}
-              {...input}
-            />
-            <ValidationMessage fullWidth meta={meta} />
-          </>
+          <TextFieldWithValidation
+            id={input.name}
+            type="number"
+            fullWidth
+            disabled={disabled}
+            meta={meta}
+            {...input}
+          />
         )}
       </Field>
     </FormField>
     <FormField>
       <Localized id="configure-email-smtpTLSLabel">
-        <InputLabel>TLS</InputLabel>
+        <Label>TLS</Label>
       </Localized>
       <OnOffField
         name="email.smtp.secure"
@@ -101,7 +98,7 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
     </FormField>
     <FormField>
       <Localized id="configure-email-smtpAuthenticationLabel">
-        <InputLabel>SMTP authentication</InputLabel>
+        <Label>SMTP authentication</Label>
       </Localized>
       <OnOffField
         name="email.smtp.authentication"
@@ -117,7 +114,7 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
           </Localized>
           <FormField>
             <Localized id="configure-email-smtpUsernameLabel">
-              <InputLabel>Username</InputLabel>
+              <Label>Username</Label>
             </Localized>
             <Field
               name="email.smtp.username"
@@ -125,22 +122,19 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
               validate={composeValidatorsWhen(isAuthenticating, required)}
             >
               {({ input, meta }) => (
-                <>
-                  <TextField
-                    id={input.name}
-                    disabled={disabled || !enabled}
-                    fullWidth
-                    color={colorFromMeta(meta)}
-                    {...input}
-                  />
-                  <ValidationMessage fullWidth meta={meta} />
-                </>
+                <TextFieldWithValidation
+                  id={input.name}
+                  disabled={disabled || !enabled}
+                  fullWidth
+                  meta={meta}
+                  {...input}
+                />
               )}
             </Field>
           </FormField>
           <FormField>
             <Localized id="configure-email-smtpPasswordLabel">
-              <InputLabel>Password</InputLabel>
+              <Label>Password</Label>
             </Localized>
             <Field
               name="email.smtp.password"
@@ -164,7 +158,7 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
         </>
       )}
     </Field>
-  </HorizontalGutter>
+  </>
 );
 
 export default SMTP;
diff --git a/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx
index 2c5673ba7..244ff523f 100644
--- a/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx
@@ -4,10 +4,10 @@ import { Field } from "react-final-form";
 
 import { MarkdownEditor } from "coral-framework/components/loadables";
 import { parseEmptyAsNull } from "coral-framework/lib/form";
-import { HorizontalGutter, Spinner, Typography } from "coral-ui/components";
+import { FormFieldDescription, Spinner } from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
 import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
@@ -15,41 +15,37 @@ interface Props {
 }
 
 const ClosedStreamMessageConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf">
-    <Localized id="configure-general-closedStreamMessage-title">
-      <Header
-        container={
-          <label htmlFor="configure-general-closedStreamMessage-content" />
-        }
-      >
-        Closed comment stream message
-      </Header>
-    </Localized>
-
-    <SectionContent>
-      <Localized
-        id="configure-general-closedStreamMessage-explanation"
-        strong={<strong />}
-      >
-        <Typography variant="bodyShort">
-          Write a message to appear after a story is closed for commenting.
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-closedStreamMessage-title">
+        <Header htmlFor="configure-general-closedStreamMessage-content">
+          Closed comment stream message
+        </Header>
       </Localized>
-      <Field name="closeCommenting.message" parse={parseEmptyAsNull}>
-        {({ input, meta }) => (
-          <>
-            <Suspense fallback={<Spinner />}>
-              <MarkdownEditor
-                id="configure-general-closedStreamMessage-content"
-                {...input}
-              />
-            </Suspense>
-            <ValidationMessage meta={meta} fullWidth />
-          </>
-        )}
-      </Field>
-    </SectionContent>
-  </HorizontalGutter>
+    }
+  >
+    <Localized
+      id="configure-general-closedStreamMessage-explanation"
+      strong={<strong />}
+    >
+      <FormFieldDescription>
+        Write a message to appear after a story is closed for commenting.
+      </FormFieldDescription>
+    </Localized>
+    <Field name="closeCommenting.message" parse={parseEmptyAsNull}>
+      {({ input, meta }) => (
+        <>
+          <Suspense fallback={<Spinner />}>
+            <MarkdownEditor
+              id="configure-general-closedStreamMessage-content"
+              {...input}
+            />
+          </Suspense>
+          <ValidationMessage meta={meta} fullWidth />
+        </>
+      )}
+    </Field>
+  </ConfigBox>
 );
 
 export default ClosedStreamMessageConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/ClosingCommentStreamsConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/ClosingCommentStreamsConfig.tsx
index 0e2fcc971..ee7e320a6 100644
--- a/src/core/client/admin/routes/Configure/sections/General/ClosingCommentStreamsConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/ClosingCommentStreamsConfig.tsx
@@ -2,23 +2,24 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { DURATION_UNIT, DurationField } from "coral-framework/components";
+import { colorFromMeta } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateWholeNumberGreaterThan,
 } from "coral-framework/lib/validation";
 import {
+  DURATION_UNIT,
+  DurationField,
   FieldSet,
   FormField,
-  HorizontalGutter,
-  InputLabel,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
 import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
@@ -28,58 +29,59 @@ interface Props {
 const ClosingCommentStreamsConfig: FunctionComponent<Props> = ({
   disabled,
 }) => (
-  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
-    <Localized id="configure-general-closingCommentStreams-title">
-      <Header container="legend">Closing comment streams</Header>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-closingCommentStreams-title">
+        <Header container={<legend />}>Closing comment streams</Header>
+      </Localized>
+    }
+    container={<FieldSet />}
+  >
+    <Localized
+      id="configure-general-closingCommentStreams-explanation"
+      strong={<strong />}
+    >
+      <FormFieldDescription>
+        Set comment streams to close after a defined period of time after a
+        story’s publication
+      </FormFieldDescription>
     </Localized>
-    <SectionContent>
-      <Localized
-        id="configure-general-closingCommentStreams-explanation"
-        strong={<strong />}
-      >
-        <Typography variant="bodyShort">
-          Set comment streams to close after a defined period of time after a
-          story’s publication
-        </Typography>
+    <FormField container={<FieldSet />}>
+      <Localized id="configure-general-closingCommentStreams-closeCommentsAutomatically">
+        <Label component="legend">Close comments automatically</Label>
+      </Localized>
+      <OnOffField name="closeCommenting.auto" disabled={disabled} />
+    </FormField>
+    <FormField container={<FieldSet />}>
+      <Localized id="configure-general-closingCommentStreams-closeCommentsAfter">
+        <Label component="legend">Close comments after</Label>
       </Localized>
-      <FormField container={<FieldSet />}>
-        <Localized id="configure-general-closingCommentStreams-closeCommentsAutomatically">
-          <InputLabel container="legend">
-            Close comments automatically
-          </InputLabel>
-        </Localized>
-        <OnOffField name="closeCommenting.auto" disabled={disabled} />
-      </FormField>
-      <FormField container={<FieldSet />}>
-        <Localized id="configure-general-closingCommentStreams-closeCommentsAfter">
-          <InputLabel container="legend">Close comments after</InputLabel>
-        </Localized>
 
-        <Field
-          name="closeCommenting.timeout"
-          validate={composeValidators(
-            required,
-            validateWholeNumberGreaterThan(0)
-          )}
-        >
-          {({ input, meta }) => (
-            <>
-              <DurationField
-                units={[
-                  DURATION_UNIT.HOURS,
-                  DURATION_UNIT.DAYS,
-                  DURATION_UNIT.WEEKS,
-                ]}
-                disabled={disabled}
-                {...input}
-              />
-              <ValidationMessage meta={meta} />
-            </>
-          )}
-        </Field>
-      </FormField>
-    </SectionContent>
-  </HorizontalGutter>
+      <Field
+        name="closeCommenting.timeout"
+        validate={composeValidators(
+          required,
+          validateWholeNumberGreaterThan(0)
+        )}
+      >
+        {({ input, meta }) => (
+          <>
+            <DurationField
+              units={[
+                DURATION_UNIT.HOURS,
+                DURATION_UNIT.DAYS,
+                DURATION_UNIT.WEEKS,
+              ]}
+              disabled={disabled}
+              color={colorFromMeta(meta)}
+              {...input}
+            />
+            <ValidationMessage meta={meta} fullWidth />
+          </>
+        )}
+      </Field>
+    </FormField>
+  </ConfigBox>
 );
 
 export default ClosingCommentStreamsConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.tsx
index 6778156a6..8a8b3696e 100644
--- a/src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.tsx
@@ -2,22 +2,23 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { DURATION_UNIT, DurationField } from "coral-framework/components";
+import { colorFromMeta } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateWholeNumberGreaterThanOrEqual,
 } from "coral-framework/lib/validation";
 import {
+  DURATION_UNIT,
+  DurationField,
   FieldSet,
   FormField,
-  HorizontalGutter,
-  InputLabel,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
 import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
@@ -25,51 +26,53 @@ interface Props {
 }
 
 const CommentEditingConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf">
-    <Localized id="configure-general-commentEditing-title">
-      <Header>Comment editing</Header>
-    </Localized>
-    <SectionContent>
-      <Localized
-        id="configure-general-commentEditing-explanation"
-        strong={<strong />}
-      >
-        <Typography variant="bodyShort">
-          Set a limit on how long commenters have to edit their comments
-          sitewide. Edited comments are marked as (Edited) on the comment stream
-          and the moderation panel.
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-commentEditing-title">
+        <Header container="h2">Comment editing</Header>
       </Localized>
+    }
+  >
+    <Localized
+      id="configure-general-commentEditing-explanation"
+      strong={<strong />}
+    >
+      <FormFieldDescription>
+        Set a limit on how long commenters have to edit their comments sitewide.
+        Edited comments are marked as (Edited) on the comment stream and the
+        moderation panel.
+      </FormFieldDescription>
+    </Localized>
 
-      <FormField container={<FieldSet />}>
-        <Localized id="configure-general-commentEditing-commentEditTimeFrame">
-          <InputLabel container="legend">Comment edit timeframe</InputLabel>
-        </Localized>
-        <Field
-          name="editCommentWindowLength"
-          validate={composeValidators(
-            required,
-            validateWholeNumberGreaterThanOrEqual(0)
-          )}
-        >
-          {({ input, meta }) => (
-            <>
-              <DurationField
-                units={[
-                  DURATION_UNIT.SECONDS,
-                  DURATION_UNIT.MINUTES,
-                  DURATION_UNIT.HOURS,
-                ]}
-                disabled={disabled}
-                {...input}
-              />
-              <ValidationMessage meta={meta} />
-            </>
-          )}
-        </Field>
-      </FormField>
-    </SectionContent>
-  </HorizontalGutter>
+    <FormField container={<FieldSet />}>
+      <Localized id="configure-general-commentEditing-commentEditTimeFrame">
+        <Label component="legend">Comment edit timeframe</Label>
+      </Localized>
+      <Field
+        name="editCommentWindowLength"
+        validate={composeValidators(
+          required,
+          validateWholeNumberGreaterThanOrEqual(0)
+        )}
+      >
+        {({ input, meta }) => (
+          <>
+            <DurationField
+              units={[
+                DURATION_UNIT.SECONDS,
+                DURATION_UNIT.MINUTES,
+                DURATION_UNIT.HOURS,
+              ]}
+              color={colorFromMeta(meta)}
+              disabled={disabled}
+              {...input}
+            />
+            <ValidationMessage meta={meta} fullWidth />
+          </>
+        )}
+      </Field>
+    </FormField>
+  </ConfigBox>
 );
 
 export default CommentEditingConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.css b/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.css
index cc1160d68..e1033388f 100644
--- a/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.css
+++ b/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.css
@@ -1,3 +1,11 @@
 .commentLengthTextInput {
   width: 150px;
 }
+
+.annotation {
+  color: var(--v2-palette-input-label);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-title);
+}
diff --git a/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx
index 77c72ba4b..a20d81b6f 100644
--- a/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx
@@ -11,16 +11,15 @@ import {
 import {
   FieldSet,
   FormField,
-  HorizontalGutter,
-  InputLabel,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  Label,
+  TextFieldAdornment,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 import styles from "./CommentLengthConfig.css";
 
@@ -40,119 +39,117 @@ interface Props {
 }
 
 const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
-    <Localized id="configure-general-commentLength-title">
-      <Header container="legend">Comment length</Header>
-    </Localized>
-    <SectionContent>
-      <Localized
-        id="configure-general-commentLength-setLimit"
-        strong={<strong />}
-      >
-        <Typography variant="bodyShort">
-          Set minimum and maximum comment length requirements. Blank spaces at
-          the beginning and the end of a comment will be trimmed.
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-commentLength-title">
+        <Header container={<legend />}>Comment length</Header>
       </Localized>
+    }
+    container={<FieldSet />}
+  >
+    <Localized
+      id="configure-general-commentLength-setLimit"
+      strong={<strong />}
+    >
+      <FormFieldDescription>
+        Set minimum and maximum comment length requirements. Blank spaces at the
+        beginning and the end of a comment will be trimmed.
+      </FormFieldDescription>
+    </Localized>
 
-      <FormField>
-        <Localized id="configure-general-commentLength-limitCommentLength">
-          <InputLabel>Limit comment length</InputLabel>
-        </Localized>
-        <OnOffField name="charCount.enabled" disabled={disabled} />
-      </FormField>
+    <FormField>
+      <Localized id="configure-general-commentLength-limitCommentLength">
+        <Label>Limit comment length</Label>
+      </Localized>
+      <OnOffField name="charCount.enabled" disabled={disabled} />
+    </FormField>
 
-      <FormField>
-        <Localized id="configure-general-commentLength-minCommentLength">
-          <InputLabel htmlFor="configure-general-commentLength-min">
-            Minimum comment length
-          </InputLabel>
-        </Localized>
-        <Field
-          name="charCount.min"
-          validate={validateWholeNumberGreaterThan(0)}
-          parse={parseEmptyAsNull}
-          format={formatEmpty}
-        >
-          {({ input, meta }) => (
-            <>
-              <Localized
-                id="configure-general-commentLength-textField"
-                attrs={{ placeholder: true }}
-              >
-                <TextField
-                  id="configure-general-commentLength-min"
-                  classes={{
-                    input: styles.commentLengthTextInput,
-                  }}
-                  {...input}
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  adornment={
-                    <Localized id="configure-general-commentLength-characters">
-                      <Typography variant="bodyCopy">Characters</Typography>
-                    </Localized>
-                  }
-                  placeholder={"No limit"}
-                  textAlignCenter
-                />
-              </Localized>
-              <ValidationMessage meta={meta} />
-            </>
-          )}
-        </Field>
-      </FormField>
-      <FormField>
-        <Localized id="configure-general-commentLength-maxCommentLength">
-          <InputLabel htmlFor="configure-general-commentLength-max">
-            Maximum comment length
-          </InputLabel>
-        </Localized>
-        <Field
-          name="charCount.max"
-          validate={composeValidators(
-            validateWholeNumberGreaterThan(0),
-            validateMaxLongerThanMin
-          )}
-          parse={parseEmptyAsNull}
-          format={formatEmpty}
-        >
-          {({ input, meta }) => (
-            <>
-              <Localized
-                id="configure-general-commentLength-textField"
-                attrs={{ placeholder: true }}
-              >
-                <TextField
-                  id="configure-general-commentLength-max"
-                  classes={{
-                    input: styles.commentLengthTextInput,
-                  }}
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  adornment={
-                    <Localized id="configure-general-commentLength-characters">
-                      <Typography variant="bodyCopy">Characters</Typography>
-                    </Localized>
-                  }
-                  placeholder={"No limit"}
-                  textAlignCenter
-                  {...input}
-                />
-              </Localized>
-              <ValidationMessage meta={meta} />
-            </>
-          )}
-        </Field>
-      </FormField>
-    </SectionContent>
-  </HorizontalGutter>
+    <FormField>
+      <Localized id="configure-general-commentLength-minCommentLength">
+        <Label htmlFor="configure-general-commentLength-min">
+          Minimum comment length
+        </Label>
+      </Localized>
+      <Field
+        name="charCount.min"
+        validate={validateWholeNumberGreaterThan(0)}
+        parse={parseEmptyAsNull}
+        format={formatEmpty}
+      >
+        {({ input, meta }) => (
+          <Localized
+            id="configure-general-commentLength-textField"
+            attrs={{ placeholder: true }}
+          >
+            <TextFieldWithValidation
+              id="configure-general-commentLength-min"
+              classes={{
+                input: styles.commentLengthTextInput,
+              }}
+              {...input}
+              disabled={disabled}
+              autoComplete="off"
+              meta={meta}
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              adornment={
+                <Localized id="configure-general-commentLength-characters">
+                  <TextFieldAdornment>Characters</TextFieldAdornment>
+                </Localized>
+              }
+              placeholder={"No limit"}
+              textAlignCenter
+            />
+          </Localized>
+        )}
+      </Field>
+    </FormField>
+    <FormField>
+      <Localized id="configure-general-commentLength-maxCommentLength">
+        <Label htmlFor="configure-general-commentLength-max">
+          Maximum comment length
+        </Label>
+      </Localized>
+      <Field
+        name="charCount.max"
+        validate={composeValidators(
+          validateWholeNumberGreaterThan(0),
+          validateMaxLongerThanMin
+        )}
+        parse={parseEmptyAsNull}
+        format={formatEmpty}
+      >
+        {({ input, meta }) => (
+          <Localized
+            id="configure-general-commentLength-textField"
+            attrs={{ placeholder: true }}
+          >
+            <TextFieldWithValidation
+              id="configure-general-commentLength-max"
+              classes={{
+                input: styles.commentLengthTextInput,
+              }}
+              disabled={disabled}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              adornment={
+                <Localized id="configure-general-commentLength-characters">
+                  <TextFieldAdornment>Characters</TextFieldAdornment>
+                </Localized>
+              }
+              placeholder={"No limit"}
+              textAlignCenter
+              meta={meta}
+              {...input}
+            />
+          </Localized>
+        )}
+      </Field>
+    </FormField>
+  </ConfigBox>
 );
 
 export default CommentLengthConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/GeneralConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/GeneralConfig.tsx
index 30315cc29..790c833f5 100644
--- a/src/core/client/admin/routes/Configure/sections/General/GeneralConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/GeneralConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import ClosedStreamMessageConfigContainer from "./ClosedStreamMessageConfigContainer";
 import ClosingCommentStreamsConfigContainer from "./ClosingCommentStreamsConfigContainer";
diff --git a/src/core/client/admin/routes/Configure/sections/General/GeneralConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/General/GeneralConfigRoute.tsx
index f6178e3e6..56b52d265 100644
--- a/src/core/client/admin/routes/Configure/sections/General/GeneralConfigRoute.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/GeneralConfigRoute.tsx
@@ -4,7 +4,7 @@ import { graphql } from "react-relay";
 
 import { loadMarkdownEditor } from "coral-framework/components/loadables";
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Delay, Spinner } from "coral-ui/components";
+import { Delay, Spinner } from "coral-ui/components/v2";
 
 import { GeneralConfigRouteQueryResponse } from "coral-admin/__generated__/GeneralConfigRouteQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx
index 9bcb512a5..5781e192d 100644
--- a/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx
@@ -8,15 +8,15 @@ import { ExternalLink } from "coral-framework/lib/i18n/components";
 import {
   FieldSet,
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
+  FormFieldHeader,
+  HelperText,
+  Label,
   Spinner,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
 import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
@@ -24,39 +24,41 @@ interface Props {
 }
 
 const GuidelinesConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
-    <Localized id="configure-general-guidelines-title">
-      <Header container="legend">Community guidelines summary</Header>
-    </Localized>
-    <SectionContent>
-      <FormField container={<FieldSet />}>
-        <Localized id="configure-general-guidelines-showCommunityGuidelines">
-          <InputLabel container="legend">
-            Show community guidelines summary
-          </InputLabel>
-        </Localized>
-        <OnOffField name="communityGuidelines.enabled" disabled={disabled} />
-      </FormField>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-guidelines-title">
+        <Header container={<legend />}>Community guidelines summary</Header>
+      </Localized>
+    }
+    container={<FieldSet />}
+  >
+    <FormField>
+      <Localized id="configure-general-guidelines-showCommunityGuidelines">
+        <Label component="legend">Show community guidelines summary</Label>
+      </Localized>
+      <OnOffField name="communityGuidelines.enabled" disabled={disabled} />
+    </FormField>
 
-      <FormField>
+    <FormField>
+      <FormFieldHeader>
         <Localized id="configure-general-guidelines-title">
-          <InputLabel htmlFor="configure-general-guidelines-content">
+          <Label htmlFor="configure-general-guidelines-content">
             Community guidelines summary
-          </InputLabel>
+          </Label>
         </Localized>
         <Localized
           id="configure-general-guidelines-explanation"
           strong={<strong />}
           externalLink={<ExternalLink href="#" />}
         >
-          <InputDescription>
+          <HelperText>
             Write a summary of your community guidelines that will appear at the
             top of each comment stream sitewide. Your summary can be formatted
             using Markdown Syntax. More information on how to use Markdown can
             be found here.
-          </InputDescription>
+          </HelperText>
         </Localized>
-      </FormField>
+      </FormFieldHeader>
 
       <Field name="communityGuidelines.content" parse={parseEmptyAsNull}>
         {({ input, meta }) => (
@@ -71,8 +73,8 @@ const GuidelinesConfig: FunctionComponent<Props> = ({ disabled }) => (
           </>
         )}
       </Field>
-    </SectionContent>
-  </HorizontalGutter>
+    </FormField>
+  </ConfigBox>
 );
 
 export default GuidelinesConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/LocaleConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/General/LocaleConfigContainer.tsx
index 82088f998..9fbb0b7df 100644
--- a/src/core/client/admin/routes/Configure/sections/General/LocaleConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/LocaleConfigContainer.tsx
@@ -3,15 +3,15 @@ import React, { useMemo } from "react";
 import { Field } from "react-final-form";
 import { graphql } from "react-relay";
 
-import { LocaleField } from "coral-framework/components";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 import { required } from "coral-framework/lib/validation";
-import { FormField, HorizontalGutter, Typography } from "coral-ui/components";
+import { FormFieldDescription, HorizontalGutter } from "coral-ui/components/v2";
 
 import { LocaleConfigContainer_settings } from "coral-admin/__generated__/LocaleConfigContainer_settings.graphql";
 
+import ConfigBox from "../../ConfigBox";
+import LocaleField from "../../Fields/LocaleField";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
 import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
@@ -23,37 +23,33 @@ interface Props {
 const LocaleConfigContainer: React.FunctionComponent<Props> = props => {
   useMemo(() => props.onInitValues(props.settings), [props.onInitValues]);
   return (
-    <FormField>
-      <HorizontalGutter size="full">
+    <ConfigBox
+      title={
         <Localized id="configure-general-locale-language">
-          <Header container={<label htmlFor="configure-locale-locale" />}>
-            Language
-          </Header>
+          <Header htmlFor="configure-locale-locale">Language</Header>
         </Localized>
-        <SectionContent>
-          <Localized
-            id="configure-general-locale-chooseLanguage"
-            strong={<strong />}
-          >
-            <Typography variant="detail">
-              Choose the language for your Coral community.
-            </Typography>
-          </Localized>
-          <Field name="locale" validate={required}>
-            {({ input, meta }) => (
-              <>
-                <LocaleField
-                  id={`configure-locale-${input.name}`}
-                  disabled={props.disabled}
-                  {...input}
-                />
-                <ValidationMessage meta={meta} fullWidth />
-              </>
-            )}
-          </Field>
-        </SectionContent>
+      }
+    >
+      <HorizontalGutter spacing={2}>
+        <Localized id="configure-general-locale-chooseLanguage">
+          <FormFieldDescription>
+            Choose the language for your Coral community.
+          </FormFieldDescription>
+        </Localized>
+        <Field name="locale" validate={required}>
+          {({ input, meta }) => (
+            <>
+              <LocaleField
+                id={`configure-locale-${input.name}`}
+                disabled={props.disabled}
+                {...input}
+              />
+              <ValidationMessage meta={meta} fullWidth />
+            </>
+          )}
+        </Field>
       </HorizontalGutter>
-    </FormField>
+    </ConfigBox>
   );
 };
 
diff --git a/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.css b/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.css
index e164cc8a7..3f040956d 100644
--- a/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.css
+++ b/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.css
@@ -5,4 +5,4 @@
 .reactionButton {
   cursor: not-allowed !important;
   color: var(--palette-grey-main) !important;
-}
\ No newline at end of file
+}
diff --git a/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.tsx
index e40c2e507..2af8261af 100644
--- a/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/ReactionConfig.tsx
@@ -8,19 +8,18 @@ import {
   FieldSet,
   Flex,
   FormField,
+  FormFieldDescription,
   HorizontalGutter,
-  InputLabel,
+  Label,
   Option,
   SelectField,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import { ReactionConfigContainer_settings as SettingsData } from "coral-admin/__generated__/ReactionConfigContainer_settings.graphql";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 import styles from "./ReactionConfig.css";
 
@@ -30,146 +29,137 @@ interface Props {
 }
 
 const ReactionsConfig: FunctionComponent<Props> = ({ disabled, settings }) => (
-  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
-    <Localized id="configure-general-reactions-title">
-      <Header container="legend">Reactions</Header>
-    </Localized>
-    <SectionContent>
-      <Localized
-        id="configure-general-reactions-explanation"
-        strong={<strong />}
-      >
-        <Typography variant="bodyShort">
-          Allow your community to engage with one another and express themselves
-          with one-click reactions. By default, Coral allows commenters to
-          "Respect" each other's comments, but you may customize reaction text
-          based on the needs of your community.
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-reactions-title">
+        <Header container={<legend />}>Reactions</Header>
       </Localized>
-      <HorizontalGutter size="double">
-        <FormField>
-          <Field name="reaction.label" validate={required}>
-            {({ input, meta }) => (
-              <Flex itemGutter="double">
-                <HorizontalGutter>
-                  <Localized id="configure-general-reactions-label">
-                    <InputLabel>Reaction label</InputLabel>
-                  </Localized>
-                  <Localized id="configure-general-reactions-input">
-                    <TextField
-                      className={styles.textInput}
-                      id={input.name}
-                      type="text"
-                      fullWidth
-                      placeholder="E.g. Respect"
-                      disabled={disabled}
-                      {...input}
-                    />
-                  </Localized>
-                  <ValidationMessage fullWidth meta={meta} />
-                </HorizontalGutter>
-                <HorizontalGutter>
-                  <Localized id="configure-general-reactions-preview">
-                    <Typography variant="heading3">Preview</Typography>
-                  </Localized>
-                  <ReactionButton
-                    readOnly
-                    className={styles.reactionButton}
-                    reacted={false}
-                    label={input.value}
-                    labelActive={settings.reaction.labelActive}
-                    icon={settings.reaction.icon}
-                    iconActive={settings.reaction.iconActive}
-                    totalReactions={0}
-                    onClick={() => null}
-                  />
-                </HorizontalGutter>
-              </Flex>
-            )}
-          </Field>
-        </FormField>
-        <FormField>
-          <Field name="reaction.labelActive" validate={required}>
-            {({ input, meta }) => (
-              <Flex itemGutter="double">
-                <HorizontalGutter>
-                  <Localized id="configure-general-reactions-active-label">
-                    <InputLabel>Active reaction label</InputLabel>
-                  </Localized>
-                  <Localized id="configure-general-reactions-active-input">
-                    <TextField
-                      className={styles.textInput}
-                      id={input.name}
-                      type="text"
-                      placeholder="E.g. Respected"
-                      fullWidth
-                      disabled={disabled}
-                      {...input}
-                    />
-                  </Localized>
-                  <ValidationMessage fullWidth meta={meta} />
-                </HorizontalGutter>
-                <HorizontalGutter>
-                  <Localized id="configure-general-reactions-preview">
-                    <Typography variant="heading3">Preview</Typography>
-                  </Localized>
-                  <ReactionButton
-                    className={styles.reactionButton}
-                    readOnly
-                    reacted
-                    label={settings.reaction.label}
-                    labelActive={input.value}
-                    icon={settings.reaction.icon}
-                    iconActive={settings.reaction.iconActive}
-                    totalReactions={0}
-                    onClick={() => null}
-                  />
-                </HorizontalGutter>
-              </Flex>
-            )}
-          </Field>
-        </FormField>
-        <FormField>
-          <Field name="reaction.sortLabel" validate={required}>
-            {({ input, meta }) => (
-              <Flex itemGutter="double">
-                <HorizontalGutter>
-                  <Localized id="configure-general-reactions-sort-label">
-                    <InputLabel>Sort label</InputLabel>
-                  </Localized>
-                  <Localized id="configure-general-reactions-sort-input">
-                    <TextField
-                      id={input.name}
-                      className={styles.textInput}
-                      type="text"
-                      placeholder="E.g. Most respected"
-                      fullWidth
-                      disabled={disabled}
-                      {...input}
-                    />
-                  </Localized>
-                  <ValidationMessage fullWidth meta={meta} />
-                </HorizontalGutter>
-                <HorizontalGutter>
-                  <Localized id="configure-general-reactions-preview">
-                    <Typography variant="heading3">Preview</Typography>
-                  </Localized>
-                  <Flex justifyContent="center" alignItems="center" itemGutter>
-                    <Localized id="configure-general-reaction-sortMenu-sortBy">
-                      <Typography variant="bodyCopyBold">Sort By</Typography>
-                    </Localized>
-                    <SelectField>
-                      <Option value={input.value}>{input.value}</Option>{" "}
-                    </SelectField>
-                  </Flex>
-                </HorizontalGutter>
-              </Flex>
-            )}
-          </Field>
-        </FormField>
-      </HorizontalGutter>
-    </SectionContent>
-  </HorizontalGutter>
+    }
+    container={<FieldSet />}
+  >
+    <Localized id="configure-general-reactions-explanation" strong={<strong />}>
+      <FormFieldDescription>
+        Allow your community to engage with one another and express themselves
+        with one-click reactions. By default, Coral allows commenters to
+        "Respect" each other's comments, but you may customize reaction text
+        based on the needs of your community.
+      </FormFieldDescription>
+    </Localized>
+    <Field name="reaction.label" validate={required}>
+      {({ input, meta }) => (
+        <Flex itemGutter="double">
+          <FormField>
+            <Localized id="configure-general-reactions-label">
+              <Label>Reaction label</Label>
+            </Localized>
+            <Localized id="configure-general-reactions-input">
+              <TextFieldWithValidation
+                className={styles.textInput}
+                id={input.name}
+                type="text"
+                fullWidth
+                placeholder="E.g. Respect"
+                disabled={disabled}
+                meta={meta}
+                {...input}
+              />
+            </Localized>
+          </FormField>
+          <HorizontalGutter>
+            <Localized id="configure-general-reactions-preview">
+              <Label component="p">Preview</Label>
+            </Localized>
+            <ReactionButton
+              readOnly
+              className={styles.reactionButton}
+              reacted={false}
+              label={input.value}
+              labelActive={settings.reaction.labelActive}
+              icon={settings.reaction.icon}
+              iconActive={settings.reaction.iconActive}
+              totalReactions={0}
+              onClick={() => null}
+            />
+          </HorizontalGutter>
+        </Flex>
+      )}
+    </Field>
+    <Field name="reaction.labelActive" validate={required}>
+      {({ input, meta }) => (
+        <Flex itemGutter="double">
+          <FormField>
+            <Localized id="configure-general-reactions-active-label">
+              <Label>Active reaction label</Label>
+            </Localized>
+            <Localized id="configure-general-reactions-active-input">
+              <TextFieldWithValidation
+                className={styles.textInput}
+                id={input.name}
+                type="text"
+                placeholder="E.g. Respected"
+                fullWidth
+                disabled={disabled}
+                meta={meta}
+                {...input}
+              />
+            </Localized>
+          </FormField>
+          <HorizontalGutter>
+            <Localized id="configure-general-reactions-preview">
+              <Label component="p">Preview</Label>
+            </Localized>
+            <ReactionButton
+              className={styles.reactionButton}
+              readOnly
+              reacted
+              label={settings.reaction.label}
+              labelActive={input.value}
+              icon={settings.reaction.icon}
+              iconActive={settings.reaction.iconActive}
+              totalReactions={0}
+              onClick={() => null}
+            />
+          </HorizontalGutter>
+        </Flex>
+      )}
+    </Field>
+    <Field name="reaction.sortLabel" validate={required}>
+      {({ input, meta }) => (
+        <Flex itemGutter="double">
+          <FormField>
+            <Localized id="configure-general-reactions-sort-label">
+              <Label>Sort label</Label>
+            </Localized>
+            <Localized id="configure-general-reactions-sort-input">
+              <TextFieldWithValidation
+                id={input.name}
+                className={styles.textInput}
+                type="text"
+                placeholder="E.g. Most respected"
+                fullWidth
+                disabled={disabled}
+                meta={meta}
+                {...input}
+              />
+            </Localized>
+          </FormField>
+          <HorizontalGutter>
+            <Localized id="configure-general-reactions-preview">
+              <Label component="p">Preview</Label>
+            </Localized>
+            <Flex justifyContent="center" alignItems="center" itemGutter>
+              <Localized id="configure-general-reaction-sortMenu-sortBy">
+                <Label component="p">Sort By</Label>
+              </Localized>
+              <SelectField>
+                <Option value={input.value}>{input.value}</Option>{" "}
+              </SelectField>
+            </Flex>
+          </HorizontalGutter>
+        </Flex>
+      )}
+    </Field>
+  </ConfigBox>
 );
 
 export default ReactionsConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx
index 99399a7fb..b7407ae10 100644
--- a/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx
@@ -5,17 +5,18 @@ import { Field } from "react-final-form";
 import { MarkdownEditor } from "coral-framework/components/loadables";
 import { parseEmptyAsNull } from "coral-framework/lib/form";
 import {
+  FieldSet,
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
+  FormFieldDescription,
+  FormFieldHeader,
+  HelperText,
+  Label,
   Spinner,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
 import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
@@ -23,56 +24,58 @@ interface Props {
 }
 
 const SitewideCommentingConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf" container="fieldset">
-    <Localized id="configure-general-sitewideCommenting-title">
-      <Header container="legend">Sitewide commenting</Header>
-    </Localized>
-    <SectionContent>
-      <Localized id="configure-general-sitewideCommenting-explanation">
-        <Typography variant="bodyShort">
-          Open or close comment streams for new comments sitewide. When new
-          comments are turned off sitewide, new comments cannot be submitted,
-          but existing comments can continue to receive “Respect” reactions, be
-          reported, and be shared.
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-sitewideCommenting-title">
+        <Header container={<legend />}>Sitewide commenting</Header>
       </Localized>
+    }
+    container={<FieldSet />}
+  >
+    <Localized id="configure-general-sitewideCommenting-explanation">
+      <FormFieldDescription>
+        Open or close comment streams for new comments sitewide. When new
+        comments are turned off sitewide, new comments cannot be submitted, but
+        existing comments can continue to receive “Respect” reactions, be
+        reported, and be shared.
+      </FormFieldDescription>
+    </Localized>
 
-      <FormField container="fieldset">
-        <Localized id="configure-general-sitewideCommenting-enableNewCommentsSitewide">
-          <InputLabel container="legend">
-            Enable new comments sitewide
-          </InputLabel>
-        </Localized>
-        <OnOffField
-          name="disableCommenting.enabled"
-          disabled={disabled}
-          invert
-          onLabel={
-            <Localized id="configure-general-sitewideCommenting-onCommentStreamsOpened">
-              <span>On - Comment streams opened for new comments</span>
-            </Localized>
-          }
-          offLabel={
-            <Localized id="configure-general-sitewideCommenting-offCommentStreamsClosed">
-              <span>Off - Comment streams closed for new comments</span>
-            </Localized>
-          }
-        />
-      </FormField>
+    <FormField>
+      <Localized id="configure-general-sitewideCommenting-enableNewCommentsSitewide">
+        <Label component="legend">Enable new comments sitewide</Label>
+      </Localized>
+      <OnOffField
+        name="disableCommenting.enabled"
+        disabled={disabled}
+        invert
+        onLabel={
+          <Localized id="configure-general-sitewideCommenting-onCommentStreamsOpened">
+            <span>On - Comment streams opened for new comments</span>
+          </Localized>
+        }
+        offLabel={
+          <Localized id="configure-general-sitewideCommenting-offCommentStreamsClosed">
+            <span>Off - Comment streams closed for new comments</span>
+          </Localized>
+        }
+      />
+    </FormField>
 
-      <FormField>
+    <FormField>
+      <FormFieldHeader>
         <Localized id="configure-general-sitewideCommenting-message">
-          <InputLabel htmlFor="configure-general-sitewideCommenting-message">
+          <Label htmlFor="configure-general-sitewideCommenting-message">
             Sitewide closed comments message
-          </InputLabel>
+          </Label>
         </Localized>
         <Localized id="configure-general-sitewideCommenting-messageExplanation">
-          <InputDescription>
+          <HelperText>
             Write a message that will be displayed when comment streams are
             closed sitewide
-          </InputDescription>
+          </HelperText>
         </Localized>
-      </FormField>
+      </FormFieldHeader>
 
       <Field name="disableCommenting.message" parse={parseEmptyAsNull}>
         {({ input, meta }) => (
@@ -87,8 +90,8 @@ const SitewideCommentingConfig: FunctionComponent<Props> = ({ disabled }) => (
           </>
         )}
       </Field>
-    </SectionContent>
-  </HorizontalGutter>
+    </FormField>
+  </ConfigBox>
 );
 
 export default SitewideCommentingConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx b/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx
index c2bb77268..85e00133f 100644
--- a/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/StaffConfig.tsx
@@ -2,22 +2,22 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { StaffConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StaffConfigContainer_settings.graphql";
 import { required } from "coral-framework/lib/validation";
 import {
   FieldSet,
   Flex,
   FormField,
+  FormFieldDescription,
   HorizontalGutter,
-  InputLabel,
+  Label,
   Tag,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
+import { StaffConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StaffConfigContainer_settings.graphql";
+
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 import styles from "./StaffConfig.css";
 
@@ -27,52 +27,50 @@ interface Props {
 }
 
 const StaffConfig: FunctionComponent<Props> = ({ disabled, settings }) => (
-  <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
-    <Localized id="configure-general-staff-title">
-      <Header container="legend">Staff member badge</Header>
-    </Localized>
-    <SectionContent>
-      <Localized id="configure-general-staff-explanation">
-        <Typography variant="bodyShort">
-          Show a custom badge for staff members of your organization. This badge
-          appears on the comment stream and in the admin interface.
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-general-staff-title">
+        <Header container={<legend />}>Staff member badge</Header>
       </Localized>
-      <HorizontalGutter size="double">
-        <FormField>
-          <Field name="staff.label" validate={required}>
-            {({ input, meta }) => (
-              <Flex itemGutter="double">
-                <HorizontalGutter>
-                  <Localized id="configure-general-staff-label">
-                    <InputLabel>Badge text</InputLabel>
-                  </Localized>
-                  <Localized id="configure-general-staff-input">
-                    <TextField
-                      className={styles.textInput}
-                      id={input.name}
-                      type="text"
-                      fullWidth
-                      placeholder="E.g. Staff"
-                      disabled={disabled}
-                      {...input}
-                    />
-                  </Localized>
-                  <ValidationMessage fullWidth meta={meta} />
-                </HorizontalGutter>
-                <HorizontalGutter>
-                  <Localized id="configure-general-staff-preview">
-                    <Typography variant="heading3">Preview</Typography>
-                  </Localized>
-                  {input.value && <Tag>{input.value}</Tag>}
-                </HorizontalGutter>
-              </Flex>
-            )}
-          </Field>
-        </FormField>
-      </HorizontalGutter>
-    </SectionContent>
-  </HorizontalGutter>
+    }
+    container={<FieldSet />}
+  >
+    <Localized id="configure-general-staff-explanation">
+      <FormFieldDescription>
+        Show a custom badge for staff members of your organization. This badge
+        appears on the comment stream and in the admin interface.
+      </FormFieldDescription>
+    </Localized>
+    <Field name="staff.label" validate={required}>
+      {({ input, meta }) => (
+        <Flex itemGutter="double">
+          <FormField>
+            <Localized id="configure-general-staff-label">
+              <Label>Badge text</Label>
+            </Localized>
+            <Localized id="configure-general-staff-input">
+              <TextFieldWithValidation
+                className={styles.textInput}
+                id={input.name}
+                type="text"
+                fullWidth
+                placeholder="E.g. Staff"
+                disabled={disabled}
+                meta={meta}
+                {...input}
+              />
+            </Localized>
+          </FormField>
+          <HorizontalGutter>
+            <Localized id="configure-general-staff-preview">
+              <Label component="p">Preview</Label>
+            </Localized>
+            {input.value && <Tag>{input.value}</Tag>}
+          </HorizontalGutter>
+        </Flex>
+      )}
+    </Field>
+  </ConfigBox>
 );
 
 export default StaffConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/General/StaffConfigContainer.tsx b/src/core/client/admin/routes/Configure/sections/General/StaffConfigContainer.tsx
index 48383d597..b6ff39eac 100644
--- a/src/core/client/admin/routes/Configure/sections/General/StaffConfigContainer.tsx
+++ b/src/core/client/admin/routes/Configure/sections/General/StaffConfigContainer.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import { graphql } from "react-relay";
 
-import { StaffConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StaffConfigContainer_settings.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { StaffConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StaffConfigContainer_settings.graphql";
+
 import StaffConfig from "./StaffConfig";
 
 interface Props {
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
index f2be8b3be..cbb93f7e1 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx
@@ -4,7 +4,7 @@ import { Field } from "react-final-form";
 
 import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
-import { FormField, InputLabel, PasswordField } from "coral-ui/components";
+import { FormField, Label, PasswordField } from "coral-ui/components/v2";
 
 import ValidationMessage from "../../ValidationMessage";
 
@@ -24,9 +24,9 @@ const APIKeyField: FunctionComponent<Props> = ({
       {({ input, meta }) => (
         <>
           <Localized id="configure-moderation-apiKey">
-            <InputLabel htmlFor={`configure-moderation-${input.name}`}>
+            <Label htmlFor={`configure-moderation-${input.name}`}>
               API key
-            </InputLabel>
+            </Label>
           </Localized>
           <PasswordField
             id={`configure-moderation-${input.name}`}
@@ -38,6 +38,7 @@ const APIKeyField: FunctionComponent<Props> = ({
             fullWidth
             {...input}
           />
+
           <ValidationMessage meta={meta} />
         </>
       )}
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx
index b274d1ee3..2f2804cdf 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { colorFromMeta, parseEmptyAsNull } from "coral-framework/lib/form";
+import { parseEmptyAsNull } from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import {
   Condition,
@@ -12,17 +12,17 @@ import {
 import {
   FieldSet,
   FormField,
+  FormFieldDescription,
+  HelperText,
   HorizontalGutter,
-  InputLabel,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+  Label,
+} from "coral-ui/components/v2";
 
-import ConfigurationSubHeader from "../../ConfigurationSubHeader";
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import Subheader from "../../Subheader";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 import APIKeyField from "./APIKeyField";
 
 interface Props {
@@ -34,85 +34,81 @@ const isEnabled: Condition = (value, values) =>
 
 const AkismetConfig: FunctionComponent<Props> = ({ disabled }) => {
   return (
-    <HorizontalGutter
-      size="oneAndAHalf"
+    <ConfigBox
       container={<FieldSet />}
       data-testid="akismet-config"
-    >
-      <Localized id="configure-moderation-akismet-title">
-        <Header container="legend">Spam detection filter</Header>
-      </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-moderation-akismet-explanation"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">
-            Submitted comments are passed to the Akismet API for spam detection.
-            If a comment is determined to be spam, it will prompt the user,
-            indicating that the comment might be considered spam. If the user
-            continues after this point with the still spam-like comment, the
-            comment will be marked as containing spam, will not be published and
-            are placed in the Pending Queue for review by a moderator. If
-            approved by a moderator, the comment will be published.
-          </Typography>
+      title={
+        <Localized id="configure-moderation-akismet-title">
+          <Header container={<legend />}>Spam detection filter</Header>
         </Localized>
+      }
+    >
+      <Localized
+        id="configure-moderation-akismet-explanation"
+        strong={<strong />}
+      >
+        <FormFieldDescription>
+          Submitted comments are passed to the Akismet API for spam detection.
+          If a comment is determined to be spam, it will prompt the user,
+          indicating that the comment might be considered spam. If the user
+          continues after this point with the still spam-like comment, the
+          comment will be marked as containing spam, will not be published and
+          are placed in the Pending Queue for review by a moderator. If approved
+          by a moderator, the comment will be published.
+        </FormFieldDescription>
+      </Localized>
 
-        <FormField container={<FieldSet />}>
-          <Localized id="configure-moderation-akismet-filter">
-            <InputLabel container="legend">Spam detection filter</InputLabel>
-          </Localized>
-          <OnOffField name="integrations.akismet.enabled" disabled={disabled} />
-        </FormField>
-        <div>
-          <ConfigurationSubHeader />
-          <Localized
-            id="configure-moderation-akismet-accountNote"
-            externalLink={<ExternalLink />}
-          >
-            <Typography variant="fieldDescription">
-              Note: You must add your active domain(s) in your Akismet account:
-              https://akismet.com/account/
-            </Typography>
-          </Localized>
-        </div>
-        <APIKeyField
-          name="integrations.akismet.key"
-          disabled={disabled}
+      <FormField container={<FieldSet />}>
+        <Localized id="configure-moderation-akismet-filter">
+          <Label component="legend">Spam detection filter</Label>
+        </Localized>
+        <OnOffField name="integrations.akismet.enabled" disabled={disabled} />
+      </FormField>
+      <HorizontalGutter spacing={3}>
+        <Localized id="configure-configurationSubHeader" strong={<strong />}>
+          <Subheader>Configuration</Subheader>
+        </Localized>
+        <Localized
+          id="configure-moderation-akismet-accountNote"
+          externalLink={<ExternalLink />}
+        >
+          <HelperText>
+            Note: You must add your active domain(s) in your Akismet account:
+            https://akismet.com/account/
+          </HelperText>
+        </Localized>
+      </HorizontalGutter>
+      <APIKeyField
+        name="integrations.akismet.key"
+        disabled={disabled}
+        validate={validateWhen(isEnabled, required)}
+      />
+
+      <FormField>
+        <Localized id="configure-moderation-akismet-siteURL">
+          <Label htmlFor="configure-moderation-akismet-site">Site URL</Label>
+        </Localized>
+        <Field
+          name="integrations.akismet.site"
+          parse={parseEmptyAsNull}
           validate={validateWhen(isEnabled, required)}
-        />
-
-        <FormField>
-          <Localized id="configure-moderation-akismet-siteURL">
-            <InputLabel htmlFor="configure-moderation-akismet-site">
-              Site URL
-            </InputLabel>
-          </Localized>
-          <Field
-            name="integrations.akismet.site"
-            parse={parseEmptyAsNull}
-            validate={validateWhen(isEnabled, required)}
-          >
-            {({ input, meta }) => (
-              <>
-                <TextField
-                  id="configure-moderation-akismet-site"
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  color={colorFromMeta(meta)}
-                  fullWidth
-                  {...input}
-                />
-                <ValidationMessage meta={meta} />
-              </>
-            )}
-          </Field>
-        </FormField>
-      </SectionContent>
-    </HorizontalGutter>
+        >
+          {({ input, meta }) => (
+            <TextFieldWithValidation
+              id="configure-moderation-akismet-site"
+              disabled={disabled}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              fullWidth
+              meta={meta}
+              {...input}
+            />
+          )}
+        </Field>
+      </FormField>
+    </ConfigBox>
   );
 };
 
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfig.tsx
index 5fd853967..39f5ebac3 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import AkismetConfigContainer from "./AkismetConfigContainer";
 import PerspectiveConfigContainer from "./PerspectiveConfigContainer";
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfigRoute.tsx
index 05c57f7c7..c429ca49c 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfigRoute.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/ModerationConfigRoute.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Delay, Spinner } from "coral-ui/components";
+import { Delay, Spinner } from "coral-ui/components/v2";
 
 import { ModerationConfigRouteQueryResponse } from "coral-admin/__generated__/ModerationConfigRouteQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
index b5fece1fa..cba01ba32 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx
@@ -23,19 +23,20 @@ import {
 import {
   FieldSet,
   FormField,
+  FormFieldDescription,
+  FormFieldHeader,
+  HelperText,
   HorizontalGutter,
-  InputDescription,
-  InputLabel,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+  Label,
+  TextFieldAdornment,
+} from "coral-ui/components/v2";
 
-import ConfigurationSubHeader from "../../ConfigurationSubHeader";
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
 import PermissionField from "../../PermissionField";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import Subheader from "../../Subheader";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 import APIKeyField from "./APIKeyField";
 
 import styles from "./PerspectiveConfig.css";
@@ -49,88 +50,89 @@ const isEnabled: Condition = (value, values) =>
 
 const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
   return (
-    <HorizontalGutter
-      size="oneAndAHalf"
+    <ConfigBox
       container={<FieldSet />}
       data-testid="perspective-container"
-    >
-      <Localized id="configure-moderation-perspective-title">
-        <Header container="legend">Toxic comment filter</Header>
-      </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-moderation-perspective-explanation"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">
-            Using the Perspective API, the Toxic Comment filter warns users when
-            comments exceed the predefined toxicity threshold. Comments with a
-            toxicity score above the threshold will not be published and are
-            placed in the Pending Queue for review by a moderator. If approved
-            by a moderator, the comment will be published.
-          </Typography>
+      title={
+        <Localized id="configure-moderation-perspective-title">
+          <Header container={<legend />}>Toxic comment filter</Header>
         </Localized>
+      }
+    >
+      <Localized
+        id="configure-moderation-perspective-explanation"
+        strong={<strong />}
+      >
+        <FormFieldDescription>
+          Using the Perspective API, the Toxic Comment filter warns users when
+          comments exceed the predefined toxicity threshold. Comments with a
+          toxicity score above the threshold will not be published and are
+          placed in the Pending Queue for review by a moderator. If approved by
+          a moderator, the comment will be published.
+        </FormFieldDescription>
+      </Localized>
 
-        <FormField container={<FieldSet />}>
-          <Localized id="configure-moderation-perspective-filter">
-            <InputLabel container="legend">Toxic comment filter</InputLabel>
-          </Localized>
-          <OnOffField
-            name="integrations.perspective.enabled"
-            disabled={disabled}
-          />
-        </FormField>
+      <FormField container={<FieldSet />}>
+        <Localized id="configure-moderation-perspective-filter">
+          <Label component="legend">Toxic comment filter</Label>
+        </Localized>
+        <OnOffField
+          name="integrations.perspective.enabled"
+          disabled={disabled}
+        />
+      </FormField>
 
-        <FormField>
+      <FormField>
+        <FormFieldHeader>
           <Localized id="configure-moderation-perspective-toxicityThreshold">
-            <InputLabel htmlFor="configure-moderation-perspective-threshold">
+            <Label htmlFor="configure-moderation-perspective-threshold">
               Toxicity threshold
-            </InputLabel>
+            </Label>
           </Localized>
           <Localized
             id="configure-moderation-perspective-toxicityThresholdDescription"
             $default={TOXICITY_THRESHOLD_DEFAULT + "%"}
           >
-            <InputDescription>
+            <HelperText>
               This value can be set a percentage between 0 and 100. This number
               represents the likelihood that a comment is toxic, according to
               Perspective API. By default the threshold is set to $default.
-            </InputDescription>
+            </HelperText>
           </Localized>
-          <Field
-            name="integrations.perspective.threshold"
-            parse={parsePercentage}
-            format={formatPercentage}
-            validate={validatePercentage(0, 1)}
-          >
-            {({ input, meta }) => (
-              <>
-                <TextField
-                  id="configure-moderation-perspective-threshold"
-                  classes={{
-                    input: styles.thresholdTextField,
-                  }}
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  adornment={<Typography variant="bodyShort">%</Typography>}
-                  placeholder={TOXICITY_THRESHOLD_DEFAULT.toString()}
-                  textAlignCenter
-                  {...input}
-                />
-                <ValidationMessage meta={meta} />
-              </>
-            )}
-          </Field>
-        </FormField>
+        </FormFieldHeader>
+        <Field
+          name="integrations.perspective.threshold"
+          parse={parsePercentage}
+          format={formatPercentage}
+          validate={validatePercentage(0, 1)}
+        >
+          {({ input, meta }) => (
+            <TextFieldWithValidation
+              id="configure-moderation-perspective-threshold"
+              classes={{
+                input: styles.thresholdTextField,
+              }}
+              disabled={disabled}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              adornment={<TextFieldAdornment>%</TextFieldAdornment>}
+              placeholder={TOXICITY_THRESHOLD_DEFAULT.toString()}
+              textAlignCenter
+              meta={meta}
+              {...input}
+            />
+          )}
+        </Field>
+      </FormField>
 
-        <FormField>
+      <FormField>
+        <FormFieldHeader>
           <Localized id="configure-moderation-perspective-toxicityModel">
-            <InputLabel htmlFor="configure-moderation-perspective-model">
+            <Label htmlFor="configure-moderation-perspective-model">
               Toxicity model
-            </InputLabel>
+            </Label>
           </Localized>
           <Localized
             id="configure-moderation-perspective-toxicityModelDescription"
@@ -143,109 +145,105 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
             }
             $default={TOXICITY_MODEL_DEFAULT}
           >
-            <InputDescription>
+            <HelperText>
               Choose your Perspective Model. The default is $default. You can
               find out more about model choices here.
-            </InputDescription>
+            </HelperText>
           </Localized>
-          <Field name="integrations.perspective.model" parse={parseEmptyAsNull}>
-            {({ input, meta }) => (
-              <>
-                <TextField
-                  id="configure-moderation-perspective-model"
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  placeholder={TOXICITY_MODEL_DEFAULT}
-                  spellCheck={false}
-                  fullWidth
-                  {...input}
-                />
-                <ValidationMessage meta={meta} />
-              </>
-            )}
-          </Field>
-        </FormField>
+        </FormFieldHeader>
+        <Field name="integrations.perspective.model" parse={parseEmptyAsNull}>
+          {({ input, meta }) => (
+            <TextFieldWithValidation
+              id="configure-moderation-perspective-model"
+              disabled={disabled}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              placeholder={TOXICITY_MODEL_DEFAULT}
+              spellCheck={false}
+              meta={meta}
+              fullWidth
+              {...input}
+            />
+          )}
+        </Field>
+      </FormField>
 
-        <FormField container={<FieldSet />}>
+      <FormField container={<FieldSet />}>
+        <FormFieldHeader>
           <Localized id="configure-moderation-perspective-allowStoreCommentData">
-            <InputLabel container="legend">
-              Allow Google to store comment data
-            </InputLabel>
+            <Label component="legend">Allow Google to store comment data</Label>
           </Localized>
           <Localized id="configure-moderation-perspective-allowStoreCommentDataDescription">
-            <InputDescription>
+            <HelperText>
               Stored comments will be used for future research and community
               model building purposes to improve the API over time.
-            </InputDescription>
+            </HelperText>
           </Localized>
-          <div>
-            <PermissionField
-              name="integrations.perspective.doNotStore"
-              disabled={disabled}
-              invert
-            />
-          </div>
-        </FormField>
-        <div>
-          <ConfigurationSubHeader />
-          <Localized
-            id="configure-moderation-perspective-accountNote"
-            externalLink={<ExternalLink />}
-          >
-            <Typography variant="fieldDescription">
-              For additional information on how to set up the Perspective Toxic
-              Comment Filter please visit:
-              https://github.com/conversationai/perspectiveapi/blob/master/quickstart.md
-            </Typography>
-          </Localized>
-        </div>
-        <APIKeyField
-          name="integrations.perspective.key"
+        </FormFieldHeader>
+        <PermissionField
+          name="integrations.perspective.doNotStore"
           disabled={disabled}
-          validate={validateWhen(isEnabled, required)}
+          invert
         />
-        <FormField>
-          <Localized id="configure-moderation-perspective-customEndpoint">
-            <InputLabel htmlFor="configure-moderation-perspective-customEndpoint">
-              Custom endpoint
-            </InputLabel>
-          </Localized>
-          <Localized
-            id="configure-moderation-perspective-defaultEndpoint"
-            $default={TOXICITY_ENDPOINT_DEFAULT}
-          >
-            <InputDescription>
-              By default the endpoint is set to $default. You may override this
-              here
-            </InputDescription>
-          </Localized>
-          <Field
-            name="integrations.perspective.endpoint"
-            parse={parseEmptyAsNull}
-            validate={validateURL}
-          >
-            {({ input, meta }) => (
-              <>
-                <TextField
-                  id="configure-moderation-perspective-customEndpoint"
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  placeholder={TOXICITY_ENDPOINT_DEFAULT}
-                  spellCheck={false}
-                  fullWidth
-                  {...input}
-                />
-                <ValidationMessage meta={meta} />
-              </>
-            )}
-          </Field>
-        </FormField>
-      </SectionContent>
-    </HorizontalGutter>
+      </FormField>
+      <HorizontalGutter spacing={3}>
+        <Localized id="configure-configurationSubHeader" strong={<strong />}>
+          <Subheader>Configuration</Subheader>
+        </Localized>
+        <Localized
+          id="configure-moderation-perspective-accountNote"
+          externalLink={<ExternalLink />}
+        >
+          <HelperText>
+            For additional information on how to set up the Perspective Toxic
+            Comment Filter please visit:
+            https://github.com/conversationai/perspectiveapi/blob/master/quickstart.md
+          </HelperText>
+        </Localized>
+      </HorizontalGutter>
+      <APIKeyField
+        name="integrations.perspective.key"
+        disabled={disabled}
+        validate={validateWhen(isEnabled, required)}
+      />
+      <FormField>
+        <Localized id="configure-moderation-perspective-customEndpoint">
+          <Label htmlFor="configure-moderation-perspective-customEndpoint">
+            Custom endpoint
+          </Label>
+        </Localized>
+        <Localized
+          id="configure-moderation-perspective-defaultEndpoint"
+          $default={TOXICITY_ENDPOINT_DEFAULT}
+        >
+          <HelperText>
+            By default the endpoint is set to $default. You may override this
+            here
+          </HelperText>
+        </Localized>
+        <Field
+          name="integrations.perspective.endpoint"
+          parse={parseEmptyAsNull}
+          validate={validateURL}
+        >
+          {({ input, meta }) => (
+            <TextFieldWithValidation
+              id="configure-moderation-perspective-customEndpoint"
+              disabled={disabled}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              placeholder={TOXICITY_ENDPOINT_DEFAULT}
+              spellCheck={false}
+              fullWidth
+              meta={meta}
+              {...input}
+            />
+          )}
+        </Field>
+      </FormField>
+    </ConfigBox>
   );
 };
 
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/PreModerationConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/PreModerationConfig.tsx
index 39ea86a8d..786276618 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/PreModerationConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/PreModerationConfig.tsx
@@ -5,14 +5,13 @@ import { parseStringBool } from "coral-framework/lib/form";
 import {
   FieldSet,
   FormField,
-  HorizontalGutter,
-  InputLabel,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
 
 interface Props {
   disabled: boolean;
@@ -28,40 +27,40 @@ const format = (v: "PRE" | "POST") => {
 
 const PreModerationConfig: FunctionComponent<Props> = ({ disabled }) => {
   return (
-    <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
-      <Localized id="configure-moderation-preModeration-title">
-        <Header container="legend">Pre-moderation</Header>
-      </Localized>
-      <SectionContent>
-        <Localized id="configure-moderation-preModeration-explanation">
-          <Typography variant="bodyShort">
-            When pre-moderation is turned on, comments will not be published
-            unless approved by a moderator.
-          </Typography>
+    <ConfigBox
+      title={
+        <Localized id="configure-moderation-preModeration-title">
+          <Header container={<legend />}>Pre-moderation</Header>
         </Localized>
-        <FormField container={<FieldSet />}>
-          <Localized id="configure-moderation-preModeration-moderation">
-            <InputLabel container="legend">
-              Pre-moderate all comments sitewide
-            </InputLabel>
-          </Localized>
-          <OnOffField
-            name="moderation"
-            disabled={disabled}
-            parse={parse}
-            format={format}
-          />
-        </FormField>
-        <FormField container={<FieldSet />}>
-          <Localized id="configure-moderation-preModeration-premodLinksEnable">
-            <InputLabel container="legend">
-              Pre-moderate comments containing links sitewide
-            </InputLabel>
-          </Localized>
-          <OnOffField name="premodLinksEnable" disabled={disabled} />
-        </FormField>
-      </SectionContent>
-    </HorizontalGutter>
+      }
+      container={<FieldSet />}
+    >
+      <Localized id="configure-moderation-preModeration-explanation">
+        <FormFieldDescription>
+          When pre-moderation is turned on, comments will not be published
+          unless approved by a moderator.
+        </FormFieldDescription>
+      </Localized>
+      <FormField container={<FieldSet />}>
+        <Localized id="configure-moderation-preModeration-moderation">
+          <Label component="legend">Pre-moderate all comments sitewide</Label>
+        </Localized>
+        <OnOffField
+          name="moderation"
+          disabled={disabled}
+          parse={parse}
+          format={format}
+        />
+      </FormField>
+      <FormField container={<FieldSet />}>
+        <Localized id="configure-moderation-preModeration-premodLinksEnable">
+          <Label component="legend">
+            Pre-moderate comments containing links sitewide
+          </Label>
+        </Localized>
+        <OnOffField name="premodLinksEnable" disabled={disabled} />
+      </FormField>
+    </ConfigBox>
   );
 };
 
diff --git a/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx b/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
index 4767baf89..cd253c089 100644
--- a/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Moderation/RecentCommentHistoryConfig.tsx
@@ -2,12 +2,8 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { DURATION_UNIT, DurationField } from "coral-framework/components";
-import {
-  formatPercentage,
-  parsePercentage,
-  ValidationMessage,
-} from "coral-framework/lib/form";
+import { formatPercentage, parsePercentage } from "coral-framework/lib/form";
+import { hasError } from "coral-framework/lib/form/helpers";
 import {
   composeValidators,
   required,
@@ -15,18 +11,21 @@ import {
   validateWholeNumberGreaterThan,
 } from "coral-framework/lib/validation";
 import {
+  DURATION_UNIT,
+  DurationField,
   FieldSet,
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+  FormFieldHeader,
+  Label,
+  TextFieldAdornment,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
+import HelperText from "../../HelperText";
 import OnOffField from "../../OnOffField";
-import SectionContent from "../../SectionContent";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
+import ValidationMessage from "../../ValidationMessage";
 
 import styles from "./RecentCommentHistoryConfig.css";
 
@@ -36,100 +35,105 @@ interface Props {
 
 const RecentCommentHistoryConfig: FunctionComponent<Props> = ({ disabled }) => {
   return (
-    <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
-      <Localized id="configure-moderation-recentCommentHistory-title">
-        <Header container="legend">Recent history</Header>
-      </Localized>
-      <SectionContent>
-        <FormField container={<FieldSet />}>
+    <ConfigBox
+      title={
+        <Localized id="configure-moderation-recentCommentHistory-title">
+          <Header container={<legend />}>Recent history</Header>
+        </Localized>
+      }
+      container={<FieldSet />}
+    >
+      <FormField container={<FieldSet />}>
+        <FormFieldHeader>
           <Localized id="configure-moderation-recentCommentHistory-timeFrame">
-            <InputLabel container="legend">
-              Recent comment history time period
-            </InputLabel>
+            <Label component="legend">Recent comment history time period</Label>
           </Localized>
           <Localized id="configure-moderation-recentCommentHistory-timeFrame-description">
-            <InputDescription>
+            <HelperText>
               The period of time over which a user’s rejection rate is
               calculated.
-            </InputDescription>
+            </HelperText>
           </Localized>
-          <Field
-            name="recentCommentHistory.timeFrame"
-            validate={composeValidators(
-              required,
-              validateWholeNumberGreaterThan(0)
-            )}
-          >
-            {({ input, meta }) => (
-              <>
-                <DurationField
-                  units={[DURATION_UNIT.DAYS]}
-                  disabled={disabled}
-                  {...input}
-                />
-                <ValidationMessage meta={meta} />
-              </>
-            )}
-          </Field>
-        </FormField>
-        <FormField container={<FieldSet />}>
+        </FormFieldHeader>
+        <Field
+          name="recentCommentHistory.timeFrame"
+          validate={composeValidators(
+            required,
+            validateWholeNumberGreaterThan(0)
+          )}
+        >
+          {({ input, meta }) => (
+            <>
+              <DurationField
+                units={[DURATION_UNIT.DAYS]}
+                disabled={disabled}
+                color={hasError(meta) ? "error" : "regular"}
+                {...input}
+              />
+              <ValidationMessage meta={meta} fullWidth />
+            </>
+          )}
+        </Field>
+      </FormField>
+      <FormField container={<FieldSet />}>
+        <FormFieldHeader>
           <Localized id="configure-moderation-recentCommentHistory-enabled">
-            <InputLabel container="legend">Recent history filter</InputLabel>
+            <Label component="legend">Recent history filter</Label>
           </Localized>
           <Localized
             id="configure-moderation-recentCommentHistory-enabled-description"
             strong={<strong />}
           >
-            <InputDescription>
+            <HelperText>
               Prevents repeat offenders from publishing comments without
               approval. After a commenter's rejection rate rises above the
               defined threshold below, their next submitted comments are{" "}
               <strong>sent to Pending for moderator approval.</strong> The
               filter is removed when their rejection rate falls below the
               threshold.
-            </InputDescription>
+            </HelperText>
           </Localized>
-          <OnOffField name="recentCommentHistory.enabled" disabled={disabled} />
-        </FormField>
-        <FormField>
+        </FormFieldHeader>
+        <OnOffField name="recentCommentHistory.enabled" disabled={disabled} />
+      </FormField>
+      <FormField>
+        <FormFieldHeader>
           <Localized id="configure-moderation-recentCommentHistory-triggerRejectionRate">
-            <InputLabel>Rejection rate threshold</InputLabel>
+            <Label>Rejection rate threshold</Label>
           </Localized>
           <Localized id="configure-moderation-recentCommentHistory-triggerRejectionRate-description">
-            <InputDescription>
+            <HelperText>
               A user’s rejected comments divided by their published comments,
               over the time period set below (does not include comments pending
               for toxicity, spam or pre-moderation.)
-            </InputDescription>
+            </HelperText>
           </Localized>
-          <Field
-            name="recentCommentHistory.triggerRejectionRate"
-            parse={parsePercentage}
-            format={formatPercentage}
-            validate={composeValidators(required, validatePercentage(0, 1))}
-          >
-            {({ input, meta }) => (
-              <>
-                <TextField
-                  classes={{
-                    input: styles.thresholdTextField,
-                  }}
-                  disabled={disabled}
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck={false}
-                  adornment={<Typography variant="bodyShort">%</Typography>}
-                  textAlignCenter
-                  {...input}
-                />
-                <ValidationMessage meta={meta} />
-              </>
-            )}
-          </Field>
-        </FormField>
-      </SectionContent>
-    </HorizontalGutter>
+        </FormFieldHeader>
+        <Field
+          name="recentCommentHistory.triggerRejectionRate"
+          parse={parsePercentage}
+          format={formatPercentage}
+          validate={composeValidators(required, validatePercentage(0, 1))}
+        >
+          {({ input, meta }) => (
+            <TextFieldWithValidation
+              classes={{
+                input: styles.thresholdTextField,
+              }}
+              disabled={disabled}
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck={false}
+              adornment={<TextFieldAdornment>%</TextFieldAdornment>}
+              meta={meta}
+              textAlignCenter
+              {...input}
+            />
+          )}
+        </Field>
+      </FormField>
+    </ConfigBox>
   );
 };
 
diff --git a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfig.tsx b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfig.tsx
index b83300077..0663d4bf7 100644
--- a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import OrganizationContactEmailConfigContainer from "./OrganizationContactEmailConfigContainer";
 import OrganizationNameConfigContainer from "./OrganizationNameConfigContainer";
diff --git a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfigRoute.tsx
index 18494effc..94e3b5c8d 100644
--- a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfigRoute.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationConfigRoute.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Delay, Spinner } from "coral-ui/components";
+import { Delay, Spinner } from "coral-ui/components/v2";
 
 import { OrganizationConfigRouteQueryResponse } from "coral-admin/__generated__/OrganizationConfigRouteQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationContactEmailConfig.tsx b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationContactEmailConfig.tsx
index 7b28054da..f4eaef9f6 100644
--- a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationContactEmailConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationContactEmailConfig.tsx
@@ -7,68 +7,53 @@ import {
   required,
   validateEmail,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  HorizontalGutter,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+import { FormFieldDescription } from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   disabled: boolean;
 }
 
 const OrganizationNameConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <FormField>
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-organization-email">
-        <Header
-          container={
-            <label htmlFor="configure-organization-organization.contactEmail" />
-          }
-        >
+        <Header htmlFor="configure-organization-organization.contactEmail">
           Organization email
         </Header>
       </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-organization-emailExplanation"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">
-            This email address will be used as in emails and across the platform
-            for community members to get in touch with the organization should
-            they have any questions about the status of their accounts or
-            moderation questions.
-          </Typography>
-        </Localized>
-        <Field
-          name="organization.contactEmail"
-          validate={composeValidators(required, validateEmail)}
-        >
-          {({ input, meta }) => (
-            <>
-              <TextField
-                id={`configure-organization-${input.name}`}
-                disabled={disabled}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-                fullWidth
-                {...input}
-              />
-              <ValidationMessage fullWidth meta={meta} />
-            </>
-          )}
-        </Field>
-      </SectionContent>
-    </HorizontalGutter>
-  </FormField>
+    }
+  >
+    <Localized id="configure-organization-emailExplanation" strong={<strong />}>
+      <FormFieldDescription>
+        This email address will be used as in emails and across the platform for
+        community members to get in touch with the organization should they have
+        any questions about the status of their accounts or moderation
+        questions.
+      </FormFieldDescription>
+    </Localized>
+    <Field
+      name="organization.contactEmail"
+      validate={composeValidators(required, validateEmail)}
+    >
+      {({ input, meta }) => (
+        <TextFieldWithValidation
+          id={`configure-organization-${input.name}`}
+          disabled={disabled}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          fullWidth
+          meta={meta}
+          {...input}
+        />
+      )}
+    </Field>
+  </ConfigBox>
 );
 
 export default OrganizationNameConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationNameConfig.tsx b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationNameConfig.tsx
index 5bbd3c4f9..3a1021273 100644
--- a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationNameConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationNameConfig.tsx
@@ -3,63 +3,48 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { required } from "coral-framework/lib/validation";
-import {
-  FormField,
-  HorizontalGutter,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+import { FormFieldDescription } from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   disabled: boolean;
 }
 
 const OrganizationNameConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <FormField>
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-organization-name">
-        <Header
-          container={
-            <label htmlFor="configure-organization-organization.name" />
-          }
-        >
+        <Header htmlFor="configure-organization-organization.name">
           Organization name
         </Header>
       </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-organization-nameExplanation"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">
-            Your organization name will appear on emails sent by Coral to your
-            community and organization members
-          </Typography>
-        </Localized>
-        <Field name="organization.name" validate={required}>
-          {({ input, meta }) => (
-            <>
-              <TextField
-                id={`configure-organization-${input.name}`}
-                disabled={disabled}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-                fullWidth
-                {...input}
-              />
-              <ValidationMessage meta={meta} fullWidth />
-            </>
-          )}
-        </Field>
-      </SectionContent>
-    </HorizontalGutter>
-  </FormField>
+    }
+  >
+    <Localized id="configure-organization-nameExplanation" strong={<strong />}>
+      <FormFieldDescription>
+        Your organization name will appear on emails sent by Coral to your
+        community and organization members
+      </FormFieldDescription>
+    </Localized>
+    <Field name="organization.name" validate={required}>
+      {({ input, meta }) => (
+        <TextFieldWithValidation
+          id={`configure-organization-${input.name}`}
+          disabled={disabled}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          meta={meta}
+          fullWidth
+          {...input}
+        />
+      )}
+    </Field>
+  </ConfigBox>
 );
 
 export default OrganizationNameConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationURLConfig.tsx b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationURLConfig.tsx
index 45382f5c8..94b6a8494 100644
--- a/src/core/client/admin/routes/Configure/sections/Organization/OrganizationURLConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/Organization/OrganizationURLConfig.tsx
@@ -7,63 +7,48 @@ import {
   required,
   validateURL,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  HorizontalGutter,
-  TextField,
-  Typography,
-} from "coral-ui/components";
+import { FormFieldDescription } from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
-import ValidationMessage from "../../ValidationMessage";
+import TextFieldWithValidation from "../../TextFieldWithValidation";
 
 interface Props {
   disabled: boolean;
 }
 
 const OrganizationURLConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <FormField>
-    <HorizontalGutter size="full">
+  <ConfigBox
+    title={
       <Localized id="configure-organization-url">
-        <Header
-          container={
-            <label htmlFor="configure-organization-organization.url" />
-          }
-        >
+        <Header htmlFor="configure-organization-organization.url">
           Organization URL
         </Header>
       </Localized>
-      <SectionContent>
-        <Localized
-          id="configure-organization-urlExplanation"
-          strong={<strong />}
-        >
-          <Typography variant="bodyShort">This URL will be used</Typography>
-        </Localized>
-        <Field
-          name="organization.url"
-          validate={composeValidators(required, validateURL)}
-        >
-          {({ input, meta }) => (
-            <>
-              <TextField
-                id={`configure-organization-${input.name}`}
-                disabled={disabled}
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-                fullWidth
-                {...input}
-              />
-              <ValidationMessage fullWidth meta={meta} />
-            </>
-          )}
-        </Field>
-      </SectionContent>
-    </HorizontalGutter>
-  </FormField>
+    }
+  >
+    <Localized id="configure-organization-urlExplanation" strong={<strong />}>
+      <FormFieldDescription>This URL will be used</FormFieldDescription>
+    </Localized>
+    <Field
+      name="organization.url"
+      validate={composeValidators(required, validateURL)}
+    >
+      {({ input, meta }) => (
+        <TextFieldWithValidation
+          id={`configure-organization-${input.name}`}
+          disabled={disabled}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          fullWidth
+          meta={meta}
+          {...input}
+        />
+      )}
+    </Field>
+  </ConfigBox>
 );
 
 export default OrganizationURLConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/WordList/BannedWordListConfig.tsx b/src/core/client/admin/routes/Configure/sections/WordList/BannedWordListConfig.tsx
index fc51cee71..7e060aafe 100644
--- a/src/core/client/admin/routes/Configure/sections/WordList/BannedWordListConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WordList/BannedWordListConfig.tsx
@@ -3,14 +3,14 @@ import React, { FunctionComponent } from "react";
 
 import {
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  FormFieldHeader,
+  HelperText,
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
 import WordListTextArea from "./WordListTextArea";
 
 import styles from "./BannedWordListConfig.css";
@@ -20,41 +20,40 @@ interface Props {
 }
 
 const BannedWordListConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf">
-    <Localized id="configure-wordList-banned-bannedWordsAndPhrases">
-      <Header>Banned words and phrases</Header>
-    </Localized>
-    <SectionContent>
-      <Localized id="configure-wordList-banned-explanation" strong={<strong />}>
-        <Typography variant="bodyShort">
-          Comments containing a word or phrase in the banned words list are
-          automatically rejected and are not published.
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-wordList-banned-bannedWordsAndPhrases">
+        <Header container="h2">Banned words and phrases</Header>
       </Localized>
+    }
+  >
+    <Localized id="configure-wordList-banned-explanation" strong={<strong />}>
+      <FormFieldDescription>
+        Comments containing a word or phrase in the banned words list are
+        automatically rejected and are not published.
+      </FormFieldDescription>
+    </Localized>
 
-      <FormField>
+    <FormField>
+      <FormFieldHeader>
         <Localized id="configure-wordList-banned-wordList">
-          <InputLabel htmlFor="configure-wordlist-banned">
-            Banned word list
-          </InputLabel>
+          <Label htmlFor="configure-wordlist-banned">Banned word list</Label>
         </Localized>
         <Localized id="configure-wordList-banned-wordListDetailInstructions">
-          <InputDescription>
+          <HelperText>
             Separate banned words or phrases with a new line. Words/phrases are
             not case sensitive.
-          </InputDescription>
+          </HelperText>
         </Localized>
-        <div>
-          <WordListTextArea
-            id="configure-wordlist-banned"
-            name={"wordList.banned"}
-            disabled={disabled}
-            className={styles.textArea}
-          />
-        </div>
-      </FormField>
-    </SectionContent>
-  </HorizontalGutter>
+      </FormFieldHeader>
+      <WordListTextArea
+        id="configure-wordlist-banned"
+        name={"wordList.banned"}
+        disabled={disabled}
+        className={styles.textArea}
+      />
+    </FormField>
+  </ConfigBox>
 );
 
 export default BannedWordListConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/WordList/SuspectWordListConfig.tsx b/src/core/client/admin/routes/Configure/sections/WordList/SuspectWordListConfig.tsx
index e93dfd21e..0df3d0b39 100644
--- a/src/core/client/admin/routes/Configure/sections/WordList/SuspectWordListConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WordList/SuspectWordListConfig.tsx
@@ -3,14 +3,14 @@ import React, { FunctionComponent } from "react";
 
 import {
   FormField,
-  HorizontalGutter,
-  InputDescription,
-  InputLabel,
-  Typography,
-} from "coral-ui/components";
+  FormFieldDescription,
+  FormFieldHeader,
+  HelperText,
+  Label,
+} from "coral-ui/components/v2";
 
+import ConfigBox from "../../ConfigBox";
 import Header from "../../Header";
-import SectionContent from "../../SectionContent";
 import WordListTextArea from "./WordListTextArea";
 
 import styles from "./SuspectWordListConfig.css";
@@ -20,45 +20,41 @@ interface Props {
 }
 
 const SuspectWordListConfig: FunctionComponent<Props> = ({ disabled }) => (
-  <HorizontalGutter size="oneAndAHalf">
-    <Localized id="configure-wordList-suspect-bannedWordsAndPhrases">
-      <Header>Suspect words and phrases</Header>
-    </Localized>
-    <SectionContent>
-      <Localized
-        id="configure-wordList-suspect-explanation"
-        strong={<strong />}
-      >
-        <Typography variant="bodyShort">
-          Comments containing a word or phrase in the Suspect Words List are
-          placed into the Reported Queue for moderator review and are published
-          (if comments are not pre-moderated).
-        </Typography>
+  <ConfigBox
+    title={
+      <Localized id="configure-wordList-suspect-bannedWordsAndPhrases">
+        <Header container="h2">Suspect words and phrases</Header>
       </Localized>
+    }
+  >
+    <Localized id="configure-wordList-suspect-explanation" strong={<strong />}>
+      <FormFieldDescription>
+        Comments containing a word or phrase in the Suspect Words List are
+        placed into the Reported Queue for moderator review and are published
+        (if comments are not pre-moderated).
+      </FormFieldDescription>
+    </Localized>
 
-      <FormField>
+    <FormField>
+      <FormFieldHeader>
         <Localized id="configure-wordList-suspect-wordList">
-          <InputLabel htmlFor="configure-wordlist-suspect">
-            Suspect word list
-          </InputLabel>
+          <Label htmlFor="configure-wordlist-suspect">Suspect word list</Label>
         </Localized>
         <Localized id="configure-wordList-suspect-wordListDetailInstructions">
-          <InputDescription>
+          <HelperText>
             Separate suspect words or phrases with a new line. Words/phrases are
             not case sensitive.
-          </InputDescription>
+          </HelperText>
         </Localized>
-        <div>
-          <WordListTextArea
-            id="configure-wordlist-suspect"
-            name={"wordList.suspect"}
-            disabled={disabled}
-            className={styles.textArea}
-          />
-        </div>
-      </FormField>
-    </SectionContent>
-  </HorizontalGutter>
+      </FormFieldHeader>
+      <WordListTextArea
+        id="configure-wordlist-suspect"
+        name={"wordList.suspect"}
+        disabled={disabled}
+        className={styles.textArea}
+      />
+    </FormField>
+  </ConfigBox>
 );
 
 export default SuspectWordListConfig;
diff --git a/src/core/client/admin/routes/Configure/sections/WordList/WordListConfig.tsx b/src/core/client/admin/routes/Configure/sections/WordList/WordListConfig.tsx
index de2a5ab1a..307e8d50e 100644
--- a/src/core/client/admin/routes/Configure/sections/WordList/WordListConfig.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WordList/WordListConfig.tsx
@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import BannedWordListConfigContainer from "./BannedWordListConfigContainer";
 import SuspectWordListConfigContainer from "./SuspectWordListConfigContainer";
diff --git a/src/core/client/admin/routes/Configure/sections/WordList/WordListConfigRoute.tsx b/src/core/client/admin/routes/Configure/sections/WordList/WordListConfigRoute.tsx
index f774b7fd5..541bf6a04 100644
--- a/src/core/client/admin/routes/Configure/sections/WordList/WordListConfigRoute.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WordList/WordListConfigRoute.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Delay, Spinner } from "coral-ui/components";
+import { Delay, Spinner } from "coral-ui/components/v2";
 
 import { WordListConfigRouteQueryResponse } from "coral-admin/__generated__/WordListConfigRouteQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.css b/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.css
index ca9506664..4a5d60dd2 100644
--- a/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.css
+++ b/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.css
@@ -1,6 +1,5 @@
 .textArea {
   width: 100%;
-  box-sizing: border-box;
   height: calc(23 * var(--mini-unit));
   padding: calc(0.5 * var(--mini-unit));
 }
diff --git a/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.tsx b/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.tsx
index 753d68307..c49af141b 100644
--- a/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.tsx
+++ b/src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.tsx
@@ -7,6 +7,7 @@ import {
   parseNewLineDelimitedString,
 } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
+import { Textarea } from "coral-ui/components/v2";
 
 import ValidationMessage from "../../ValidationMessage";
 
@@ -35,7 +36,7 @@ const WordListTextArea: FunctionComponent<Props> = ({
   >
     {({ input, meta }) => (
       <>
-        <textarea
+        <Textarea
           id={id}
           className={cn(className, styles.textArea)}
           disabled={disabled}
diff --git a/src/core/client/admin/routes/Moderate/HotkeysModal.css b/src/core/client/admin/routes/Moderate/HotkeysModal.css
index e86bfa497..727e74418 100644
--- a/src/core/client/admin/routes/Moderate/HotkeysModal.css
+++ b/src/core/client/admin/routes/Moderate/HotkeysModal.css
@@ -1,17 +1,52 @@
+$hotkeys-modal-text: var(--v2-colors-mono-500);
+$hotkeys-modal-snippet-background: var(--v2-colors-white-500);
+$hotkeys-modal-snippet-border: var(--v2-colors-grey-400);
+
 .root {
   min-width: 475px;
+  padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-6)
+    var(--v2-spacing-3);
 }
 
 .hotKeyContainer {
   width: 65px;
 }
 
+.title {
+  font-size: var(--v2-font-size-5);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  line-height: var(--v2-line-height-title);
+  color: $hotkeys-modal-text;
+  margin: 0;
+}
+
+.subTitle {
+  font-size: var(--v2-font-size-4);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  line-height: var(--v2-line-height-title);
+  color: $hotkeys-modal-text;
+  margin: 0;
+}
+
+.hotKeyAction {
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  line-height: var(--v2-line-height-body-short);
+  color: $hotkeys-modal-text;
+  margin: 0;
+}
+
 .hotKey {
-  composes: bodyCopy from "coral-ui/shared/typography.css";
-  background-color: #f2f2f2;
-  border: 1px solid #bbbebf;
+  background-color: $hotkeys-modal-snippet-background;
+  border: 1px solid $hotkeys-modal-snippet-border;
+  color: $hotkeys-modal-text;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
   border-radius: 3px;
-  padding: var(--spacing-1);
+  padding: var(--v2-spacing-1);
   display: inline-block;
   line-height: 1;
-}
\ No newline at end of file
+}
diff --git a/src/core/client/admin/routes/Moderate/HotkeysModal.tsx b/src/core/client/admin/routes/Moderate/HotkeysModal.tsx
index 88b282d3f..8ebeb9006 100644
--- a/src/core/client/admin/routes/Moderate/HotkeysModal.tsx
+++ b/src/core/client/admin/routes/Moderate/HotkeysModal.tsx
@@ -4,8 +4,7 @@ import {
   Flex,
   HorizontalGutter,
   Modal,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
@@ -22,102 +21,106 @@ const HotkeysModal: FunctionComponent<Props> = ({ open, onClose }) => {
       {({ firstFocusableRef }) => (
         <Card className={styles.root}>
           <CardCloseButton onClick={onClose} ref={firstFocusableRef} />
-          <HorizontalGutter size="double">
+          <HorizontalGutter spacing={3}>
             <Localized id="hotkeysModal-title">
-              <Typography variant="header1">Keyboard shortcuts</Typography>
+              <h1 className={styles.title}>Keyboard shortcuts</h1>
             </Localized>
             <Flex itemGutter>
-              <HorizontalGutter>
+              <HorizontalGutter spacing={2}>
                 <Localized id="hotkeysModal-navigation-shortcuts">
-                  <Typography variant="header3">
-                    Navigation shortcuts
-                  </Typography>
+                  <div className={styles.subTitle}>Navigation shortcuts</div>
                 </Localized>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>j</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-next">
-                    <Typography>Next comment</Typography>
+                    <div className={styles.hotKeyAction}>Next comment</div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>k</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-prev">
-                    <Typography>Previous comment</Typography>
+                    <div className={styles.hotKeyAction}>Previous comment</div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>ctrl+f</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-search">
-                    <Typography>Open search</Typography>
+                    <div className={styles.hotKeyAction}>Open search</div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>1..4</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-jump">
-                    <Typography>Jump to specific queue</Typography>
+                    <div className={styles.hotKeyAction}>
+                      Jump to specific queue
+                    </div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>t</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-switch">
-                    <Typography>Switch queues</Typography>
+                    <div className={styles.hotKeyAction}>Switch queues</div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>z</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-zen">
-                    <Typography>Toggle single-comment view</Typography>
+                    <div className={styles.hotKeyAction}>
+                      Toggle single-comment view
+                    </div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>?</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-toggle">
-                    <Typography>Toggle shortcuts help</Typography>
+                    <div className={styles.hotKeyAction}>
+                      Toggle shortcuts help
+                    </div>
                   </Localized>
                 </Flex>
               </HorizontalGutter>
-              <HorizontalGutter>
+              <HorizontalGutter spacing={2}>
                 <Localized id="hotkeysModal-moderation-decisions">
-                  <Typography variant="header3">
-                    Moderation decisions
-                  </Typography>
+                  <div className={styles.subTitle}>Moderation decisions</div>
                 </Localized>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>f</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-approve">
-                    <Typography>Approve</Typography>
+                    <div className={styles.hotKeyAction}>Approve</div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>d</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-reject">
-                    <Typography>Reject</Typography>
+                    <div className={styles.hotKeyAction}>Reject</div>
                   </Localized>
                 </Flex>
-                <Flex>
+                <Flex alignItems="center">
                   <div className={styles.hotKeyContainer}>
                     <div className={styles.hotKey}>b</div>
                   </div>
                   <Localized id="hotkeysModal-shortcuts-ban">
-                    <Typography>Ban comment author</Typography>
+                    <div className={styles.hotKeyAction}>
+                      Ban comment author
+                    </div>
                   </Localized>
                 </Flex>
               </HorizontalGutter>
diff --git a/src/core/client/admin/routes/Moderate/Moderate.css b/src/core/client/admin/routes/Moderate/Moderate.css
index 072624e16..827a273e2 100644
--- a/src/core/client/admin/routes/Moderate/Moderate.css
+++ b/src/core/client/admin/routes/Moderate/Moderate.css
@@ -1,3 +1,5 @@
+$moderate-background: var(--v2-colors-grey-100);
+
 .background {
   position: fixed;
   top: 0;
@@ -5,7 +7,7 @@
   z-index: -1;
   width: 100%;
   height: 100%;
-  background-color: var(--palette-background-light);
+  background-color: $moderate-background;
 }
 
 .main {
diff --git a/src/core/client/admin/routes/Moderate/Moderate.tsx b/src/core/client/admin/routes/Moderate/Moderate.tsx
index 9ff64d236..a382fd553 100644
--- a/src/core/client/admin/routes/Moderate/Moderate.tsx
+++ b/src/core/client/admin/routes/Moderate/Moderate.tsx
@@ -9,7 +9,7 @@ import React, {
 import MainLayout from "coral-admin/components/MainLayout";
 import { HOTKEYS } from "coral-admin/constants";
 import { PropTypesOf } from "coral-framework/types";
-import { SubBar } from "coral-ui/components/SubBar";
+import { SubBar } from "coral-ui/components/v2/SubBar";
 
 import HotkeysModal from "./HotkeysModal";
 import ModerateNavigationContainer from "./ModerateNavigation";
diff --git a/src/core/client/admin/routes/Moderate/ModerateContainer.tsx b/src/core/client/admin/routes/Moderate/ModerateContainer.tsx
index e93b19f94..d712b0e32 100644
--- a/src/core/client/admin/routes/Moderate/ModerateContainer.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateContainer.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { graphql } from "react-relay";
 
 import { withRouteConfig } from "coral-framework/lib/router";
-import { Spinner } from "coral-ui/components";
+import { Spinner } from "coral-ui/components/v2";
 
 import { ModerateContainerQueryResponse } from "coral-admin/__generated__/ModerateContainerQuery.graphql";
 
diff --git a/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx b/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx
index d2dbe5e1f..375ad0958 100644
--- a/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateNavigation/Navigation.tsx
@@ -5,7 +5,7 @@ import key from "keymaster";
 import React, { FunctionComponent, useEffect, useMemo } from "react";
 
 import { getModerationLink } from "coral-admin/helpers";
-import { Counter, Icon, SubBarNavigation } from "coral-ui/components";
+import { Counter, Icon, SubBarNavigation } from "coral-ui/components/v2";
 
 import NavigationLink from "./NavigationLink";
 
diff --git a/src/core/client/admin/routes/Moderate/ModerateNavigation/NavigationLink.tsx b/src/core/client/admin/routes/Moderate/ModerateNavigation/NavigationLink.tsx
index 7a495d7ac..5b8933544 100644
--- a/src/core/client/admin/routes/Moderate/ModerateNavigation/NavigationLink.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateNavigation/NavigationLink.tsx
@@ -1,7 +1,7 @@
 import { Link, LocationDescriptor } from "found";
 import React, { FunctionComponent } from "react";
 
-import { SubBarNavigationItem } from "coral-ui/components";
+import { SubBarNavigationItem } from "coral-ui/components/v2";
 
 interface Props {
   children: React.ReactNode;
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.css
index fb44f494d..d192c8a7a 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.css
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.css
@@ -1,7 +1,10 @@
+@import "variables.css";
+
 .root {
   height: calc(6 * var(--mini-unit));
-  background-color: #013f68;
+  background-color: $story-search-background;
   margin-top: -1px;
+  border-bottom: 0;
 }
 
 .bumpZIndex {
@@ -18,3 +21,7 @@
   padding: 0;
   list-style: none;
 }
+
+.groupIcon {
+  margin-right: var(--v2-spacing-2);
+}
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.tsx
index 59cdf0dcb..b40b318fa 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Bar.tsx
@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import { Form } from "react-final-form";
 
-import { Backdrop, Icon, Popover, SubBar } from "coral-ui/components";
+import { Backdrop, Icon, Popover, SubBar } from "coral-ui/components/v2";
 import { combineEventHandlers } from "coral-ui/helpers";
 import {
   useBlurOnEsc,
@@ -128,7 +128,9 @@ const Bar: FunctionComponent<Props> = ({ title, options, onSearch }) => {
                         <Group
                           title={
                             <>
-                              <Icon>search</Icon>{" "}
+                              <Icon size="md" className={styles.groupIcon}>
+                                search
+                              </Icon>{" "}
                               <Localized id="moderate-searchBar-searchResults">
                                 <span>Search results</span>
                               </Localized>
@@ -144,7 +146,9 @@ const Bar: FunctionComponent<Props> = ({ title, options, onSearch }) => {
                         <Group
                           title={
                             <>
-                              <Icon>search</Icon>{" "}
+                              <Icon size="md" className={styles.groupIcon}>
+                                search
+                              </Icon>{" "}
                               <Localized id="moderate-searchBar-searchResultsMostRecentFirst">
                                 <span>Search results (Most recent first)</span>
                               </Localized>
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.css
index a21a43fcb..a34d4be89 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.css
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.css
@@ -1,48 +1,57 @@
+@import "variables.css";
+
 .root {
   width: calc(94 * var(--mini-unit));
   height: calc(4 * var(--mini-unit));
 }
 
 .begin {
-  background-color: var(--palette-primary-darkest);
-  border-top-left-radius: var(--round-corners);
-  border-bottom-left-radius: var(--round-corners);
+  background-color: $story-search-input-background;
+  border-top-left-radius: var(--v2-round-corners);
+  border-bottom-left-radius: var(--v2-round-corners);
   min-width: calc(5 * var(--mini-unit));
   flex-shrink: 0;
   pointer-events: none;
 }
 
 .beginStories {
-  font-size: calc(13rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-family: var(--v2-font-family-primary);
   line-height: 1.5;
-  letter-spacing: calc(0.2em / 13);
-  color: var(--palette-text-light);
+  color: $story-search-input-label;
   text-transform: uppercase;
   padding-right: calc(0.25 * var(--mini-unit));
 }
 
 .searchIcon {
   padding: 0 calc(0.5 * var(--mini-unit)) 0 calc(0.75 * var(--mini-unit));
-  font-weight: var(--font-weight-medium);
-  color: var(--palette-text-light);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  color: $story-search-input-label;
 }
 
 .end {
   min-width: calc(5 * var(--mini-unit));
-  background-color: var(--palette-primary-darkest);
-  border-top-right-radius: var(--round-corners);
-  border-bottom-right-radius: var(--round-corners);
+  background-color: $story-search-input-background;
+  border-top-right-radius: var(--v2-round-corners);
+  border-bottom-right-radius: var(--v2-round-corners);
   flex-shrink: 0;
 }
 
 .searchButton {
-  composes: button from "coral-ui/shared/typography.css";
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: 1.28;
+
+  background-color: $story-search-button-background;
+  color: $story-search-button-foreground;
+  border-left: 1px solid $story-search-button-background;
+  border-radius: var(--v2-round-corners);
+
   padding: 0 calc(1 * var(--mini-unit));
-  color: var(--palette-text-light);
-  border-left: 1px solid var(--palette-text-light);
   height: calc(4 * var(--mini-unit) - 4px);
+  margin-right: var(--spacing-1);
 
   &:disabled {
     cursor: pointer;
@@ -50,16 +59,20 @@
 }
 
 .input {
-  composes: inputText placeholderPseudo from "coral-ui/shared/typography.css";
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: 1.25;
+
   position: relative;
   display: block;
   padding: calc(0.5 * var(--mini-unit));
   box-sizing: border-box;
   width: 100%;
   align-self: stretch;
-  color: var(--palette-text-light);
+  color: $story-search-input-text;
   border: 0;
-  background-color: var(--palette-primary-darkest);
+  background-color: $story-search-input-background;
   margin: 0;
 
   &:focus {
@@ -67,7 +80,7 @@
   }
 
   &::placeholder {
-    color: var(--palette-text-light);
+    color: $story-search-input-text;
     opacity: 0.5;
   }
 
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.tsx
index 2be24c9a9..1d8c6064b 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Field.tsx
@@ -4,7 +4,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
 import { Field as FormField } from "react-final-form";
 
-import { BaseButton, Flex, Icon } from "coral-ui/components";
+import { BaseButton, Flex, Icon } from "coral-ui/components/v2";
 
 import styles from "./Field.css";
 
@@ -59,9 +59,7 @@ const Field: FunctionComponent<Props> = ({
                 [styles.inputWithTitle]: !focused,
               })}
               placeholder={
-                focused
-                  ? "Use quotation marks around each search term (e.g. “team”, “St. Louis”)"
-                  : title
+                focused ? "search by story title, author, url, id, etc." : title
               }
               aria-label="Search or jump to story..."
               autoComplete="off"
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/GoToAriaInfo.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/GoToAriaInfo.tsx
index ca773c30d..542e86dbd 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/GoToAriaInfo.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/GoToAriaInfo.tsx
@@ -1,7 +1,7 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { AriaInfo } from "coral-ui/components";
+import { AriaInfo } from "coral-ui/components/v2";
 
 const GoToAriaInfo: FunctionComponent = () => (
   <Localized id="moderate-searchBar-goTo">
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Group.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Group.css
index 9430e49b5..89e059e15 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Group.css
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Group.css
@@ -1,3 +1,5 @@
+@import "variables.css";
+
 .root {
   margin: 0;
   padding: 0;
@@ -7,18 +9,18 @@
 .title {
   display: flex;
   align-items: center;
-  height: calc(3 * var(--mini-unit));
+  height: calc(5 * var(--mini-unit));
   padding-left: calc(1.5 * var(--mini-unit));
-  background: var(--palette-text-primary);
+  background: $story-search-group-background;
+  color: $story-search-group-foreground;
 
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(13rem / var(--rem-base));
-  line-height: calc(16em / 14);
-  color: var(--palette-text-light);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: 1.25;
   text-transform: uppercase;
 }
 
 .light {
-  background: var(--palette-grey-light);
+  background: $story-search-results-heading-background;
 }
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.css
index 5004483db..5a7a38a2c 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.css
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.css
@@ -1,6 +1,8 @@
+@import "variables.css";
+
 .root {
   &:not(:first-child) {
-    border-top: 1px solid var(--palette-divider);
+    border-top: 1px solid var(--v2-palette-divider);
   }
   &[aria-selected="true"] {
     @mixin outline;
@@ -8,12 +10,12 @@
 }
 
 .link {
-  justify-content: left;
+  justify-content: center;
   min-height: calc(4 * var(--mini-unit));
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(16rem / var(--rem-base));
-  line-height: calc(16em / 16);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-family-primary-semi-bold);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
 }
 
 .icon {
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
index 67e9fbe7f..6285217df 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
@@ -2,7 +2,7 @@ import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, HTMLAttributes } from "react";
 
-import { Button, Icon } from "coral-ui/components";
+import { Button, Icon } from "coral-ui/components/v2";
 
 import styles from "./ModerateAllOption.css";
 
@@ -28,8 +28,8 @@ const ModerateAllOption: FunctionComponent<Props> = ({
     >
       <Button
         href={href}
-        color="primary"
-        className={styles.link}
+        color="emphasis"
+        variant="filled"
         anchor
         fullWidth
         tabIndex={-1}
@@ -38,7 +38,9 @@ const ModerateAllOption: FunctionComponent<Props> = ({
           <span>Moderate all stories</span>
         </Localized>
         <span>
-          <Icon className={styles.icon}>arrow_forward</Icon>
+          <Icon className={styles.icon} size="md">
+            keyboard_arrow_right
+          </Icon>
         </span>
       </Button>
     </li>
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx
index ae0f6433c..d9b7be652 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateSearchBarContainer.tsx
@@ -13,7 +13,7 @@ import { getModerationLink } from "coral-admin/helpers";
 import { useEffectWhenChanged } from "coral-framework/hooks";
 import { useFetch, withFragmentContainer } from "coral-framework/lib/relay";
 import { PropTypesOf } from "coral-framework/types";
-import { Flex, Spinner } from "coral-ui/components";
+import { Flex, Spinner } from "coral-ui/components/v2";
 import { blur } from "coral-ui/helpers";
 import {
   ListBoxOptionClickOrEnterHandler,
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Option.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Option.css
index a3d7f4053..fab914ef7 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/Option.css
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/Option.css
@@ -1,6 +1,8 @@
+@import "variables.css";
+
 .root {
   &:not(:first-child) {
-    border-top: 1px solid var(--palette-divider);
+    border-top: 1px solid var(--v2-palette-divider);
   }
   &[aria-selected="true"] .container {
     @mixin outline;
@@ -11,29 +13,29 @@
   padding: var(--mini-unit) calc(2.5 * var(--mini-unit));
   box-sizing: border-box;
   &:hover {
-    background: var(--palette-grey-lightest);
+    background: $story-search-story-hover;
   }
 }
 
 .title {
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(16rem / var(--rem-base));
-  line-height: calc(16em / 16);
-  color: var(--palette-text-primary);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
+  color: $story-search-story-title;
 }
 
 .titleWithDetails {
-  font-size: calc(14rem / var(--rem-base));
+  font-size: var(--v2-font-size-3);
 }
 
 .details {
   padding-top: 3px;
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-regular);
-  font-size: calc(14rem / var(--rem-base));
-  line-height: calc(14em / 14);
-  color: var(--palette-grey-dark);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-reset);
+  color: $story-search-story-detail;
 }
 
 .link {
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css
index 33f97929e..c511d12ea 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.css
@@ -1,3 +1,5 @@
+@import "variables.css";
+
 .root {
   &[aria-selected="true"] {
     @mixin outline;
@@ -9,19 +11,20 @@
   justify-content: center;
   align-items: center;
 
-  background: var(--palette-primary-dark);
+  background: $story-search-results-see-all-background;
   min-height: calc(3 * var(--mini-unit));
 
-  font-family: var(--font-family-sans-serif);
-  font-weight: var(--font-weight-medium);
-  font-size: calc(13rem / var(--rem-base));
-  line-height: calc(16em / 13);
-  color: var(--palette-text-light);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
+  color: $story-search-results-see-all-label;
 
   text-decoration: none;
   text-transform: uppercase;
+
   &:hover {
-    background: var(--palette-primary-darkest);
+    background: $story-search-results-see-all-hover;
   }
 }
 
@@ -30,4 +33,6 @@
   padding-left: calc(0.5 * var(--mini-unit));
   line-height: calc(16em / 13);
   margin-top: -2px;
+
+  color: $story-search-results-see-all-label;
 }
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx
index a0ab83b6c..eeedfa954 100644
--- a/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/SeeAllOption.tsx
@@ -2,7 +2,7 @@ import cn from "classnames";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent, HTMLAttributes } from "react";
 
-import { Icon } from "coral-ui/components";
+import { Icon } from "coral-ui/components/v2";
 
 import styles from "./SeeAllOption.css";
 
@@ -30,7 +30,9 @@ const SeeAllOption: FunctionComponent<Props> = ({
         <Localized id="moderate-searchBar-seeAllResults">
           <span>See all results</span>
         </Localized>
-        <Icon className={styles.icon}>arrow_forward</Icon>
+        <Icon className={styles.icon} size="md">
+          keyboard_arrow_right
+        </Icon>
       </a>
     </li>
   );
diff --git a/src/core/client/admin/routes/Moderate/ModerateSearchBar/variables.css b/src/core/client/admin/routes/Moderate/ModerateSearchBar/variables.css
new file mode 100644
index 000000000..41889c718
--- /dev/null
+++ b/src/core/client/admin/routes/Moderate/ModerateSearchBar/variables.css
@@ -0,0 +1,25 @@
+$story-search-background: var(--v2-colors-teal-600);
+
+$story-search-story-title: var(--v2-colors-mono-900);
+$story-search-story-detail: var(--v2-colors-mono-100);
+$story-search-story-background: var(--v2-colors-pure-white);
+$story-search-story-hover: var(--v2-colors-grey-100);
+
+$story-search-input-text: var(--v2-colors-mono-100);
+$story-search-input-label: var(--v2-colors-mono-500);
+$story-search-input-background: var(--v2-colors-pure-white);
+
+$story-search-button-background: var(--v2-colors-blue-500);
+$story-search-button-foreground: var(--v2-colors-pure-white);
+
+$story-search-group-background: var(--v2-colors-blue-500);
+$story-search-group-foreground: var(--v2-colors-pure-white);
+
+$story-search-results-heading: var(--v2-colors-white-500);
+$story-search-results-heading-background: var(--v2-colors-grey-500);
+
+$story-search-results-see-all-label: var(--v2-colors-white-500);
+$story-search-results-see-all-background: var(--v2-colors-blue-500);
+$story-search-results-see-all-hover: var(--v2-colors-blue-400);
+$story-search-results-see-all-border: var(--v2-colors-grey-400);
+$story-search-results-see-all-divider: var(--v2-colors-grey-300);
diff --git a/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.css b/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.css
index c551f82e9..ab1f5bda1 100644
--- a/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.css
+++ b/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.css
@@ -1,5 +1,7 @@
 .root {
-  composes: bodyCopy from "coral-ui/shared/typography.css";
-  color: var(--palette-grey-dark);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-body-short);
   text-align: center;
 }
diff --git a/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.tsx b/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.tsx
index 9eef5a6f5..f981a69b1 100644
--- a/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/EmptyMessage.tsx
@@ -2,7 +2,7 @@ import cn from "classnames";
 import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
-import { Card } from "coral-ui/components";
+import { Card } from "coral-ui/components/v2";
 
 import styles from "./EmptyMessage.css";
 
diff --git a/src/core/client/admin/routes/Moderate/Queue/LoadingQueue.tsx b/src/core/client/admin/routes/Moderate/Queue/LoadingQueue.tsx
index 53f416f7b..f00392792 100644
--- a/src/core/client/admin/routes/Moderate/Queue/LoadingQueue.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/LoadingQueue.tsx
@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from "react";
 
-import { Flex, Spinner } from "coral-ui/components";
+import { Flex, Spinner } from "coral-ui/components/v2";
 
 const LoadingQueue: FunctionComponent = () => (
   <Flex justifyContent="center" data-testid="loading-moderate-container">
diff --git a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
index 2098ec5be..bbcf37b7c 100644
--- a/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
+++ b/src/core/client/admin/routes/Moderate/Queue/Queue.tsx
@@ -5,7 +5,7 @@ import React, { FunctionComponent, useCallback, useState } from "react";
 import AutoLoadMore from "coral-admin/components/AutoLoadMore";
 import ModerateCardContainer from "coral-admin/components/ModerateCard";
 import UserHistoryDrawer from "coral-admin/components/UserHistoryDrawer";
-import { Button, Flex, HorizontalGutter } from "coral-ui/components";
+import { Button, Flex, HorizontalGutter } from "coral-ui/components/v2";
 import { useHotkey } from "coral-ui/hooks";
 import { PropTypesOf } from "coral-ui/types";
 import QueueWrapper from "./QueueWrapper";
@@ -99,7 +99,6 @@ const Queue: FunctionComponent<Props> = ({
         <Flex justifyContent="center" className={styles.viewNewButtonContainer}>
           <Localized id="moderate-queue-viewNew" $count={viewNewCount}>
             <Button
-              color="primary"
               variant="filled"
               onClick={onViewNew}
               className={styles.viewNewButton}
diff --git a/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.css b/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.css
index 1dc9117d2..01dc79429 100644
--- a/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.css
+++ b/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.css
@@ -1,3 +1,7 @@
+$single-moderate-background: var(--v2-colors-grey-100);
+$single-moderate-bar: var(--v2-colors-blue-500);
+$single-moderate-bar-text: var(--v2-colors-pure-white);
+
 .background {
   position: fixed;
   top: 0;
@@ -5,7 +9,7 @@
   z-index: -1;
   width: 100%;
   height: 100%;
-  background-color: var(--palette-background-light);
+  background-color: $single-moderate-background;
 }
 
 .main {
@@ -16,32 +20,25 @@
 
 .subBar {
   height: calc(4 * var(--mini-unit));
-  background-color: var(--palette-primary-dark);
+  background-color: $single-moderate-bar;
   margin-top: -1px;
 }
 
 .subBarBegin {
   position: absolute;
   left: 0;
-
-  font-size: calc(12rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(14em / 12);
-  letter-spacing: calc(0.2em / 12);
-
-  color: var(--palette-common-white);
-  text-transform: uppercase;
+  font-family: var(--v2-font-family-primary);
   text-decoration: none;
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--font-size-2);
+  text-transform: uppercase;
+  color: $single-moderate-bar-text;
 }
 
 .subBarTitle {
-  font-size: calc(14rem / var(--rem-base));
-  font-weight: var(--font-weight-medium);
-  font-family: var(--font-family-sans-serif);
-  line-height: calc(16em / 14);
-  letter-spacing: calc(0.2em / 14);
-
-  color: var(--palette-common-white);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--font-size-3);
   text-transform: uppercase;
+  color: $single-moderate-bar-text;
 }
diff --git a/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.tsx b/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.tsx
index 9ea92903e..1b3e75615 100644
--- a/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.tsx
+++ b/src/core/client/admin/routes/Moderate/SingleModerate/SingleModerate.tsx
@@ -3,7 +3,7 @@ import { Link } from "found";
 import React, { FunctionComponent } from "react";
 
 import MainLayout from "coral-admin/components/MainLayout";
-import { SubBar } from "coral-ui/components";
+import { SubBar } from "coral-ui/components/v2";
 
 import styles from "./SingleModerate.css";
 
diff --git a/src/core/client/admin/routes/NotFound.css b/src/core/client/admin/routes/NotFound.css
new file mode 100644
index 000000000..b95662295
--- /dev/null
+++ b/src/core/client/admin/routes/NotFound.css
@@ -0,0 +1,6 @@
+.root {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-5);
+  line-height: var(--v2-line-height-body-short);
+}
diff --git a/src/core/client/admin/routes/NotFound.tsx b/src/core/client/admin/routes/NotFound.tsx
index 6b92a1725..214f495d2 100644
--- a/src/core/client/admin/routes/NotFound.tsx
+++ b/src/core/client/admin/routes/NotFound.tsx
@@ -1,10 +1,12 @@
 import React, { FunctionComponent } from "react";
 
-import { HorizontalGutter, Typography } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
+
+import styles from "./NotFound.css";
 
 const NotFound: FunctionComponent = ({ children }) => (
   <HorizontalGutter>
-    <Typography variant="heading3">Not Found</Typography>
+    <div className={styles.root}>Not Found</div>
   </HorizontalGutter>
 );
 
diff --git a/src/core/client/admin/routes/Stories/EmptyMessage.css b/src/core/client/admin/routes/Stories/EmptyMessage.css
index 7b933aa00..ab1f5bda1 100644
--- a/src/core/client/admin/routes/Stories/EmptyMessage.css
+++ b/src/core/client/admin/routes/Stories/EmptyMessage.css
@@ -1,3 +1,7 @@
 .root {
-  font-size: calc(18rem / var(--rem-base));
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-body-short);
+  text-align: center;
 }
diff --git a/src/core/client/admin/routes/Stories/EmptyMessage.tsx b/src/core/client/admin/routes/Stories/EmptyMessage.tsx
index 5f5aa8de6..c31fd9795 100644
--- a/src/core/client/admin/routes/Stories/EmptyMessage.tsx
+++ b/src/core/client/admin/routes/Stories/EmptyMessage.tsx
@@ -1,15 +1,11 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import styles from "./EmptyMessage.css";
 
 const EmptyMessage: FunctionComponent = props => (
   <Localized id="stories-emptyMessage">
-    <Typography className={styles.root} variant="bodyCopyBold" align="center">
-      There are currently no published stories.
-    </Typography>
+    <div className={styles.root}>There are currently no published stories.</div>
   </Localized>
 );
 
diff --git a/src/core/client/admin/routes/Stories/NoMatchMessage.css b/src/core/client/admin/routes/Stories/NoMatchMessage.css
index 7b933aa00..ab1f5bda1 100644
--- a/src/core/client/admin/routes/Stories/NoMatchMessage.css
+++ b/src/core/client/admin/routes/Stories/NoMatchMessage.css
@@ -1,3 +1,7 @@
 .root {
-  font-size: calc(18rem / var(--rem-base));
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-body-short);
+  text-align: center;
 }
diff --git a/src/core/client/admin/routes/Stories/NoMatchMessage.tsx b/src/core/client/admin/routes/Stories/NoMatchMessage.tsx
index cd8b7a073..3a09939ab 100644
--- a/src/core/client/admin/routes/Stories/NoMatchMessage.tsx
+++ b/src/core/client/admin/routes/Stories/NoMatchMessage.tsx
@@ -1,15 +1,13 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { Typography } from "coral-ui/components";
-
 import styles from "./NoMatchMessage.css";
 
 const NoMatchMessage: FunctionComponent = props => (
   <Localized id="stories-noMatchMessage">
-    <Typography className={styles.root} variant="bodyCopyBold" align="center">
+    <div className={styles.root}>
       We could not find any stories matching your criteria.
-    </Typography>
+    </div>
   </Localized>
 );
 
diff --git a/src/core/client/admin/routes/Stories/StoryRow.css b/src/core/client/admin/routes/Stories/StoryRow.css
index 7e92327d1..fdb9903b9 100644
--- a/src/core/client/admin/routes/Stories/StoryRow.css
+++ b/src/core/client/admin/routes/Stories/StoryRow.css
@@ -16,5 +16,4 @@
   padding-bottom: 15px;
 }
 .statusColumn {
-  vertical-align: top;
 }
diff --git a/src/core/client/admin/routes/Stories/StoryRow.tsx b/src/core/client/admin/routes/Stories/StoryRow.tsx
index 5440de70c..b2d28696a 100644
--- a/src/core/client/admin/routes/Stories/StoryRow.tsx
+++ b/src/core/client/admin/routes/Stories/StoryRow.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent } from "react";
 import NotAvailable from "coral-admin/components/NotAvailable";
 import { getModerationLink } from "coral-admin/helpers";
 import { PropTypesOf } from "coral-framework/types";
-import { TableCell, TableRow, TextLink } from "coral-ui/components";
+import { TableCell, TableRow, TextLink } from "coral-ui/components/v2";
 
 import StoryStatus from "./StoryStatus";
 
diff --git a/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx b/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx
index df8ad426c..eae78de7d 100644
--- a/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx
+++ b/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx
@@ -10,7 +10,7 @@ import {
   Dropdown,
   DropdownButton,
   Popover,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import StoryStatusText from "./StoryStatusText";
 
@@ -62,7 +62,9 @@ const StoryStatusChange: FunctionComponent<Props> = props => (
             className={styles.button}
             onClick={toggleVisibility}
             ref={ref}
-            variant="regular"
+            color="mono"
+            uppercase={false}
+            variant="plain"
             size="small"
           >
             <StoryStatusText>{props.status}</StoryStatusText>
diff --git a/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusText.css b/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusText.css
index adebfb388..264800e04 100644
--- a/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusText.css
+++ b/src/core/client/admin/routes/Stories/StoryStatus/StoryStatusText.css
@@ -1,9 +1,9 @@
 .root {
-  font-weight: var(--font-weight-regular);
-  color: var(--palette-grey-light);
+  font-weight: var(--v2-font-weight-primary-regular);
+  color: var(--v2-palette-table-body-disabled);
 }
 
 .open {
-  font-weight: var(--font-weight-regular);
-  color: var(--palette-success-main);
+  font-weight: var(--v2-font-weight-primary-regular);
+  color: var(--v2-palette-success-main);
 }
diff --git a/src/core/client/admin/routes/Stories/StoryTable.css b/src/core/client/admin/routes/Stories/StoryTable.css
index 064fbed8b..91d679245 100644
--- a/src/core/client/admin/routes/Stories/StoryTable.css
+++ b/src/core/client/admin/routes/Stories/StoryTable.css
@@ -11,5 +11,7 @@
   width: 15%;
 }
 .clickToModerate {
-  font-size: calc(12rem / var(--rem-base));
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  color: var(--v2-palette-table-header-alt-text);
 }
diff --git a/src/core/client/admin/routes/Stories/StoryTable.tsx b/src/core/client/admin/routes/Stories/StoryTable.tsx
index 6eb8eea82..4cb6fb7f0 100644
--- a/src/core/client/admin/routes/Stories/StoryTable.tsx
+++ b/src/core/client/admin/routes/Stories/StoryTable.tsx
@@ -3,14 +3,14 @@ import React, { FunctionComponent } from "react";
 
 import AutoLoadMore from "coral-admin/components/AutoLoadMore";
 import { PropTypesOf } from "coral-framework/types";
-import { Flex, HorizontalGutter, Spinner } from "coral-ui/components";
+import { Flex, HorizontalGutter, Spinner } from "coral-ui/components/v2";
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
-} from "coral-ui/components/Table";
+} from "coral-ui/components/v2/Table";
 
 import EmptyMessage from "./EmptyMessage";
 import NoMatchMessage from "./NoMatchMessage";
diff --git a/src/core/client/admin/routes/Stories/StoryTableContainer.tsx b/src/core/client/admin/routes/Stories/StoryTableContainer.tsx
index 8a1a5f701..c0ae70580 100644
--- a/src/core/client/admin/routes/Stories/StoryTableContainer.tsx
+++ b/src/core/client/admin/routes/Stories/StoryTableContainer.tsx
@@ -8,7 +8,7 @@ import {
   withPaginationContainer,
 } from "coral-framework/lib/relay";
 import { GQLSTORY_STATUS_RL } from "coral-framework/schema";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import { StoryTableContainer_query as QueryData } from "coral-admin/__generated__/StoryTableContainer_query.graphql";
 import { StoryTableContainerPaginationQueryVariables } from "coral-admin/__generated__/StoryTableContainerPaginationQuery.graphql";
diff --git a/src/core/client/admin/routes/Stories/StoryTableFilter.css b/src/core/client/admin/routes/Stories/StoryTableFilter.css
index a187c6ee9..c5083875f 100644
--- a/src/core/client/admin/routes/Stories/StoryTableFilter.css
+++ b/src/core/client/admin/routes/Stories/StoryTableFilter.css
@@ -1,10 +1,4 @@
-.legend {
-  margin-bottom: 2px;
-  text-transform: uppercase;
-}
-
 .textField {
-  height: 31px;
   width: calc(45 * var(--mini-unit));
 }
 
diff --git a/src/core/client/admin/routes/Stories/StoryTableFilter.tsx b/src/core/client/admin/routes/Stories/StoryTableFilter.tsx
index df1c8ef1c..38a8053f7 100644
--- a/src/core/client/admin/routes/Stories/StoryTableFilter.tsx
+++ b/src/core/client/admin/routes/Stories/StoryTableFilter.tsx
@@ -7,12 +7,13 @@ import {
   Button,
   FieldSet,
   Flex,
+  HorizontalGutter,
   Icon,
+  Label,
   Option,
   SelectField,
   TextField,
-  Typography,
-} from "coral-ui/components";
+} from "coral-ui/components/v2";
 
 import styles from "./StoryTableFilter.css";
 
@@ -26,91 +27,88 @@ interface Props {
 const StoryTableFilter: FunctionComponent<Props> = props => (
   <Flex itemGutter="double">
     <FieldSet>
-      <Localized id="stories-filter-search">
-        <Typography
-          container="legend"
-          className={styles.legend}
-          variant="bodyCopyBold"
-        >
-          Search
-        </Typography>
-      </Localized>
-      <Form
-        initialValues={{ search: props.searchFilter }}
-        onSubmit={({ search }: { search: string }) =>
-          props.onSetSearchFilter(search)
-        }
-      >
-        {({ handleSubmit }) => (
-          <form autoComplete="off" onSubmit={handleSubmit} id="configure-form">
-            <Field name="search">
-              {({ input }) => (
-                <Localized
-                  id="stories-filter-searchField"
-                  attrs={{ placeholder: true, "aria-label": true }}
-                >
-                  <TextField
-                    className={styles.textField}
-                    placeholder="Search by story title or author..."
-                    aria-label="Search by story title or author"
-                    variant="seamlessAdornment"
-                    {...input}
-                    adornment={
-                      <Localized
-                        id="stories-filter-searchButton"
-                        attrs={{ "aria-label": true }}
-                      >
-                        <Button
-                          className={styles.adornment}
-                          variant="adornment"
-                          type="submit"
-                          color="dark"
-                          aria-label="Search"
-                        >
-                          <Icon size="md">search</Icon>
-                        </Button>
-                      </Localized>
-                    }
-                  />
-                </Localized>
-              )}
-            </Field>
-          </form>
-        )}
-      </Form>
-    </FieldSet>
-    <FieldSet>
-      <Localized id="stories-filter-showMe">
-        <Typography
-          className={styles.legend}
-          container="legend"
-          variant="bodyCopyBold"
-        >
-          Show Me
-        </Typography>
-      </Localized>
-      <Localized
-        id="stories-filter-statusSelectField"
-        attrs={{ "aria-label": true }}
-      >
-        <SelectField
-          aria-label="Search by status"
-          value={props.statusFilter || ""}
-          onChange={e =>
-            props.onSetStatusFilter((e.target.value as any) || null)
+      <HorizontalGutter spacing={2}>
+        <Localized id="stories-filter-search">
+          <Label>Search</Label>
+        </Localized>
+        <Form
+          initialValues={{ search: props.searchFilter }}
+          onSubmit={({ search }: { search: string }) =>
+            props.onSetSearchFilter(search)
           }
         >
-          <Localized id="stories-filter-allStories">
-            <Option value="">All Stories</Option>
-          </Localized>
-          <Localized id="stories-filter-openStories">
-            <Option value={GQLSTORY_STATUS.OPEN}>Open Stories</Option>
-          </Localized>
-          <Localized id="stories-filter-closedStories">
-            <Option value={GQLSTORY_STATUS.CLOSED}>Closed Stories</Option>
-          </Localized>
-        </SelectField>
-      </Localized>
+          {({ handleSubmit }) => (
+            <form
+              autoComplete="off"
+              onSubmit={handleSubmit}
+              id="configure-form"
+            >
+              <Field name="search">
+                {({ input }) => (
+                  <Localized
+                    id="stories-filter-searchField"
+                    attrs={{ placeholder: true, "aria-label": true }}
+                  >
+                    <TextField
+                      className={styles.textField}
+                      color="dark"
+                      placeholder="Search by story title or author..."
+                      aria-label="Search by story title or author"
+                      variant="seamlessAdornment"
+                      {...input}
+                      adornment={
+                        <Localized
+                          id="stories-filter-searchButton"
+                          attrs={{ "aria-label": true }}
+                        >
+                          <Button
+                            className={styles.adornment}
+                            variant="adornment"
+                            type="submit"
+                            color="emphasis"
+                            aria-label="Search"
+                          >
+                            <Icon size="md">search</Icon>
+                          </Button>
+                        </Localized>
+                      }
+                    />
+                  </Localized>
+                )}
+              </Field>
+            </form>
+          )}
+        </Form>
+      </HorizontalGutter>
+    </FieldSet>
+    <FieldSet>
+      <HorizontalGutter spacing={2}>
+        <Localized id="stories-filter-showMe">
+          <Label>Show Me</Label>
+        </Localized>
+        <Localized
+          id="stories-filter-statusSelectField"
+          attrs={{ "aria-label": true }}
+        >
+          <SelectField
+            aria-label="Search by status"
+            value={props.statusFilter || ""}
+            onChange={e =>
+              props.onSetStatusFilter((e.target.value as any) || null)
+            }
+          >
+            <Localized id="stories-filter-allStories">
+              <Option value="">All Stories</Option>
+            </Localized>
+            <Localized id="stories-filter-openStories">
+              <Option value={GQLSTORY_STATUS.OPEN}>Open Stories</Option>
+            </Localized>
+            <Localized id="stories-filter-closedStories">
+              <Option value={GQLSTORY_STATUS.CLOSED}>Closed Stories</Option>
+            </Localized>
+          </SelectField>
+        </Localized>
+      </HorizontalGutter>
     </FieldSet>
   </Flex>
 );
diff --git a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
index 092ce58ab..3feb4f57b 100644
--- a/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+++ b/src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
@@ -9,181 +9,189 @@ exports[`renders community 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-double"
   >
     <div
-      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-justifySpaceBetween Flex-alignFlexEnd gutter"
+      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd"
     >
       <div
-        className="Box-root Flex-root Flex-flex"
+        className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
       >
         <fieldset
           className="FieldSet-root"
         >
-          <legend
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
           >
-            Search
-          </legend>
-          <form
-            autoComplete="off"
-            id="configure-form"
-            onSubmit={[Function]}
-          >
-            <div
-              className="TextField-root UserTableFilter-textField"
+            <label
+              className="Label-root"
+            >
+              Search
+            </label>
+            <form
+              autoComplete="off"
+              id="configure-form"
+              onSubmit={[Function]}
             >
-              <input
-                aria-label="Search by username or email address"
-                className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
-                name="search"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Search by username or email address..."
-                type="text"
-                value=""
-              />
               <div
-                className="TextField-adornment"
+                className="TextField-root UserTableFilter-textField"
               >
-                <button
-                  aria-label="Search"
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
-                  data-color="dark"
-                  data-variant="adornment"
+                <input
+                  aria-label="Search by username or email address"
+                  className="TextField-input TextField-colorDark TextField-seamlessAdornment"
+                  name="search"
                   onBlur={[Function]}
+                  onChange={[Function]}
                   onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="submit"
+                  placeholder="Search by username or email address..."
+                  type="text"
+                  value=""
+                />
+                <div
+                  className="TextField-adornment"
                 >
-                  <i
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
+                  <button
+                    aria-label="Search"
+                    className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase UserTableFilter-adornment"
+                    data-color="emphasis"
+                    data-variant="adornment"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="submit"
                   >
-                    search
-                  </i>
-                </button>
+                    <i
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      search
+                    </i>
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
+            </form>
+          </div>
         </fieldset>
         <fieldset
           className="FieldSet-root"
         >
-          <legend
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
-          >
-            Show Me
-          </legend>
           <div
-            className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
           >
-            <span
-              className="SelectField-root UserTableFilter-selectField"
+            <label
+              className="Label-root"
             >
-              <select
-                aria-label="Search by role"
-                className="SelectField-select"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value=""
+              Show Me
+            </label>
+            <div
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+            >
+              <span
+                className="SelectField-root UserTableFilter-selectField"
               >
-                <option
+                <select
+                  aria-label="Search by role"
+                  className="SelectField-select"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
                   value=""
                 >
-                  All Roles
-                </option>
-                <optgroup
-                  label="Audience"
+                  <option
+                    value=""
+                  >
+                    All Roles
+                  </option>
+                  <optgroup
+                    label="Audience"
+                  >
+                    <option
+                      value="COMMENTER"
+                    >
+                      Commenters
+                    </option>
+                  </optgroup>
+                  <optgroup
+                    label="Organization"
+                  >
+                    <option
+                      value="ADMIN"
+                    >
+                      Admins
+                    </option>
+                    <option
+                      value="MODERATOR"
+                    >
+                      Moderators
+                    </option>
+                    <option
+                      value="STAFF"
+                    >
+                      Staff
+                    </option>
+                  </optgroup>
+                </select>
+                <span
+                  aria-hidden={true}
+                  className="SelectField-afterWrapper"
                 >
-                  <option
-                    value="COMMENTER"
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
                   >
-                    Commenters
-                  </option>
-                </optgroup>
-                <optgroup
-                  label="Organization"
-                >
-                  <option
-                    value="ADMIN"
-                  >
-                    Admins
-                  </option>
-                  <option
-                    value="MODERATOR"
-                  >
-                    Moderators
-                  </option>
-                  <option
-                    value="STAFF"
-                  >
-                    Staff
-                  </option>
-                </optgroup>
-              </select>
-              <span
-                aria-hidden={true}
-                className="SelectField-afterWrapper"
-              >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
+                    expand_more
+                  </i>
+                </span>
               </span>
-            </span>
-            <span
-              className="SelectField-root UserTableFilter-selectField"
-            >
-              <select
-                aria-label="Search by user status"
-                className="SelectField-select"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value=""
+              <span
+                className="SelectField-root UserTableFilter-selectField"
               >
-                <option
+                <select
+                  aria-label="Search by user status"
+                  className="SelectField-select"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
                   value=""
                 >
-                  All Statuses
-                </option>
-                <option
-                  value="ACTIVE"
+                  <option
+                    value=""
+                  >
+                    All Statuses
+                  </option>
+                  <option
+                    value="ACTIVE"
+                  >
+                    Active
+                  </option>
+                  <option
+                    value="SUSPENDED"
+                  >
+                    Suspended
+                  </option>
+                  <option
+                    value="BANNED"
+                  >
+                    Banned
+                  </option>
+                  <option
+                    value="PREMOD"
+                  >
+                    Always pre-moderate
+                  </option>
+                </select>
+                <span
+                  aria-hidden={true}
+                  className="SelectField-afterWrapper"
                 >
-                  Active
-                </option>
-                <option
-                  value="SUSPENDED"
-                >
-                  Suspended
-                </option>
-                <option
-                  value="BANNED"
-                >
-                  Banned
-                </option>
-                <option
-                  value="PREMOD"
-                >
-                  Always pre-moderate
-                </option>
-              </select>
-              <span
-                aria-hidden={true}
-                className="SelectField-afterWrapper"
-              >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    expand_more
+                  </i>
+                </span>
               </span>
-            </span>
+            </div>
           </div>
         </fieldset>
       </div>
@@ -191,8 +199,8 @@ exports[`renders community 1`] = `
         data-testid="invite-users"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          data-color="primary"
+          className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase InviteUsers-button"
+          data-color="default"
           data-testid="invite-users-button"
           data-variant="filled"
           onBlur={[Function]}
@@ -256,9 +264,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
+                data-color="default"
+                data-variant="plain"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -302,17 +310,13 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-statusColumn TableCell-body"
             >
               <div
-                className="ButtonPadding-root"
+                className="UserStatus-root UserStatus-success"
               >
                 <div
-                  className="Box-root Typography-root Typography-detail Typography-colorSuccess"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                 >
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
-                  >
-                    <div>
-                      Active
-                    </div>
+                  <div>
+                    Active
                   </div>
                 </div>
               </div>
@@ -325,9 +329,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
+                data-color="default"
+                data-variant="plain"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -362,9 +366,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -404,17 +408,13 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-statusColumn TableCell-body"
             >
               <div
-                className="ButtonPadding-root"
+                className="UserStatus-root UserStatus-success"
               >
                 <div
-                  className="Box-root Typography-root Typography-detail Typography-colorSuccess"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                 >
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
-                  >
-                    <div>
-                      Active
-                    </div>
+                  <div>
+                    Active
                   </div>
                 </div>
               </div>
@@ -427,9 +427,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
+                data-color="default"
+                data-variant="plain"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -464,9 +464,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -506,17 +506,13 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-statusColumn TableCell-body"
             >
               <div
-                className="ButtonPadding-root"
+                className="UserStatus-root UserStatus-success"
               >
                 <div
-                  className="Box-root Typography-root Typography-detail Typography-colorSuccess"
+                  className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
                 >
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
-                  >
-                    <div>
-                      Active
-                    </div>
+                  <div>
+                    Active
                   </div>
                 </div>
               </div>
@@ -529,9 +525,9 @@ exports[`renders community 1`] = `
               className="TableCell-root UserRow-usernameColumn TableCell-body"
             >
               <button
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular UserRow-usernameButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
+                data-color="default"
+                data-variant="plain"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -566,9 +562,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change role"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserRoleChange-button"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -612,9 +608,9 @@ exports[`renders community 1`] = `
               >
                 <button
                   aria-label="Change user status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular UserStatusChange-button UserStatusChange-fullWidth"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeMedium Button-colorMono Button-variantPlain UserStatusChange-button UserStatusChange-fullWidth"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -624,7 +620,7 @@ exports[`renders community 1`] = `
                   type="button"
                 >
                   <div
-                    className="Box-root Typography-root Typography-detail Typography-colorSuccess"
+                    className="UserStatus-root UserStatus-success"
                   >
                     <div
                       className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter gutter"
@@ -673,181 +669,189 @@ exports[`renders empty community 1`] = `
     className="Box-root HorizontalGutter-root HorizontalGutter-double"
   >
     <div
-      className="Box-root Flex-root Flex-flex Flex-doubleItemGutter Flex-justifySpaceBetween Flex-alignFlexEnd gutter"
+      className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd"
     >
       <div
-        className="Box-root Flex-root Flex-flex"
+        className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
       >
         <fieldset
           className="FieldSet-root"
         >
-          <legend
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
+          <div
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
           >
-            Search
-          </legend>
-          <form
-            autoComplete="off"
-            id="configure-form"
-            onSubmit={[Function]}
-          >
-            <div
-              className="TextField-root UserTableFilter-textField"
+            <label
+              className="Label-root"
+            >
+              Search
+            </label>
+            <form
+              autoComplete="off"
+              id="configure-form"
+              onSubmit={[Function]}
             >
-              <input
-                aria-label="Search by username or email address"
-                className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
-                name="search"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                placeholder="Search by username or email address..."
-                type="text"
-                value=""
-              />
               <div
-                className="TextField-adornment"
+                className="TextField-root UserTableFilter-textField"
               >
-                <button
-                  aria-label="Search"
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment UserTableFilter-adornment"
-                  data-color="dark"
-                  data-variant="adornment"
+                <input
+                  aria-label="Search by username or email address"
+                  className="TextField-input TextField-colorDark TextField-seamlessAdornment"
+                  name="search"
                   onBlur={[Function]}
+                  onChange={[Function]}
                   onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="submit"
+                  placeholder="Search by username or email address..."
+                  type="text"
+                  value=""
+                />
+                <div
+                  className="TextField-adornment"
                 >
-                  <i
-                    aria-hidden="true"
-                    className="Icon-root Icon-md"
+                  <button
+                    aria-label="Search"
+                    className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase UserTableFilter-adornment"
+                    data-color="emphasis"
+                    data-variant="adornment"
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="submit"
                   >
-                    search
-                  </i>
-                </button>
+                    <i
+                      aria-hidden="true"
+                      className="Icon-root Icon-md"
+                    >
+                      search
+                    </i>
+                  </button>
+                </div>
               </div>
-            </div>
-          </form>
+            </form>
+          </div>
         </fieldset>
         <fieldset
           className="FieldSet-root"
         >
-          <legend
-            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserTableFilter-legend"
-          >
-            Show Me
-          </legend>
           <div
-            className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+            className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
           >
-            <span
-              className="SelectField-root UserTableFilter-selectField"
+            <label
+              className="Label-root"
             >
-              <select
-                aria-label="Search by role"
-                className="SelectField-select"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value=""
+              Show Me
+            </label>
+            <div
+              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+            >
+              <span
+                className="SelectField-root UserTableFilter-selectField"
               >
-                <option
+                <select
+                  aria-label="Search by role"
+                  className="SelectField-select"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
                   value=""
                 >
-                  All Roles
-                </option>
-                <optgroup
-                  label="Audience"
+                  <option
+                    value=""
+                  >
+                    All Roles
+                  </option>
+                  <optgroup
+                    label="Audience"
+                  >
+                    <option
+                      value="COMMENTER"
+                    >
+                      Commenters
+                    </option>
+                  </optgroup>
+                  <optgroup
+                    label="Organization"
+                  >
+                    <option
+                      value="ADMIN"
+                    >
+                      Admins
+                    </option>
+                    <option
+                      value="MODERATOR"
+                    >
+                      Moderators
+                    </option>
+                    <option
+                      value="STAFF"
+                    >
+                      Staff
+                    </option>
+                  </optgroup>
+                </select>
+                <span
+                  aria-hidden={true}
+                  className="SelectField-afterWrapper"
                 >
-                  <option
-                    value="COMMENTER"
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
                   >
-                    Commenters
-                  </option>
-                </optgroup>
-                <optgroup
-                  label="Organization"
-                >
-                  <option
-                    value="ADMIN"
-                  >
-                    Admins
-                  </option>
-                  <option
-                    value="MODERATOR"
-                  >
-                    Moderators
-                  </option>
-                  <option
-                    value="STAFF"
-                  >
-                    Staff
-                  </option>
-                </optgroup>
-              </select>
-              <span
-                aria-hidden={true}
-                className="SelectField-afterWrapper"
-              >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
+                    expand_more
+                  </i>
+                </span>
               </span>
-            </span>
-            <span
-              className="SelectField-root UserTableFilter-selectField"
-            >
-              <select
-                aria-label="Search by user status"
-                className="SelectField-select"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                value=""
+              <span
+                className="SelectField-root UserTableFilter-selectField"
               >
-                <option
+                <select
+                  aria-label="Search by user status"
+                  className="SelectField-select"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
                   value=""
                 >
-                  All Statuses
-                </option>
-                <option
-                  value="ACTIVE"
+                  <option
+                    value=""
+                  >
+                    All Statuses
+                  </option>
+                  <option
+                    value="ACTIVE"
+                  >
+                    Active
+                  </option>
+                  <option
+                    value="SUSPENDED"
+                  >
+                    Suspended
+                  </option>
+                  <option
+                    value="BANNED"
+                  >
+                    Banned
+                  </option>
+                  <option
+                    value="PREMOD"
+                  >
+                    Always pre-moderate
+                  </option>
+                </select>
+                <span
+                  aria-hidden={true}
+                  className="SelectField-afterWrapper"
                 >
-                  Active
-                </option>
-                <option
-                  value="SUSPENDED"
-                >
-                  Suspended
-                </option>
-                <option
-                  value="BANNED"
-                >
-                  Banned
-                </option>
-                <option
-                  value="PREMOD"
-                >
-                  Always pre-moderate
-                </option>
-              </select>
-              <span
-                aria-hidden={true}
-                className="SelectField-afterWrapper"
-              >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-sm"
-                >
-                  expand_more
-                </i>
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-sm"
+                  >
+                    expand_more
+                  </i>
+                </span>
               </span>
-            </span>
+            </div>
           </div>
         </fieldset>
       </div>
@@ -855,8 +859,8 @@ exports[`renders empty community 1`] = `
         data-testid="invite-users"
       >
         <button
-          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-          data-color="primary"
+          className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase InviteUsers-button"
+          data-color="default"
           data-testid="invite-users-button"
           data-variant="filled"
           onBlur={[Function]}
@@ -914,11 +918,11 @@ exports[`renders empty community 1`] = `
           className="TableBody-root"
         />
       </table>
-      <p
-        className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary Typography-alignCenter EmptyMessage-root"
+      <div
+        className="EmptyMessage-root"
       >
         We could not find anyone in your community matching your criteria.
-      </p>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
index 93d3f652d..6398439bf 100644
--- a/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
@@ -95,8 +95,8 @@ exports[`renders configure advanced 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
-            data-color="success"
+            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+            data-color="default"
             data-testid="configure-sideBar-saveChanges"
             data-variant="filled"
             disabled={true}
@@ -119,27 +119,37 @@ exports[`renders configure advanced 1`] = `
           data-testid="configure-advancedContainer"
         >
           <fieldset
-            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Embed code
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Embed code
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                Copy and paste the code below into your CMS to embed Coral comment streams in
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Copy and paste the code below into your CMS to embed Coral comment streams in
 each of your site’s stories.
-              </p>
-              <textarea
-                className="EmbedCode-textArea"
-                readOnly={true}
-                rows={24}
-                value="<div id=\\"coral_thread\\"></div>
+                </p>
+                <textarea
+                  className="Textarea-root EmbedCode-textArea"
+                  readOnly={true}
+                  rows={24}
+                  value="<div id=\\"coral_thread\\"></div>
 <script type=\\"text/javascript\\">
   (function() {
       var d = document, s = d.createElement('script');
@@ -163,227 +173,276 @@ each of your site’s stories.
       (d.head || d.body).appendChild(s);
   })();
 </script>"
-              />
-              <div
-                className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
-              >
-                <button
-                  className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled"
-                  data-color="primary"
-                  data-variant="filled"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                  onTouchEnd={[Function]}
-                  type="button"
+                />
+                <div
+                  className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
                 >
-                  <span>
-                    Copy
-                  </span>
-                </button>
-              </div>
+                  <button
+                    className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase"
+                    data-color="default"
+                    data-variant="filled"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    onTouchEnd={[Function]}
+                    type="button"
+                  >
+                    <span>
+                      Copy
+                    </span>
+                  </button>
+                </div>
+              </fieldset>
             </div>
           </fieldset>
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <label
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                htmlFor="configure-advanced-customCSSURL"
-              >
-                Custom CSS
-              </label>
-              <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
-              >
-                <p
-                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-advanced-customCSSURL"
                 >
-                  URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.
-                </p>
+                  Custom CSS
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
                 <div
-                  className="TextField-root TextField-fullWidth"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-advanced-customCSSURL"
-                    name="customCSSURL"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    spellCheck={false}
-                    type="text"
-                    value=""
-                  />
+                  <p
+                    className="FormFieldDescription-root"
+                  >
+                    URL of a CSS stylesheet that will override default Embed Stream styles. Can be internal or external.
+                  </p>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                  >
+                    <div
+                      className="TextField-root TextField-fullWidth"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular"
+                        disabled={false}
+                        id="configure-advanced-customCSSURL"
+                        name="customCSSURL"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <label
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                htmlFor="configure-advanced-liveUpdates"
-              >
-                Comment stream live updates
-              </label>
-              <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
-              >
-                <p
-                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-advanced-liveUpdates"
                 >
-                  When enabled, there will be real-time loading and updating of comments.
+                  Comment stream live updates
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <p
+                    className="FormFieldDescription-root"
+                  >
+                    When enabled, there will be real-time loading and updating of comments.
 When disabled, users will have to refresh the page to see new comments.
-                </p>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="live.enabled-true"
-                      name="live.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="live.enabled-true"
+                  </p>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="live.enabled-false"
-                      name="live.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="live.enabled-false"
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="live.enabled-true"
+                        name="live.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="live.enabled-true"
+                      >
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        Off
-                      </span>
-                    </label>
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="live.enabled-false"
+                        name="live.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="live.enabled-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <label
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                htmlFor="configure-advanced-allowedDomains"
-              >
-                Permitted domains
-              </label>
-              <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
-              >
-                <p
-                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-advanced-allowedDomains"
                 >
-                  Domains where your Coral instance is allowed to be embedded
+                  Permitted domains
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <p
+                    className="FormFieldDescription-root"
+                  >
+                    Domains where your Coral instance is allowed to be embedded
 including the scheme (ex. http://localhost:3000, https://staging.domain.com,
 https://domain.com).
-                </p>
-                <div
-                  className="TextField-root TextField-fullWidth"
-                >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-advanced-allowedDomains"
-                    name="allowedDomains"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    spellCheck={false}
-                    type="text"
-                    value="http://localhost:8080"
-                  />
+                  </p>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                  >
+                    <div
+                      className="TextField-root TextField-fullWidth"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular"
+                        disabled={false}
+                        id="configure-advanced-allowedDomains"
+                        name="allowedDomains"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value="http://localhost:8080"
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-double"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <h1
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-              >
-                Story creation
-              </h1>
-              <p
-                className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-              >
-                Advanced settings for how stories are created within Coral.
-              </p>
+              <div>
+                <h2
+                  className="Header-root"
+                >
+                  Story creation
+                </h2>
+              </div>
+              <div />
             </div>
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-double"
+              className="ConfigBox-content"
             >
               <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                <p
+                  className="FormFieldDescription-root"
                 >
-                  <label
-                    className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  Advanced settings for how stories are created within Coral.
+                </p>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                   >
-                    Lazy story creation
-                  </label>
-                  <p
-                    className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-                  >
-                    Enable stories to be automatically created when they are published from your CMS.
-                  </p>
+                    <label
+                      className="Label-root"
+                    >
+                      Lazy story creation
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Enable stories to be automatically created when they are published from your CMS.
+                    </p>
+                  </div>
                   <div>
                     <div
                       className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
@@ -435,23 +494,23 @@ https://domain.com).
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <label
-                    className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                   >
-                    Story scraping
-                  </label>
-                  <p
-                    className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-                  >
-                    Enable story metadata to be automatically scraped when they are published from your CMS.
-                  </p>
+                    <label
+                      className="Label-root"
+                    >
+                      Story scraping
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Enable story metadata to be automatically scraped when they are published from your CMS.
+                    </p>
+                  </div>
                   <div>
                     <div
                       className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
@@ -503,54 +562,58 @@ https://domain.com).
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <label
-                    className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                    htmlFor="configure-advanced-stories-proxy-url"
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                   >
-                    Scraper proxy url
-                  </label>
-                  <p
-                    className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
-                  >
-                    When specified, allows scraping requests to use the provided
+                    <label
+                      className="Label-root"
+                      htmlFor="configure-advanced-stories-proxy-url"
+                    >
+                      Scraper proxy url
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      When specified, allows scraping requests to use the provided
 proxy. All requests will then be passed through the appropriote
 proxy as parsed by the 
-                    <a
-                      className="ExternalLink-root"
-                      href="https://www.npmjs.com/package/proxy-agent"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      npm proxy-agent
-                    </a>
-                     package.
-                  </p>
+                      <a
+                        className="ExternalLink-root"
+                        href="https://www.npmjs.com/package/proxy-agent"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        npm proxy-agent
+                      </a>
+                       package.
+                    </p>
+                  </div>
                   <div
-                    className="TextField-root"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                   >
-                    <input
-                      autoCapitalize="off"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      className="TextField-input TextField-colorRegular"
-                      disabled={false}
-                      id="configure-advanced-stories-proxy-url"
-                      name="stories.scraping.proxyURL"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      placeholder=""
-                      spellCheck={false}
-                      type="text"
-                      value=""
-                    />
+                    <div
+                      className="TextField-root TextField-fullWidth"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular"
+                        disabled={false}
+                        id="configure-advanced-stories-proxy-url"
+                        name="stories.scraping.proxyURL"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
index 3eff5535c..52603fd56 100644
--- a/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
@@ -2,20 +2,22 @@
 
 exports[`change settings: during submit: oidc without errors 1`] = `
 <div
-  className="ConfigBox-root"
+  className="Box-root ConfigBox-root"
   data-testid="configure-auth-oidc-container"
 >
   <div
     className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
-      <span>
+      <h2
+        className="Header-root"
+      >
         Login with OpenID Connect
-      </span>
+      </h2>
     </div>
     <div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <div
           className="CheckBox-root"
@@ -50,10 +52,10 @@ exports[`change settings: during submit: oidc without errors 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
     >
       <p
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="FormFieldDescription-root"
       >
         To learn more: 
         <a
@@ -70,14 +72,11 @@ exports[`change settings: during submit: oidc without errors 1`] = `
           </i>
         </a>
       </p>
-      <hr
-        className="HorizontalRule-root"
-      />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Redirect URI
         </label>
@@ -97,8 +96,8 @@ exports[`change settings: during submit: oidc without errors 1`] = `
             />
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-            data-color="primary"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+            data-color="default"
             data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
@@ -118,72 +117,84 @@ exports[`change settings: during submit: oidc without errors 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-        >
-          Provider name
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          The provider of the OpenID Connect integration. This will be used when the name of the provider
-needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
-        </p>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={true}
-            name="auth.integrations.oidc.name"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="name"
-          />
+          <label
+            className="Label-root"
+          >
+            Provider name
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            The provider of the OpenID Connect integration. This will be used when the name of the provider
+needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
+          </p>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+        >
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={true}
+              name="auth.integrations.oidc.name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value="name"
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client ID
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={true}
-            name="auth.integrations.oidc.clientID"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="clientID"
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={true}
+              name="auth.integrations.oidc.clientID"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value="clientID"
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client secret
         </label>
@@ -227,19 +238,23 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        <div
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
         >
-          Issuer
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          After entering your Issuer information, click the Discover button to have Coral complete
+          <label
+            className="Label-root"
+          >
+            Issuer
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
-        </p>
+          </p>
+        </div>
         <div
           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
@@ -263,8 +278,8 @@ the remaining fields. You may also enter the information manually.
             />
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled Button-disabled"
-            data-color="primary"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+            data-color="default"
             data-variant="filled"
             disabled={true}
             id="configure-auth-oidc-discover"
@@ -281,94 +296,106 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Authorization URL
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={true}
-            name="auth.integrations.oidc.authorizationURL"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="http://issuer.com/authorizationURL"
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={true}
+              name="auth.integrations.oidc.authorizationURL"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value="http://issuer.com/authorizationURL"
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Token URL
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={true}
-            name="auth.integrations.oidc.tokenURL"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="http://issuer.com/tokenURL"
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={true}
+              name="auth.integrations.oidc.tokenURL"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value="http://issuer.com/tokenURL"
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           JWKS URI
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={true}
-            name="auth.integrations.oidc.jwksURI"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="http://issuer.com/jwksURI"
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={true}
+              name="auth.integrations.oidc.jwksURI"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value="http://issuer.com/jwksURI"
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           <span>
             Use OpenID Connect login on
@@ -432,21 +459,25 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-        >
-          Registration
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          Allow users that have not signed up before with this authentication
-integration to register for a new account.
-        </p>
         <div
-          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+        >
+          <label
+            className="Label-root"
+          >
+            Registration
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            Allow users that have not signed up before with this authentication
+integration to register for a new account.
+          </p>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
         >
           <div
             className="CheckBox-root"
@@ -483,20 +514,22 @@ integration to register for a new account.
 
 exports[`change settings: enable facebook configure box 1`] = `
 <div
-  className="ConfigBox-root"
+  className="Box-root ConfigBox-root"
   data-testid="configure-auth-facebook-container"
 >
   <div
     className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
-      <span>
+      <h2
+        className="Header-root"
+      >
         Login with Facebook
-      </span>
+      </h2>
     </div>
     <div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <div
           className="CheckBox-root"
@@ -531,10 +564,10 @@ exports[`change settings: enable facebook configure box 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
     >
       <p
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="FormFieldDescription-root"
       >
         To enable the integration with Facebook Authentication,
 you need to create and set up a web application.
@@ -554,14 +587,11 @@ For more information visit:
         </a>
         .
       </p>
-      <hr
-        className="HorizontalRule-root"
-      />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Redirect URI
         </label>
@@ -581,8 +611,8 @@ For more information visit:
             />
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-            data-color="primary"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+            data-color="default"
             data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
@@ -602,38 +632,42 @@ For more information visit:
         className="HorizontalRule-root"
       />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client ID
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.facebook.clientID"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value="myClientID"
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={false}
+              name="auth.integrations.facebook.clientID"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value="myClientID"
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client secret
         </label>
@@ -677,10 +711,10 @@ For more information visit:
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           <span>
             Use Facebook login on
@@ -744,21 +778,25 @@ For more information visit:
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-        >
-          Registration
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          Allow users that have not signed up before with this authentication
-integration to register for a new account.
-        </p>
         <div
-          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+        >
+          <label
+            className="Label-root"
+          >
+            Registration
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            Allow users that have not signed up before with this authentication
+integration to register for a new account.
+          </p>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
         >
           <div
             className="CheckBox-root"
@@ -795,20 +833,22 @@ integration to register for a new account.
 
 exports[`change settings: enable oidc configure box 1`] = `
 <div
-  className="ConfigBox-root"
+  className="Box-root ConfigBox-root"
   data-testid="configure-auth-oidc-container"
 >
   <div
     className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
-      <span>
+      <h2
+        className="Header-root"
+      >
         Login with OpenID Connect
-      </span>
+      </h2>
     </div>
     <div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <div
           className="CheckBox-root"
@@ -843,10 +883,10 @@ exports[`change settings: enable oidc configure box 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
     >
       <p
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="FormFieldDescription-root"
       >
         To learn more: 
         <a
@@ -863,14 +903,11 @@ exports[`change settings: enable oidc configure box 1`] = `
           </i>
         </a>
       </p>
-      <hr
-        className="HorizontalRule-root"
-      />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Redirect URI
         </label>
@@ -890,8 +927,8 @@ exports[`change settings: enable oidc configure box 1`] = `
             />
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-            data-color="primary"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+            data-color="default"
             data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
@@ -911,72 +948,84 @@ exports[`change settings: enable oidc configure box 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-        >
-          Provider name
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          The provider of the OpenID Connect integration. This will be used when the name of the provider
-needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
-        </p>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.oidc.name"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <label
+            className="Label-root"
+          >
+            Provider name
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            The provider of the OpenID Connect integration. This will be used when the name of the provider
+needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
+          </p>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+        >
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={false}
+              name="auth.integrations.oidc.name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client ID
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.oidc.clientID"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={false}
+              name="auth.integrations.oidc.clientID"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client secret
         </label>
@@ -1020,19 +1069,23 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        <div
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
         >
-          Issuer
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          After entering your Issuer information, click the Discover button to have Coral complete
+          <label
+            className="Label-root"
+          >
+            Issuer
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
-        </p>
+          </p>
+        </div>
         <div
           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
@@ -1056,8 +1109,8 @@ the remaining fields. You may also enter the information manually.
             />
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-            data-color="primary"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+            data-color="default"
             data-variant="filled"
             disabled={false}
             id="configure-auth-oidc-discover"
@@ -1074,94 +1127,106 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Authorization URL
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.oidc.authorizationURL"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={false}
+              name="auth.integrations.oidc.authorizationURL"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Token URL
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.oidc.tokenURL"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={false}
+              name="auth.integrations.oidc.tokenURL"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           JWKS URI
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
-            disabled={false}
-            name="auth.integrations.oidc.jwksURI"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <div
+            className="TextField-root TextField-fullWidth"
+          >
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorRegular"
+              disabled={false}
+              name="auth.integrations.oidc.jwksURI"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           <span>
             Use OpenID Connect login on
@@ -1225,21 +1290,25 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-        >
-          Registration
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          Allow users that have not signed up before with this authentication
-integration to register for a new account.
-        </p>
         <div
-          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+        >
+          <label
+            className="Label-root"
+          >
+            Registration
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            Allow users that have not signed up before with this authentication
+integration to register for a new account.
+          </p>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
         >
           <div
             className="CheckBox-root"
@@ -1276,20 +1345,22 @@ integration to register for a new account.
 
 exports[`change settings: oidc validation errors 1`] = `
 <div
-  className="ConfigBox-root"
+  className="Box-root ConfigBox-root"
   data-testid="configure-auth-oidc-container"
 >
   <div
     className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
   >
     <div>
-      <span>
+      <h2
+        className="Header-root"
+      >
         Login with OpenID Connect
-      </span>
+      </h2>
     </div>
     <div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <div
           className="CheckBox-root"
@@ -1324,10 +1395,10 @@ exports[`change settings: oidc validation errors 1`] = `
     className="ConfigBox-content"
   >
     <div
-      className="Box-root HorizontalGutter-root HorizontalGutter-double"
+      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
     >
       <p
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+        className="FormFieldDescription-root"
       >
         To learn more: 
         <a
@@ -1344,14 +1415,11 @@ exports[`change settings: oidc validation errors 1`] = `
           </i>
         </a>
       </p>
-      <hr
-        className="HorizontalRule-root"
-      />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Redirect URI
         </label>
@@ -1371,8 +1439,8 @@ exports[`change settings: oidc validation errors 1`] = `
             />
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-            data-color="primary"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+            data-color="default"
             data-variant="filled"
             onBlur={[Function]}
             onClick={[Function]}
@@ -1392,98 +1460,110 @@ exports[`change settings: oidc validation errors 1`] = `
         className="HorizontalRule-root"
       />
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-        >
-          Provider name
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          The provider of the OpenID Connect integration. This will be used when the name of the provider
-needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
-        </p>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorError"
-            disabled={false}
-            name="auth.integrations.oidc.name"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
+          <label
+            className="Label-root"
+          >
+            Provider name
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            The provider of the OpenID Connect integration. This will be used when the name of the provider
+needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
+          </p>
         </div>
         <div
-          className="Message-root Message-colorError"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <i
-            aria-hidden="true"
-            className="Icon-root Icon-sm MessageIcon-root"
+          <div
+            className="TextField-root TextField-fullWidth"
           >
-            warning
-          </i>
-          <span>
-            This field is required.
-          </span>
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorError"
+              disabled={false}
+              name="auth.integrations.oidc.name"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="Message-root Message-colorError Message-fullWidth"
+          >
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-sm MessageIcon-root"
+            >
+              warning
+            </i>
+            <span>
+              This field is required.
+            </span>
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client ID
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorError"
-            disabled={false}
-            name="auth.integrations.oidc.clientID"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          className="Message-root Message-colorError ValidationMessage-root"
-        >
-          <i
-            aria-hidden="true"
-            className="Icon-root Icon-sm MessageIcon-root"
+          <div
+            className="TextField-root TextField-fullWidth"
           >
-            warning
-          </i>
-          <span>
-            This field is required.
-          </span>
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorError"
+              disabled={false}
+              name="auth.integrations.oidc.clientID"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="Message-root Message-colorError Message-fullWidth"
+          >
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-sm MessageIcon-root"
+            >
+              warning
+            </i>
+            <span>
+              This field is required.
+            </span>
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Client secret
         </label>
@@ -1526,7 +1606,7 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           </div>
         </div>
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <i
             aria-hidden="true"
@@ -1540,19 +1620,23 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+        <div
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
         >
-          Issuer
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          After entering your Issuer information, click the Discover button to have Coral complete
+          <label
+            className="Label-root"
+          >
+            Issuer
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
-        </p>
+          </p>
+        </div>
         <div
           className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
         >
@@ -1576,8 +1660,8 @@ the remaining fields. You may also enter the information manually.
             />
           </div>
           <button
-            className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-            data-color="primary"
+            className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+            data-color="default"
             data-variant="filled"
             disabled={false}
             id="configure-auth-oidc-discover"
@@ -1593,7 +1677,7 @@ the remaining fields. You may also enter the information manually.
           </button>
         </div>
         <div
-          className="Message-root Message-colorError"
+          className="Message-root Message-colorError Message-fullWidth"
         >
           <i
             aria-hidden="true"
@@ -1607,133 +1691,145 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Authorization URL
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorError"
-            disabled={false}
-            name="auth.integrations.oidc.authorizationURL"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          className="Message-root Message-colorError"
-        >
-          <i
-            aria-hidden="true"
-            className="Icon-root Icon-sm MessageIcon-root"
+          <div
+            className="TextField-root TextField-fullWidth"
           >
-            warning
-          </i>
-          <span>
-            This field is required.
-          </span>
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorError"
+              disabled={false}
+              name="auth.integrations.oidc.authorizationURL"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="Message-root Message-colorError Message-fullWidth"
+          >
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-sm MessageIcon-root"
+            >
+              warning
+            </i>
+            <span>
+              This field is required.
+            </span>
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           Token URL
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorError"
-            disabled={false}
-            name="auth.integrations.oidc.tokenURL"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          className="Message-root Message-colorError"
-        >
-          <i
-            aria-hidden="true"
-            className="Icon-root Icon-sm MessageIcon-root"
+          <div
+            className="TextField-root TextField-fullWidth"
           >
-            warning
-          </i>
-          <span>
-            This field is required.
-          </span>
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorError"
+              disabled={false}
+              name="auth.integrations.oidc.tokenURL"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="Message-root Message-colorError Message-fullWidth"
+          >
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-sm MessageIcon-root"
+            >
+              warning
+            </i>
+            <span>
+              This field is required.
+            </span>
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           JWKS URI
         </label>
         <div
-          className="TextField-root TextField-fullWidth"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          <input
-            autoCapitalize="off"
-            autoComplete="off"
-            autoCorrect="off"
-            className="TextField-input TextField-colorError"
-            disabled={false}
-            name="auth.integrations.oidc.jwksURI"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder=""
-            spellCheck={false}
-            type="text"
-            value=""
-          />
-        </div>
-        <div
-          className="Message-root Message-colorError"
-        >
-          <i
-            aria-hidden="true"
-            className="Icon-root Icon-sm MessageIcon-root"
+          <div
+            className="TextField-root TextField-fullWidth"
           >
-            warning
-          </i>
-          <span>
-            This field is required.
-          </span>
+            <input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              className="TextField-input TextField-colorError"
+              disabled={false}
+              name="auth.integrations.oidc.jwksURI"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder=""
+              spellCheck={false}
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            className="Message-root Message-colorError Message-fullWidth"
+          >
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-sm MessageIcon-root"
+            >
+              warning
+            </i>
+            <span>
+              This field is required.
+            </span>
+          </div>
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
         <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+          className="Label-root"
         >
           <span>
             Use OpenID Connect login on
@@ -1797,21 +1893,25 @@ the remaining fields. You may also enter the information manually.
         </div>
       </div>
       <div
-        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
       >
-        <label
-          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-        >
-          Registration
-        </label>
-        <p
-          className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-        >
-          Allow users that have not signed up before with this authentication
-integration to register for a new account.
-        </p>
         <div
-          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+          className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+        >
+          <label
+            className="Label-root"
+          >
+            Registration
+          </label>
+          <p
+            className="HelperText-root"
+          >
+            Allow users that have not signed up before with this authentication
+integration to register for a new account.
+          </p>
+        </div>
+        <div
+          className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
         >
           <div
             className="CheckBox-root"
@@ -1861,11 +1961,11 @@ exports[`prevents admin lock out 1`] = `
 
 exports[`regenerate sso key 1`] = `
 <div
-  className="Box-root HorizontalGutter-root FormField-root SSOKeyField-root HorizontalGutter-half"
+  className="Box-root HorizontalGutter-root FormField-root SSOKeyField-root HorizontalGutter-spacing-2"
   data-testid="configure-auth-sso-key"
 >
   <label
-    className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+    className="Label-root"
   >
     Key
   </label>
@@ -1905,7 +2005,7 @@ exports[`regenerate sso key 1`] = `
     </div>
   </div>
   <p
-    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-keyGenerated"
+    className="SSOKeyField-keyGenerated HelperText-root"
   >
     KEY GENERATED AT:
 11/12/2018, 11:26 PM
@@ -1923,15 +2023,15 @@ exports[`regenerate sso key 1`] = `
         warning
       </i>
       <p
-        className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary SSOKeyField-warn"
+        className="HelperText-root"
       >
         When regenerating a key, tokens signed with the previous key will be honored for 30 days.
       </p>
     </div>
   </div>
   <button
-    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled SSOKeyField-regenerateButton"
-    data-color="primary"
+    className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase SSOKeyField-regenerateButton"
+    data-color="default"
     data-variant="filled"
     disabled={false}
     id="configure-auth-sso-regenerate"
@@ -2043,8 +2143,8 @@ exports[`renders configure auth 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
-            data-color="success"
+            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+            data-color="default"
             data-testid="configure-sideBar-saveChanges"
             data-variant="filled"
             disabled={true}
@@ -2067,47 +2167,54 @@ exports[`renders configure auth 1`] = `
         >
           <div>
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+              className="Box-root ConfigBox-root"
             >
-              <legend
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-              >
-                Commenter account management features
-              </legend>
               <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
               >
-                <p
-                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                <div>
+                  <legend
+                    className="Header-root"
+                  >
+                    Commenter account management features
+                  </legend>
+                </div>
+                <div />
+              </div>
+              <div
+                className="ConfigBox-content"
+              >
+                <div
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                 >
-                  You can enable and disable certain features for your commenters to use
+                  <p
+                    className="FormFieldDescription-root"
+                  >
+                    You can enable and disable certain features for your commenters to use
 within their Profile. These features also assist towards GDPR
 compliance.
-                </p>
-                <fieldset
-                  className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-full"
-                >
-                  <h1
-                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary"
-                  >
-                    Allow users to:
-                  </h1>
+                  </p>
                   <fieldset
-                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                   >
+                    <p
+                      className="FormFieldDescription-root"
+                    >
+                      Allow users to:
+                    </p>
                     <div
                       className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                       >
                         <legend
-                          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                          className="Label-root"
                         >
                           Change their usernames
                         </legend>
                         <p
-                          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                          className="HelperText-root"
                         >
                           Usernames can be changed once every 14 days.
                         </p>
@@ -2166,26 +2273,22 @@ compliance.
                       </div>
                     </div>
                   </fieldset>
-                </fieldset>
-                <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
-                >
                   <fieldset
-                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                   >
                     <div
                       className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                       >
                         <legend
-                          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                          className="Label-root"
                         >
                           Download their comments
                         </legend>
                         <p
-                          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                          className="HelperText-root"
                         >
                           Commenters can download a csv of their comment history.
                         </p>
@@ -2244,26 +2347,22 @@ compliance.
                       </div>
                     </div>
                   </fieldset>
-                </div>
-                <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-double"
-                >
                   <fieldset
-                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                   >
                     <div
                       className="Box-root Flex-root Flex-flex Flex-justifySpaceBetween"
                     >
                       <div
-                        className="Box-root HorizontalGutter-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                       >
                         <legend
-                          className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                          className="Label-root"
                         >
                           Delete their account
                         </legend>
                         <p
-                          className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                          className="HelperText-root"
                         >
                           Removes all of their comment data, username, and email
 address from the site and the database.
@@ -2332,107 +2431,120 @@ address from the site and the database.
             data-testid="configure-authContainer"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root ConfigBox-root"
             >
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
               >
-                <h1
-                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                >
-                  Session settings
-                </h1>
-              </div>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Session duration
-                </legend>
-                <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
-                >
-                  <div
-                    className="TextField-root DurationField-value"
+                <div>
+                  <h2
+                    className="Header-root"
                   >
-                    <input
-                      aria-label="value"
-                      autoCapitalize="off"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      className="TextField-input TextField-colorRegular TextField-textAlignCenter"
-                      disabled={false}
-                      name="auth.sessionDuration-value"
-                      onChange={[Function]}
-                      placeholder=""
-                      spellCheck={false}
-                      type="text"
-                      value="90"
-                    />
-                  </div>
-                  <span
-                    className="SelectField-root"
-                  >
-                    <select
-                      aria-label="unit"
-                      className="SelectField-select DurationField-select"
-                      disabled={false}
-                      name="auth.sessionDuration-unit"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="86400"
-                    >
-                      <option
-                        value="3600"
-                      >
-                        Hours
-                      </option>
-                      <option
-                        value="86400"
-                      >
-                        Days
-                      </option>
-                      <option
-                        value="604800"
-                      >
-                        Weeks
-                      </option>
-                    </select>
-                    <span
-                      aria-hidden={true}
-                      className="SelectField-afterWrapper"
-                    >
-                      <i
-                        aria-hidden="true"
-                        className="Icon-root Icon-sm"
-                      >
-                        expand_more
-                      </i>
-                    </span>
-                  </span>
+                    Session settings
+                  </h2>
                 </div>
-              </fieldset>
+                <div />
+              </div>
+              <div
+                className="ConfigBox-content"
+              >
+                <div
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+                >
+                  <fieldset
+                    className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                  >
+                    <legend
+                      className="Label-root"
+                    >
+                      Session duration
+                    </legend>
+                    <div
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+                    >
+                      <div
+                        className="TextField-root DurationField-value"
+                      >
+                        <input
+                          aria-label="value"
+                          autoCapitalize="off"
+                          autoComplete="off"
+                          autoCorrect="off"
+                          className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                          disabled={false}
+                          name="auth.sessionDuration-value"
+                          onChange={[Function]}
+                          placeholder=""
+                          spellCheck={false}
+                          type="text"
+                          value="90"
+                        />
+                      </div>
+                      <span
+                        className="SelectField-root"
+                      >
+                        <select
+                          aria-label="unit"
+                          className="SelectField-select DurationField-select"
+                          disabled={false}
+                          name="auth.sessionDuration-unit"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          value="86400"
+                        >
+                          <option
+                            value="3600"
+                          >
+                            Hours
+                          </option>
+                          <option
+                            value="86400"
+                          >
+                            Days
+                          </option>
+                          <option
+                            value="604800"
+                          >
+                            Weeks
+                          </option>
+                        </select>
+                        <span
+                          aria-hidden={true}
+                          className="SelectField-afterWrapper"
+                        >
+                          <i
+                            aria-hidden="true"
+                            className="Icon-root Icon-sm"
+                          >
+                            expand_more
+                          </i>
+                        </span>
+                      </span>
+                    </div>
+                  </fieldset>
+                </div>
+              </div>
             </div>
             <div
               className="Box-root HorizontalGutter-root HorizontalGutter-double"
             >
               <div
-                className="ConfigBox-root"
+                className="Box-root ConfigBox-root"
               >
                 <div
                   className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
                 >
                   <div>
-                    <span>
+                    <h2
+                      className="Header-root"
+                    >
                       Login with email authentication
-                    </span>
+                    </h2>
                   </div>
                   <div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <div
                         className="CheckBox-root"
@@ -2467,13 +2579,13 @@ address from the site and the database.
                   className="ConfigBox-content"
                 >
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-double"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                   >
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         <span>
                           Use email authentication login on
@@ -2537,21 +2649,25 @@ address from the site and the database.
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Registration
-                      </label>
-                      <p
-                        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                      >
-                        Allow users that have not signed up before with this authentication
-integration to register for a new account.
-                      </p>
                       <div
-                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                      >
+                        <label
+                          className="Label-root"
+                        >
+                          Registration
+                        </label>
+                        <p
+                          className="HelperText-root"
+                        >
+                          Allow users that have not signed up before with this authentication
+integration to register for a new account.
+                        </p>
+                      </div>
+                      <div
+                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                       >
                         <div
                           className="CheckBox-root"
@@ -2585,20 +2701,22 @@ integration to register for a new account.
                 </div>
               </div>
               <div
-                className="ConfigBox-root"
+                className="Box-root ConfigBox-root"
                 data-testid="configure-auth-oidc-container"
               >
                 <div
                   className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
                 >
                   <div>
-                    <span>
+                    <h2
+                      className="Header-root"
+                    >
                       Login with OpenID Connect
-                    </span>
+                    </h2>
                   </div>
                   <div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <div
                         className="CheckBox-root"
@@ -2633,10 +2751,10 @@ integration to register for a new account.
                   className="ConfigBox-content"
                 >
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-double"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                   >
                     <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                      className="FormFieldDescription-root"
                     >
                       To learn more: 
                       <a
@@ -2653,14 +2771,11 @@ integration to register for a new account.
                         </i>
                       </a>
                     </p>
-                    <hr
-                      className="HorizontalRule-root"
-                    />
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Redirect URI
                       </label>
@@ -2680,8 +2795,8 @@ integration to register for a new account.
                           />
                         </div>
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-                          data-color="primary"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+                          data-color="default"
                           data-variant="filled"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -2701,72 +2816,84 @@ integration to register for a new account.
                       className="HorizontalRule-root"
                     />
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Provider name
-                      </label>
-                      <p
-                        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                      >
-                        The provider of the OpenID Connect integration. This will be used when the name of the provider
-needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
-                      </p>
                       <div
-                        className="TextField-root TextField-fullWidth"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                       >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className="TextField-input TextField-colorRegular"
-                          disabled={true}
-                          name="auth.integrations.oidc.name"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="text"
-                          value=""
-                        />
+                        <label
+                          className="Label-root"
+                        >
+                          Provider name
+                        </label>
+                        <p
+                          className="HelperText-root"
+                        >
+                          The provider of the OpenID Connect integration. This will be used when the name of the provider
+needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
+                        </p>
+                      </div>
+                      <div
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                      >
+                        <div
+                          className="TextField-root TextField-fullWidth"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="TextField-input TextField-colorRegular"
+                            disabled={true}
+                            name="auth.integrations.oidc.name"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            placeholder=""
+                            spellCheck={false}
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Client ID
                       </label>
                       <div
-                        className="TextField-root TextField-fullWidth"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                       >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className="TextField-input TextField-colorRegular"
-                          disabled={true}
-                          name="auth.integrations.oidc.clientID"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="text"
-                          value=""
-                        />
+                        <div
+                          className="TextField-root TextField-fullWidth"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="TextField-input TextField-colorRegular"
+                            disabled={true}
+                            name="auth.integrations.oidc.clientID"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            placeholder=""
+                            spellCheck={false}
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Client secret
                       </label>
@@ -2810,19 +2937,23 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      <div
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                       >
-                        Issuer
-                      </label>
-                      <p
-                        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                      >
-                        After entering your Issuer information, click the Discover button to have Coral complete
+                        <label
+                          className="Label-root"
+                        >
+                          Issuer
+                        </label>
+                        <p
+                          className="HelperText-root"
+                        >
+                          After entering your Issuer information, click the Discover button to have Coral complete
 the remaining fields. You may also enter the information manually.
-                      </p>
+                        </p>
+                      </div>
                       <div
                         className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
                       >
@@ -2846,8 +2977,8 @@ the remaining fields. You may also enter the information manually.
                           />
                         </div>
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled Button-disabled"
-                          data-color="primary"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+                          data-color="default"
                           data-variant="filled"
                           disabled={true}
                           id="configure-auth-oidc-discover"
@@ -2864,94 +2995,106 @@ the remaining fields. You may also enter the information manually.
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Authorization URL
                       </label>
                       <div
-                        className="TextField-root TextField-fullWidth"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                       >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className="TextField-input TextField-colorRegular"
-                          disabled={true}
-                          name="auth.integrations.oidc.authorizationURL"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="text"
-                          value=""
-                        />
+                        <div
+                          className="TextField-root TextField-fullWidth"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="TextField-input TextField-colorRegular"
+                            disabled={true}
+                            name="auth.integrations.oidc.authorizationURL"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            placeholder=""
+                            spellCheck={false}
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Token URL
                       </label>
                       <div
-                        className="TextField-root TextField-fullWidth"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                       >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className="TextField-input TextField-colorRegular"
-                          disabled={true}
-                          name="auth.integrations.oidc.tokenURL"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="text"
-                          value=""
-                        />
+                        <div
+                          className="TextField-root TextField-fullWidth"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="TextField-input TextField-colorRegular"
+                            disabled={true}
+                            name="auth.integrations.oidc.tokenURL"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            placeholder=""
+                            spellCheck={false}
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         JWKS URI
                       </label>
                       <div
-                        className="TextField-root TextField-fullWidth"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                       >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className="TextField-input TextField-colorRegular"
-                          disabled={true}
-                          name="auth.integrations.oidc.jwksURI"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="text"
-                          value=""
-                        />
+                        <div
+                          className="TextField-root TextField-fullWidth"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="TextField-input TextField-colorRegular"
+                            disabled={true}
+                            name="auth.integrations.oidc.jwksURI"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            placeholder=""
+                            spellCheck={false}
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         <span>
                           Use OpenID Connect login on
@@ -3015,21 +3158,25 @@ the remaining fields. You may also enter the information manually.
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Registration
-                      </label>
-                      <p
-                        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                      >
-                        Allow users that have not signed up before with this authentication
-integration to register for a new account.
-                      </p>
                       <div
-                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                      >
+                        <label
+                          className="Label-root"
+                        >
+                          Registration
+                        </label>
+                        <p
+                          className="HelperText-root"
+                        >
+                          Allow users that have not signed up before with this authentication
+integration to register for a new account.
+                        </p>
+                      </div>
+                      <div
+                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                       >
                         <div
                           className="CheckBox-root"
@@ -3063,19 +3210,21 @@ integration to register for a new account.
                 </div>
               </div>
               <div
-                className="ConfigBox-root"
+                className="Box-root ConfigBox-root"
               >
                 <div
                   className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
                 >
                   <div>
-                    <span>
+                    <h2
+                      className="Header-root"
+                    >
                       Login with Single Sign On
-                    </span>
+                    </h2>
                   </div>
                   <div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <div
                         className="CheckBox-root"
@@ -3110,14 +3259,14 @@ integration to register for a new account.
                   className="ConfigBox-content"
                 >
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-double"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                   >
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root SSOKeyField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root SSOKeyField-root HorizontalGutter-spacing-2"
                       data-testid="configure-auth-sso-key"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Key
                       </label>
@@ -3156,7 +3305,7 @@ integration to register for a new account.
                         </div>
                       </div>
                       <p
-                        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary SSOKeyField-keyGenerated"
+                        className="SSOKeyField-keyGenerated HelperText-root"
                       >
                         KEY GENERATED AT:
 Invalid Date
@@ -3174,15 +3323,15 @@ Invalid Date
                             warning
                           </i>
                           <p
-                            className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary SSOKeyField-warn"
+                            className="HelperText-root"
                           >
                             When regenerating a key, tokens signed with the previous key will be honored for 30 days.
                           </p>
                         </div>
                       </div>
                       <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled Button-disabled SSOKeyField-regenerateButton"
-                        data-color="primary"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase Button-disabled SSOKeyField-regenerateButton"
+                        data-color="default"
                         data-variant="filled"
                         disabled={true}
                         id="configure-auth-sso-regenerate"
@@ -3198,10 +3347,10 @@ Invalid Date
                       </button>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         <span>
                           Use Single Sign On login on
@@ -3265,21 +3414,25 @@ Invalid Date
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Registration
-                      </label>
-                      <p
-                        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                      >
-                        Allow users that have not signed up before with this authentication
-integration to register for a new account.
-                      </p>
                       <div
-                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                      >
+                        <label
+                          className="Label-root"
+                        >
+                          Registration
+                        </label>
+                        <p
+                          className="HelperText-root"
+                        >
+                          Allow users that have not signed up before with this authentication
+integration to register for a new account.
+                        </p>
+                      </div>
+                      <div
+                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                       >
                         <div
                           className="CheckBox-root"
@@ -3313,19 +3466,21 @@ integration to register for a new account.
                 </div>
               </div>
               <div
-                className="ConfigBox-root"
+                className="Box-root ConfigBox-root"
               >
                 <div
                   className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
                 >
                   <div>
-                    <span>
+                    <h2
+                      className="Header-root"
+                    >
                       Login with Google
-                    </span>
+                    </h2>
                   </div>
                   <div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <div
                         className="CheckBox-root"
@@ -3360,10 +3515,10 @@ integration to register for a new account.
                   className="ConfigBox-content"
                 >
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-double"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                   >
                     <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                      className="FormFieldDescription-root"
                     >
                       To enable the integration with Google Authentication you need
 to create and set up a web application. For more information visit:
@@ -3383,14 +3538,11 @@ to create and set up a web application. For more information visit:
                       </a>
                       .
                     </p>
-                    <hr
-                      className="HorizontalRule-root"
-                    />
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Redirect URI
                       </label>
@@ -3410,8 +3562,8 @@ to create and set up a web application. For more information visit:
                           />
                         </div>
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-                          data-color="primary"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+                          data-color="default"
                           data-variant="filled"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -3431,38 +3583,42 @@ to create and set up a web application. For more information visit:
                       className="HorizontalRule-root"
                     />
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Client ID
                       </label>
                       <div
-                        className="TextField-root TextField-fullWidth"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                       >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className="TextField-input TextField-colorRegular"
-                          disabled={true}
-                          name="auth.integrations.google.clientID"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="text"
-                          value=""
-                        />
+                        <div
+                          className="TextField-root TextField-fullWidth"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="TextField-input TextField-colorRegular"
+                            disabled={true}
+                            name="auth.integrations.google.clientID"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            placeholder=""
+                            spellCheck={false}
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Client secret
                       </label>
@@ -3506,10 +3662,10 @@ to create and set up a web application. For more information visit:
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         <span>
                           Use Google login on
@@ -3573,21 +3729,25 @@ to create and set up a web application. For more information visit:
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Registration
-                      </label>
-                      <p
-                        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                      >
-                        Allow users that have not signed up before with this authentication
-integration to register for a new account.
-                      </p>
                       <div
-                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                      >
+                        <label
+                          className="Label-root"
+                        >
+                          Registration
+                        </label>
+                        <p
+                          className="HelperText-root"
+                        >
+                          Allow users that have not signed up before with this authentication
+integration to register for a new account.
+                        </p>
+                      </div>
+                      <div
+                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                       >
                         <div
                           className="CheckBox-root"
@@ -3621,20 +3781,22 @@ integration to register for a new account.
                 </div>
               </div>
               <div
-                className="ConfigBox-root"
+                className="Box-root ConfigBox-root"
                 data-testid="configure-auth-facebook-container"
               >
                 <div
                   className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
                 >
                   <div>
-                    <span>
+                    <h2
+                      className="Header-root"
+                    >
                       Login with Facebook
-                    </span>
+                    </h2>
                   </div>
                   <div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <div
                         className="CheckBox-root"
@@ -3669,10 +3831,10 @@ integration to register for a new account.
                   className="ConfigBox-content"
                 >
                   <div
-                    className="Box-root HorizontalGutter-root HorizontalGutter-double"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
                   >
                     <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                      className="FormFieldDescription-root"
                     >
                       To enable the integration with Facebook Authentication,
 you need to create and set up a web application.
@@ -3692,14 +3854,11 @@ For more information visit:
                       </a>
                       .
                     </p>
-                    <hr
-                      className="HorizontalRule-root"
-                    />
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Redirect URI
                       </label>
@@ -3719,8 +3878,8 @@ For more information visit:
                           />
                         </div>
                         <button
-                          className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantFilled"
-                          data-color="primary"
+                          className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
+                          data-color="default"
                           data-variant="filled"
                           onBlur={[Function]}
                           onClick={[Function]}
@@ -3740,38 +3899,42 @@ For more information visit:
                       className="HorizontalRule-root"
                     />
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Client ID
                       </label>
                       <div
-                        className="TextField-root TextField-fullWidth"
+                        className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                       >
-                        <input
-                          autoCapitalize="off"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className="TextField-input TextField-colorRegular"
-                          disabled={true}
-                          name="auth.integrations.facebook.clientID"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          placeholder=""
-                          spellCheck={false}
-                          type="text"
-                          value=""
-                        />
+                        <div
+                          className="TextField-root TextField-fullWidth"
+                        >
+                          <input
+                            autoCapitalize="off"
+                            autoComplete="off"
+                            autoCorrect="off"
+                            className="TextField-input TextField-colorRegular"
+                            disabled={true}
+                            name="auth.integrations.facebook.clientID"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            placeholder=""
+                            spellCheck={false}
+                            type="text"
+                            value=""
+                          />
+                        </div>
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         Client secret
                       </label>
@@ -3815,10 +3978,10 @@ For more information visit:
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
                       <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                        className="Label-root"
                       >
                         <span>
                           Use Facebook login on
@@ -3882,21 +4045,25 @@ For more information visit:
                       </div>
                     </div>
                     <div
-                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                      className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Registration
-                      </label>
-                      <p
-                        className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                      >
-                        Allow users that have not signed up before with this authentication
-integration to register for a new account.
-                      </p>
                       <div
-                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                        className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                      >
+                        <label
+                          className="Label-root"
+                        >
+                          Registration
+                        </label>
+                        <p
+                          className="HelperText-root"
+                        >
+                          Allow users that have not signed up before with this authentication
+integration to register for a new account.
+                        </p>
+                      </div>
+                      <div
+                        className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                       >
                         <div
                           className="CheckBox-root"
diff --git a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
index f2df78eff..f1fba6ba2 100644
--- a/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
@@ -95,8 +95,8 @@ exports[`renders configure general 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
-            data-color="success"
+            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+            data-color="default"
             data-testid="configure-sideBar-saveChanges"
             data-variant="filled"
             disabled={true}
@@ -119,765 +119,865 @@ exports[`renders configure general 1`] = `
           data-testid="configure-generalContainer"
         >
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-locale-locale"
+                >
+                  Language
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
             >
-              <label
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                htmlFor="configure-locale-locale"
-              >
-                Language
-              </label>
               <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                <p
-                  className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
+                <div
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                 >
-                  Choose the language for your Coral community.
-                </p>
-                <span
-                  className="SelectField-root"
-                >
-                  <select
-                    className="SelectField-select"
-                    disabled={false}
-                    id="configure-locale-locale"
-                    name="locale"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    value="en-US"
+                  <p
+                    className="FormFieldDescription-root"
                   >
-                    <option
+                    Choose the language for your Coral community.
+                  </p>
+                  <span
+                    className="SelectField-root"
+                  >
+                    <select
+                      className="SelectField-select"
+                      disabled={false}
+                      id="configure-locale-locale"
+                      name="locale"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
                       value="en-US"
                     >
-                      English
-                    </option>
-                    <option
-                      value="pt-BR"
+                      <option
+                        value="en-US"
+                      >
+                        English
+                      </option>
+                      <option
+                        value="pt-BR"
+                      >
+                        Português brasileiro
+                      </option>
+                      <option
+                        value="es"
+                      >
+                        Español
+                      </option>
+                      <option
+                        value="de"
+                      >
+                        Deutsch
+                      </option>
+                      <option
+                        value="nl-NL"
+                      >
+                        Nederlands
+                      </option>
+                      <option
+                        value="da"
+                      >
+                        Dansk
+                      </option>
+                    </select>
+                    <span
+                      aria-hidden={true}
+                      className="SelectField-afterWrapper"
                     >
-                      Português brasileiro
-                    </option>
-                    <option
-                      value="es"
-                    >
-                      Español
-                    </option>
-                    <option
-                      value="de"
-                    >
-                      Deutsch
-                    </option>
-                    <option
-                      value="nl-NL"
-                    >
-                      Nederlands
-                    </option>
-                    <option
-                      value="da"
-                    >
-                      Dansk
-                    </option>
-                  </select>
-                  <span
-                    aria-hidden={true}
-                    className="SelectField-afterWrapper"
-                  >
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-sm"
-                    >
-                      expand_more
-                    </i>
+                      <i
+                        aria-hidden="true"
+                        className="Icon-root Icon-sm"
+                      >
+                        expand_more
+                      </i>
+                    </span>
                   </span>
-                </span>
+                </div>
               </div>
             </div>
           </div>
           <fieldset
-            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Sitewide commenting
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Sitewide commenting
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                Open or close comment streams for new comments sitewide.
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Open or close comment streams for new comments sitewide.
 When new comments are turned off, new comments cannot be
 submitted, but existing comments can continue to receive
 reactions, be reported, and be shared.
-              </p>
-              <fieldset
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                </p>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  Enable new comments sitewide
-                </legend>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  <legend
+                    className="Label-root"
                   >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="disableCommenting.enabled-true"
-                      name="disableCommenting.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="disableCommenting.enabled-true"
+                    Enable new comments sitewide
+                  </legend>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        On - Comment streams opened for new comments
-                      </span>
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="disableCommenting.enabled-true"
+                        name="disableCommenting.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="disableCommenting.enabled-true"
+                      >
+                        <span>
+                          On - Comment streams opened for new comments
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="disableCommenting.enabled-false"
+                        name="disableCommenting.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="disableCommenting.enabled-false"
+                      >
+                        <span>
+                          Off - Comment streams closed for new comments
+                        </span>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <label
+                      className="Label-root"
+                      htmlFor="configure-general-sitewideCommenting-message"
+                    >
+                      Sitewide closed comments message
                     </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Write a message that will be displayed when comment streams are closed sitewide
+                    </p>
                   </div>
                   <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    className="MarkdownEditor-wrapper"
                   >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="disableCommenting.enabled-false"
-                      name="disableCommenting.enabled"
+                    <textarea
+                      id="configure-general-sitewideCommenting-message"
+                      name="disableCommenting.message"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
-                      type="radio"
-                      value={true}
+                      value="Comments are closed on this story."
                     />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="disableCommenting.enabled-false"
-                    >
-                      <span>
-                        Off - Comment streams closed for new comments
-                      </span>
-                    </label>
                   </div>
                 </div>
               </fieldset>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-general-sitewideCommenting-message"
-                >
-                  Sitewide closed comments message
-                </label>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                >
-                  Write a message that will be displayed when comment streams are closed sitewide
-                </p>
-              </div>
-              <div
-                className="MarkdownEditor-wrapper"
-              >
-                <textarea
-                  id="configure-general-sitewideCommenting-message"
-                  name="disableCommenting.message"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value="Comments are closed on this story."
-                />
-              </div>
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Community guidelines summary
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
+              <div>
                 <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Show community guidelines summary
-                </legend>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="communityGuidelines.enabled-true"
-                      name="communityGuidelines.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="communityGuidelines.enabled-true"
-                    >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="communityGuidelines.enabled-false"
-                      name="communityGuidelines.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="communityGuidelines.enabled-false"
-                    >
-                      <span>
-                        Off
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </fieldset>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-general-guidelines-content"
+                  className="Header-root"
                 >
                   Community guidelines summary
-                </label>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  This will appear above the comments sitewide.
+                  <legend
+                    className="Label-root"
+                  >
+                    Show community guidelines summary
+                  </legend>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="communityGuidelines.enabled-true"
+                        name="communityGuidelines.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="communityGuidelines.enabled-true"
+                      >
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="communityGuidelines.enabled-false"
+                        name="communityGuidelines.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="communityGuidelines.enabled-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <label
+                      className="Label-root"
+                      htmlFor="configure-general-guidelines-content"
+                    >
+                      Community guidelines summary
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      This will appear above the comments sitewide.
 You can format the text using Markdown.
 More information on how to use Markdown
 
-                  <a
-                    className="ExternalLink-root"
-                    href="#"
-                    rel="noopener noreferrer"
-                    target="_blank"
+                      <a
+                        className="ExternalLink-root"
+                        href="#"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        here
+                      </a>
+                      .
+                    </p>
+                  </div>
+                  <div
+                    className="MarkdownEditor-wrapper"
                   >
-                    here
-                  </a>
-                  .
-                </p>
-              </div>
-              <div
-                className="MarkdownEditor-wrapper"
-              >
-                <textarea
-                  id="configure-general-guidelines-content"
-                  name="communityGuidelines.content"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value=""
-                />
-              </div>
+                    <textarea
+                      id="configure-general-guidelines-content"
+                      name="communityGuidelines.content"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      value=""
+                    />
+                  </div>
+                </div>
+              </fieldset>
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Comment length
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Comment length
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                Set minimum and maximum comment length requirements.
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Set minimum and maximum comment length requirements.
 Blank spaces at the beginning and the end of a comment will be trimmed.
-              </p>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Limit comment length
-                </label>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="charCount.enabled-true"
-                      name="charCount.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="charCount.enabled-true"
-                    >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="charCount.enabled-false"
-                      name="charCount.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="charCount.enabled-false"
-                    >
-                      <span>
-                        Off
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-general-commentLength-min"
-                >
-                  Minimum comment length
-                </label>
+                </p>
                 <div
-                  className="TextField-root"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
-                    disabled={false}
-                    id="configure-general-commentLength-min"
-                    name="charCount.min"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="No limit"
-                    spellCheck={false}
-                    type="text"
-                    value={3}
-                  />
-                  <div
-                    className="TextField-adornment"
+                  <label
+                    className="Label-root"
                   >
-                    <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
+                    Limit comment length
+                  </label>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      Characters
-                    </p>
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="charCount.enabled-true"
+                        name="charCount.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="charCount.enabled-true"
+                      >
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="charCount.enabled-false"
+                        name="charCount.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="charCount.enabled-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-general-commentLength-max"
-                >
-                  Maximum comment length
-                </label>
                 <div
-                  className="TextField-root"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
-                    disabled={false}
-                    id="configure-general-commentLength-max"
-                    name="charCount.max"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="No limit"
-                    spellCheck={false}
-                    type="text"
-                    value={1000}
-                  />
+                  <label
+                    className="Label-root"
+                    htmlFor="configure-general-commentLength-min"
+                  >
+                    Minimum comment length
+                  </label>
                   <div
-                    className="TextField-adornment"
-                  >
-                    <p
-                      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary"
-                    >
-                      Characters
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </fieldset>
-          <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-          >
-            <h1
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Comment editing
-            </h1>
-            <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
-            >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                Set a limit on how long commenters have to edit their comments sitewide.
-Edited comments are marked as (Edited) on the comment stream and the
-moderation panel.
-              </p>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Comment edit timeframe
-                </legend>
-                <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
-                >
-                  <div
-                    className="TextField-root DurationField-value"
-                  >
-                    <input
-                      aria-label="value"
-                      autoCapitalize="off"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      className="TextField-input TextField-colorRegular TextField-textAlignCenter"
-                      disabled={false}
-                      name="editCommentWindowLength-value"
-                      onChange={[Function]}
-                      placeholder=""
-                      spellCheck={false}
-                      type="text"
-                      value="500"
-                    />
-                  </div>
-                  <span
-                    className="SelectField-root"
-                  >
-                    <select
-                      aria-label="unit"
-                      className="SelectField-select DurationField-select"
-                      disabled={false}
-                      name="editCommentWindowLength-unit"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="60"
-                    >
-                      <option
-                        value="1"
-                      >
-                        Seconds
-                      </option>
-                      <option
-                        value="60"
-                      >
-                        Minutes
-                      </option>
-                      <option
-                        value="3600"
-                      >
-                        Hours
-                      </option>
-                    </select>
-                    <span
-                      aria-hidden={true}
-                      className="SelectField-afterWrapper"
-                    >
-                      <i
-                        aria-hidden="true"
-                        className="Icon-root Icon-sm"
-                      >
-                        expand_more
-                      </i>
-                    </span>
-                  </span>
-                </div>
-              </fieldset>
-            </div>
-          </div>
-          <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-          >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Closing comment streams
-            </legend>
-            <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
-            >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                Set comment streams to close after a defined period of time after a story’s publication
-              </p>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Close comments automatically
-                </legend>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="closeCommenting.auto-true"
-                      name="closeCommenting.auto"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="closeCommenting.auto-true"
-                    >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="closeCommenting.auto-false"
-                      name="closeCommenting.auto"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="closeCommenting.auto-false"
-                    >
-                      <span>
-                        Off
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </fieldset>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Close comments after
-                </legend>
-                <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
-                >
-                  <div
-                    className="TextField-root DurationField-value"
-                  >
-                    <input
-                      aria-label="value"
-                      autoCapitalize="off"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      className="TextField-input TextField-colorRegular TextField-textAlignCenter"
-                      disabled={false}
-                      name="closeCommenting.timeout-value"
-                      onChange={[Function]}
-                      placeholder=""
-                      spellCheck={false}
-                      type="text"
-                      value="1"
-                    />
-                  </div>
-                  <span
-                    className="SelectField-root"
-                  >
-                    <select
-                      aria-label="unit"
-                      className="SelectField-select DurationField-select"
-                      disabled={false}
-                      name="closeCommenting.timeout-unit"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      value="604800"
-                    >
-                      <option
-                        value="3600"
-                      >
-                        Hour
-                      </option>
-                      <option
-                        value="86400"
-                      >
-                        Day
-                      </option>
-                      <option
-                        value="604800"
-                      >
-                        Week
-                      </option>
-                    </select>
-                    <span
-                      aria-hidden={true}
-                      className="SelectField-afterWrapper"
-                    >
-                      <i
-                        aria-hidden="true"
-                        className="Icon-root Icon-sm"
-                      >
-                        expand_more
-                      </i>
-                    </span>
-                  </span>
-                </div>
-              </fieldset>
-            </div>
-          </fieldset>
-          <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-          >
-            <label
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-              htmlFor="configure-general-closedStreamMessage-content"
-            >
-              Closed comment stream message
-            </label>
-            <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
-            >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                Write a message to appear when a story is closed for commenting.
-              </p>
-              <div
-                className="MarkdownEditor-wrapper"
-              >
-                <textarea
-                  id="configure-general-closedStreamMessage-content"
-                  name="closeCommenting.message"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  value="Comments are closed on this story."
-                />
-              </div>
-            </div>
-          </div>
-          <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
-          >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Reactions
-            </legend>
-            <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
-            >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                Allow your community to engage with one another and express themselves
-with one-click reactions. By default, Coral allows commenters to "Respect"
-each other's comments.
-              </p>
-              <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-double"
-              >
-                <div
-                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-                >
-                  <div
-                    className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                   >
                     <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                      className="TextField-root"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
+                        disabled={false}
+                        id="configure-general-commentLength-min"
+                        name="charCount.min"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder="No limit"
+                        spellCheck={false}
+                        type="text"
+                        value={3}
+                      />
+                      <div
+                        className="TextField-adornment"
                       >
-                        Reaction label
+                        <span
+                          className="TextFieldAdornment-root"
+                        >
+                          Characters
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <label
+                    className="Label-root"
+                    htmlFor="configure-general-commentLength-max"
+                  >
+                    Maximum comment length
+                  </label>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                  >
+                    <div
+                      className="TextField-root"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input CommentLengthConfig-commentLengthTextInput TextField-colorRegular TextField-textAlignCenter"
+                        disabled={false}
+                        id="configure-general-commentLength-max"
+                        name="charCount.max"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder="No limit"
+                        spellCheck={false}
+                        type="text"
+                        value={1000}
+                      />
+                      <div
+                        className="TextField-adornment"
+                      >
+                        <span
+                          className="TextFieldAdornment-root"
+                        >
+                          Characters
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+          </fieldset>
+          <div
+            className="Box-root ConfigBox-root"
+          >
+            <div
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <h2
+                  className="Header-root"
+                >
+                  Comment editing
+                </h2>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Set a limit on how long commenters have to edit their comments sitewide.
+Edited comments are marked as (Edited) on the comment stream and the
+moderation panel.
+                </p>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <legend
+                    className="Label-root"
+                  >
+                    Comment edit timeframe
+                  </legend>
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+                  >
+                    <div
+                      className="TextField-root DurationField-value"
+                    >
+                      <input
+                        aria-label="value"
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                        disabled={false}
+                        name="editCommentWindowLength-value"
+                        onChange={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value="500"
+                      />
+                    </div>
+                    <span
+                      className="SelectField-root"
+                    >
+                      <select
+                        aria-label="unit"
+                        className="SelectField-select DurationField-select"
+                        disabled={false}
+                        name="editCommentWindowLength-unit"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        value="60"
+                      >
+                        <option
+                          value="1"
+                        >
+                          Seconds
+                        </option>
+                        <option
+                          value="60"
+                        >
+                          Minutes
+                        </option>
+                        <option
+                          value="3600"
+                        >
+                          Hours
+                        </option>
+                      </select>
+                      <span
+                        aria-hidden={true}
+                        className="SelectField-afterWrapper"
+                      >
+                        <i
+                          aria-hidden="true"
+                          className="Icon-root Icon-sm"
+                        >
+                          expand_more
+                        </i>
+                      </span>
+                    </span>
+                  </div>
+                </fieldset>
+              </div>
+            </div>
+          </div>
+          <fieldset
+            className="FieldSet-root Box-root ConfigBox-root"
+          >
+            <div
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Closing comment streams
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Set comment streams to close after a defined period of time after a story’s publication
+                </p>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <legend
+                    className="Label-root"
+                  >
+                    Close comments automatically
+                  </legend>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="closeCommenting.auto-true"
+                        name="closeCommenting.auto"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="closeCommenting.auto-true"
+                      >
+                        <span>
+                          On
+                        </span>
                       </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="closeCommenting.auto-false"
+                        name="closeCommenting.auto"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="closeCommenting.auto-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
+                  </div>
+                </fieldset>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <legend
+                    className="Label-root"
+                  >
+                    Close comments after
+                  </legend>
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+                  >
+                    <div
+                      className="TextField-root DurationField-value"
+                    >
+                      <input
+                        aria-label="value"
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                        disabled={false}
+                        name="closeCommenting.timeout-value"
+                        onChange={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value="1"
+                      />
+                    </div>
+                    <span
+                      className="SelectField-root"
+                    >
+                      <select
+                        aria-label="unit"
+                        className="SelectField-select DurationField-select"
+                        disabled={false}
+                        name="closeCommenting.timeout-unit"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        value="604800"
+                      >
+                        <option
+                          value="3600"
+                        >
+                          Hour
+                        </option>
+                        <option
+                          value="86400"
+                        >
+                          Day
+                        </option>
+                        <option
+                          value="604800"
+                        >
+                          Week
+                        </option>
+                      </select>
+                      <span
+                        aria-hidden={true}
+                        className="SelectField-afterWrapper"
+                      >
+                        <i
+                          aria-hidden="true"
+                          className="Icon-root Icon-sm"
+                        >
+                          expand_more
+                        </i>
+                      </span>
+                    </span>
+                  </div>
+                </fieldset>
+              </fieldset>
+            </div>
+          </fieldset>
+          <div
+            className="Box-root ConfigBox-root"
+          >
+            <div
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-general-closedStreamMessage-content"
+                >
+                  Closed comment stream message
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <div
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Write a message to appear when a story is closed for commenting.
+                </p>
+                <div
+                  className="MarkdownEditor-wrapper"
+                >
+                  <textarea
+                    id="configure-general-closedStreamMessage-content"
+                    name="closeCommenting.message"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    value="Comments are closed on this story."
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <fieldset
+            className="FieldSet-root Box-root ConfigBox-root"
+          >
+            <div
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Reactions
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
+              >
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Allow your community to engage with one another and express themselves
+with one-click reactions. By default, Coral allows commenters to "Respect"
+each other's comments.
+                </p>
+                <div
+                  className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                  >
+                    <label
+                      className="Label-root"
+                    >
+                      Reaction label
+                    </label>
+                    <div
+                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                    >
                       <div
                         className="TextField-root TextField-fullWidth ReactionConfig-textInput"
                       >
@@ -895,48 +995,48 @@ each other's comments.
                         />
                       </div>
                     </div>
-                    <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  </div>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <p
+                      className="Label-root"
                     >
-                      <h1
-                        className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
-                      >
-                        Preview
-                      </h1>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
-                        data-color="primary"
-                        data-variant="textUnderlined"
-                        disabled={true}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          Reaction
-                        </span>
-                      </button>
-                    </div>
+                      Preview
+                    </p>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
+                      disabled={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        Reaction
+                      </span>
+                    </button>
                   </div>
                 </div>
                 <div
-                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                  className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                   >
+                    <label
+                      className="Label-root"
+                    >
+                      Active reaction label
+                    </label>
                     <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Active reaction label
-                      </label>
                       <div
                         className="TextField-root TextField-fullWidth ReactionConfig-textInput"
                       >
@@ -954,48 +1054,48 @@ each other's comments.
                         />
                       </div>
                     </div>
-                    <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  </div>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <p
+                      className="Label-root"
                     >
-                      <h1
-                        className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
-                      >
-                        Preview
-                      </h1>
-                      <button
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
-                        data-color="primary"
-                        data-variant="textUnderlined"
-                        disabled={true}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                        onTouchEnd={[Function]}
-                        type="button"
-                      >
-                        <span>
-                          reacted
-                        </span>
-                      </button>
-                    </div>
+                      Preview
+                    </p>
+                    <button
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined Button-disabled ReactionButton-readOnly ReactionConfig-reactionButton ReactionButton-button"
+                      data-color="primary"
+                      data-variant="textUnderlined"
+                      disabled={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                      onTouchEnd={[Function]}
+                      type="button"
+                    >
+                      <span>
+                        reacted
+                      </span>
+                    </button>
                   </div>
                 </div>
                 <div
-                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                  className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                   >
+                    <label
+                      className="Label-root"
+                    >
+                      Sort label
+                    </label>
                     <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Sort label
-                      </label>
                       <div
                         className="TextField-root TextField-fullWidth ReactionConfig-textInput"
                       >
@@ -1013,90 +1113,97 @@ each other's comments.
                         />
                       </div>
                     </div>
-                    <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  </div>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <p
+                      className="Label-root"
                     >
-                      <h1
-                        className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
+                      Preview
+                    </p>
+                    <div
+                      className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyCenter Flex-alignCenter gutter"
+                    >
+                      <p
+                        className="Label-root"
                       >
-                        Preview
-                      </h1>
-                      <div
-                        className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-justifyCenter Flex-alignCenter gutter"
+                        Sort by
+                      </p>
+                      <span
+                        className="SelectField-root"
                       >
-                        <p
-                          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
+                        <select
+                          className="SelectField-select"
+                          onBlur={[Function]}
+                          onFocus={[Function]}
                         >
-                          Sort by
-                        </p>
+                          <option
+                            value="Reactions"
+                          >
+                            Reactions
+                          </option>
+                           
+                        </select>
                         <span
-                          className="SelectField-root"
+                          aria-hidden={true}
+                          className="SelectField-afterWrapper"
                         >
-                          <select
-                            className="SelectField-select"
-                            onBlur={[Function]}
-                            onFocus={[Function]}
+                          <i
+                            aria-hidden="true"
+                            className="Icon-root Icon-sm"
                           >
-                            <option
-                              value="Reactions"
-                            >
-                              Reactions
-                            </option>
-                             
-                          </select>
-                          <span
-                            aria-hidden={true}
-                            className="SelectField-afterWrapper"
-                          >
-                            <i
-                              aria-hidden="true"
-                              className="Icon-root Icon-sm"
-                            >
-                              expand_more
-                            </i>
-                          </span>
+                            expand_more
+                          </i>
                         </span>
-                      </div>
+                      </span>
                     </div>
                   </div>
                 </div>
-              </div>
+              </fieldset>
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Staff member badge
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Staff member badge
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                Show a custom badge for staff members of your organization. This badge
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  Show a custom badge for staff members of your organization. This badge
 appears on the comment stream and in the admin interface.
-              </p>
-              <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-double"
-              >
+                </p>
                 <div
-                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                  className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
                 >
                   <div
-                    className="Box-root Flex-root Flex-flex Flex-doubleItemGutter gutter"
+                    className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                   >
+                    <label
+                      className="Label-root"
+                    >
+                      Badge text
+                    </label>
                     <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                      className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                     >
-                      <label
-                        className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                      >
-                        Badge text
-                      </label>
                       <div
                         className="TextField-root TextField-fullWidth StaffConfig-textInput"
                       >
@@ -1114,23 +1221,23 @@ appears on the comment stream and in the admin interface.
                         />
                       </div>
                     </div>
-                    <div
-                      className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  </div>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  >
+                    <p
+                      className="Label-root"
                     >
-                      <h1
-                        className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary"
-                      >
-                        Preview
-                      </h1>
-                      <span
-                        className="Tag-root Tag-colorGrey Tag-uppercase"
-                      >
-                        Staff
-                      </span>
-                    </div>
+                      Preview
+                    </p>
+                    <span
+                      className="Tag-root Tag-colorGrey Tag-uppercase"
+                    >
+                      Staff
+                    </span>
                   </div>
                 </div>
-              </div>
+              </fieldset>
             </div>
           </fieldset>
         </div>
diff --git a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
index 643bc1e0c..3e4452f79 100644
--- a/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
@@ -95,8 +95,8 @@ exports[`renders configure moderation 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
-            data-color="success"
+            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+            data-color="default"
             data-testid="configure-sideBar-saveChanges"
             data-variant="filled"
             disabled={true}
@@ -119,501 +119,568 @@ exports[`renders configure moderation 1`] = `
           data-testid="configure-moderationContainer"
         >
           <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Pre-moderation
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Pre-moderation
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                When pre-moderation is turned on, comments will not be published unless
+                <p
+                  className="FormFieldDescription-root"
+                >
+                  When pre-moderation is turned on, comments will not be published unless
 approved by a moderator.
-              </p>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                </p>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  Pre-moderate all comments sitewide
-                </legend>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  <legend
+                    className="Label-root"
                   >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="moderation-true"
-                      name="moderation"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="moderation-true"
+                    Pre-moderate all comments sitewide
+                  </legend>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="moderation-false"
-                      name="moderation"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="moderation-false"
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="moderation-true"
+                        name="moderation"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="moderation-true"
+                      >
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        Off
-                      </span>
-                    </label>
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="moderation-false"
+                        name="moderation"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="moderation-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
                   </div>
-                </div>
-              </fieldset>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                </fieldset>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  Pre-moderate comments containing links sitewide
-                </legend>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                  <legend
+                    className="Label-root"
                   >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="premodLinksEnable-true"
-                      name="premodLinksEnable"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="premodLinksEnable-true"
+                    Pre-moderate comments containing links sitewide
+                  </legend>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="premodLinksEnable-false"
-                      name="premodLinksEnable"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="premodLinksEnable-false"
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="premodLinksEnable-true"
+                        name="premodLinksEnable"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="premodLinksEnable-true"
+                      >
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        Off
-                      </span>
-                    </label>
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="premodLinksEnable-false"
+                        name="premodLinksEnable"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="premodLinksEnable-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
                   </div>
-                </div>
+                </fieldset>
               </fieldset>
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Recent history
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <legend
+                  className="Header-root"
+                >
+                  Recent history
+                </legend>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
             >
               <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Recent comment history time period
-                </legend>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                >
-                  Amount of time to calculate a commenter's rejection rate.
-                </p>
-                <div
-                  className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
                   <div
-                    className="TextField-root DurationField-value"
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
                   >
-                    <input
-                      aria-label="value"
-                      autoCapitalize="off"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      className="TextField-input TextField-colorRegular TextField-textAlignCenter"
-                      disabled={false}
-                      name="recentCommentHistory.timeFrame-value"
-                      onChange={[Function]}
-                      placeholder=""
-                      spellCheck={false}
-                      type="text"
-                      value="7"
-                    />
+                    <legend
+                      className="Label-root"
+                    >
+                      Recent comment history time period
+                    </legend>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Amount of time to calculate a commenter's rejection rate.
+                    </p>
                   </div>
-                  <p
-                    className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary DurationField-unit"
+                  <div
+                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                   >
-                    Days
-                  </p>
-                </div>
-              </fieldset>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                    <div
+                      className="TextField-root DurationField-value"
+                    >
+                      <input
+                        aria-label="value"
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular TextField-textAlignCenter"
+                        disabled={false}
+                        name="recentCommentHistory.timeFrame-value"
+                        onChange={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value="7"
+                      />
+                    </div>
+                    <span
+                      className="DurationField-unit"
+                    >
+                      Days
+                    </span>
+                  </div>
+                </fieldset>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  Recent history filter
-                </legend>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                >
-                  Prevents repeat offenders from publishing comments without approval.
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <legend
+                      className="Label-root"
+                    >
+                      Recent history filter
+                    </legend>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Prevents repeat offenders from publishing comments without approval.
 When a commenter's rejection rate is above the threshold, their
 comments are sent to Pending for moderator approval. This does not
 apply to Staff comments.
-                </p>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="recentCommentHistory.enabled-true"
-                      name="recentCommentHistory.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="recentCommentHistory.enabled-true"
+                    </p>
+                  </div>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <span>
-                        On
-                      </span>
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="recentCommentHistory.enabled-true"
+                        name="recentCommentHistory.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="recentCommentHistory.enabled-true"
+                      >
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="recentCommentHistory.enabled-false"
+                        name="recentCommentHistory.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="recentCommentHistory.enabled-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
+                  </div>
+                </fieldset>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <label
+                      className="Label-root"
+                    >
+                      Rejection rate threshold
                     </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Rejected comments ÷ (rejected comments + published comments)
+over the timeframe above, as a percentage. It does not include
+comments pending for toxicity, spam or pre-moderation.
+                    </p>
                   </div>
                   <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                   >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="recentCommentHistory.enabled-false"
-                      name="recentCommentHistory.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="recentCommentHistory.enabled-false"
+                    <div
+                      className="TextField-root"
                     >
-                      <span>
-                        Off
-                      </span>
-                    </label>
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input RecentCommentHistoryConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
+                        disabled={false}
+                        name="recentCommentHistory.triggerRejectionRate"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value="30"
+                      />
+                      <div
+                        className="TextField-adornment"
+                      >
+                        <span
+                          className="TextFieldAdornment-root"
+                        >
+                          %
+                        </span>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </fieldset>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                >
-                  Rejection rate threshold
-                </label>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                >
-                  Rejected comments ÷ (rejected comments + published comments)
-over the timeframe above, as a percentage. It does not include
-comments pending for toxicity, spam or pre-moderation.
-                </p>
-                <div
-                  className="TextField-root"
-                >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input RecentCommentHistoryConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
-                    disabled={false}
-                    name="recentCommentHistory.triggerRejectionRate"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    spellCheck={false}
-                    type="text"
-                    value="30"
-                  />
-                  <div
-                    className="TextField-adornment"
-                  >
-                    <p
-                      className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-                    >
-                      %
-                    </p>
-                  </div>
-                </div>
-              </div>
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
             data-testid="perspective-container"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Toxic comment filter
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                Using the Perspective API, the Toxic Comment filter warns users
-when comments exceed the predefined toxicity threshold.
-Comments with a toxicity score above the threshold
-
-                <strong>
-                  will not be published
-                </strong>
-                 and are placed in
-the 
-                <strong>
-                  Pending Queue for review by a moderator
-                </strong>
-                .
-If approved by a moderator, the comment will be published.
-              </p>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
+              <div>
                 <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Header-root"
                 >
                   Toxic comment filter
                 </legend>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="integrations.perspective.enabled-true"
-                      name="integrations.perspective.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="integrations.perspective.enabled-true"
-                    >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="integrations.perspective.enabled-false"
-                      name="integrations.perspective.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="integrations.perspective.enabled-false"
-                    >
-                      <span>
-                        Off
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </fieldset>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-moderation-perspective-threshold"
-                >
-                  Toxicity threshold
-                </label>
                 <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                  className="FormFieldDescription-root"
                 >
-                  This value can be set a percentage between 0 and 100. This number represents the likelihood that a
-comment is toxic, according to Perspective API. By default the threshold is set to 80%.
+                  Using the Perspective API, the Toxic Comment filter warns users
+when comments exceed the predefined toxicity threshold.
+Comments with a toxicity score above the threshold
+
+                  <strong>
+                    will not be published
+                  </strong>
+                   and are placed in
+the 
+                  <strong>
+                    Pending Queue for review by a moderator
+                  </strong>
+                  .
+If approved by a moderator, the comment will be published.
                 </p>
-                <div
-                  className="TextField-root"
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input PerspectiveConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
-                    disabled={false}
-                    id="configure-moderation-perspective-threshold"
-                    name="integrations.perspective.threshold"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="80"
-                    spellCheck={false}
-                    type="text"
-                    value="80"
-                  />
-                  <div
-                    className="TextField-adornment"
+                  <legend
+                    className="Label-root"
                   >
-                    <p
-                      className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                    Toxic comment filter
+                  </legend>
+                  <div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      %
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="integrations.perspective.enabled-true"
+                        name="integrations.perspective.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="integrations.perspective.enabled-true"
+                      >
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="integrations.perspective.enabled-false"
+                        name="integrations.perspective.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="integrations.perspective.enabled-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
+                  </div>
+                </fieldset>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <label
+                      className="Label-root"
+                      htmlFor="configure-moderation-perspective-threshold"
+                    >
+                      Toxicity threshold
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      This value can be set a percentage between 0 and 100. This number represents the likelihood that a
+comment is toxic, according to Perspective API. By default the threshold is set to 80%.
                     </p>
                   </div>
-                </div>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-moderation-perspective-model"
-                >
-                  Toxicity model
-                </label>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                >
-                  Choose your Perspective Model. The default is TOXICITY.
-You can find out more about model choices 
-                  <a
-                    className="ExternalLink-root"
-                    href="https://github.com/conversationai/perspectiveapi/blob/master/api_reference.md#models"
-                    rel="noopener noreferrer"
-                    target="_blank"
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                   >
-                    here
-                  </a>
-                  .
-                </p>
-                <div
-                  className="TextField-root TextField-fullWidth"
-                >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-moderation-perspective-model"
-                    name="integrations.perspective.model"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="TOXICITY"
-                    spellCheck={false}
-                    type="text"
-                    value=""
-                  />
+                    <div
+                      className="TextField-root"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input PerspectiveConfig-thresholdTextField TextField-colorRegular TextField-textAlignCenter"
+                        disabled={false}
+                        id="configure-moderation-perspective-threshold"
+                        name="integrations.perspective.threshold"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder="80"
+                        spellCheck={false}
+                        type="text"
+                        value="80"
+                      />
+                      <div
+                        className="TextField-adornment"
+                      >
+                        <span
+                          className="TextFieldAdornment-root"
+                        >
+                          %
+                        </span>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  Allow Google to store comment data
-                </legend>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <label
+                      className="Label-root"
+                      htmlFor="configure-moderation-perspective-model"
+                    >
+                      Toxicity model
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Choose your Perspective Model. The default is TOXICITY.
+You can find out more about model choices 
+                      <a
+                        className="ExternalLink-root"
+                        href="https://github.com/conversationai/perspectiveapi/blob/master/api_reference.md#models"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        here
+                      </a>
+                      .
+                    </p>
+                  </div>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                  >
+                    <div
+                      className="TextField-root TextField-fullWidth"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular"
+                        disabled={false}
+                        id="configure-moderation-perspective-model"
+                        name="integrations.perspective.model"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder="TOXICITY"
+                        spellCheck={false}
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  Stored comments will be used for future research and community model building purposes to
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <legend
+                      className="Label-root"
+                    >
+                      Allow Google to store comment data
+                    </legend>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Stored comments will be used for future research and community model building purposes to
 improve the API over time.
-                </p>
-                <div>
+                    </p>
+                  </div>
                   <div>
                     <div
                       className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
@@ -660,294 +727,317 @@ improve the API over time.
                       </label>
                     </div>
                   </div>
-                </div>
-              </fieldset>
-              <div>
-                <h1
-                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
-                >
-                  Configuration
-                </h1>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextPrimary"
-                >
-                  For additional information on how to set up the Perspective Toxic Comment Filter please visit:
-
-                  <a
-                    className="ExternalLink-root"
-                    href="https://github.com/conversationai/perspectiveapi/blob/master/quickstart.md"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    https://github.com/conversationai/perspectiveapi/blob/master/quickstart.md
-                  </a>
-                </p>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-moderation-integrations.perspective.key"
-                >
-                  API key
-                </label>
+                </fieldset>
                 <div
-                  className="PasswordField-fullWidth PasswordField-root"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
                 >
-                  <div
-                    className="PasswordField-wrapper"
+                  <h3
+                    className="Subheader-root"
                   >
-                    <input
-                      autoCapitalize="off"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
-                      disabled={false}
-                      id="configure-moderation-integrations.perspective.key"
-                      name="integrations.perspective.key"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      placeholder=""
-                      spellCheck={false}
-                      type="password"
-                      value=""
-                    />
-                    <div
-                      className="PasswordField-icon"
-                      onClick={[Function]}
-                      onKeyUp={[Function]}
-                      role="button"
-                      tabIndex={0}
-                      title="Hide API Key"
+                    Configuration
+                  </h3>
+                  <p
+                    className="HelperText-root"
+                  >
+                    For additional information on how to set up the Perspective Toxic Comment Filter please visit:
+
+                    <a
+                      className="ExternalLink-root"
+                      href="https://github.com/conversationai/perspectiveapi/blob/master/quickstart.md"
+                      rel="noopener noreferrer"
+                      target="_blank"
                     >
-                      <i
-                        aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                      https://github.com/conversationai/perspectiveapi/blob/master/quickstart.md
+                    </a>
+                  </p>
+                </div>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <label
+                    className="Label-root"
+                    htmlFor="configure-moderation-integrations.perspective.key"
+                  >
+                    API key
+                  </label>
+                  <div
+                    className="PasswordField-fullWidth PasswordField-root"
+                  >
+                    <div
+                      className="PasswordField-wrapper"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                        disabled={false}
+                        id="configure-moderation-integrations.perspective.key"
+                        name="integrations.perspective.key"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="password"
+                        value=""
+                      />
+                      <div
+                        className="PasswordField-icon"
+                        onClick={[Function]}
+                        onKeyUp={[Function]}
+                        role="button"
+                        tabIndex={0}
+                        title="Hide API Key"
                       >
-                        visibility
-                      </i>
+                        <i
+                          aria-hidden="true"
+                          className="Icon-root Icon-sm"
+                        >
+                          visibility
+                        </i>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-moderation-perspective-customEndpoint"
-                >
-                  Custom endpoint
-                </label>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
-                >
-                  By default the endpoint is set to https://commentanalyzer.googleapis.com/v1alpha1. You may override this here.
-                </p>
                 <div
-                  className="TextField-root TextField-fullWidth"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-moderation-perspective-customEndpoint"
-                    name="integrations.perspective.endpoint"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="https://commentanalyzer.googleapis.com/v1alpha1"
-                    spellCheck={false}
-                    type="text"
-                    value=""
-                  />
+                  <label
+                    className="Label-root"
+                    htmlFor="configure-moderation-perspective-customEndpoint"
+                  >
+                    Custom endpoint
+                  </label>
+                  <p
+                    className="HelperText-root"
+                  >
+                    By default the endpoint is set to https://commentanalyzer.googleapis.com/v1alpha1. You may override this here.
+                  </p>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                  >
+                    <div
+                      className="TextField-root TextField-fullWidth"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular"
+                        disabled={false}
+                        id="configure-moderation-perspective-customEndpoint"
+                        name="integrations.perspective.endpoint"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder="https://commentanalyzer.googleapis.com/v1alpha1"
+                        spellCheck={false}
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
                 </div>
-              </div>
+              </fieldset>
             </div>
           </fieldset>
           <fieldset
-            className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="FieldSet-root Box-root ConfigBox-root"
             data-testid="akismet-config"
           >
-            <legend
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Spam detection filter
-            </legend>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                The Akismet API filter warns users when a comment is determined likely
-to be spam. Comments that Akismet thinks are spam will not be published
-and are placed in the Pending Queue for review by a moderator.
-If approved by a moderator, the comment will be published.
-              </p>
-              <fieldset
-                className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
+              <div>
                 <legend
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
+                  className="Header-root"
                 >
                   Spam detection filter
                 </legend>
-                <div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={false}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="integrations.akismet.enabled-true"
-                      name="integrations.akismet.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={true}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="integrations.akismet.enabled-true"
-                    >
-                      <span>
-                        On
-                      </span>
-                    </label>
-                  </div>
-                  <div
-                    className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
-                  >
-                    <input
-                      checked={true}
-                      className="RadioButton-input"
-                      disabled={false}
-                      id="integrations.akismet.enabled-false"
-                      name="integrations.akismet.enabled"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="radio"
-                      value={false}
-                    />
-                    <label
-                      className="RadioButton-label"
-                      htmlFor="integrations.akismet.enabled-false"
-                    >
-                      <span>
-                        Off
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </fieldset>
-              <div>
-                <h1
-                  className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Subheader-root"
-                >
-                  Configuration
-                </h1>
-                <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextPrimary"
-                >
-                  Note: You must add your active domain(s)
-in your Akismet account: 
-                  <a
-                    className="ExternalLink-root"
-                    href="https://akismet.com/account/"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    https://akismet.com/account/
-                  </a>
-                </p>
               </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
+            >
+              <fieldset
+                className="FieldSet-root Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-moderation-integrations.akismet.key"
+                <p
+                  className="FormFieldDescription-root"
                 >
-                  API key
-                </label>
-                <div
-                  className="PasswordField-fullWidth PasswordField-root"
+                  The Akismet API filter warns users when a comment is determined likely
+to be spam. Comments that Akismet thinks are spam will not be published
+and are placed in the Pending Queue for review by a moderator.
+If approved by a moderator, the comment will be published.
+                </p>
+                <fieldset
+                  className="FieldSet-root Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <div
-                    className="PasswordField-wrapper"
+                  <legend
+                    className="Label-root"
                   >
-                    <input
-                      autoCapitalize="off"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
-                      disabled={false}
-                      id="configure-moderation-integrations.akismet.key"
-                      name="integrations.akismet.key"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      placeholder=""
-                      spellCheck={false}
-                      type="password"
-                      value=""
-                    />
+                    Spam detection filter
+                  </legend>
+                  <div>
                     <div
-                      className="PasswordField-icon"
-                      onClick={[Function]}
-                      onKeyUp={[Function]}
-                      role="button"
-                      tabIndex={0}
-                      title="Hide API Key"
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
                     >
-                      <i
-                        aria-hidden="true"
-                        className="Icon-root Icon-sm"
+                      <input
+                        checked={false}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="integrations.akismet.enabled-true"
+                        name="integrations.akismet.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={true}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="integrations.akismet.enabled-true"
                       >
-                        visibility
-                      </i>
+                        <span>
+                          On
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
+                    >
+                      <input
+                        checked={true}
+                        className="RadioButton-input"
+                        disabled={false}
+                        id="integrations.akismet.enabled-false"
+                        name="integrations.akismet.enabled"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="radio"
+                        value={false}
+                      />
+                      <label
+                        className="RadioButton-label"
+                        htmlFor="integrations.akismet.enabled-false"
+                      >
+                        <span>
+                          Off
+                        </span>
+                      </label>
+                    </div>
+                  </div>
+                </fieldset>
+                <div
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
+                >
+                  <h3
+                    className="Subheader-root"
+                  >
+                    Configuration
+                  </h3>
+                  <p
+                    className="HelperText-root"
+                  >
+                    Note: You must add your active domain(s)
+in your Akismet account: 
+                    <a
+                      className="ExternalLink-root"
+                      href="https://akismet.com/account/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      https://akismet.com/account/
+                    </a>
+                  </p>
+                </div>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <label
+                    className="Label-root"
+                    htmlFor="configure-moderation-integrations.akismet.key"
+                  >
+                    API key
+                  </label>
+                  <div
+                    className="PasswordField-fullWidth PasswordField-root"
+                  >
+                    <div
+                      className="PasswordField-wrapper"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                        disabled={false}
+                        id="configure-moderation-integrations.akismet.key"
+                        name="integrations.akismet.key"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="password"
+                        value=""
+                      />
+                      <div
+                        className="PasswordField-icon"
+                        onClick={[Function]}
+                        onKeyUp={[Function]}
+                        role="button"
+                        tabIndex={0}
+                        title="Hide API Key"
+                      >
+                        <i
+                          aria-hidden="true"
+                          className="Icon-root Icon-sm"
+                        >
+                          visibility
+                        </i>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
-              >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-moderation-akismet-site"
-                >
-                  Site URL
-                </label>
                 <div
-                  className="TextField-root TextField-fullWidth"
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-moderation-akismet-site"
-                    name="integrations.akismet.site"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    spellCheck={false}
-                    type="text"
-                    value=""
-                  />
+                  <label
+                    className="Label-root"
+                    htmlFor="configure-moderation-akismet-site"
+                  >
+                    Site URL
+                  </label>
+                  <div
+                    className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
+                  >
+                    <div
+                      className="TextField-root TextField-fullWidth"
+                    >
+                      <input
+                        autoCapitalize="off"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        className="TextField-input TextField-colorRegular"
+                        disabled={false}
+                        id="configure-moderation-akismet-site"
+                        name="integrations.akismet.site"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        placeholder=""
+                        spellCheck={false}
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
                 </div>
-              </div>
+              </fieldset>
             </div>
           </fieldset>
         </div>
diff --git a/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
index 76944882d..e4b42cbc8 100644
--- a/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
@@ -95,8 +95,8 @@ exports[`renders configure organization 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
-            data-color="success"
+            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+            data-color="default"
             data-testid="configure-sideBar-saveChanges"
             data-variant="filled"
             disabled={true}
@@ -119,65 +119,83 @@ exports[`renders configure organization 1`] = `
           data-testid="configure-organizationContainer"
         >
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-organization-organization.name"
+                >
+                  Organization name
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
             >
-              <label
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                htmlFor="configure-organization-organization.name"
-              >
-                Organization name
-              </label>
               <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
                 <p
-                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                  className="FormFieldDescription-root"
                 >
                   Your organization name will appear on emails sent by Coral to your community and organization members.
                 </p>
                 <div
-                  className="TextField-root TextField-fullWidth"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-organization-organization.name"
-                    name="organization.name"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    spellCheck={false}
-                    type="text"
-                    value="Coral"
-                  />
+                  <div
+                    className="TextField-root TextField-fullWidth"
+                  >
+                    <input
+                      autoCapitalize="off"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      className="TextField-input TextField-colorRegular"
+                      disabled={false}
+                      id="configure-organization-organization.name"
+                      name="organization.name"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder=""
+                      spellCheck={false}
+                      type="text"
+                      value="Coral"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-organization-organization.contactEmail"
+                >
+                  Organization email
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
             >
-              <label
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                htmlFor="configure-organization-organization.contactEmail"
-              >
-                Organization email
-              </label>
               <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
                 <p
-                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                  className="FormFieldDescription-root"
                 >
                   This email address will be used as in emails and across the platform
 for community members to get in touch with the organization should
@@ -185,67 +203,82 @@ they have any questions about the status of their accounts or
 moderation questions.
                 </p>
                 <div
-                  className="TextField-root TextField-fullWidth"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-organization-organization.contactEmail"
-                    name="organization.contactEmail"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    spellCheck={false}
-                    type="text"
-                    value="coral@test.com"
-                  />
+                  <div
+                    className="TextField-root TextField-fullWidth"
+                  >
+                    <input
+                      autoCapitalize="off"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      className="TextField-input TextField-colorRegular"
+                      disabled={false}
+                      id="configure-organization-organization.contactEmail"
+                      name="organization.contactEmail"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder=""
+                      spellCheck={false}
+                      type="text"
+                      value="coral@test.com"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+            className="Box-root ConfigBox-root"
           >
             <div
-              className="Box-root HorizontalGutter-root HorizontalGutter-full"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <label
+                  className="Header-root"
+                  htmlFor="configure-organization-organization.url"
+                >
+                  Organization URL
+                </label>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
             >
-              <label
-                className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-                htmlFor="configure-organization-organization.url"
-              >
-                Organization URL
-              </label>
               <div
-                className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
                 <p
-                  className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
+                  className="FormFieldDescription-root"
                 >
                   Your organization url will appear on emails sent by Coral to your community and organization members.
                 </p>
                 <div
-                  className="TextField-root TextField-fullWidth"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
                 >
-                  <input
-                    autoCapitalize="off"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    className="TextField-input TextField-colorRegular"
-                    disabled={false}
-                    id="configure-organization-organization.url"
-                    name="organization.url"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder=""
-                    spellCheck={false}
-                    type="text"
-                    value="https://test.com/"
-                  />
+                  <div
+                    className="TextField-root TextField-fullWidth"
+                  >
+                    <input
+                      autoCapitalize="off"
+                      autoComplete="off"
+                      autoCorrect="off"
+                      className="TextField-input TextField-colorRegular"
+                      disabled={false}
+                      id="configure-organization-organization.url"
+                      name="organization.url"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder=""
+                      spellCheck={false}
+                      type="text"
+                      value="https://test.com/"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap b/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
index 597833a33..9f15935c1 100644
--- a/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
+++ b/src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
@@ -95,8 +95,8 @@ exports[`renders configure wordList 1`] = `
           className="Box-root HorizontalGutter-root HorizontalGutter-double"
         >
           <button
-            className="BaseButton-root Button-root Button-sizeRegular Button-colorSuccess Button-variantFilled Button-disabled"
-            data-color="success"
+            className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
+            data-color="default"
             data-testid="configure-sideBar-saveChanges"
             data-variant="filled"
             disabled={true}
@@ -119,45 +119,58 @@ exports[`renders configure wordList 1`] = `
           data-testid="configure-wordListContainer"
         >
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="Box-root ConfigBox-root"
           >
-            <h1
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Banned words and phrases
-            </h1>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <h2
+                  className="Header-root"
+                >
+                  Banned words and phrases
+                </h2>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                Comments containing a word or phrase in the banned words list are 
-                <strong>
-                  automatically rejected and are not published
-                </strong>
-                .
-              </p>
               <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-wordlist-banned"
-                >
-                  Banned word list
-                </label>
                 <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                  className="FormFieldDescription-root"
                 >
-                  Separate banned words or phrases with a new line. Words/phrases are not case sensitive.
+                  Comments containing a word or phrase in the banned words list are 
+                  <strong>
+                    automatically rejected and are not published
+                  </strong>
+                  .
                 </p>
-                <div>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <label
+                      className="Label-root"
+                      htmlFor="configure-wordlist-banned"
+                    >
+                      Banned word list
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Separate banned words or phrases with a new line. Words/phrases are not case sensitive.
+                    </p>
+                  </div>
                   <textarea
                     autoCapitalize="off"
                     autoComplete="off"
                     autoCorrect="off"
-                    className="BannedWordListConfig-textArea WordListTextArea-textArea"
+                    className="Textarea-root BannedWordListConfig-textArea WordListTextArea-textArea"
                     disabled={false}
                     id="configure-wordlist-banned"
                     name="wordList.banned"
@@ -172,46 +185,59 @@ exports[`renders configure wordList 1`] = `
             </div>
           </div>
           <div
-            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
+            className="Box-root ConfigBox-root"
           >
-            <h1
-              className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Header-root"
-            >
-              Suspect words and phrases
-            </h1>
             <div
-              className="Box-root HorizontalGutter-root SectionContent-sectionContent HorizontalGutter-double"
+              className="Box-root Flex-root ConfigBox-title Flex-flex Flex-justifySpaceBetween"
+            >
+              <div>
+                <h2
+                  className="Header-root"
+                >
+                  Suspect words and phrases
+                </h2>
+              </div>
+              <div />
+            </div>
+            <div
+              className="ConfigBox-content"
             >
-              <p
-                className="Box-root Typography-root Typography-bodyShort Typography-colorTextPrimary"
-              >
-                Comments containing a word or phrase in the Suspect Words List
-are 
-                <strong>
-                  placed into the Reported Queue for moderator review and are
-published (if comments are not pre-moderated).
-                </strong>
-              </p>
               <div
-                className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-4"
               >
-                <label
-                  className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
-                  htmlFor="configure-wordlist-suspect"
-                >
-                  Suspect word list
-                </label>
                 <p
-                  className="Box-root Typography-root Typography-fieldDescription Typography-colorTextSecondary"
+                  className="FormFieldDescription-root"
                 >
-                  Separate suspect words or phrases with a new line. Words/phrases are not case sensitive.
+                  Comments containing a word or phrase in the Suspect Words List
+are 
+                  <strong>
+                    placed into the Reported Queue for moderator review and are
+published (if comments are not pre-moderated).
+                  </strong>
                 </p>
-                <div>
+                <div
+                  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+                >
+                  <div
+                    className="Box-root HorizontalGutter-root FormFieldHeader-root HorizontalGutter-spacing-1"
+                  >
+                    <label
+                      className="Label-root"
+                      htmlFor="configure-wordlist-suspect"
+                    >
+                      Suspect word list
+                    </label>
+                    <p
+                      className="HelperText-root"
+                    >
+                      Separate suspect words or phrases with a new line. Words/phrases are not case sensitive.
+                    </p>
+                  </div>
                   <textarea
                     autoCapitalize="off"
                     autoComplete="off"
                     autoCorrect="off"
-                    className="SuspectWordListConfig-textArea WordListTextArea-textArea"
+                    className="Textarea-root SuspectWordListConfig-textArea WordListTextArea-textArea"
                     disabled={false}
                     id="configure-wordlist-suspect"
                     name="wordList.suspect"
diff --git a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
index 3e3efda27..0b7739e28 100644
--- a/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
+++ b/src/core/client/admin/test/decisionHistory/__snapshots__/decisionHistory.spec.tsx.snap
@@ -9,15 +9,12 @@ exports[`loads more 1`] = `
   >
     <i
       aria-hidden="true"
-      className="Icon-root Icon-sm"
+      className="Icon-root Icon-md Title-icon"
     >
       history
     </i>
-    <span>
-       
-    </span>
     <span
-      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
+      className="Title-text"
     >
       Your Decision History
     </span>
@@ -39,34 +36,32 @@ exports[`loads more 1`] = `
           >
             <i
               aria-hidden="true"
-              className="Icon-root Icon-sm ApprovedIcon-root"
+              className="Icon-root Icon-md ApprovedIcon-root"
             >
-              check
+              check_circled
             </i>
           </div>
           <div>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+            <span
+              className="Info-root"
             >
               Approved comment by 
-              <strong>
+              <strong
+                className="Username-root"
+              >
                 dany
               </strong>
-            </p>
+            </span>
             <div
               className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
-              <span
-                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
+              <time
+                className="RelativeTime-root Timestamp-root"
+                dateTime="2018-11-29T16:01:51.897Z"
+                title="2018-11-29T16:01:51.897Z"
               >
-                <time
-                  className="RelativeTime-root Timestamp-root"
-                  dateTime="2018-11-29T16:01:51.897Z"
-                  title="2018-11-29T16:01:51.897Z"
-                >
-                  2018-11-29T16:01:51.897Z
-                </time>
-              </span>
+                2018-11-29T16:01:51.897Z
+              </time>
               <div
                 className="DotDivider-root"
               >
@@ -103,34 +98,32 @@ exports[`loads more 1`] = `
           >
             <i
               aria-hidden="true"
-              className="Icon-root Icon-sm RejectedIcon-root"
+              className="Icon-root Icon-md RejectedIcon-root"
             >
               cancel
             </i>
           </div>
           <div>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+            <span
+              className="Info-root"
             >
               Rejected comment by 
-              <strong>
+              <strong
+                className="Username-root"
+              >
                 dany
               </strong>
-            </p>
+            </span>
             <div
               className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
-              <span
-                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
+              <time
+                className="RelativeTime-root Timestamp-root"
+                dateTime="2018-11-29T16:01:45.644Z"
+                title="2018-11-29T16:01:45.644Z"
               >
-                <time
-                  className="RelativeTime-root Timestamp-root"
-                  dateTime="2018-11-29T16:01:45.644Z"
-                  title="2018-11-29T16:01:45.644Z"
-                >
-                  2018-11-29T16:01:45.644Z
-                </time>
-              </span>
+                2018-11-29T16:01:45.644Z
+              </time>
               <div
                 className="DotDivider-root"
               >
@@ -167,34 +160,32 @@ exports[`loads more 1`] = `
           >
             <i
               aria-hidden="true"
-              className="Icon-root Icon-sm ApprovedIcon-root"
+              className="Icon-root Icon-md ApprovedIcon-root"
             >
-              check
+              check_circled
             </i>
           </div>
           <div>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+            <span
+              className="Info-root"
             >
               Approved comment by 
-              <strong>
+              <strong
+                className="Username-root"
+              >
                 dany
               </strong>
-            </p>
+            </span>
             <div
               className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
-              <span
-                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
+              <time
+                className="RelativeTime-root Timestamp-root"
+                dateTime="2018-11-29T16:01:42.060Z"
+                title="2018-11-29T16:01:42.060Z"
               >
-                <time
-                  className="RelativeTime-root Timestamp-root"
-                  dateTime="2018-11-29T16:01:42.060Z"
-                  title="2018-11-29T16:01:42.060Z"
-                >
-                  2018-11-29T16:01:42.060Z
-                </time>
-              </span>
+                2018-11-29T16:01:42.060Z
+              </time>
               <div
                 className="DotDivider-root"
               >
@@ -234,15 +225,12 @@ exports[`opens popover when clicked on button showing loading state 1`] = `
   >
     <i
       aria-hidden="true"
-      className="Icon-root Icon-sm"
+      className="Icon-root Icon-md Title-icon"
     >
       history
     </i>
-    <span>
-       
-    </span>
     <span
-      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
+      className="Title-text"
     >
       Your Decision History
     </span>
@@ -266,15 +254,12 @@ exports[`render popover content 1`] = `
   >
     <i
       aria-hidden="true"
-      className="Icon-root Icon-sm"
+      className="Icon-root Icon-md Title-icon"
     >
       history
     </i>
-    <span>
-       
-    </span>
     <span
-      className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Title-text"
+      className="Title-text"
     >
       Your Decision History
     </span>
@@ -296,34 +281,32 @@ exports[`render popover content 1`] = `
           >
             <i
               aria-hidden="true"
-              className="Icon-root Icon-sm ApprovedIcon-root"
+              className="Icon-root Icon-md ApprovedIcon-root"
             >
-              check
+              check_circled
             </i>
           </div>
           <div>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+            <span
+              className="Info-root"
             >
               Approved comment by 
-              <strong>
+              <strong
+                className="Username-root"
+              >
                 addy
               </strong>
-            </p>
+            </span>
             <div
               className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
-              <span
-                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
+              <time
+                className="RelativeTime-root Timestamp-root"
+                dateTime="2018-11-29T16:01:51.897Z"
+                title="2018-11-29T16:01:51.897Z"
               >
-                <time
-                  className="RelativeTime-root Timestamp-root"
-                  dateTime="2018-11-29T16:01:51.897Z"
-                  title="2018-11-29T16:01:51.897Z"
-                >
-                  2018-11-29T16:01:51.897Z
-                </time>
-              </span>
+                2018-11-29T16:01:51.897Z
+              </time>
               <div
                 className="DotDivider-root"
               >
@@ -360,34 +343,32 @@ exports[`render popover content 1`] = `
           >
             <i
               aria-hidden="true"
-              className="Icon-root Icon-sm RejectedIcon-root"
+              className="Icon-root Icon-md RejectedIcon-root"
             >
               cancel
             </i>
           </div>
           <div>
-            <p
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary Info-root"
+            <span
+              className="Info-root"
             >
               Rejected comment by 
-              <strong>
+              <strong
+                className="Username-root"
+              >
                 addy
               </strong>
-            </p>
+            </span>
             <div
               className="Box-root Flex-root Footer-root Flex-flex Flex-alignBaseline"
             >
-              <span
-                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary"
+              <time
+                className="RelativeTime-root Timestamp-root"
+                dateTime="2018-11-29T16:01:45.644Z"
+                title="2018-11-29T16:01:45.644Z"
               >
-                <time
-                  className="RelativeTime-root Timestamp-root"
-                  dateTime="2018-11-29T16:01:45.644Z"
-                  title="2018-11-29T16:01:45.644Z"
-                >
-                  2018-11-29T16:01:45.644Z
-                </time>
-              </span>
+                2018-11-29T16:01:45.644Z
+              </time>
               <div
                 className="DotDivider-root"
               >
diff --git a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
index 6c7327d41..d621b7f5f 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`approves comment in reported queue: dangling 1`] = `
           className="Box-root Flex-root Flex-flex Flex-alignCenter"
         >
           <button
-            className="BaseButton-root ModerateCard-username"
+            className="BaseButton-root ModerateCard-usernameButton"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -44,7 +44,7 @@ exports[`approves comment in reported queue: dangling 1`] = `
             type="button"
           >
             <span
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+              className="Username-root"
             >
               Isabelle
             </span>
@@ -85,54 +85,68 @@ exports[`approves comment in reported queue: dangling 1`] = `
         </div>
       </div>
       <div
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+        className="ModerateCard-contentArea"
+      >
+        <div
+          className="ModerateCard-content CommentContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+            }
           }
-        }
-      />
+        />
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <a
+            className="TextLink-root ModerateCard-link"
+            href="http://localhost/comment/0"
+            target="_blank"
+          >
+            View Context
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-xs TextLink-icon"
+            >
+              open_in_new
+            </i>
+          </a>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
         >
           <div>
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="http://localhost/comment/0"
-              target="_blank"
+            <div
+              className="ModerateCard-storyLabel"
             >
-              View Context
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-xs TextLink-icon"
-              >
-                open_in_new
-              </i>
-            </a>
-          </div>
-          <div>
-            <span
-              className="ModerateCard-story"
-            >
-              Story
-            </span>
-            : 
-            <span
+              <span>
+                Comment On
+              </span>
+              <span>
+                :
+              </span>
+            </div>
+            <div
               className="ModerateCard-storyTitle"
             >
               Finally a Cure for Cancer
-            </span>
-             
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="/admin/moderate/story-1"
-              onClick={[Function]}
-            >
-              Moderate Story
-            </a>
+            </div>
+            <div>
+              <a
+                className="TextLink-root ModerateCard-link"
+                href="/admin/moderate/story-1"
+                onClick={[Function]}
+              >
+                Moderate Story
+              </a>
+            </div>
           </div>
           <div
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -141,7 +155,7 @@ exports[`approves comment in reported queue: dangling 1`] = `
               className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Spam
@@ -156,9 +170,9 @@ exports[`approves comment in reported queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                data-color="default"
+                data-variant="default"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -184,9 +198,6 @@ exports[`approves comment in reported queue: dangling 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <div
       className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
@@ -276,7 +287,7 @@ exports[`rejects comment in reported queue: dangling 1`] = `
           className="Box-root Flex-root Flex-flex Flex-alignCenter"
         >
           <button
-            className="BaseButton-root ModerateCard-username"
+            className="BaseButton-root ModerateCard-usernameButton"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -286,7 +297,7 @@ exports[`rejects comment in reported queue: dangling 1`] = `
             type="button"
           >
             <span
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+              className="Username-root"
             >
               Isabelle
             </span>
@@ -327,54 +338,68 @@ exports[`rejects comment in reported queue: dangling 1`] = `
         </div>
       </div>
       <div
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+        className="ModerateCard-contentArea"
+      >
+        <div
+          className="ModerateCard-content CommentContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+            }
           }
-        }
-      />
+        />
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <a
+            className="TextLink-root ModerateCard-link"
+            href="http://localhost/comment/0"
+            target="_blank"
+          >
+            View Context
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-xs TextLink-icon"
+            >
+              open_in_new
+            </i>
+          </a>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
         >
           <div>
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="http://localhost/comment/0"
-              target="_blank"
+            <div
+              className="ModerateCard-storyLabel"
             >
-              View Context
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-xs TextLink-icon"
-              >
-                open_in_new
-              </i>
-            </a>
-          </div>
-          <div>
-            <span
-              className="ModerateCard-story"
-            >
-              Story
-            </span>
-            : 
-            <span
+              <span>
+                Comment On
+              </span>
+              <span>
+                :
+              </span>
+            </div>
+            <div
               className="ModerateCard-storyTitle"
             >
               Finally a Cure for Cancer
-            </span>
-             
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="/admin/moderate/story-1"
-              onClick={[Function]}
-            >
-              Moderate Story
-            </a>
+            </div>
+            <div>
+              <a
+                className="TextLink-root ModerateCard-link"
+                href="/admin/moderate/story-1"
+                onClick={[Function]}
+              >
+                Moderate Story
+              </a>
+            </div>
           </div>
           <div
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -383,7 +408,7 @@ exports[`rejects comment in reported queue: dangling 1`] = `
               className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Spam
@@ -398,9 +423,9 @@ exports[`rejects comment in reported queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                data-color="default"
+                data-variant="default"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -426,9 +451,6 @@ exports[`rejects comment in reported queue: dangling 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <div
       className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
@@ -515,7 +537,7 @@ exports[`renders reported queue with comments 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-alignCenter"
               >
                 <button
-                  className="BaseButton-root ModerateCard-username"
+                  className="BaseButton-root ModerateCard-usernameButton"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -525,7 +547,7 @@ exports[`renders reported queue with comments 1`] = `
                   type="button"
                 >
                   <span
-                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+                    className="Username-root"
                   >
                     Isabelle
                   </span>
@@ -566,54 +588,68 @@ exports[`renders reported queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+              className="ModerateCard-contentArea"
+            >
+              <div
+                className="ModerateCard-content CommentContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+                  }
                 }
-              }
-            />
+              />
+              <div
+                className="ModerateCard-viewContext"
+              >
+                <a
+                  className="TextLink-root ModerateCard-link"
+                  href="http://localhost/comment/0"
+                  target="_blank"
+                >
+                  View Context
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-xs TextLink-icon"
+                  >
+                    open_in_new
+                  </i>
+                </a>
+              </div>
+              <div
+                className="ModerateCard-separator ModerateCard-ruledSeparator"
+              />
+            </div>
             <div
               className="ModerateCard-footer"
             >
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
               >
                 <div>
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="http://localhost/comment/0"
-                    target="_blank"
+                  <div
+                    className="ModerateCard-storyLabel"
                   >
-                    View Context
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-xs TextLink-icon"
-                    >
-                      open_in_new
-                    </i>
-                  </a>
-                </div>
-                <div>
-                  <span
-                    className="ModerateCard-story"
-                  >
-                    Story
-                  </span>
-                  : 
-                  <span
+                    <span>
+                      Comment On
+                    </span>
+                    <span>
+                      :
+                    </span>
+                  </div>
+                  <div
                     className="ModerateCard-storyTitle"
                   >
                     Finally a Cure for Cancer
-                  </span>
-                   
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="/admin/moderate/story-1"
-                    onClick={[Function]}
-                  >
-                    Moderate Story
-                  </a>
+                  </div>
+                  <div>
+                    <a
+                      className="TextLink-root ModerateCard-link"
+                      href="/admin/moderate/story-1"
+                      onClick={[Function]}
+                    >
+                      Moderate Story
+                    </a>
+                  </div>
                 </div>
                 <div
                   className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -622,7 +658,7 @@ exports[`renders reported queue with comments 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                   >
                     <span
-                      className="Marker-root Marker-colorError Marker-variantRegular"
+                      className="Marker-root Marker-colorReported Marker-variantRegular"
                     >
                       <span>
                         Spam
@@ -637,9 +673,9 @@ exports[`renders reported queue with comments 1`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                      data-color="regular"
-                      data-variant="regular"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                      data-color="default"
+                      data-variant="default"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -665,9 +701,6 @@ exports[`renders reported queue with comments 1`] = `
               </div>
             </div>
           </div>
-          <div
-            className="ModerateCard-separator ModerateCard-ruledSeparator"
-          />
           <div
             className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
@@ -741,7 +774,7 @@ exports[`renders reported queue with comments 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-alignCenter"
               >
                 <button
-                  className="BaseButton-root ModerateCard-username"
+                  className="BaseButton-root ModerateCard-usernameButton"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -751,7 +784,7 @@ exports[`renders reported queue with comments 1`] = `
                   type="button"
                 >
                   <span
-                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+                    className="Username-root"
                   >
                     Ngoc
                   </span>
@@ -792,54 +825,68 @@ exports[`renders reported queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Don't fool with me",
+              className="ModerateCard-contentArea"
+            >
+              <div
+                className="ModerateCard-content CommentContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Don't fool with me",
+                  }
                 }
-              }
-            />
+              />
+              <div
+                className="ModerateCard-viewContext"
+              >
+                <a
+                  className="TextLink-root ModerateCard-link"
+                  href="http://localhost/comment/1"
+                  target="_blank"
+                >
+                  View Context
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-xs TextLink-icon"
+                  >
+                    open_in_new
+                  </i>
+                </a>
+              </div>
+              <div
+                className="ModerateCard-separator ModerateCard-ruledSeparator"
+              />
+            </div>
             <div
               className="ModerateCard-footer"
             >
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
               >
                 <div>
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="http://localhost/comment/1"
-                    target="_blank"
+                  <div
+                    className="ModerateCard-storyLabel"
                   >
-                    View Context
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-xs TextLink-icon"
-                    >
-                      open_in_new
-                    </i>
-                  </a>
-                </div>
-                <div>
-                  <span
-                    className="ModerateCard-story"
-                  >
-                    Story
-                  </span>
-                  : 
-                  <span
+                    <span>
+                      Comment On
+                    </span>
+                    <span>
+                      :
+                    </span>
+                  </div>
+                  <div
                     className="ModerateCard-storyTitle"
                   >
                     Finally a Cure for Cancer
-                  </span>
-                   
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="/admin/moderate/story-1"
-                    onClick={[Function]}
-                  >
-                    Moderate Story
-                  </a>
+                  </div>
+                  <div>
+                    <a
+                      className="TextLink-root ModerateCard-link"
+                      href="/admin/moderate/story-1"
+                      onClick={[Function]}
+                    >
+                      Moderate Story
+                    </a>
+                  </div>
                 </div>
                 <div
                   className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -848,7 +895,7 @@ exports[`renders reported queue with comments 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                   >
                     <span
-                      className="Marker-root Marker-colorError Marker-variantRegular"
+                      className="Marker-root Marker-colorReported Marker-variantRegular"
                     >
                       <span>
                         Offensive
@@ -863,9 +910,9 @@ exports[`renders reported queue with comments 1`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                      data-color="regular"
-                      data-variant="regular"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                      data-color="default"
+                      data-variant="default"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -891,9 +938,6 @@ exports[`renders reported queue with comments 1`] = `
               </div>
             </div>
           </div>
-          <div
-            className="ModerateCard-separator ModerateCard-ruledSeparator"
-          />
           <div
             className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
@@ -983,7 +1027,7 @@ exports[`renders reported queue with comments 2`] = `
                 className="Box-root Flex-root Flex-flex Flex-alignCenter"
               >
                 <button
-                  className="BaseButton-root ModerateCard-username"
+                  className="BaseButton-root ModerateCard-usernameButton"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -993,7 +1037,7 @@ exports[`renders reported queue with comments 2`] = `
                   type="button"
                 >
                   <span
-                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+                    className="Username-root"
                   >
                     Isabelle
                   </span>
@@ -1034,54 +1078,68 @@ exports[`renders reported queue with comments 2`] = `
               </div>
             </div>
             <div
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+              className="ModerateCard-contentArea"
+            >
+              <div
+                className="ModerateCard-content CommentContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+                  }
                 }
-              }
-            />
+              />
+              <div
+                className="ModerateCard-viewContext"
+              >
+                <a
+                  className="TextLink-root ModerateCard-link"
+                  href="http://localhost/comment/0"
+                  target="_blank"
+                >
+                  View Context
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-xs TextLink-icon"
+                  >
+                    open_in_new
+                  </i>
+                </a>
+              </div>
+              <div
+                className="ModerateCard-separator ModerateCard-ruledSeparator"
+              />
+            </div>
             <div
               className="ModerateCard-footer"
             >
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
               >
                 <div>
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="http://localhost/comment/0"
-                    target="_blank"
+                  <div
+                    className="ModerateCard-storyLabel"
                   >
-                    View Context
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-xs TextLink-icon"
-                    >
-                      open_in_new
-                    </i>
-                  </a>
-                </div>
-                <div>
-                  <span
-                    className="ModerateCard-story"
-                  >
-                    Story
-                  </span>
-                  : 
-                  <span
+                    <span>
+                      Comment On
+                    </span>
+                    <span>
+                      :
+                    </span>
+                  </div>
+                  <div
                     className="ModerateCard-storyTitle"
                   >
                     Finally a Cure for Cancer
-                  </span>
-                   
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="/admin/moderate/story-1"
-                    onClick={[Function]}
-                  >
-                    Moderate Story
-                  </a>
+                  </div>
+                  <div>
+                    <a
+                      className="TextLink-root ModerateCard-link"
+                      href="/admin/moderate/story-1"
+                      onClick={[Function]}
+                    >
+                      Moderate Story
+                    </a>
+                  </div>
                 </div>
                 <div
                   className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -1090,7 +1148,7 @@ exports[`renders reported queue with comments 2`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                   >
                     <span
-                      className="Marker-root Marker-colorError Marker-variantRegular"
+                      className="Marker-root Marker-colorReported Marker-variantRegular"
                     >
                       <span>
                         Spam
@@ -1105,9 +1163,9 @@ exports[`renders reported queue with comments 2`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                      data-color="regular"
-                      data-variant="regular"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                      data-color="default"
+                      data-variant="default"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1133,9 +1191,6 @@ exports[`renders reported queue with comments 2`] = `
               </div>
             </div>
           </div>
-          <div
-            className="ModerateCard-separator ModerateCard-ruledSeparator"
-          />
           <div
             className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
@@ -1209,7 +1264,7 @@ exports[`renders reported queue with comments 2`] = `
                 className="Box-root Flex-root Flex-flex Flex-alignCenter"
               >
                 <button
-                  className="BaseButton-root ModerateCard-username"
+                  className="BaseButton-root ModerateCard-usernameButton"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1219,7 +1274,7 @@ exports[`renders reported queue with comments 2`] = `
                   type="button"
                 >
                   <span
-                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+                    className="Username-root"
                   >
                     Ngoc
                   </span>
@@ -1260,54 +1315,68 @@ exports[`renders reported queue with comments 2`] = `
               </div>
             </div>
             <div
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Don't fool with me",
+              className="ModerateCard-contentArea"
+            >
+              <div
+                className="ModerateCard-content CommentContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Don't fool with me",
+                  }
                 }
-              }
-            />
+              />
+              <div
+                className="ModerateCard-viewContext"
+              >
+                <a
+                  className="TextLink-root ModerateCard-link"
+                  href="http://localhost/comment/1"
+                  target="_blank"
+                >
+                  View Context
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-xs TextLink-icon"
+                  >
+                    open_in_new
+                  </i>
+                </a>
+              </div>
+              <div
+                className="ModerateCard-separator ModerateCard-ruledSeparator"
+              />
+            </div>
             <div
               className="ModerateCard-footer"
             >
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
               >
                 <div>
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="http://localhost/comment/1"
-                    target="_blank"
+                  <div
+                    className="ModerateCard-storyLabel"
                   >
-                    View Context
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-xs TextLink-icon"
-                    >
-                      open_in_new
-                    </i>
-                  </a>
-                </div>
-                <div>
-                  <span
-                    className="ModerateCard-story"
-                  >
-                    Story
-                  </span>
-                  : 
-                  <span
+                    <span>
+                      Comment On
+                    </span>
+                    <span>
+                      :
+                    </span>
+                  </div>
+                  <div
                     className="ModerateCard-storyTitle"
                   >
                     Finally a Cure for Cancer
-                  </span>
-                   
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="/admin/moderate/story-1"
-                    onClick={[Function]}
-                  >
-                    Moderate Story
-                  </a>
+                  </div>
+                  <div>
+                    <a
+                      className="TextLink-root ModerateCard-link"
+                      href="/admin/moderate/story-1"
+                      onClick={[Function]}
+                    >
+                      Moderate Story
+                    </a>
+                  </div>
                 </div>
                 <div
                   className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -1316,7 +1385,7 @@ exports[`renders reported queue with comments 2`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                   >
                     <span
-                      className="Marker-root Marker-colorError Marker-variantRegular"
+                      className="Marker-root Marker-colorReported Marker-variantRegular"
                     >
                       <span>
                         Offensive
@@ -1331,9 +1400,9 @@ exports[`renders reported queue with comments 2`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                      data-color="regular"
-                      data-variant="regular"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                      data-color="default"
+                      data-variant="default"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -1359,9 +1428,6 @@ exports[`renders reported queue with comments 2`] = `
               </div>
             </div>
           </div>
-          <div
-            className="ModerateCard-separator ModerateCard-ruledSeparator"
-          />
           <div
             className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
@@ -1441,7 +1507,7 @@ exports[`renders reported queue with comments and load more 1`] = `
           className="Box-root Flex-root Flex-flex Flex-alignCenter"
         >
           <button
-            className="BaseButton-root ModerateCard-username"
+            className="BaseButton-root ModerateCard-usernameButton"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1451,7 +1517,7 @@ exports[`renders reported queue with comments and load more 1`] = `
             type="button"
           >
             <span
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+              className="Username-root"
             >
               Max
             </span>
@@ -1492,54 +1558,68 @@ exports[`renders reported queue with comments and load more 1`] = `
         </div>
       </div>
       <div
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "I think I deserve better",
+        className="ModerateCard-contentArea"
+      >
+        <div
+          className="ModerateCard-content CommentContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "I think I deserve better",
+            }
           }
-        }
-      />
+        />
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <a
+            className="TextLink-root ModerateCard-link"
+            href="http://localhost/comment/2"
+            target="_blank"
+          >
+            View Context
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-xs TextLink-icon"
+            >
+              open_in_new
+            </i>
+          </a>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
         >
           <div>
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="http://localhost/comment/2"
-              target="_blank"
+            <div
+              className="ModerateCard-storyLabel"
             >
-              View Context
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-xs TextLink-icon"
-              >
-                open_in_new
-              </i>
-            </a>
-          </div>
-          <div>
-            <span
-              className="ModerateCard-story"
-            >
-              Story
-            </span>
-            : 
-            <span
+              <span>
+                Comment On
+              </span>
+              <span>
+                :
+              </span>
+            </div>
+            <div
               className="ModerateCard-storyTitle"
             >
               Finally a Cure for Cancer
-            </span>
-             
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="/admin/moderate/story-1"
-              onClick={[Function]}
-            >
-              Moderate Story
-            </a>
+            </div>
+            <div>
+              <a
+                className="TextLink-root ModerateCard-link"
+                href="/admin/moderate/story-1"
+                onClick={[Function]}
+              >
+                Moderate Story
+              </a>
+            </div>
           </div>
           <div
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -1548,12 +1628,12 @@ exports[`renders reported queue with comments and load more 1`] = `
               className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <span
-                className="Marker-root Marker-colorPrimary Marker-variantRegular"
+                className="Marker-root Marker-colorPending Marker-variantRegular"
               >
                 Pre-mod
               </span>
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Offensive
@@ -1566,7 +1646,7 @@ exports[`renders reported queue with comments and load more 1`] = `
                 </span>
               </span>
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Spam
@@ -1581,9 +1661,9 @@ exports[`renders reported queue with comments and load more 1`] = `
               <button
                 aria-controls="uuid-2"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                data-color="default"
+                data-variant="default"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -1609,9 +1689,6 @@ exports[`renders reported queue with comments and load more 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <div
       className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
diff --git a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
index 5c35c0b48..63a2d70bd 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
@@ -34,7 +34,7 @@ exports[`approves comment in rejected queue: dangling 1`] = `
           className="Box-root Flex-root Flex-flex Flex-alignCenter"
         >
           <button
-            className="BaseButton-root ModerateCard-username"
+            className="BaseButton-root ModerateCard-usernameButton"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -44,7 +44,7 @@ exports[`approves comment in rejected queue: dangling 1`] = `
             type="button"
           >
             <span
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+              className="Username-root"
             >
               Isabelle
             </span>
@@ -85,54 +85,68 @@ exports[`approves comment in rejected queue: dangling 1`] = `
         </div>
       </div>
       <div
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+        className="ModerateCard-contentArea"
+      >
+        <div
+          className="ModerateCard-content CommentContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+            }
           }
-        }
-      />
+        />
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <a
+            className="TextLink-root ModerateCard-link"
+            href="http://localhost/comment/0"
+            target="_blank"
+          >
+            View Context
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-xs TextLink-icon"
+            >
+              open_in_new
+            </i>
+          </a>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
         >
           <div>
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="http://localhost/comment/0"
-              target="_blank"
+            <div
+              className="ModerateCard-storyLabel"
             >
-              View Context
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-xs TextLink-icon"
-              >
-                open_in_new
-              </i>
-            </a>
-          </div>
-          <div>
-            <span
-              className="ModerateCard-story"
-            >
-              Story
-            </span>
-            : 
-            <span
+              <span>
+                Comment On
+              </span>
+              <span>
+                :
+              </span>
+            </div>
+            <div
               className="ModerateCard-storyTitle"
             >
               Finally a Cure for Cancer
-            </span>
-             
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="/admin/moderate/story-1"
-              onClick={[Function]}
-            >
-              Moderate Story
-            </a>
+            </div>
+            <div>
+              <a
+                className="TextLink-root ModerateCard-link"
+                href="/admin/moderate/story-1"
+                onClick={[Function]}
+              >
+                Moderate Story
+              </a>
+            </div>
           </div>
           <div
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -141,7 +155,7 @@ exports[`approves comment in rejected queue: dangling 1`] = `
               className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Spam
@@ -156,9 +170,9 @@ exports[`approves comment in rejected queue: dangling 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                data-color="default"
+                data-variant="default"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -184,9 +198,6 @@ exports[`approves comment in rejected queue: dangling 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <div
       className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
@@ -273,7 +284,7 @@ exports[`renders rejected queue with comments 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-alignCenter"
               >
                 <button
-                  className="BaseButton-root ModerateCard-username"
+                  className="BaseButton-root ModerateCard-usernameButton"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -283,7 +294,7 @@ exports[`renders rejected queue with comments 1`] = `
                   type="button"
                 >
                   <span
-                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+                    className="Username-root"
                   >
                     Isabelle
                   </span>
@@ -324,54 +335,68 @@ exports[`renders rejected queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+              className="ModerateCard-contentArea"
+            >
+              <div
+                className="ModerateCard-content CommentContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+                  }
                 }
-              }
-            />
+              />
+              <div
+                className="ModerateCard-viewContext"
+              >
+                <a
+                  className="TextLink-root ModerateCard-link"
+                  href="http://localhost/comment/0"
+                  target="_blank"
+                >
+                  View Context
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-xs TextLink-icon"
+                  >
+                    open_in_new
+                  </i>
+                </a>
+              </div>
+              <div
+                className="ModerateCard-separator ModerateCard-ruledSeparator"
+              />
+            </div>
             <div
               className="ModerateCard-footer"
             >
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
               >
                 <div>
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="http://localhost/comment/0"
-                    target="_blank"
+                  <div
+                    className="ModerateCard-storyLabel"
                   >
-                    View Context
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-xs TextLink-icon"
-                    >
-                      open_in_new
-                    </i>
-                  </a>
-                </div>
-                <div>
-                  <span
-                    className="ModerateCard-story"
-                  >
-                    Story
-                  </span>
-                  : 
-                  <span
+                    <span>
+                      Comment On
+                    </span>
+                    <span>
+                      :
+                    </span>
+                  </div>
+                  <div
                     className="ModerateCard-storyTitle"
                   >
                     Finally a Cure for Cancer
-                  </span>
-                   
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="/admin/moderate/story-1"
-                    onClick={[Function]}
-                  >
-                    Moderate Story
-                  </a>
+                  </div>
+                  <div>
+                    <a
+                      className="TextLink-root ModerateCard-link"
+                      href="/admin/moderate/story-1"
+                      onClick={[Function]}
+                    >
+                      Moderate Story
+                    </a>
+                  </div>
                 </div>
                 <div
                   className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -380,7 +405,7 @@ exports[`renders rejected queue with comments 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                   >
                     <span
-                      className="Marker-root Marker-colorError Marker-variantRegular"
+                      className="Marker-root Marker-colorReported Marker-variantRegular"
                     >
                       <span>
                         Spam
@@ -395,9 +420,9 @@ exports[`renders rejected queue with comments 1`] = `
                     <button
                       aria-controls="uuid-0"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                      data-color="regular"
-                      data-variant="regular"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                      data-color="default"
+                      data-variant="default"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -423,9 +448,6 @@ exports[`renders rejected queue with comments 1`] = `
               </div>
             </div>
           </div>
-          <div
-            className="ModerateCard-separator ModerateCard-ruledSeparator"
-          />
           <div
             className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
@@ -499,7 +521,7 @@ exports[`renders rejected queue with comments 1`] = `
                 className="Box-root Flex-root Flex-flex Flex-alignCenter"
               >
                 <button
-                  className="BaseButton-root ModerateCard-username"
+                  className="BaseButton-root ModerateCard-usernameButton"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -509,7 +531,7 @@ exports[`renders rejected queue with comments 1`] = `
                   type="button"
                 >
                   <span
-                    className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+                    className="Username-root"
                   >
                     Ngoc
                   </span>
@@ -550,54 +572,68 @@ exports[`renders rejected queue with comments 1`] = `
               </div>
             </div>
             <div
-              className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-              dangerouslySetInnerHTML={
-                Object {
-                  "__html": "Don't fool with me",
+              className="ModerateCard-contentArea"
+            >
+              <div
+                className="ModerateCard-content CommentContent-root"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "Don't fool with me",
+                  }
                 }
-              }
-            />
+              />
+              <div
+                className="ModerateCard-viewContext"
+              >
+                <a
+                  className="TextLink-root ModerateCard-link"
+                  href="http://localhost/comment/1"
+                  target="_blank"
+                >
+                  View Context
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-xs TextLink-icon"
+                  >
+                    open_in_new
+                  </i>
+                </a>
+              </div>
+              <div
+                className="ModerateCard-separator ModerateCard-ruledSeparator"
+              />
+            </div>
             <div
               className="ModerateCard-footer"
             >
               <div
-                className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
               >
                 <div>
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="http://localhost/comment/1"
-                    target="_blank"
+                  <div
+                    className="ModerateCard-storyLabel"
                   >
-                    View Context
-                    <i
-                      aria-hidden="true"
-                      className="Icon-root Icon-xs TextLink-icon"
-                    >
-                      open_in_new
-                    </i>
-                  </a>
-                </div>
-                <div>
-                  <span
-                    className="ModerateCard-story"
-                  >
-                    Story
-                  </span>
-                  : 
-                  <span
+                    <span>
+                      Comment On
+                    </span>
+                    <span>
+                      :
+                    </span>
+                  </div>
+                  <div
                     className="ModerateCard-storyTitle"
                   >
                     Finally a Cure for Cancer
-                  </span>
-                   
-                  <a
-                    className="TextLink-root ModerateCard-link"
-                    href="/admin/moderate/story-1"
-                    onClick={[Function]}
-                  >
-                    Moderate Story
-                  </a>
+                  </div>
+                  <div>
+                    <a
+                      className="TextLink-root ModerateCard-link"
+                      href="/admin/moderate/story-1"
+                      onClick={[Function]}
+                    >
+                      Moderate Story
+                    </a>
+                  </div>
                 </div>
                 <div
                   className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -606,7 +642,7 @@ exports[`renders rejected queue with comments 1`] = `
                     className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                   >
                     <span
-                      className="Marker-root Marker-colorError Marker-variantRegular"
+                      className="Marker-root Marker-colorReported Marker-variantRegular"
                     >
                       <span>
                         Offensive
@@ -621,9 +657,9 @@ exports[`renders rejected queue with comments 1`] = `
                     <button
                       aria-controls="uuid-1"
                       aria-expanded={false}
-                      className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                      data-color="regular"
-                      data-variant="regular"
+                      className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                      data-color="default"
+                      data-variant="default"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -649,9 +685,6 @@ exports[`renders rejected queue with comments 1`] = `
               </div>
             </div>
           </div>
-          <div
-            className="ModerateCard-separator ModerateCard-ruledSeparator"
-          />
           <div
             className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
           >
@@ -731,7 +764,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
           className="Box-root Flex-root Flex-flex Flex-alignCenter"
         >
           <button
-            className="BaseButton-root ModerateCard-username"
+            className="BaseButton-root ModerateCard-usernameButton"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -741,7 +774,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
             type="button"
           >
             <span
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+              className="Username-root"
             >
               Max
             </span>
@@ -782,54 +815,68 @@ exports[`renders rejected queue with comments and load more 1`] = `
         </div>
       </div>
       <div
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "I think I deserve better",
+        className="ModerateCard-contentArea"
+      >
+        <div
+          className="ModerateCard-content CommentContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "I think I deserve better",
+            }
           }
-        }
-      />
+        />
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <a
+            className="TextLink-root ModerateCard-link"
+            href="http://localhost/comment/2"
+            target="_blank"
+          >
+            View Context
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-xs TextLink-icon"
+            >
+              open_in_new
+            </i>
+          </a>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
         >
           <div>
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="http://localhost/comment/2"
-              target="_blank"
+            <div
+              className="ModerateCard-storyLabel"
             >
-              View Context
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-xs TextLink-icon"
-              >
-                open_in_new
-              </i>
-            </a>
-          </div>
-          <div>
-            <span
-              className="ModerateCard-story"
-            >
-              Story
-            </span>
-            : 
-            <span
+              <span>
+                Comment On
+              </span>
+              <span>
+                :
+              </span>
+            </div>
+            <div
               className="ModerateCard-storyTitle"
             >
               Finally a Cure for Cancer
-            </span>
-             
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="/admin/moderate/story-1"
-              onClick={[Function]}
-            >
-              Moderate Story
-            </a>
+            </div>
+            <div>
+              <a
+                className="TextLink-root ModerateCard-link"
+                href="/admin/moderate/story-1"
+                onClick={[Function]}
+              >
+                Moderate Story
+              </a>
+            </div>
           </div>
           <div
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
@@ -838,7 +885,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
               className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Offensive
@@ -851,7 +898,7 @@ exports[`renders rejected queue with comments and load more 1`] = `
                 </span>
               </span>
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Spam
@@ -866,9 +913,9 @@ exports[`renders rejected queue with comments and load more 1`] = `
               <button
                 aria-controls="uuid-2"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                data-color="default"
+                data-variant="default"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -894,9 +941,6 @@ exports[`renders rejected queue with comments and load more 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <div
       className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
diff --git a/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap
index 03bc2c80f..e3fa888bb 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/searchBar.spec.tsx.snap
@@ -56,7 +56,7 @@ exports[`all stories active search with no results 1`] = `
               onChange={[Function]}
               onFocus={[Function]}
               onKeyDown={[Function]}
-              placeholder="Use quotation marks around each search term (e.g. “team”, “St. Louis”)"
+              placeholder="search by story title, author, url, id, etc."
               spellCheck={false}
               value=""
             />
@@ -174,9 +174,9 @@ exports[`all stories active search with too many results 1`] = `
     </span>
     <i
       aria-hidden="true"
-      className="Icon-root Icon-sm SeeAllOption-icon"
+      className="Icon-root Icon-md SeeAllOption-icon"
     >
-      arrow_forward
+      keyboard_arrow_right
     </i>
   </a>
 </li>
diff --git a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
index 5f8208278..7d7a66aff 100644
--- a/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+++ b/src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`approves single comment 1`] = `
           className="Box-root Flex-root Flex-flex Flex-alignCenter"
         >
           <button
-            className="BaseButton-root ModerateCard-username"
+            className="BaseButton-root ModerateCard-usernameButton"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -31,7 +31,7 @@ exports[`approves single comment 1`] = `
             type="button"
           >
             <span
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+              className="Username-root"
             >
               Isabelle
             </span>
@@ -72,34 +72,43 @@ exports[`approves single comment 1`] = `
         </div>
       </div>
       <div
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+        className="ModerateCard-contentArea"
+      >
+        <div
+          className="ModerateCard-content CommentContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+            }
           }
-        }
-      />
+        />
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <a
+            className="TextLink-root ModerateCard-link"
+            href="http://localhost/comment/0"
+            target="_blank"
+          >
+            View Context
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-xs TextLink-icon"
+            >
+              open_in_new
+            </i>
+          </a>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
         >
-          <div>
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="http://localhost/comment/0"
-              target="_blank"
-            >
-              View Context
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-xs TextLink-icon"
-              >
-                open_in_new
-              </i>
-            </a>
-          </div>
           <div
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
@@ -107,7 +116,7 @@ exports[`approves single comment 1`] = `
               className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Spam
@@ -122,9 +131,9 @@ exports[`approves single comment 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                data-color="default"
+                data-variant="default"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -150,9 +159,6 @@ exports[`approves single comment 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <div
       className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
@@ -229,7 +235,7 @@ exports[`rejects single comment 1`] = `
           className="Box-root Flex-root Flex-flex Flex-alignCenter"
         >
           <button
-            className="BaseButton-root ModerateCard-username"
+            className="BaseButton-root ModerateCard-usernameButton"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -239,7 +245,7 @@ exports[`rejects single comment 1`] = `
             type="button"
           >
             <span
-              className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+              className="Username-root"
             >
               Isabelle
             </span>
@@ -280,34 +286,43 @@ exports[`rejects single comment 1`] = `
         </div>
       </div>
       <div
-        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+        className="ModerateCard-contentArea"
+      >
+        <div
+          className="ModerateCard-content CommentContent-root"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+            }
           }
-        }
-      />
+        />
+        <div
+          className="ModerateCard-viewContext"
+        >
+          <a
+            className="TextLink-root ModerateCard-link"
+            href="http://localhost/comment/0"
+            target="_blank"
+          >
+            View Context
+            <i
+              aria-hidden="true"
+              className="Icon-root Icon-xs TextLink-icon"
+            >
+              open_in_new
+            </i>
+          </a>
+        </div>
+        <div
+          className="ModerateCard-separator ModerateCard-ruledSeparator"
+        />
+      </div>
       <div
         className="ModerateCard-footer"
       >
         <div
-          className="Box-root HorizontalGutter-root HorizontalGutter-full"
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
         >
-          <div>
-            <a
-              className="TextLink-root ModerateCard-link"
-              href="http://localhost/comment/0"
-              target="_blank"
-            >
-              View Context
-              <i
-                aria-hidden="true"
-                className="Icon-root Icon-xs TextLink-icon"
-              >
-                open_in_new
-              </i>
-            </a>
-          </div>
           <div
             className="Box-root HorizontalGutter-root HorizontalGutter-full"
           >
@@ -315,7 +330,7 @@ exports[`rejects single comment 1`] = `
               className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
             >
               <span
-                className="Marker-root Marker-colorError Marker-variantRegular"
+                className="Marker-root Marker-colorReported Marker-variantRegular"
               >
                 <span>
                   Spam
@@ -330,9 +345,9 @@ exports[`rejects single comment 1`] = `
               <button
                 aria-controls="uuid-0"
                 aria-expanded={false}
-                className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                data-color="regular"
-                data-variant="regular"
+                className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                data-color="default"
+                data-variant="default"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -358,9 +373,6 @@ exports[`rejects single comment 1`] = `
         </div>
       </div>
     </div>
-    <div
-      className="ModerateCard-separator ModerateCard-ruledSeparator"
-    />
     <div
       className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
     >
@@ -472,7 +484,7 @@ exports[`renders single comment view 1`] = `
                   className="Box-root Flex-root Flex-flex Flex-alignCenter"
                 >
                   <button
-                    className="BaseButton-root ModerateCard-username"
+                    className="BaseButton-root ModerateCard-usernameButton"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -482,7 +494,7 @@ exports[`renders single comment view 1`] = `
                     type="button"
                   >
                     <span
-                      className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary Username-root"
+                      className="Username-root"
                     >
                       Isabelle
                     </span>
@@ -523,34 +535,43 @@ exports[`renders single comment view 1`] = `
                 </div>
               </div>
               <div
-                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ModerateCard-content CommentContent-root"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+                className="ModerateCard-contentArea"
+              >
+                <div
+                  className="ModerateCard-content CommentContent-root"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
+                    }
                   }
-                }
-              />
+                />
+                <div
+                  className="ModerateCard-viewContext"
+                >
+                  <a
+                    className="TextLink-root ModerateCard-link"
+                    href="http://localhost/comment/0"
+                    target="_blank"
+                  >
+                    View Context
+                    <i
+                      aria-hidden="true"
+                      className="Icon-root Icon-xs TextLink-icon"
+                    >
+                      open_in_new
+                    </i>
+                  </a>
+                </div>
+                <div
+                  className="ModerateCard-separator ModerateCard-ruledSeparator"
+                />
+              </div>
               <div
                 className="ModerateCard-footer"
               >
                 <div
-                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
+                  className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
                 >
-                  <div>
-                    <a
-                      className="TextLink-root ModerateCard-link"
-                      href="http://localhost/comment/0"
-                      target="_blank"
-                    >
-                      View Context
-                      <i
-                        aria-hidden="true"
-                        className="Icon-root Icon-xs TextLink-icon"
-                      >
-                        open_in_new
-                      </i>
-                    </a>
-                  </div>
                   <div
                     className="Box-root HorizontalGutter-root HorizontalGutter-full"
                   >
@@ -558,7 +579,7 @@ exports[`renders single comment view 1`] = `
                       className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                     >
                       <span
-                        className="Marker-root Marker-colorError Marker-variantRegular"
+                        className="Marker-root Marker-colorReported Marker-variantRegular"
                       >
                         <span>
                           Spam
@@ -573,9 +594,9 @@ exports[`renders single comment view 1`] = `
                       <button
                         aria-controls="uuid-0"
                         aria-expanded={false}
-                        className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Markers-detailsButtonColorRegular Button-variantRegular Markers-detailsButton"
-                        data-color="regular"
-                        data-variant="regular"
+                        className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Markers-detailsButtonColorRegular Button-variantDefault Markers-detailsButton Button-uppercase"
+                        data-color="default"
+                        data-variant="default"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -601,9 +622,6 @@ exports[`renders single comment view 1`] = `
                 </div>
               </div>
             </div>
-            <div
-              className="ModerateCard-separator ModerateCard-ruledSeparator"
-            />
             <div
               className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
             >
diff --git a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
index 22040f178..8f9158d69 100644
--- a/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+++ b/src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
@@ -14,103 +14,111 @@ exports[`renders empty stories 1`] = `
       <fieldset
         className="FieldSet-root"
       >
-        <legend
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          Search
-        </legend>
-        <form
-          autoComplete="off"
-          id="configure-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="TextField-root StoryTableFilter-textField"
+          <label
+            className="Label-root"
+          >
+            Search
+          </label>
+          <form
+            autoComplete="off"
+            id="configure-form"
+            onSubmit={[Function]}
           >
-            <input
-              aria-label="Search by story title or author"
-              className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
-              name="search"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="Search by story title or author..."
-              type="text"
-              value=""
-            />
             <div
-              className="TextField-adornment"
+              className="TextField-root StoryTableFilter-textField"
             >
-              <button
-                aria-label="Search"
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
-                data-color="dark"
-                data-variant="adornment"
+              <input
+                aria-label="Search by story title or author"
+                className="TextField-input TextField-colorDark TextField-seamlessAdornment"
+                name="search"
                 onBlur={[Function]}
+                onChange={[Function]}
                 onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
+                placeholder="Search by story title or author..."
+                type="text"
+                value=""
+              />
+              <div
+                className="TextField-adornment"
               >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-md"
+                <button
+                  aria-label="Search"
+                  className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase StoryTableFilter-adornment"
+                  data-color="emphasis"
+                  data-variant="adornment"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="submit"
                 >
-                  search
-                </i>
-              </button>
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    search
+                  </i>
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
+        </div>
       </fieldset>
       <fieldset
         className="FieldSet-root"
       >
-        <legend
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          Show Me
-        </legend>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            aria-label="Search by status"
-            className="SelectField-select"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            value=""
+          <label
+            className="Label-root"
           >
-            <option
+            Show Me
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              aria-label="Search by status"
+              className="SelectField-select"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
               value=""
             >
-              All Stories
-            </option>
-            <option
-              value="OPEN"
+              <option
+                value=""
+              >
+                All Stories
+              </option>
+              <option
+                value="OPEN"
+              >
+                Open Stories
+              </option>
+              <option
+                value="CLOSED"
+              >
+                Closed Stories
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper"
             >
-              Open Stories
-            </option>
-            <option
-              value="CLOSED"
-            >
-              Closed Stories
-            </option>
-          </select>
-          <span
-            aria-hidden={true}
-            className="SelectField-afterWrapper"
-          >
-            <i
-              aria-hidden="true"
-              className="Icon-root Icon-sm"
-            >
-              expand_more
-            </i>
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
           </span>
-        </span>
+        </div>
       </fieldset>
     </div>
     <div
@@ -194,9 +202,9 @@ exports[`renders empty stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -265,9 +273,9 @@ exports[`renders empty stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -325,103 +333,111 @@ exports[`renders stories 1`] = `
       <fieldset
         className="FieldSet-root"
       >
-        <legend
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          Search
-        </legend>
-        <form
-          autoComplete="off"
-          id="configure-form"
-          onSubmit={[Function]}
-        >
-          <div
-            className="TextField-root StoryTableFilter-textField"
+          <label
+            className="Label-root"
+          >
+            Search
+          </label>
+          <form
+            autoComplete="off"
+            id="configure-form"
+            onSubmit={[Function]}
           >
-            <input
-              aria-label="Search by story title or author"
-              className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
-              name="search"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              placeholder="Search by story title or author..."
-              type="text"
-              value=""
-            />
             <div
-              className="TextField-adornment"
+              className="TextField-root StoryTableFilter-textField"
             >
-              <button
-                aria-label="Search"
-                className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantAdornment StoryTableFilter-adornment"
-                data-color="dark"
-                data-variant="adornment"
+              <input
+                aria-label="Search by story title or author"
+                className="TextField-input TextField-colorDark TextField-seamlessAdornment"
+                name="search"
                 onBlur={[Function]}
+                onChange={[Function]}
                 onFocus={[Function]}
-                onMouseOut={[Function]}
-                onMouseOver={[Function]}
-                onTouchEnd={[Function]}
-                type="submit"
+                placeholder="Search by story title or author..."
+                type="text"
+                value=""
+              />
+              <div
+                className="TextField-adornment"
               >
-                <i
-                  aria-hidden="true"
-                  className="Icon-root Icon-md"
+                <button
+                  aria-label="Search"
+                  className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase StoryTableFilter-adornment"
+                  data-color="emphasis"
+                  data-variant="adornment"
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                  onTouchEnd={[Function]}
+                  type="submit"
                 >
-                  search
-                </i>
-              </button>
+                  <i
+                    aria-hidden="true"
+                    className="Icon-root Icon-md"
+                  >
+                    search
+                  </i>
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
+        </div>
       </fieldset>
       <fieldset
         className="FieldSet-root"
       >
-        <legend
-          className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary StoryTableFilter-legend"
+        <div
+          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-2"
         >
-          Show Me
-        </legend>
-        <span
-          className="SelectField-root"
-        >
-          <select
-            aria-label="Search by status"
-            className="SelectField-select"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            value=""
+          <label
+            className="Label-root"
           >
-            <option
+            Show Me
+          </label>
+          <span
+            className="SelectField-root"
+          >
+            <select
+              aria-label="Search by status"
+              className="SelectField-select"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
               value=""
             >
-              All Stories
-            </option>
-            <option
-              value="OPEN"
+              <option
+                value=""
+              >
+                All Stories
+              </option>
+              <option
+                value="OPEN"
+              >
+                Open Stories
+              </option>
+              <option
+                value="CLOSED"
+              >
+                Closed Stories
+              </option>
+            </select>
+            <span
+              aria-hidden={true}
+              className="SelectField-afterWrapper"
             >
-              Open Stories
-            </option>
-            <option
-              value="CLOSED"
-            >
-              Closed Stories
-            </option>
-          </select>
-          <span
-            aria-hidden={true}
-            className="SelectField-afterWrapper"
-          >
-            <i
-              aria-hidden="true"
-              className="Icon-root Icon-sm"
-            >
-              expand_more
-            </i>
+              <i
+                aria-hidden="true"
+                className="Icon-root Icon-sm"
+              >
+                expand_more
+              </i>
+            </span>
           </span>
-        </span>
+        </div>
       </fieldset>
     </div>
     <div
@@ -505,9 +521,9 @@ exports[`renders stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -576,9 +592,9 @@ exports[`renders stories 1`] = `
               >
                 <button
                   aria-label="Change status"
-                  className="BaseButton-root Button-root Button-sizeSmall Button-colorRegular Button-variantRegular StoryStatusChange-button"
-                  data-color="regular"
-                  data-variant="regular"
+                  className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
+                  data-color="mono"
+                  data-variant="plain"
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
diff --git a/src/core/client/admin/ui/components/index.ts b/src/core/client/admin/ui/components/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/core/client/framework/components/CopyButton.tsx b/src/core/client/framework/components/CopyButton.tsx
index 37a198f38..468b8a347 100644
--- a/src/core/client/framework/components/CopyButton.tsx
+++ b/src/core/client/framework/components/CopyButton.tsx
@@ -2,11 +2,12 @@ import { Localized } from "fluent-react/compat";
 import React from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 
-import { Button } from "coral-ui/components";
+import { Button } from "coral-ui/components/v2";
 import { PropTypesOf } from "coral-ui/types";
 
 interface Props extends PropTypesOf<typeof Button> {
   text: string;
+  size?: "small" | "medium" | "large";
 }
 
 interface State {
@@ -39,11 +40,11 @@ class CopyButton extends React.Component<Props> {
   };
 
   public render() {
-    const { text, ...rest } = this.props;
+    const { text, size, ...rest } = this.props;
     const { copied } = this.state;
     return (
       <CopyToClipboard text={text} onCopy={this.handleCopy}>
-        <Button color="primary" variant="filled" size="small" {...rest}>
+        <Button variant="filled" size={size || "small"} {...rest}>
           {copied ? (
             <Localized id="framework-copyButton-copied">
               <span>Copied!</span>
diff --git a/src/core/client/stream/tabs/Configure/Configure.tsx b/src/core/client/stream/tabs/Configure/Configure.tsx
index f52093e1d..52c905544 100644
--- a/src/core/client/stream/tabs/Configure/Configure.tsx
+++ b/src/core/client/stream/tabs/Configure/Configure.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 
 import { PropTypesOf } from "coral-framework/types";
 import UserBoxContainer from "coral-stream/common/UserBox";
-import { HorizontalGutter } from "coral-ui/components";
+import { HorizontalGutter } from "coral-ui/components/v2";
 
 import ConfigureStreamContainer from "./ConfigureStream";
 import HorizontalRule from "./HorizontalRule";
diff --git a/src/core/client/ui/components/Dropdown/Button.css b/src/core/client/ui/components/Dropdown/Button.css
index c4128bfc0..fe87b877a 100644
--- a/src/core/client/ui/components/Dropdown/Button.css
+++ b/src/core/client/ui/components/Dropdown/Button.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--spacing-2);
+  padding: var(--v2-spacing-2);
   width: 100%;
   text-align: left;
   line-height: 1;
@@ -34,13 +34,13 @@
   justify-content: baseline;
   align-items: center;
   color: var(--palette-grey-main);
-  margin-right: var(--spacing-2);
+  margin-right: var(--v2-spacing-2);
 }
 .iconAfter {
   display: flex;
   align-items: center;
   justify-content: baseline;
-  margin-left: var(--spacing-2);
+  margin-left: var(--v2-spacing-2);
   text-decoration: unset;
 }
 .iconOpenInNew {
@@ -49,5 +49,5 @@
 }
 
 .blankAdornment {
-  padding-right: var(--spacing-6);
+  padding-right: var(--v2-spacing-6);
 }
diff --git a/src/core/client/ui/components/Marker/Marker.css b/src/core/client/ui/components/Marker/Marker.css
index cbed39ba8..79482d206 100644
--- a/src/core/client/ui/components/Marker/Marker.css
+++ b/src/core/client/ui/components/Marker/Marker.css
@@ -1,5 +1,6 @@
 .root {
   composes: markerText from "coral-ui/shared/typography.css";
+
   color: var(--palette-error-main);
   border: 1px solid currentColor;
   border-radius: 20px;
diff --git a/src/core/client/ui/components/Typography/Typography.css b/src/core/client/ui/components/Typography/Typography.css
index f292d0229..cc52d79f2 100644
--- a/src/core/client/ui/components/Typography/Typography.css
+++ b/src/core/client/ui/components/Typography/Typography.css
@@ -144,4 +144,10 @@
 
 .inputLabel {
   composes: inputLabel from "coral-ui/shared/typography.css";
-}
\ No newline at end of file
+}
+
+/* V2 Typography */
+
+.bodyCommentV2 {
+  composes: bodyCommentV2 from "coral-ui/shared/typography.css";
+}
diff --git a/src/core/client/ui/components/Typography/Typography.tsx b/src/core/client/ui/components/Typography/Typography.tsx
index 0d74317be..f9dabdbc4 100644
--- a/src/core/client/ui/components/Typography/Typography.tsx
+++ b/src/core/client/ui/components/Typography/Typography.tsx
@@ -27,7 +27,9 @@ type Variant =
   | "fieldDescription"
   | "inputLabel"
   | "detail"
-  | "timestamp";
+  | "timestamp"
+  // V2
+  | "bodyCommentV2";
 
 // Based on Typography Component of Material UI.
 // https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/Typography/Typography.js
@@ -62,7 +64,9 @@ interface Props extends PropTypesOf<typeof Box> {
     | "error"
     | "errorDark"
     | "textDark"
-    | "success";
+    | "success"
+    // V2
+    | "textPrimaryV2";
   /**
    * The container used for the root node.
    * Either a string to use a DOM element, a component, or an element.
@@ -171,6 +175,8 @@ Typography.defaultProps = {
     timestamp: "span",
     inputLabel: "label",
     detail: "p",
+    // V2
+    bodyCommentV2: "p",
   },
   noWrap: false,
   paragraph: false,
diff --git a/src/core/client/ui/components/v2/AppBar/AppBar.css b/src/core/client/ui/components/v2/AppBar/AppBar.css
new file mode 100644
index 000000000..1783055e2
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/AppBar.css
@@ -0,0 +1,18 @@
+.root {
+  background-color: var(--v2-palette-main-nav-background-default);
+  border-bottom: 1px solid var(--v2-palette-divider);
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  height: calc(8 * var(--mini-unit));
+  box-sizing: border-box;
+}
+
+.gutterBegin {
+  padding-left: calc(2 * var(--mini-unit));
+}
+.gutterEnd {
+  padding-right: calc(2 * var(--mini-unit));
+}
diff --git a/src/core/client/ui/components/v2/AppBar/AppBar.mdx b/src/core/client/ui/components/v2/AppBar/AppBar.mdx
new file mode 100644
index 000000000..a0b6c5a65
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/AppBar.mdx
@@ -0,0 +1,37 @@
+---
+name: AppBar
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+import { AppBar, Begin, End, Navigation, NavigationItem, Divider } from "./";
+import { Logo } from "../Brand";
+import Flex from "../Flex";
+import Icon from "../Icon";
+import BaseButton from "../BaseButton";
+
+# AppBar
+
+## Basic usage
+
+<Playground>
+  <AppBar gutterBegin gutterEnd>
+    <Begin itemGutter="double">
+      <Logo />
+      <Navigation>
+        <NavigationItem active>Home</NavigationItem>
+        <NavigationItem>Team</NavigationItem>
+      </Navigation>
+    </Begin>
+    <End itemGutter>
+      <BaseButton>
+        <Icon size="lg">history</Icon>
+      </BaseButton>
+      <Divider />
+      <BaseButton>
+        <Icon size="lg">account_box</Icon>
+      </BaseButton>
+    </End>
+  </AppBar>
+</Playground>
diff --git a/src/core/client/ui/components/v2/AppBar/AppBar.spec.tsx b/src/core/client/ui/components/v2/AppBar/AppBar.spec.tsx
new file mode 100644
index 000000000..a59d1c536
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/AppBar.spec.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import AppBar from "./AppBar";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof AppBar> = {
+    children: "child",
+    gutterBegin: true,
+    gutterEnd: true,
+    className: "custom",
+  };
+  const renderer = createRenderer();
+  renderer.render(<AppBar {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/AppBar/AppBar.tsx b/src/core/client/ui/components/v2/AppBar/AppBar.tsx
new file mode 100644
index 000000000..2fa21fbc1
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/AppBar.tsx
@@ -0,0 +1,38 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { Flex } from "coral-ui/components";
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./AppBar.css";
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  gutterBegin?: boolean;
+  gutterEnd?: boolean;
+  classes: typeof styles;
+}
+
+const AppBar: FunctionComponent<Props> = ({
+  gutterBegin,
+  gutterEnd,
+  className,
+  children,
+  classes,
+  ...rest
+}) => {
+  return (
+    <div
+      {...rest}
+      className={cn(classes.root, className, {
+        [classes.gutterBegin]: gutterBegin,
+        [classes.gutterEnd]: gutterEnd,
+      })}
+    >
+      <Flex className={classes.container}>{children}</Flex>
+    </div>
+  );
+};
+
+export default withStyles(styles)(AppBar);
diff --git a/src/core/client/ui/components/v2/AppBar/Begin.css b/src/core/client/ui/components/v2/AppBar/Begin.css
new file mode 100644
index 000000000..365d8e488
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Begin.css
@@ -0,0 +1,3 @@
+.root {
+  flex-grow: 1;
+}
diff --git a/src/core/client/ui/components/v2/AppBar/Begin.spec.tsx b/src/core/client/ui/components/v2/AppBar/Begin.spec.tsx
new file mode 100644
index 000000000..442d0b3ec
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Begin.spec.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import End from "./End";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof End> = {
+    children: "children",
+    className: "custom",
+    itemGutter: true,
+  };
+  const renderer = createRenderer();
+  renderer.render(<End {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/AppBar/Begin.tsx b/src/core/client/ui/components/v2/AppBar/Begin.tsx
new file mode 100644
index 000000000..08732cfc0
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Begin.tsx
@@ -0,0 +1,27 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { Flex } from "coral-ui/components";
+import { withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./Begin.css";
+
+interface Props extends PropTypesOf<typeof Flex> {
+  children?: React.ReactNode;
+  className?: string;
+  classes: typeof styles;
+}
+
+const Begin: FunctionComponent<Props> = ({
+  className,
+  children,
+  classes,
+  ...rest
+}) => (
+  <Flex className={cn(className, classes.root)} alignItems="center" {...rest}>
+    {children}
+  </Flex>
+);
+
+export default withStyles(styles)(Begin);
diff --git a/src/core/client/ui/components/v2/AppBar/Divider.css b/src/core/client/ui/components/v2/AppBar/Divider.css
new file mode 100644
index 000000000..1f9f9872f
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Divider.css
@@ -0,0 +1,4 @@
+.root {
+  height: 32px;
+  border-right: 2px solid var(--v2-palette-main-nav-divider);
+}
diff --git a/src/core/client/ui/components/v2/AppBar/Divider.spec.tsx b/src/core/client/ui/components/v2/AppBar/Divider.spec.tsx
new file mode 100644
index 000000000..0489e8451
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Divider.spec.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import Divider from "./Divider";
+
+it("renders correctly", () => {
+  const renderer = createRenderer();
+  renderer.render(<Divider />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/AppBar/Divider.tsx b/src/core/client/ui/components/v2/AppBar/Divider.tsx
new file mode 100644
index 000000000..0f3c3f9d5
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Divider.tsx
@@ -0,0 +1,17 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Divider.css";
+
+interface Props {
+  className?: string;
+  classes: typeof styles;
+}
+
+const Divider: FunctionComponent<Props> = ({ className, classes, ...rest }) => (
+  <div {...rest} className={cn(classes.root, className)} />
+);
+
+export default withStyles(styles)(Divider);
diff --git a/src/core/client/ui/components/v2/AppBar/End.css b/src/core/client/ui/components/v2/AppBar/End.css
new file mode 100644
index 000000000..8b4643190
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/End.css
@@ -0,0 +1,4 @@
+.root {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
diff --git a/src/core/client/ui/components/v2/AppBar/End.spec.tsx b/src/core/client/ui/components/v2/AppBar/End.spec.tsx
new file mode 100644
index 000000000..442d0b3ec
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/End.spec.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import End from "./End";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof End> = {
+    children: "children",
+    className: "custom",
+    itemGutter: true,
+  };
+  const renderer = createRenderer();
+  renderer.render(<End {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/AppBar/End.tsx b/src/core/client/ui/components/v2/AppBar/End.tsx
new file mode 100644
index 000000000..ffc2275ef
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/End.tsx
@@ -0,0 +1,27 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { Flex } from "coral-ui/components";
+import { withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./End.css";
+
+interface Props extends PropTypesOf<typeof Flex> {
+  children?: React.ReactNode;
+  className?: string;
+  classes: typeof styles;
+}
+
+const End: FunctionComponent<Props> = ({
+  classes,
+  className,
+  children,
+  ...rest
+}) => (
+  <Flex className={cn(className, classes.root)} alignItems="center" {...rest}>
+    {children}
+  </Flex>
+);
+
+export default withStyles(styles)(End);
diff --git a/src/core/client/ui/components/v2/AppBar/Navigation.css b/src/core/client/ui/components/v2/AppBar/Navigation.css
new file mode 100644
index 000000000..3c1d3b4a8
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Navigation.css
@@ -0,0 +1,11 @@
+.root {
+  height: 100%;
+}
+
+.ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  height: 100%;
+  margin: 0;
+}
diff --git a/src/core/client/ui/components/v2/AppBar/Navigation.spec.tsx b/src/core/client/ui/components/v2/AppBar/Navigation.spec.tsx
new file mode 100644
index 000000000..1a3953b98
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Navigation.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import Navigation from "./Navigation";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Navigation> = {
+    children: "children",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Navigation {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/AppBar/Navigation.tsx b/src/core/client/ui/components/v2/AppBar/Navigation.tsx
new file mode 100644
index 000000000..8a19567b4
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/Navigation.tsx
@@ -0,0 +1,24 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Navigation.css";
+
+interface Props {
+  className?: string;
+  classes: typeof styles;
+  children?: React.ReactNode;
+}
+
+const Navigation: FunctionComponent<Props> = ({
+  children,
+  className,
+  classes,
+}) => (
+  <nav className={cn(classes.root, className)}>
+    <ul className={classes.ul}>{children}</ul>
+  </nav>
+);
+
+export default withStyles(styles)(Navigation);
diff --git a/src/core/client/ui/components/v2/AppBar/NavigationItem.css b/src/core/client/ui/components/v2/AppBar/NavigationItem.css
new file mode 100644
index 000000000..c517e483c
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/NavigationItem.css
@@ -0,0 +1,45 @@
+$main-nav-text: var(--v2-colors-mono-100);
+$main-nav-background: var(--v2-colors-pure-white);
+$main-nav-hover-background: var(--v2-colors-coral-200);
+$main-nav-active-background: var(--v2-colors-coral-500);
+$main-nav-active-text: var(--v2-colors-pure-white);
+$main-nav-hover-text: var(--v2-colors-mono-500);
+
+.root {
+}
+
+.anchor {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-3);
+  text-transform: uppercase;
+
+  color: $main-nav-text;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--mini-unit);
+  text-decoration: none;
+
+  &:hover {
+    cursor: pointer;
+    color: $main-nav-hover-text;
+    background-color: $main-nav-hover-background;
+  }
+}
+
+.active {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-3);
+  text-transform: uppercase;
+
+  background-color: $main-nav-active-background;
+  text-decoration: none;
+  color: $main-nav-active-text;
+
+  &:hover {
+    color: $main-nav-active-text;
+    background-color: $main-nav-active-background;
+  }
+}
diff --git a/src/core/client/ui/components/v2/AppBar/NavigationItem.spec.tsx b/src/core/client/ui/components/v2/AppBar/NavigationItem.spec.tsx
new file mode 100644
index 000000000..1f7e58c22
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/NavigationItem.spec.tsx
@@ -0,0 +1,20 @@
+import { noop } from "lodash";
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import NavigationItem from "./NavigationItem";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof NavigationItem> = {
+    href: "/moderate",
+    children: "link",
+    onClick: noop,
+    active: true,
+    className: "custom",
+  };
+  const renderer = createRenderer();
+  renderer.render(<NavigationItem {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/AppBar/NavigationItem.tsx b/src/core/client/ui/components/v2/AppBar/NavigationItem.tsx
new file mode 100644
index 000000000..b67489475
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/NavigationItem.tsx
@@ -0,0 +1,41 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./NavigationItem.css";
+
+interface Props {
+  children: React.ReactNode;
+  href: string;
+  className?: string;
+  active?: boolean;
+  onClick?: React.EventHandler<React.MouseEvent>;
+  classes: typeof styles;
+}
+
+const NavigationItem: FunctionComponent<Props> = ({
+  className,
+  active,
+  href,
+  onClick,
+  children,
+  classes,
+  ...rest
+}) => {
+  return (
+    <li className={cn(className, classes.root)} {...rest}>
+      <a
+        className={cn(classes.anchor, {
+          [classes.active]: active,
+        })}
+        href={href}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    </li>
+  );
+};
+
+export default withStyles(styles)(NavigationItem);
diff --git a/src/core/client/ui/components/v2/AppBar/__snapshots__/AppBar.spec.tsx.snap b/src/core/client/ui/components/v2/AppBar/__snapshots__/AppBar.spec.tsx.snap
new file mode 100644
index 000000000..cef384323
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/__snapshots__/AppBar.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<AppBar
+  className="custom"
+  classes={
+    Object {
+      "container": "AppBar-container",
+      "gutterBegin": "AppBar-gutterBegin",
+      "gutterEnd": "AppBar-gutterEnd",
+      "root": "AppBar-root",
+    }
+  }
+  gutterBegin={true}
+  gutterEnd={true}
+>
+  child
+</AppBar>
+`;
diff --git a/src/core/client/ui/components/v2/AppBar/__snapshots__/Begin.spec.tsx.snap b/src/core/client/ui/components/v2/AppBar/__snapshots__/Begin.spec.tsx.snap
new file mode 100644
index 000000000..7f8ca63d8
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/__snapshots__/Begin.spec.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<End
+  className="custom"
+  classes={
+    Object {
+      "root": "End-root",
+    }
+  }
+  itemGutter={true}
+>
+  children
+</End>
+`;
diff --git a/src/core/client/ui/components/v2/AppBar/__snapshots__/Divider.spec.tsx.snap b/src/core/client/ui/components/v2/AppBar/__snapshots__/Divider.spec.tsx.snap
new file mode 100644
index 000000000..722ea5f94
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/__snapshots__/Divider.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Divider
+  classes={
+    Object {
+      "root": "Divider-root",
+    }
+  }
+/>
+`;
diff --git a/src/core/client/ui/components/v2/AppBar/__snapshots__/End.spec.tsx.snap b/src/core/client/ui/components/v2/AppBar/__snapshots__/End.spec.tsx.snap
new file mode 100644
index 000000000..7f8ca63d8
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/__snapshots__/End.spec.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<End
+  className="custom"
+  classes={
+    Object {
+      "root": "End-root",
+    }
+  }
+  itemGutter={true}
+>
+  children
+</End>
+`;
diff --git a/src/core/client/ui/components/v2/AppBar/__snapshots__/Navigation.spec.tsx.snap b/src/core/client/ui/components/v2/AppBar/__snapshots__/Navigation.spec.tsx.snap
new file mode 100644
index 000000000..54f9bae45
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/__snapshots__/Navigation.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Navigation
+  classes={
+    Object {
+      "root": "Navigation-root",
+      "ul": "Navigation-ul",
+    }
+  }
+>
+  children
+</Navigation>
+`;
diff --git a/src/core/client/ui/components/v2/AppBar/__snapshots__/NavigationItem.spec.tsx.snap b/src/core/client/ui/components/v2/AppBar/__snapshots__/NavigationItem.spec.tsx.snap
new file mode 100644
index 000000000..7ad60ce3d
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/__snapshots__/NavigationItem.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<NavigationItem
+  active={true}
+  className="custom"
+  classes={
+    Object {
+      "active": "NavigationItem-active",
+      "anchor": "NavigationItem-anchor",
+      "root": "NavigationItem-root",
+    }
+  }
+  href="/moderate"
+  onClick={[Function]}
+>
+  link
+</NavigationItem>
+`;
diff --git a/src/core/client/ui/components/v2/AppBar/index.ts b/src/core/client/ui/components/v2/AppBar/index.ts
new file mode 100644
index 000000000..c3ef851d4
--- /dev/null
+++ b/src/core/client/ui/components/v2/AppBar/index.ts
@@ -0,0 +1,6 @@
+export { default as AppBar } from "./AppBar";
+export { default as Begin } from "./Begin";
+export { default as End } from "./End";
+export { default as Navigation } from "./Navigation";
+export { default as NavigationItem } from "./NavigationItem";
+export { default as Divider } from "./Divider";
diff --git a/src/core/client/ui/components/v2/AriaInfo/AriaInfo.css b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.css
new file mode 100644
index 000000000..bca89bafb
--- /dev/null
+++ b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.css
@@ -0,0 +1,10 @@
+.root {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/src/core/client/ui/components/v2/AriaInfo/AriaInfo.mdx b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.mdx
new file mode 100644
index 000000000..6cdaf7b62
--- /dev/null
+++ b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.mdx
@@ -0,0 +1,18 @@
+---
+name: AriaInfo
+menu: UI Kit
+---
+
+import { Playground } from "docz";
+import AriaInfo from "./AriaInfo";
+
+# AriaInfo
+
+Renders Text that is only seen by screen readers.
+
+## Basic usage
+
+<Playground>
+  <AriaInfo>This can only be seen by screen readers</AriaInfo>
+  <div>Above this line is a hidden text that you can't see</div>
+</Playground>
diff --git a/src/core/client/ui/components/v2/AriaInfo/AriaInfo.spec.tsx b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.spec.tsx
new file mode 100644
index 000000000..4b07da123
--- /dev/null
+++ b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.spec.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import AriaInfo from "./AriaInfo";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof AriaInfo> = {
+    children: "This text is only for screen readers",
+  };
+  const renderer = TestRenderer.create(<AriaInfo {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/AriaInfo/AriaInfo.tsx b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.tsx
new file mode 100644
index 000000000..4ec81e353
--- /dev/null
+++ b/src/core/client/ui/components/v2/AriaInfo/AriaInfo.tsx
@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React, { AllHTMLAttributes, FunctionComponent, Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./AriaInfo.css";
+
+interface Props extends AllHTMLAttributes<HTMLElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+  component?: string;
+  children: React.ReactNode;
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLElement>;
+}
+
+const AriaInfo: FunctionComponent<Props> = props => {
+  const { component, className, classes, forwardRef: ref, ...rest } = props;
+  const Component: React.ComponentType<
+    React.HTMLAttributes<HTMLElement> & React.ClassAttributes<HTMLElement>
+  > = component! as any;
+  const rootClassName = cn(classes.root, className);
+  return <Component className={rootClassName} {...rest} ref={ref} />;
+};
+
+AriaInfo.defaultProps = {
+  component: "div",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(AriaInfo));
+export type AriaInfoProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap b/src/core/client/ui/components/v2/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap
new file mode 100644
index 000000000..688492e16
--- /dev/null
+++ b/src/core/client/ui/components/v2/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="AriaInfo-root"
+>
+  This text is only for screen readers
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/AriaInfo/index.ts b/src/core/client/ui/components/v2/AriaInfo/index.ts
new file mode 100644
index 000000000..7fc32af4c
--- /dev/null
+++ b/src/core/client/ui/components/v2/AriaInfo/index.ts
@@ -0,0 +1 @@
+export { default, AriaInfoProps } from "./AriaInfo";
diff --git a/src/core/client/ui/components/v2/Backdrop/Backdrop.css b/src/core/client/ui/components/v2/Backdrop/Backdrop.css
new file mode 100644
index 000000000..7517851e1
--- /dev/null
+++ b/src/core/client/ui/components/v2/Backdrop/Backdrop.css
@@ -0,0 +1,15 @@
+.root {
+  display: none;
+  background: black;
+  position: fixed;
+  /* fix to bottom solves some mobile scrolling issues. */
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.active {
+  display: block;
+  opacity: 0.5;
+}
diff --git a/src/core/client/ui/components/v2/Backdrop/Backdrop.mdx b/src/core/client/ui/components/v2/Backdrop/Backdrop.mdx
new file mode 100644
index 000000000..b1491616c
--- /dev/null
+++ b/src/core/client/ui/components/v2/Backdrop/Backdrop.mdx
@@ -0,0 +1,32 @@
+---
+name: Backdrop
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import Container from "react-with-state-props";
+
+import Button from "../Button";
+import Backdrop from "./Backdrop";
+
+# Backdrop
+
+## Basic usage
+
+<Playground>
+  <Container
+    state={{ value: false }}
+    render={props => (
+      <div>
+        <Backdrop active={props.value} />
+        <Button
+          variant="filled"
+          color="primary"
+          onClick={() => props.setValue(!props.value)}
+        >
+          Toggle
+        </Button>
+      </div>
+    )}
+  />
+</Playground>
diff --git a/src/core/client/ui/components/v2/Backdrop/Backdrop.spec.tsx b/src/core/client/ui/components/v2/Backdrop/Backdrop.spec.tsx
new file mode 100644
index 000000000..3d4140265
--- /dev/null
+++ b/src/core/client/ui/components/v2/Backdrop/Backdrop.spec.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import Backdrop from "./Backdrop";
+
+it("renders correctly", () => {
+  const renderer = createRenderer();
+  renderer.render(<Backdrop />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders correctly when active", () => {
+  const renderer = createRenderer();
+  renderer.render(<Backdrop active />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Backdrop/Backdrop.tsx b/src/core/client/ui/components/v2/Backdrop/Backdrop.tsx
new file mode 100644
index 000000000..b97bb24fd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Backdrop/Backdrop.tsx
@@ -0,0 +1,35 @@
+import cn from "classnames";
+import React, { FunctionComponent, HTMLAttributes } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Backdrop.css";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  active?: boolean;
+}
+
+const Backdrop: FunctionComponent<Props> = ({
+  classes,
+  active,
+  className,
+  children,
+  ...rest
+}) => {
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.active]: Boolean(active),
+    },
+    className
+  );
+  return <div className={rootClassName} {...rest} />;
+};
+
+const enhanced = withStyles(styles)(Backdrop);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Backdrop/__snapshots__/Backdrop.spec.tsx.snap b/src/core/client/ui/components/v2/Backdrop/__snapshots__/Backdrop.spec.tsx.snap
new file mode 100644
index 000000000..19d396229
--- /dev/null
+++ b/src/core/client/ui/components/v2/Backdrop/__snapshots__/Backdrop.spec.tsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Backdrop
+  classes={
+    Object {
+      "active": "Backdrop-active",
+      "root": "Backdrop-root",
+    }
+  }
+/>
+`;
+
+exports[`renders correctly when active 1`] = `
+<Backdrop
+  active={true}
+  classes={
+    Object {
+      "active": "Backdrop-active",
+      "root": "Backdrop-root",
+    }
+  }
+/>
+`;
diff --git a/src/core/client/ui/components/v2/Backdrop/index.ts b/src/core/client/ui/components/v2/Backdrop/index.ts
new file mode 100644
index 000000000..e0de8166e
--- /dev/null
+++ b/src/core/client/ui/components/v2/Backdrop/index.ts
@@ -0,0 +1 @@
+export { default } from "./Backdrop";
diff --git a/src/core/client/ui/components/v2/BaseButton/BaseButton.css b/src/core/client/ui/components/v2/BaseButton/BaseButton.css
new file mode 100644
index 000000000..89d7cc80c
--- /dev/null
+++ b/src/core/client/ui/components/v2/BaseButton/BaseButton.css
@@ -0,0 +1,43 @@
+.root {
+  /* reset button */
+  user-select: none;
+  font-family: inherit;
+  outline: none;
+  border: none;
+  touch-action: manipulation;
+  padding: 0;
+  margin: 0;
+
+  /* Unify anchor and button. */
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  text-decoration: none;
+  align-items: flex-start;
+  vertical-align: middle;
+  white-space: nowrap;
+  background: transparent;
+  font-size: inherit;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+  -webkit-appearance: none;
+
+  &:disabled {
+    cursor: default;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:-moz-focusring {
+    textshadow: 0 0 0 #000;
+  }
+}
+
+.keyboardFocus {
+  @mixin outline;
+}
+
+.mouseHover {
+}
diff --git a/src/core/client/ui/components/v2/BaseButton/BaseButton.mdx b/src/core/client/ui/components/v2/BaseButton/BaseButton.mdx
new file mode 100644
index 000000000..d4dd00669
--- /dev/null
+++ b/src/core/client/ui/components/v2/BaseButton/BaseButton.mdx
@@ -0,0 +1,28 @@
+---
+name: BaseButton
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import BaseButton from './BaseButton'
+
+# BaseButton
+
+`BaseButton` strips away browser specific styling and unifies the look of the `button` and the `a` tag.
+It detects a focus that came from the keyboard rather than mouse or touch and styles the button using
+the `className` provided in the `classes.keyboardFocus` property.
+
+When used as a `button` tag the default `type` is set to `button` instead of the standard `submit` in order
+to avoid unintended form submissions.
+
+## Basic usage
+<Playground>
+  <BaseButton>Push Me</BaseButton>
+</Playground>
+
+Instead of an `button` tag, we can render an `a` tag instead:
+
+<Playground>
+  <BaseButton anchor>Push Me</BaseButton>
+</Playground>
+
diff --git a/src/core/client/ui/components/v2/BaseButton/BaseButton.spec.tsx b/src/core/client/ui/components/v2/BaseButton/BaseButton.spec.tsx
new file mode 100644
index 000000000..c0f7176b9
--- /dev/null
+++ b/src/core/client/ui/components/v2/BaseButton/BaseButton.spec.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import BaseButton from "./BaseButton";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof BaseButton> = {
+    className: "my-class",
+    children: "Push Me",
+  };
+  const renderer = TestRenderer.create(<BaseButton {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders as anchor", () => {
+  const props: PropTypesOf<typeof BaseButton> = {
+    anchor: true,
+    children: "Push Me",
+  };
+  const renderer = TestRenderer.create(<BaseButton {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/BaseButton/BaseButton.tsx b/src/core/client/ui/components/v2/BaseButton/BaseButton.tsx
new file mode 100644
index 000000000..3e1562908
--- /dev/null
+++ b/src/core/client/ui/components/v2/BaseButton/BaseButton.tsx
@@ -0,0 +1,99 @@
+import cn from "classnames";
+import React, {
+  ButtonHTMLAttributes,
+  EventHandler,
+  FocusEvent,
+  FunctionComponent,
+  MouseEvent,
+  Ref,
+  TouchEvent,
+} from "react";
+
+import {
+  withForwardRef,
+  withKeyboardFocus,
+  withMouseHover,
+  withStyles,
+} from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./BaseButton.css";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** If set renders an anchor tag instead */
+  anchor?: boolean;
+  href?: string;
+  target?: string;
+  rel?: string;
+
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
+
+  type?: "submit" | "reset" | "button";
+
+  // These handlers are passed down by the `withMouseHover` HOC.
+  mouseHover: boolean;
+  onMouseOver: React.EventHandler<MouseEvent<HTMLElement>>;
+  onMouseOut: React.EventHandler<MouseEvent<HTMLElement>>;
+  onTouchEnd: React.EventHandler<TouchEvent<HTMLElement>>;
+
+  // These handlers are passed down by the `withKeyboardFocus` HOC.
+  onFocus: EventHandler<FocusEvent<HTMLElement>>;
+  onBlur: EventHandler<FocusEvent<HTMLElement>>;
+  keyboardFocus: boolean;
+}
+
+/**
+ * A button whose styling is stripped off to a minimum and supports
+ * keyboard focus. It is the base for our other buttons.
+ */
+const BaseButton: FunctionComponent<Props> = ({
+  anchor,
+  className,
+  classes,
+  keyboardFocus,
+  mouseHover,
+  forwardRef,
+  type,
+  ...rest
+}) => {
+  let Element: React.ComponentType<
+    React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> &
+      React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
+  > = "button" as any;
+
+  if (anchor) {
+    Element = "a" as any;
+  }
+
+  if (anchor && type) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "BaseButton used as anchor does not support the `type` property"
+    );
+  } else if (type === undefined) {
+    // Default to button
+    type = "button";
+  }
+
+  const rootClassName = cn(classes.root, className, {
+    [classes.keyboardFocus]: keyboardFocus,
+    [classes.mouseHover]: mouseHover,
+  });
+
+  return (
+    <Element {...rest} className={rootClassName} ref={forwardRef} type={type} />
+  );
+};
+
+const enhanced = withForwardRef(
+  withStyles(styles)(withMouseHover(withKeyboardFocus(BaseButton)))
+);
+export type BaseButtonProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/BaseButton/__snapshots__/BaseButton.spec.tsx.snap b/src/core/client/ui/components/v2/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
new file mode 100644
index 000000000..c7f55a935
--- /dev/null
+++ b/src/core/client/ui/components/v2/BaseButton/__snapshots__/BaseButton.spec.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders as anchor 1`] = `
+<a
+  className="BaseButton-root"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  type="button"
+>
+  Push Me
+</a>
+`;
+
+exports[`renders correctly 1`] = `
+<button
+  className="BaseButton-root my-class"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  type="button"
+>
+  Push Me
+</button>
+`;
diff --git a/src/core/client/ui/components/v2/BaseButton/index.ts b/src/core/client/ui/components/v2/BaseButton/index.ts
new file mode 100644
index 000000000..53e4924d5
--- /dev/null
+++ b/src/core/client/ui/components/v2/BaseButton/index.ts
@@ -0,0 +1 @@
+export { default, BaseButtonProps } from "./BaseButton";
diff --git a/src/core/client/ui/components/v2/Box/Box.css b/src/core/client/ui/components/v2/Box/Box.css
new file mode 100644
index 000000000..647068f01
--- /dev/null
+++ b/src/core/client/ui/components/v2/Box/Box.css
@@ -0,0 +1,240 @@
+.root {
+}
+
+/* Margin */
+
+.ml-1 {
+  margin-left: var(--v2-spacing-1) !important;
+}
+.mr-1 {
+  margin-right: var(--v2-spacing-1) !important;
+}
+.mt-1 {
+  margin-top: var(--v2-spacing-1) !important;
+}
+.mb-1 {
+  margin-bottom: var(--v2-spacing-1) !important;
+}
+
+.ml-2 {
+  margin-left: var(--v2-spacing-2) !important;
+}
+.mr-2 {
+  margin-right: var(--v2-spacing-2) !important;
+}
+.mt-2 {
+  margin-top: var(--v2-spacing-2) !important;
+}
+.mb-2 {
+  margin-bottom: var(--v2-spacing-2) !important;
+}
+
+.ml-3 {
+  margin-left: var(--v2-spacing-3) !important;
+}
+.mr-3 {
+  margin-right: var(--v2-spacing-3) !important;
+}
+.mt-3 {
+  margin-top: var(--v2-spacing-3) !important;
+}
+.mb-3 {
+  margin-bottom: var(--v2-spacing-3) !important;
+}
+
+.ml-4 {
+  margin-left: var(--v2-spacing-4) !important;
+}
+.mr-4 {
+  margin-right: var(--v2-spacing-4) !important;
+}
+.mt-4 {
+  margin-top: var(--v2-spacing-4) !important;
+}
+.mb-4 {
+  margin-bottom: var(--v2-spacing-4) !important;
+}
+
+.ml-5 {
+  margin-left: var(--v2-spacing-5) !important;
+}
+.mr-5 {
+  margin-right: var(--v2-spacing-5) !important;
+}
+.mt-5 {
+  margin-top: var(--v2-spacing-5) !important;
+}
+.mb-5 {
+  margin-bottom: var(--v2-spacing-5) !important;
+}
+
+.ml-6 {
+  margin-left: var(--v2-spacing-6) !important;
+}
+.mr-6 {
+  margin-right: var(--v2-spacing-6) !important;
+}
+.mt-6 {
+  margin-top: var(--v2-spacing-6) !important;
+}
+.mb-6 {
+  margin-bottom: var(--v2-spacing-6) !important;
+}
+
+.ml-7 {
+  margin-left: var(--v2-spacing-7) !important;
+}
+.mr-7 {
+  margin-right: var(--v2-spacing-7) !important;
+}
+.mt-7 {
+  margin-top: var(--v2-spacing-7) !important;
+}
+.mb-7 {
+  margin-bottom: var(--v2-spacing-7) !important;
+}
+
+.ml-8 {
+  margin-left: var(--v2-spacing-8) !important;
+}
+.mr-8 {
+  margin-right: var(--v2-spacing-8) !important;
+}
+.mt-8 {
+  margin-top: var(--v2-spacing-8) !important;
+}
+.mb-8 {
+  margin-bottom: var(--v2-spacing-8) !important;
+}
+
+.ml-9 {
+  margin-left: var(--v2-spacing-9) !important;
+}
+.mr-9 {
+  margin-right: var(--v2-spacing-9) !important;
+}
+.mt-9 {
+  margin-top: var(--v2-spacing-9) !important;
+}
+.mb-9 {
+  margin-bottom: var(--v2-spacing-9) !important;
+}
+
+/* Padding */
+
+.pl-1 {
+  padding-left: var(--v2-spacing-1) !important;
+}
+.pr-1 {
+  padding-right: var(--v2-spacing-1) !important;
+}
+.pt-1 {
+  padding-top: var(--v2-spacing-1) !important;
+}
+.pb-1 {
+  padding-bottom: var(--v2-spacing-1) !important;
+}
+
+.pl-2 {
+  padding-left: var(--v2-spacing-2) !important;
+}
+.pr-2 {
+  padding-right: var(--v2-spacing-2) !important;
+}
+.pt-2 {
+  padding-top: var(--v2-spacing-2) !important;
+}
+.pb-2 {
+  padding-bottom: var(--v2-spacing-2) !important;
+}
+
+.pl-3 {
+  padding-left: var(--v2-spacing-3) !important;
+}
+.pr-3 {
+  padding-right: var(--v2-spacing-3) !important;
+}
+.pt-3 {
+  padding-top: var(--v2-spacing-3) !important;
+}
+.pb-3 {
+  padding-bottom: var(--v2-spacing-3) !important;
+}
+
+.pl-4 {
+  padding-left: var(--v2-spacing-4) !important;
+}
+.pr-4 {
+  padding-right: var(--v2-spacing-4) !important;
+}
+.pt-4 {
+  padding-top: var(--v2-spacing-4) !important;
+}
+.pb-4 {
+  padding-bottom: var(--v2-spacing-4) !important;
+}
+
+.pl-5 {
+  padding-left: var(--v2-spacing-5) !important;
+}
+.pr-5 {
+  padding-right: var(--v2-spacing-5) !important;
+}
+.pt-5 {
+  padding-top: var(--v2-spacing-5) !important;
+}
+.pb-5 {
+  padding-bottom: var(--v2-spacing-5) !important;
+}
+
+.pl-6 {
+  padding-left: var(--v2-spacing-6) !important;
+}
+.pr-6 {
+  padding-right: var(--v2-spacing-6) !important;
+}
+.pt-6 {
+  padding-top: var(--v2-spacing-6) !important;
+}
+.pb-6 {
+  padding-bottom: var(--v2-spacing-6) !important;
+}
+
+.pl-7 {
+  padding-left: var(--v2-spacing-7) !important;
+}
+.pr-7 {
+  padding-right: var(--v2-spacing-7) !important;
+}
+.pt-7 {
+  padding-top: var(--v2-spacing-7) !important;
+}
+.pb-7 {
+  padding-bottom: var(--v2-spacing-7) !important;
+}
+
+.pl-8 {
+  padding-left: var(--v2-spacing-8) !important;
+}
+.pr-8 {
+  padding-right: var(--v2-spacing-8) !important;
+}
+.pt-8 {
+  padding-top: var(--v2-spacing-8) !important;
+}
+.pb-8 {
+  padding-bottom: var(--v2-spacing-8) !important;
+}
+
+.pl-9 {
+  padding-left: var(--v2-spacing-9) !important;
+}
+.pr-9 {
+  padding-right: var(--v2-spacing-9) !important;
+}
+.pt-9 {
+  padding-top: var(--v2-spacing-9) !important;
+}
+.pb-9 {
+  padding-bottom: var(--v2-spacing-9) !important;
+}
diff --git a/src/core/client/ui/components/v2/Box/Box.mdx b/src/core/client/ui/components/v2/Box/Box.mdx
new file mode 100644
index 000000000..e7b8aa2a0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Box/Box.mdx
@@ -0,0 +1,30 @@
+---
+menu: UI Kit
+name: Box
+---
+
+import { Playground } from "docz";
+import Box from "./Box";
+
+# Box
+
+## Usage
+
+<Playground>
+  <Box padding={2}>First box</Box>
+  <Box padding={2} marginTop={2}>
+    Second box
+  </Box>
+</Playground>
+
+## Short Aliases
+
+<Playground>
+  <Box p={2}>First box</Box>
+  <Box p={2} mt={2}>
+    Second box
+  </Box>
+  <Box p={2} mt={2} clone>
+    <div>Cloned div</div>
+  </Box>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Box/Box.tsx b/src/core/client/ui/components/v2/Box/Box.tsx
new file mode 100644
index 000000000..4a00ccbd9
--- /dev/null
+++ b/src/core/client/ui/components/v2/Box/Box.tsx
@@ -0,0 +1,164 @@
+import cn from "classnames";
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  ReactElement,
+  Ref,
+} from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Spacing } from "coral-ui/theme/variables";
+
+import styles from "./Box.css";
+
+interface Props extends HTMLAttributes<any> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  /* Margin */
+  m?: Spacing;
+  mx?: Spacing;
+  my?: Spacing;
+  margin?: Spacing;
+  marginStart?: Spacing;
+  marginEnd?: Spacing;
+  marginLeft?: Spacing;
+  marginRight?: Spacing;
+  marginTop?: Spacing;
+  marginBottom?: Spacing;
+  ms?: Spacing;
+  me?: Spacing;
+  ml?: Spacing;
+  mr?: Spacing;
+  mt?: Spacing;
+  mb?: Spacing;
+
+  /* Padding */
+  p?: Spacing;
+  px?: Spacing;
+  py?: Spacing;
+  padding?: Spacing;
+  paddingStart?: Spacing;
+  paddingEnd?: Spacing;
+  paddingLeft?: Spacing;
+  paddingRight?: Spacing;
+  paddingTop?: Spacing;
+  paddingBottom?: Spacing;
+  ps?: Spacing;
+  pe?: Spacing;
+  pl?: Spacing;
+  pr?: Spacing;
+  pt?: Spacing;
+  pb?: Spacing;
+
+  /** If set, will perform React.cloneElement instead */
+  clone?: boolean;
+
+  /** The name of the Box to render */
+  children?: React.ReactNode;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLElement>;
+
+  /**
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
+   */
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
+}
+
+const Box: FunctionComponent<Props> = props => {
+  const {
+    clone,
+    classes,
+    className,
+    forwardRef,
+    container,
+    children,
+    m,
+    mx,
+    my,
+    margin,
+    marginStart,
+    marginEnd,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginBottom,
+    ml,
+    mr,
+    ms,
+    me,
+    mt,
+    mb,
+    p,
+    px,
+    py,
+    padding,
+    paddingStart,
+    paddingEnd,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    pl,
+    pr,
+    ps,
+    pe,
+    pt,
+    pb,
+    ...rest
+  } = props;
+  const final = {
+    ml: ml || marginLeft || ms || marginStart || mx || m || margin,
+    mr: mr || marginRight || me || marginEnd || mx || m || margin,
+    mt: mt || marginTop || my || m || margin,
+    mb: mb || marginBottom || my || m || margin,
+    pl: pl || paddingLeft || ps || paddingStart || px || p || padding,
+    pr: pr || paddingRight || pe || paddingEnd || px || p || padding,
+    pt: pt || paddingTop || py || p || padding,
+    pb: pb || paddingBottom || py || p || padding,
+  };
+  const rootClassName = cn(
+    classes.root,
+    className,
+    /* Margin */
+    final.ml && (classes as any)[`ml-${final.ml}`],
+    final.mr && (classes as any)[`mr-${final.mr}`],
+    final.mt && (classes as any)[`mt-${final.mt}`],
+    final.mb && (classes as any)[`mb-${final.mb}`],
+    /* Padding */
+    final.pl && (classes as any)[`pl-${final.pl}`],
+    final.pr && (classes as any)[`pr-${final.pr}`],
+    final.pt && (classes as any)[`pt-${final.pt}`],
+    final.pb && (classes as any)[`pb-${final.pb}`]
+  );
+
+  const innerProps = {
+    className: rootClassName,
+    ref: forwardRef,
+    ...rest,
+  };
+
+  const Container = container!;
+
+  if (clone) {
+    const child = React.Children.only(children) as ReactElement;
+    return React.cloneElement(child, innerProps);
+  }
+  if (React.isValidElement<any>(Container)) {
+    return React.cloneElement(Container, { ...innerProps, children });
+  } else {
+    return <Container {...innerProps}>{children}</Container>;
+  }
+};
+
+Box.defaultProps = {
+  container: "div",
+} as Partial<Props>;
+
+const enhanced = withForwardRef(withStyles(styles)(Box));
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Box/index.ts b/src/core/client/ui/components/v2/Box/index.ts
new file mode 100644
index 000000000..772ab37c1
--- /dev/null
+++ b/src/core/client/ui/components/v2/Box/index.ts
@@ -0,0 +1 @@
+export { default } from "./Box";
diff --git a/src/core/client/ui/components/v2/Button/Button.css b/src/core/client/ui/components/v2/Button/Button.css
new file mode 100644
index 000000000..59b7bcc48
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/Button.css
@@ -0,0 +1,508 @@
+/* Design tokens */
+
+$button-default-outline-background: var(--v2-colors-pure-white);
+$button-default-outline-foreground: var(--v2-colors-teal-600);
+$button-default-outline-active: var(--v2-colors-teal-500);
+
+$button-default-filled-background: var(--v2-colors-teal-600);
+$button-default-filled-foreground: var(--v2-colors-pure-white);
+$button-default-filled-hover: var(--v2-colors-teal-500);
+$button-default-filled-active: var(--v2-colors-teal-400);
+
+$button-alert-outline-background: var(--v2-colors-pure-white);
+$button-alert-outline-foreground: var(--v2-colors-red-500);
+$button-alert-outline-active: var(--v2-colors-red-400);
+
+$button-alert-filled-background: var(--v2-colors-red-500);
+$button-alert-filled-foreground: var(--v2-colors-pure-white);
+$button-alert-filled-hover: var(--v2-colors-red-400);
+$button-alert-filled-active: var(--v2-colors-red-300);
+
+$button-emphasis-outline-background: var(--v2-colors-pure-white);
+$button-emphasis-outline-foreground: var(--v2-colors-blue-500);
+$button-emphasis-outline-active: var(--v2-colors-blue-400);
+
+$button-emphasis-filled-background: var(--v2-colors-blue-500);
+$button-emphasis-filled-foreground: var(--v2-colors-pure-white);
+$button-emphasis-filled-hover: var(--v2-colors-blue-400);
+$button-emphasis-filled-active: var(--v2-colors-blue-300);
+
+$button-mono-outline-background: var(--v2-colors-pure-white);
+$button-mono-outline-foreground: var(--v2-colors-grey-600);
+$button-mono-outline-active: var(--v2-colors-grey-500);
+
+$button-mono-filled-background: var(--v2-colors-grey-600);
+$button-mono-filled-foreground: var(--v2-colors-pure-white);
+$button-mono-filled-hover: var(--v2-colors-grey-500);
+$button-mono-filled-active: var(--v2-colors-grey-400);
+
+$button-adornment-foreground: var(--v2-colors-pure-white);
+
+$button-adornment-default-background: var(--v2-colors-teal-600);
+$button-adornment-alert-background: var(--v2-colors-red-500);
+$button-adornment-emphasis-background: var(--v2-colors-blue-500);
+$button-adornment-mono-background: var(--v2-colors-grey-600);
+
+$button-adornment-default-hover: var(--v2-colors-teal-500);
+$button-adornment-alert-hover: var(--v2-colors-red-400);
+$button-adornment-emphasis-hover: var(--v2-colors-blue-400);
+$button-adornment-mono-hover: var(--v2-colors-grey-400);
+
+$button-adornment-default-active: var(--v2-colors-teal-400);
+$button-adornment-alert-active: var(--v2-colors-red-300);
+$button-adornment-emphasis-active: var(--v2-colors-blue-300);
+$button-adornment-mono-active: var(--v2-colors-grey-300);
+
+$button-ghost-default-foreground: var(--v2-colors-teal-600);
+$button-ghost-alert-foreground: var(--v2-colors-red-500);
+$button-ghost-emphasis-foreground: var(--v2-colors-blue-500);
+$button-ghost-mono-foreground: var(--v2-colors-grey-600);
+
+$button-ghost-active-foreground: var(--v2-colors-pure-white);
+
+$button-underlined-default-foreground: var(--v2-colors-teal-600);
+$button-underlined-alert-foreground: var(--v2-colors-red-500);
+$button-underlined-emphasis-foreground: var(--v2-colors-blue-500);
+$button-underlined-mono-foreground: var(--v2-colors-grey-600);
+
+$button-underlined-default-hover: var(--v2-colors-teal-500);
+$button-underlined-alert-hover: var(--v2-colors-red-400);
+$button-underlined-emphasis-hover: var(--v2-colors-blue-400);
+$button-underlined-mono-hover: var(--v2-colors-grey-500);
+
+$button-underlined-default-active: var(--v2-colors-teal-400);
+$button-underlined-alert-active: var(--v2-colors-red-300);
+$button-underlined-emphasis-active: var(--v2-colors-blue-300);
+$button-underlined-mono-active: var(--v2-colors-grey-400);
+
+/* Class Definitions */
+
+.root {
+  border-radius: var(--v2-round-corners);
+  background-color: transparent;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border: 0px solid transparent;
+
+  & > * {
+    margin: 0 var(--v2-spacing-1) 0 0;
+    /* convince safari */
+    align-self: center;
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.root.disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.sizeSmall {
+  color: $button-default-outline-foreground;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: 1;
+
+  padding: var(--v2-spacing-1);
+}
+
+.sizeMedium {
+  color: $button-default-outline-foreground;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: 1.28;
+
+  padding: var(--v2-spacing-3) var(--v2-spacing-5);
+}
+
+.sizeLarge {
+  color: $button-default-outline-foreground;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-line-height-reset);
+  line-height: 1.25;
+
+  padding: var(--v2-spacing-4) var(--v2-spacing-6);
+}
+
+.variantDefault,
+.variantPlain {
+  &.colorDefault {
+    color: $button-default-outline-foreground;
+  }
+  &.colorAlert {
+    color: $button-alert-outline-foreground;
+  }
+  &.colorEmphasis {
+    color: $button-emphasis-outline-foreground;
+  }
+  &.colorMono {
+    color: $button-mono-outline-foreground;
+  }
+}
+
+.variantDefault {
+  border-width: 1px;
+  &.colorDefault {
+    border-color: $button-default-outline-foreground;
+    background-color: $button-default-outline-background;
+  }
+  &.colorAlert {
+    border-color: $button-alert-outline-foreground;
+    background-color: $button-alert-outline-background;
+  }
+  &.colorEmphasis {
+    border-color: $button-emphasis-outline-foreground;
+    background-color: $button-emphasis-outline-background;
+  }
+  &.colorMono {
+    border-color: $button-mono-outline-foreground;
+    background-color: $button-mono-outline-background;
+  }
+
+  &:not(.disabled) {
+    &.colorDefault {
+      &.mouseHover {
+        background-color: $button-default-outline-foreground;
+        color: $button-default-outline-background;
+      }
+      &:active,
+      &.active {
+        color: $button-default-outline-background;
+        border-color: $button-default-outline-active;
+        background-color: $button-default-outline-active;
+      }
+    }
+    &.colorAlert {
+      &.mouseHover {
+        color: $button-alert-outline-background;
+        background-color: $button-alert-outline-foreground;
+      }
+      &:active,
+      &.active {
+        color: $button-alert-outline-background;
+        border-color: $button-alert-outline-active;
+        background-color: $button-alert-outline-active;
+      }
+    }
+    &.colorEmphasis {
+      &.mouseHover {
+        color: $button-emphasis-outline-background;
+        background-color: $button-emphasis-outline-foreground;
+      }
+      &:active,
+      &.active {
+        border-color: $button-emphasis-outline-active;
+        background-color: $button-emphasis-outline-active;
+        color: $button-emphasis-outline-background;
+      }
+    }
+    &.colorMono {
+      &.mouseHover {
+        background-color: $button-mono-outline-foreground;
+        color: $button-mono-outline-background;
+      }
+      &:active,
+      &.active {
+        border-color: $button-mono-outline-active;
+        background-color: $button-mono-outline-active;
+        color: $button-mono-outline-background;
+      }
+    }
+  }
+}
+
+.variantPlain {
+  padding: 0;
+}
+
+.variantFilled {
+  border-width: 1px;
+
+  &.colorDefault {
+    border-color: $button-default-filled-background;
+    color: $button-default-filled-foreground;
+    background-color: $button-default-filled-background;
+  }
+  &.colorAlert {
+    border-color: $button-alert-filled-background;
+    color: $button-alert-filled-foreground;
+    background-color: $button-alert-filled-background;
+  }
+  &.colorEmphasis {
+    border-color: $button-emphasis-filled-background;
+    color: $button-emphasis-filled-foreground;
+    background-color: $button-emphasis-filled-background;
+  }
+  &.colorMono {
+    border-color: $button-mono-filled-background;
+    color: $button-mono-filled-foreground;
+    background-color: $button-mono-filled-background;
+  }
+
+  &:not(.disabled) {
+    &.colorDefault {
+      &.mouseHover {
+        border-color: $button-default-filled-hover;
+        color: $button-default-filled-foreground;
+        background-color: $button-default-filled-hover;
+      }
+      &:active,
+      &.active {
+        border-color: $button-default-filled-active;
+        color: $button-default-filled-foreground;
+        background-color: $button-default-filled-active;
+      }
+    }
+    &.colorAlert {
+      &.mouseHover {
+        border-color: $button-alert-filled-hover;
+        color: $button-alert-filled-foreground;
+        background-color: $button-alert-filled-hover;
+      }
+      &:active,
+      &.active {
+        border-color: $button-alert-filled-active;
+        color: $button-alert-filled-foreground;
+        background-color: $button-alert-filled-active;
+      }
+    }
+    &.colorEmphasis {
+      &.mouseHover {
+        border-color: $button-emphasis-filled-hover;
+        color: $button-emphasis-filled-foreground;
+        background-color: $button-emphasis-filled-hover;
+      }
+      &:active,
+      &.active {
+        border-color: $button-emphasis-filled-active;
+        color: $button-emphasis-filled-foreground;
+        background-color: $button-emphasis-filled-active;
+      }
+    }
+    &.colorMono {
+      &.mouseHover {
+        border-color: $button-mono-filled-hover;
+        color: $button-mono-filled-foreground;
+        background-color: $button-mono-filled-hover;
+      }
+      &:active,
+      &.active {
+        border-color: $button-mono-filled-active;
+        color: $button-mono-filled-foreground;
+        background-color: $button-mono-filled-active;
+      }
+    }
+  }
+}
+
+.variantAdornment {
+  color: $button-adornment-foreground;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  &.colorDefault {
+    background-color: $button-adornment-default-background;
+    border-color: $button-adornment-default-background;
+  }
+  &.colorAlert {
+    background-color: $button-adornment-alert-background;
+    border-color: $button-adornment-alert-background;
+  }
+  &.colorEmphasis {
+    background-color: $button-adornment-emphasis-background;
+    border-color: $button-adornment-emphasis-background;
+  }
+  &.colorMono {
+    background-color: $button-adornment-mono-background;
+    border-color: $button-adornment-mono-background;
+  }
+
+  &:not(.disabled) {
+    &.colorDefault {
+      &.mouseHover {
+        background-color: $button-adornment-default-hover;
+        border-color: $button-adornment-default-hover;
+      }
+      &:active,
+      &.active {
+        background-color: $button-adornment-default-active;
+        border-color: $button-adornment-default-active;
+      }
+    }
+    &.colorAlert {
+      &.mouseHover {
+        background-color: $button-adornment-alert-hover;
+        border-color: $button-adornment-alert-hover;
+      }
+      &:active,
+      &.active {
+        background-color: $button-adornment-alert-active;
+        border-color: $button-adornment-alert-active;
+      }
+    }
+    &.colorEmphasis {
+      &.mouseHover {
+        background-color: $button-adornment-emphasis-hover;
+        border-color: $button-adornment-emphasis-hover;
+      }
+      &:active,
+      &.active {
+        background-color: $button-adornment-emphasis-active;
+        border-color: $button-adornment-emphasis-active;
+      }
+    }
+    &.colorMono {
+      &.mouseHover {
+        background-color: $button-adornment-mono-hover;
+        border-color: $button-adornment-mono-hover;
+      }
+      &:active,
+      &.active {
+        background-color: $button-adornment-mono-active;
+        border-color: $button-adornment-mono-active;
+      }
+    }
+  }
+}
+
+.variantGhost {
+  border: 1px solid transparent;
+
+  &.colorDefault {
+    color: $button-ghost-default-foreground;
+  }
+  &.colorAlert {
+    color: $button-ghost-alert-foreground;
+  }
+  &.colorEmphasis {
+    color: $button-ghost-emphasis-foreground;
+  }
+  &.colorMono {
+    color: $button-ghost-mono-foreground;
+  }
+
+  &:not(.disabled) {
+    &.colorDefault {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
+        color: $button-ghost-active-foreground;
+        background-color: $button-ghost-default-foreground;
+      }
+    }
+    &.colorAlert {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
+        color: $button-ghost-active-foreground;
+        background-color: $button-ghost-alert-foreground;
+      }
+    }
+    &.colorEmphasis {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
+        color: $button-ghost-active-foreground;
+        background-color: $button-ghost-emphasis-foreground;
+      }
+    }
+    &.colorMono {
+      &.mouseHover {
+        border: 1px solid currentColor;
+      }
+      &:active,
+      &.active {
+        border: 1px solid currentColor;
+        color: $button-ghost-active-foreground;
+        background-color: $button-ghost-mono-foreground;
+      }
+    }
+  }
+}
+
+.variantUnderlined {
+  padding-right: 0px;
+  padding-left: 0px;
+  border-radius: 0;
+  border-bottom: 1px solid currentColor;
+  padding: 0;
+
+  &.colorDefault {
+    color: $button-underlined-default-foreground;
+  }
+  &.colorAlert {
+    color: $button-underlined-alert-foreground;
+  }
+  &.colorEmphasis {
+    color: $button-underlined-emphasis-foreground;
+  }
+  &.colorMono {
+    color: $button-underlined-mono-foreground;
+  }
+
+  &:not(.disabled) {
+    &.colorDefault {
+      &.mouseHover {
+        color: $button-underlined-default-hover;
+      }
+      &:active,
+      &.active {
+        color: $button-underlined-default-active;
+      }
+    }
+    &.colorAlert {
+      &.mouseHover {
+        color: $button-underlined-alert-hover;
+      }
+      &:active,
+      &.active {
+        color: $button-underlined-alert-active;
+      }
+    }
+    &.colorEmphasis {
+      &.mouseHover {
+        color: $button-underlined-emphasis-hover;
+      }
+      &:active,
+      &.active {
+        color: $button-underlined-emphasis-active;
+      }
+    }
+    &.colorMono {
+      &.mouseHover {
+        color: $button-underlined-mono-hover;
+      }
+      &:active,
+      &.active {
+        color: $button-underlined-mono-active;
+      }
+    }
+  }
+}
diff --git a/src/core/client/ui/components/v2/Button/Button.mdx b/src/core/client/ui/components/v2/Button/Button.mdx
new file mode 100644
index 000000000..6abcd8ed0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/Button.mdx
@@ -0,0 +1,206 @@
+---
+name: Button
+menu: UI Kit
+---
+
+import { Playground } from "docz";
+import Button from "./Button";
+import ButtonIcon from "./ButtonIcon";
+import Icon from "../Icon";
+import TextField from "../TextField";
+import Flex from "../Flex";
+
+# Button
+
+## Regular Button
+
+<Playground>
+  <Flex itemGutter wrap>
+    <Button>Push Me</Button>
+    <Button size="small">Push Me</Button>
+    <Button size="large">Push Me</Button>
+    <Button color="primary">Push Me</Button>
+    <Button color="error">Push Me</Button>
+    <Button color="success">Push Me</Button>
+    <Button color="dark">Push Me</Button>
+    <Button disabled>Push Me</Button>
+    <Button active>Push Me</Button>
+    <Button>
+      <ButtonIcon>face</ButtonIcon>
+      <span>Push Me</span>
+    </Button>
+    <Button fullWidth>Push Me</Button>
+  </Flex>
+</Playground>
+
+## Filled Button
+
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">
+      Push Me
+    </Button>
+    <Button variant="filled" size="large">
+      Push Me
+    </Button>
+    <Button variant="filled" color="primary">
+      Push Me
+    </Button>
+    <Button variant="filled" color="error">
+      Push Me
+    </Button>
+    <Button variant="filled" color="success">
+      Push Me
+    </Button>
+    <Button variant="filled" color="dark">
+      Push Me
+    </Button>
+    <Button variant="filled" disabled>
+      Push Me
+    </Button>
+    <Button variant="filled" active>
+      Push Me
+    </Button>
+    <Button variant="filled">
+      <ButtonIcon>face</ButtonIcon>
+      <span>Push Me</span>
+    </Button>
+    <Button variant="filled" fullWidth>
+      Push Me
+    </Button>
+  </Flex>
+</Playground>
+
+## Outlined Button
+
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="outlined">Push Me</Button>
+    <Button variant="outlined" size="small">
+      Push Me
+    </Button>
+    <Button variant="outlined" size="large">
+      Push Me
+    </Button>
+    <Button variant="outlined" color="primary">
+      Push Me
+    </Button>
+    <Button variant="outlined" color="error">
+      Push Me
+    </Button>
+    <Button variant="outlined" color="success">
+      Push Me
+    </Button>
+    <Button variant="outlined" color="dark">
+      Push Me
+    </Button>
+    <Button variant="outlined" disabled>
+      Push Me
+    </Button>
+    <Button variant="outlined" active>
+      Push Me
+    </Button>
+    <Button variant="outlined">
+      <ButtonIcon>face</ButtonIcon>
+      <span>Push Me</span>
+    </Button>
+    <Button variant="outlined" fullWidth>
+      Push Me
+    </Button>
+  </Flex>
+</Playground>
+
+## Ghost Button
+
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="ghost">Push Me</Button>
+    <Button variant="ghost" size="small">
+      Push Me
+    </Button>
+    <Button variant="ghost" size="large">
+      Push Me
+    </Button>
+    <Button variant="ghost" color="primary">
+      Push Me
+    </Button>
+    <Button variant="ghost" color="error">
+      Push Me
+    </Button>
+    <Button variant="ghost" color="success">
+      Push Me
+    </Button>
+    <Button variant="ghost" color="dark">
+      Push Me
+    </Button>
+    <Button variant="ghost" disabled>
+      Push Me
+    </Button>
+    <Button variant="ghost" active>
+      Push Me
+    </Button>
+    <Button variant="ghost">
+      <ButtonIcon>face</ButtonIcon>
+      <span>Push Me</span>
+    </Button>
+    <Button variant="ghost" fullWidth>
+      Push Me
+    </Button>
+  </Flex>
+</Playground>
+
+## Underlined Button
+
+<Playground>
+  <Flex itemGutter wrap>
+    <Button variant="underlined">Push Me</Button>
+    <Button variant="underlined" size="small">
+      Push Me
+    </Button>
+    <Button variant="underlined" size="large">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="primary">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="error">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="success">
+      Push Me
+    </Button>
+    <Button variant="underlined" color="dark">
+      Push Me
+    </Button>
+    <Button variant="underlined" disabled>
+      Push Me
+    </Button>
+    <Button variant="underlined" active>
+      Push Me
+    </Button>
+    <Button variant="underlined">
+      <Icon>face</Icon>
+      <span>Push Me</span>
+    </Button>
+    <Button variant="underlined" fullWidth>
+      Push Me
+    </Button>
+  </Flex>
+</Playground>
+
+## TextField Adornment
+
+<Playground>
+  <Flex itemGutter wrap>
+    <TextField
+      placeholder="This is a placeholder"
+      variant="seamlessAdornment"
+      adornment={
+        <Button variant="adornment" color="dark">
+          <Icon size="md">search</Icon>
+        </Button>
+      }
+    />
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Button/Button.spec.tsx b/src/core/client/ui/components/v2/Button/Button.spec.tsx
new file mode 100644
index 000000000..608953104
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/Button.spec.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import ShallowRenderer from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import { Button } from "./Button";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Button> = {
+    classes: {
+      mouseHover: "mouseHover",
+      keyboardFocus: "keyboardFocus",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("forwards ref", () => {
+  const props: PropTypesOf<typeof Button> = {
+    // eslint-disable-next-line:no-empty
+    forwardRef: () => {},
+    classes: {} as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders a medium sized, alert colored filled button with fullWidth", () => {
+  const props: PropTypesOf<typeof Button> = {
+    color: "alert",
+    variant: "filled",
+    fullWidth: true,
+    classes: {
+      colorAlert: "colorAlert",
+      variantFilled: "variantFilled",
+      sizeMedium: "sizeMedium",
+      fullWidth: "fullWidth",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders active state", () => {
+  const props: PropTypesOf<typeof Button> = {
+    active: true,
+    classes: {
+      active: "active",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Button/Button.tsx b/src/core/client/ui/components/v2/Button/Button.tsx
new file mode 100644
index 000000000..dd0a4c2cd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/Button.tsx
@@ -0,0 +1,118 @@
+import cn from "classnames";
+import { pick } from "lodash";
+import React, { Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Omit, PropTypesOf } from "coral-ui/types";
+
+import BaseButton, { BaseButtonProps } from "../BaseButton";
+
+import styles from "./Button.css";
+
+interface Props extends Omit<BaseButtonProps, "ref"> {
+  /** If set renders an anchor tag instead */
+  anchor?: boolean;
+  href?: string;
+  target?: string;
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & BaseButtonProps["classes"];
+
+  /** Size of the button */
+  size?: "small" | "medium" | "large";
+
+  /** Color of the button */
+  color?: "default" | "alert" | "emphasis" | "mono";
+
+  /** Variant of the button */
+  variant?:
+    | "default"
+    | "filled"
+    | "adornment"
+    | "ghost"
+    | "underlined"
+    | "plain";
+
+  /** If set renders a full width button */
+  fullWidth?: boolean;
+
+  /** if set to false, button text will not be uppercase */
+  uppercase?: boolean;
+
+  /** If set renders active state e.g. to implement toggle buttons */
+  active?: boolean;
+
+  type?: "submit" | "reset" | "button";
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement>;
+}
+
+export class Button extends React.Component<Props> {
+  public static defaultProps: Partial<Props> = {
+    size: "medium",
+    variant: "default",
+    color: "default",
+    uppercase: true,
+  };
+  public render() {
+    const {
+      active,
+      classes,
+      color,
+      className,
+      size,
+      fullWidth,
+      disabled,
+      forwardRef,
+      variant,
+      type,
+      uppercase,
+      ...rest
+    } = this.props;
+
+    const rootClassName = cn(
+      classes.root,
+      {
+        [classes.sizeMedium]: size === "medium",
+        [classes.sizeSmall]: size === "small",
+        [classes.sizeLarge]: size === "large",
+        [classes.colorDefault]: color === "default",
+        [classes.colorAlert]: color === "alert",
+        [classes.colorEmphasis]: color === "emphasis",
+        [classes.colorMono]: color === "mono",
+        [classes.variantDefault]: variant === "default",
+        [classes.variantFilled]: variant === "filled",
+        [classes.variantAdornment]: variant === "adornment",
+        [classes.variantGhost]: variant === "ghost",
+        [classes.variantUnderlined]: variant === "underlined",
+        [classes.variantPlain]: variant === "plain",
+        [classes.uppercase]: uppercase,
+        [classes.fullWidth]: fullWidth,
+        [classes.active]: active,
+        [classes.disabled]: disabled,
+      },
+      className
+    );
+
+    return (
+      <BaseButton
+        className={rootClassName}
+        classes={pick(classes, "keyboardFocus", "mouseHover")}
+        disabled={disabled}
+        ref={forwardRef}
+        type={type}
+        data-variant={variant}
+        data-color={color}
+        data-active={active}
+        {...rest}
+      />
+    );
+  }
+}
+
+const enhanced = withForwardRef(withStyles(styles)(Button));
+export type ButtonProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Button/ButtonIcon.css b/src/core/client/ui/components/v2/Button/ButtonIcon.css
new file mode 100644
index 000000000..424b6db73
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/ButtonIcon.css
@@ -0,0 +1,8 @@
+.root {
+  &:first-child {
+    margin-left: -4px;
+  }
+  &:last-child {
+    margin-right: -4px;
+  }
+}
diff --git a/src/core/client/ui/components/v2/Button/ButtonIcon.spec.tsx b/src/core/client/ui/components/v2/Button/ButtonIcon.spec.tsx
new file mode 100644
index 000000000..4f82cb0bc
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/ButtonIcon.spec.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import ShallowRenderer from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import { ButtonIcon } from "./ButtonIcon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ButtonIcon> = {
+    classes: {
+      root: "root",
+    } as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<ButtonIcon {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("forwards ref", () => {
+  const props: PropTypesOf<typeof ButtonIcon> = {
+    // eslint-disable-next-line:no-empty
+    forwardRef: () => {},
+    classes: {} as any,
+    children: "Push me",
+  };
+  const renderer = ShallowRenderer.createRenderer();
+  renderer.render(<ButtonIcon {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Button/ButtonIcon.tsx b/src/core/client/ui/components/v2/Button/ButtonIcon.tsx
new file mode 100644
index 000000000..e7b566be0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/ButtonIcon.tsx
@@ -0,0 +1,38 @@
+import cn from "classnames";
+import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
+
+import Icon, { IconProps } from "coral-ui/components/v2/Icon";
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Omit, PropTypesOf } from "coral-ui/types";
+
+import styles from "./ButtonIcon.css";
+
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & IconProps["classes"];
+
+  size?: IconProps["size"];
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+export const ButtonIcon: FunctionComponent<Props> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} ref={forwardRef} />;
+};
+
+ButtonIcon.defaultProps = {
+  size: "sm",
+} as Partial<Props>;
+
+const enhanced = withForwardRef(withStyles(styles)(ButtonIcon));
+export type ButtonIconProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap b/src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap
new file mode 100644
index 000000000..b6e2d69c0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`forwards ref 1`] = `
+<ForwardRef(forwardRef)
+  className=""
+  classes={Object {}}
+  data-color="default"
+  data-variant="default"
+>
+  Push me
+</ForwardRef(forwardRef)>
+`;
+
+exports[`renders a medium sized, alert colored filled button with fullWidth 1`] = `
+<ForwardRef(forwardRef)
+  className="sizeMedium colorAlert variantFilled fullWidth"
+  classes={Object {}}
+  data-color="alert"
+  data-variant="filled"
+>
+  Push me
+</ForwardRef(forwardRef)>
+`;
+
+exports[`renders active state 1`] = `
+<ForwardRef(forwardRef)
+  className="active"
+  classes={Object {}}
+  data-active={true}
+  data-color="default"
+  data-variant="default"
+>
+  Push me
+</ForwardRef(forwardRef)>
+`;
+
+exports[`renders correctly 1`] = `
+<ForwardRef(forwardRef)
+  className=""
+  classes={
+    Object {
+      "keyboardFocus": "keyboardFocus",
+      "mouseHover": "mouseHover",
+    }
+  }
+  data-color="default"
+  data-variant="default"
+>
+  Push me
+</ForwardRef(forwardRef)>
+`;
diff --git a/src/core/client/ui/components/v2/Button/__snapshots__/ButtonIcon.spec.tsx.snap b/src/core/client/ui/components/v2/Button/__snapshots__/ButtonIcon.spec.tsx.snap
new file mode 100644
index 000000000..f22026d07
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/__snapshots__/ButtonIcon.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`forwards ref 1`] = `
+<ForwardRef(forwardRef)
+  className=""
+  size="sm"
+>
+  Push me
+</ForwardRef(forwardRef)>
+`;
+
+exports[`renders correctly 1`] = `
+<ForwardRef(forwardRef)
+  className="root"
+  size="sm"
+>
+  Push me
+</ForwardRef(forwardRef)>
+`;
diff --git a/src/core/client/ui/components/v2/Button/index.ts b/src/core/client/ui/components/v2/Button/index.ts
new file mode 100644
index 000000000..e17fab004
--- /dev/null
+++ b/src/core/client/ui/components/v2/Button/index.ts
@@ -0,0 +1,2 @@
+export { default, default as Button, ButtonProps } from "./Button";
+export { default as ButtonIcon, ButtonIconProps } from "./ButtonIcon";
diff --git a/src/core/client/ui/components/v2/CallOut/CallOut.css b/src/core/client/ui/components/v2/CallOut/CallOut.css
new file mode 100644
index 000000000..62db447a5
--- /dev/null
+++ b/src/core/client/ui/components/v2/CallOut/CallOut.css
@@ -0,0 +1,51 @@
+$callout-regular-bg: var(--v2-colors-grey-100);
+$callout-regular-text: var(--v2-colors-mono-500);
+$callout-regular-border: var(--v2-colors-grey-300);
+
+.root {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--v2-spacing-4);
+  box-sizing: border-box;
+  border-width: 1px;
+  border-style: solid;
+  word-break: break-word;
+}
+
+.borderless {
+  border-style: none;
+}
+
+.colorRegular {
+  background-color: $callout-regular-bg;
+  border-color: $callout-regular-border;
+  color: $callout-regular-text;
+}
+
+.colorPrimary {
+  background-color: var(--palette-primary-lightest);
+  border-color: var(--palette-primary-light);
+  color: var(--palette-text-primary);
+}
+
+.colorError {
+  background-color: var(--palette-error-lightest);
+  border-color: var(--palette-error-light);
+  color: var(--palette-text-primary);
+}
+
+.colorSuccess {
+  background-color: var(--palette-success-lightest);
+  border-color: var(--palette-success-light);
+  color: var(--palette-text-primary);
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}
diff --git a/src/core/client/ui/components/v2/CallOut/CallOut.mdx b/src/core/client/ui/components/v2/CallOut/CallOut.mdx
new file mode 100644
index 000000000..fb71ea7ee
--- /dev/null
+++ b/src/core/client/ui/components/v2/CallOut/CallOut.mdx
@@ -0,0 +1,23 @@
+---
+name: CallOut
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import CallOut from './CallOut'
+import HorizontalGutter from '../HorizontalGutter'
+
+# CallOut
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
+    <CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
+    <CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
+  </HorizontalGutter>
+</Playground>
+
+
diff --git a/src/core/client/ui/components/v2/CallOut/CallOut.spec.tsx b/src/core/client/ui/components/v2/CallOut/CallOut.spec.tsx
new file mode 100644
index 000000000..e958b1d76
--- /dev/null
+++ b/src/core/client/ui/components/v2/CallOut/CallOut.spec.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import CallOut from "./CallOut";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof CallOut> = {
+    className: "custom",
+    color: "error",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<CallOut {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/CallOut/CallOut.tsx b/src/core/client/ui/components/v2/CallOut/CallOut.tsx
new file mode 100644
index 000000000..418dccf19
--- /dev/null
+++ b/src/core/client/ui/components/v2/CallOut/CallOut.tsx
@@ -0,0 +1,73 @@
+import cn from "classnames";
+import React, { FunctionComponent, ReactNode } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./CallOut.css";
+
+export interface CallOutProps {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Color of the CallOut
+   */
+  color?: "regular" | "primary" | "error" | "success";
+  /*
+   * If set renders a full width CallOut
+   */
+  fullWidth?: boolean;
+
+  /*
+   * If set removes border
+   */
+  borderless?: boolean;
+}
+
+const CallOut: FunctionComponent<CallOutProps> = props => {
+  const {
+    borderless,
+    className,
+    classes,
+    color,
+    fullWidth,
+    children,
+    ...rest
+  } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorRegular]: color === "regular",
+      [classes.colorError]: color === "error",
+      [classes.colorPrimary]: color === "primary",
+      [classes.colorSuccess]: color === "success",
+      [classes.borderless]: borderless,
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      <div>{children}</div>
+    </div>
+  );
+};
+
+CallOut.defaultProps = {
+  color: "regular",
+  fullWidth: false,
+} as Partial<CallOutProps>;
+
+const enhanced = withStyles(styles)(CallOut);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/CallOut/__snapshots__/CallOut.spec.tsx.snap b/src/core/client/ui/components/v2/CallOut/__snapshots__/CallOut.spec.tsx.snap
new file mode 100644
index 000000000..9e568c05b
--- /dev/null
+++ b/src/core/client/ui/components/v2/CallOut/__snapshots__/CallOut.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="CallOut-root CallOut-colorError custom"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/CallOut/index.ts b/src/core/client/ui/components/v2/CallOut/index.ts
new file mode 100644
index 000000000..189466420
--- /dev/null
+++ b/src/core/client/ui/components/v2/CallOut/index.ts
@@ -0,0 +1 @@
+export { default } from "./CallOut";
diff --git a/src/core/client/ui/components/v2/Card/Card.css b/src/core/client/ui/components/v2/Card/Card.css
new file mode 100644
index 000000000..c19d02bed
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/Card.css
@@ -0,0 +1,18 @@
+.root {
+  position: relative;
+  padding: var(--v2-spacing-4);
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
+  border-radius: var(--round-corners);
+  background-color: var(--palette-common-white);
+  /*
+    Fallback begin
+
+    Unfortunately Firefox / IE does not support
+    `word-break: break-word` yet.
+  */
+  word-break: break-all;
+  /* Fallback end */
+  word-break: break-word;
+}
diff --git a/src/core/client/ui/components/v2/Card/Card.mdx b/src/core/client/ui/components/v2/Card/Card.mdx
new file mode 100644
index 000000000..8de7390ce
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/Card.mdx
@@ -0,0 +1,37 @@
+---
+name: Card
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+import Card from "./Card";
+import CloseButton from "./CloseButton";
+import HorizontalGutter from "../HorizontalGutter";
+
+# Card
+
+## Basic Use
+
+<Playground>
+  <HorizontalGutter size="double">
+    <Card>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+      est laborum.
+    </Card>
+    <Card>
+      <CloseButton />
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+      eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    </Card>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Card/Card.spec.tsx b/src/core/client/ui/components/v2/Card/Card.spec.tsx
new file mode 100644
index 000000000..030ab9675
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/Card.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import Card from "./Card";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Card> = {
+    className: "custom",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<Card {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Card/Card.tsx b/src/core/client/ui/components/v2/Card/Card.tsx
new file mode 100644
index 000000000..bba4b3c59
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/Card.tsx
@@ -0,0 +1,39 @@
+import cn from "classnames";
+import React, { FunctionComponent, ReactNode, Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+
+import styles from "./Card.css";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  tabIndex?: number;
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+const Card: FunctionComponent<CardProps> = props => {
+  const { className, classes, children, forwardRef, ...rest } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <div className={rootClassName} {...rest} ref={forwardRef}>
+      {children}
+    </div>
+  );
+};
+
+const enhanced = withForwardRef(withStyles(styles)(Card));
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Card/CloseButton.css b/src/core/client/ui/components/v2/Card/CloseButton.css
new file mode 100644
index 000000000..01b08185a
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/CloseButton.css
@@ -0,0 +1,8 @@
+.root {
+  min-height: 0px;
+  margin-right: -5px;
+}
+
+.icon {
+  display: block;
+}
diff --git a/src/core/client/ui/components/v2/Card/CloseButton.tsx b/src/core/client/ui/components/v2/Card/CloseButton.tsx
new file mode 100644
index 000000000..4f3247e7c
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/CloseButton.tsx
@@ -0,0 +1,41 @@
+import React, { FunctionComponent, Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Omit, PropTypesOf } from "coral-ui/types";
+
+import BaseButton from "../BaseButton";
+import Flex from "../Flex";
+import Icon from "../Icon";
+
+import styles from "./CloseButton.css";
+
+export interface CloseButtonProps
+  extends Omit<PropTypesOf<typeof BaseButton>, "ref"> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles & PropTypesOf<typeof BaseButton>["classes"];
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement>;
+}
+
+const CloseButton: FunctionComponent<CloseButtonProps> = props => {
+  const {
+    classes: { icon: iconClassName, ...restClasses },
+    forwardRef,
+    ...rest
+  } = props;
+  return (
+    <Flex justifyContent="flex-end">
+      <BaseButton classes={restClasses} ref={forwardRef} {...rest}>
+        <Icon className={iconClassName} size="md">
+          close
+        </Icon>
+      </BaseButton>
+    </Flex>
+  );
+};
+
+const enhanced = withForwardRef(withStyles(styles)(CloseButton));
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Card/__snapshots__/Card.spec.tsx.snap b/src/core/client/ui/components/v2/Card/__snapshots__/Card.spec.tsx.snap
new file mode 100644
index 000000000..ab86ffe73
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/__snapshots__/Card.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Card-root custom"
+>
+  Hello World
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/Card/index.ts b/src/core/client/ui/components/v2/Card/index.ts
new file mode 100644
index 000000000..68d2a3f46
--- /dev/null
+++ b/src/core/client/ui/components/v2/Card/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Card";
+export { default as CardCloseButton } from "./CloseButton";
diff --git a/src/core/client/ui/components/v2/CheckBox/CheckBox.css b/src/core/client/ui/components/v2/CheckBox/CheckBox.css
new file mode 100644
index 000000000..6c4a6f340
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckBox/CheckBox.css
@@ -0,0 +1,91 @@
+.root {
+}
+
+.input {
+  cursor: pointer;
+  position: absolute; /* take it out of document flow */
+  opacity: 0; /* hide it */
+}
+
+.label {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  padding-left: calc(var(--v2-spacing-3) + 14px);
+  color: var(--v2-palette-input-label);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+}
+
+.labelSpan {
+  padding-bottom: 1px;
+}
+
+.labelLight {
+  color: var(--palette-text-light);
+}
+
+/* Box. */
+.input + .label:before {
+  content: "";
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: var(--v2-palette-input-background);
+  border: 1px solid var(--v2-palette-input-label);
+  box-sizing: border-box;
+}
+
+/* Box focus */
+.label.focus:before {
+  @mixin outline;
+}
+
+/* Box checked */
+.input:checked + .label:before {
+  background: var(--v2-palette-primary-main);
+  border: 1px solid var(--v2-palette-primary-main);
+}
+
+/* Disabled state label. */
+.input:disabled + .label {
+  cursor: auto;
+  opacity: 0.6;
+}
+
+/* Disabled box. */
+.input:disabled + .label:before {
+  box-shadow: none;
+  border: 1px solid var(--v2-palette-input-disabled-foreground);
+  background: var(--v2-palette-input-disabled-background);
+}
+
+/* Checkmark. Could be replaced with an image */
+.input:checked + .label:after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 50%;
+  margin-top: -1px;
+  transform: translateY(-50%);
+  color: var(--v2-palette-input-background);
+  background: currentColor;
+  width: 2px;
+  height: 2px;
+  box-shadow: 2px 0 0 currentColor, 4px 0 0 currentColor,
+    4px -2px 0 currentColor, 4px -4px 0 currentColor, 4px -6px 0 currentColor,
+    4px -8px 0 currentColor;
+  transform: rotate(45deg);
+  box-sizing: border-box;
+}
+
+.input:checked:disabled + .label:after {
+  color: var(--v2-palette-input-disabled-foreground);
+}
diff --git a/src/core/client/ui/components/v2/CheckBox/CheckBox.mdx b/src/core/client/ui/components/v2/CheckBox/CheckBox.mdx
new file mode 100644
index 000000000..ae33bbbf5
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckBox/CheckBox.mdx
@@ -0,0 +1,19 @@
+---
+name: CheckBox
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import CheckBox from './CheckBox.tsx'
+import HorizontalGutter from '../HorizontalGutter'
+
+# CheckBox
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <CheckBox value="true">Yes I agree</CheckBox>
+    <CheckBox value="false" disabled>No I don't agree</CheckBox>
+    <CheckBox value="undefined" disabled checked>I don't know</CheckBox>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/CheckBox/CheckBox.spec.tsx b/src/core/client/ui/components/v2/CheckBox/CheckBox.spec.tsx
new file mode 100644
index 000000000..00c6a5562
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckBox/CheckBox.spec.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import CheckBox from "./CheckBox";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof CheckBox> = {
+    className: "custom",
+    id: "checkboxID",
+    checked: true,
+    children: "Yes I agree",
+  };
+  const renderer = TestRenderer.create(<CheckBox {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/CheckBox/CheckBox.tsx b/src/core/client/ui/components/v2/CheckBox/CheckBox.tsx
new file mode 100644
index 000000000..d97a7b102
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckBox/CheckBox.tsx
@@ -0,0 +1,90 @@
+import cn from "classnames";
+import React, { ChangeEvent, Component, EventHandler, FocusEvent } from "react";
+import uuid from "uuid/v4";
+
+import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
+
+import styles from "./CheckBox.css";
+
+export interface CheckBoxProps {
+  id?: string;
+  /**
+   * checked or not.
+   */
+  checked?: boolean;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Mark as readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Name
+   */
+  name?: string;
+  /**
+   * onChange
+   */
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
+
+  disabled?: boolean;
+  children: React.ReactNode;
+  /**
+   * Display a light text.
+   */
+  light?: boolean;
+
+  // These handlers are passed down by the `withKeyboardFocus` HOC.
+  onFocus: EventHandler<FocusEvent<HTMLElement>>;
+  onBlur: EventHandler<FocusEvent<HTMLElement>>;
+  keyboardFocus: boolean;
+}
+
+class CheckBox extends Component<CheckBoxProps> {
+  public state = {
+    randomID: uuid(),
+  };
+  public render() {
+    const {
+      className,
+      classes,
+      id,
+      light,
+      children,
+      keyboardFocus,
+      ...rest
+    } = this.props;
+
+    const rootClassName = cn(classes.root, className);
+    const finalID = id || this.state.randomID;
+
+    return (
+      <div className={rootClassName}>
+        <input
+          className={classes.input}
+          type="checkbox"
+          id={finalID}
+          {...rest}
+        />
+        <label
+          className={cn(classes.label, {
+            [classes.labelLight]: light,
+            [classes.focus]: keyboardFocus,
+          })}
+          htmlFor={finalID}
+        >
+          <span className={classes.labelSpan}>{children}</span>
+        </label>
+      </div>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(withKeyboardFocus(CheckBox));
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/CheckBox/__snapshots__/CheckBox.spec.tsx.snap b/src/core/client/ui/components/v2/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
new file mode 100644
index 000000000..11ce87d61
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="CheckBox-root custom"
+>
+  <input
+    checked={true}
+    className="CheckBox-input"
+    id="checkboxID"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="checkbox"
+  />
+  <label
+    className="CheckBox-label"
+    htmlFor="checkboxID"
+  >
+    <span
+      className="CheckBox-labelSpan"
+    >
+      Yes I agree
+    </span>
+  </label>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/CheckBox/index.ts b/src/core/client/ui/components/v2/CheckBox/index.ts
new file mode 100644
index 000000000..151b40bd5
--- /dev/null
+++ b/src/core/client/ui/components/v2/CheckBox/index.ts
@@ -0,0 +1,2 @@
+export * from "./CheckBox";
+export { default } from "./CheckBox";
diff --git a/src/core/client/ui/components/v2/ClickOutside/ClickOutside.mdx b/src/core/client/ui/components/v2/ClickOutside/ClickOutside.mdx
new file mode 100644
index 000000000..04bd19da7
--- /dev/null
+++ b/src/core/client/ui/components/v2/ClickOutside/ClickOutside.mdx
@@ -0,0 +1,30 @@
+---
+name: ClickOutside
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import ClickOutside from './ClickOutside'
+import Button from '../Button/Button'
+
+# ClickOutside
+
+A Component to handle click events outside the children components.
+
+## Basic usage
+Wrap a Component with `<ClickOutside>` and pass a function to `onClickOutside`. This function will trigger when the user
+clicks outside the component.
+
+### Test
+Click the blue background. It should trigger an alert. Nothing should happen if you click the button.
+
+<Playground>
+  <div id="outside" style={{background: 'blue', padding: '10px'}}>
+    <ClickOutside onClickOutside={e => {
+      if (e.srcElement.id === "outside") {
+        alert('You clicked outside!');
+      }}}>
+      <Button variant="filled">Push Me</Button>
+    </ClickOutside>
+  </div>
+</Playground>
diff --git a/src/core/client/ui/components/v2/ClickOutside/ClickOutside.spec.tsx b/src/core/client/ui/components/v2/ClickOutside/ClickOutside.spec.tsx
new file mode 100644
index 000000000..e70821644
--- /dev/null
+++ b/src/core/client/ui/components/v2/ClickOutside/ClickOutside.spec.tsx
@@ -0,0 +1,122 @@
+import { mount } from "enzyme";
+import React from "react";
+import simulant from "simulant";
+import sinon from "sinon";
+
+import UIContext from "../UIContext";
+import {
+  ClickFarAwayCallback,
+  ClickFarAwayRegister,
+  ClickOutside,
+  default as ClickOutsideWithContext,
+} from "./ClickOutside";
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+afterAll(() => {
+  document.body.removeChild(container);
+});
+
+it("should render correctly", () => {
+  const noop = () => null;
+  const wrapper = mount(
+    <ClickOutside onClickOutside={noop}>
+      <span>Hello World!</span>
+    </ClickOutside>
+  );
+  expect(wrapper.html()).toMatchSnapshot();
+  wrapper.unmount();
+});
+
+it("should detect click outside", () => {
+  const onClickOutside = sinon.spy();
+  const wrapper = mount(
+    <ClickOutside onClickOutside={onClickOutside}>
+      <span>Hello World!</span>
+    </ClickOutside>,
+    {
+      attachTo: container,
+    }
+  );
+  simulant.fire(container, "click");
+
+  expect(onClickOutside.calledOnce).toEqual(true);
+  wrapper.unmount();
+});
+
+it("should ignore click inside", () => {
+  const onClickOutside = sinon.spy();
+  const wrapper = mount(
+    <ClickOutside onClickOutside={onClickOutside}>
+      <button id="click-outside-test-button">Push Me</button>
+    </ClickOutside>,
+    {
+      attachTo: container,
+    }
+  );
+
+  const target = document.getElementById("click-outside-test-button")!;
+  simulant.fire(target, "click");
+
+  expect(onClickOutside.calledOnce).toEqual(false);
+  wrapper.unmount();
+});
+
+it("should detect click far away", () => {
+  let emitFarAwayClick: ClickFarAwayCallback = Function;
+  const unlisten = sinon.spy();
+  const registerClickFarAway: ClickFarAwayRegister = cb => {
+    emitFarAwayClick = cb;
+    return unlisten;
+  };
+  const onClickOutside = sinon.spy();
+  const wrapper = mount(
+    <ClickOutside
+      onClickOutside={onClickOutside}
+      registerClickFarAway={registerClickFarAway}
+    >
+      <button id="click-outside-test-button">Push Me</button>
+    </ClickOutside>,
+    {
+      attachTo: container,
+    }
+  );
+
+  expect(onClickOutside.calledOnce).toEqual(false);
+  emitFarAwayClick();
+  expect(onClickOutside.calledOnce).toEqual(true);
+  expect(unlisten.calledOnce).toEqual(false);
+  wrapper.unmount();
+  expect(unlisten.calledOnce).toEqual(true);
+});
+
+it("should get registerClickFarAway from context", () => {
+  const registerClickFarAway: ClickFarAwayRegister = sinon.spy();
+  const onClickOutside = sinon.spy();
+  const context: any = {
+    registerClickFarAway,
+  };
+  const wrapper = mount(
+    <UIContext.Provider value={context}>
+      <ClickOutsideWithContext
+        onClickOutside={onClickOutside}
+        registerClickFarAway={registerClickFarAway}
+      >
+        <button id="click-outside-test-button">Push Me</button>
+      </ClickOutsideWithContext>
+    </UIContext.Provider>,
+    {
+      attachTo: container,
+    }
+  );
+
+  expect(wrapper.find(ClickOutside).prop("registerClickFarAway")).toEqual(
+    registerClickFarAway
+  );
+  wrapper.unmount();
+});
diff --git a/src/core/client/ui/components/v2/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/v2/ClickOutside/ClickOutside.tsx
new file mode 100644
index 000000000..ffef90688
--- /dev/null
+++ b/src/core/client/ui/components/v2/ClickOutside/ClickOutside.tsx
@@ -0,0 +1,78 @@
+import React, { FunctionComponent } from "react";
+import { findDOMNode } from "react-dom";
+
+import UIContext from "../UIContext";
+
+export type ClickFarAwayCallback = () => void;
+export type ClickFarAwayUnlistenCallback = () => void;
+
+export type ClickFarAwayRegister = (
+  callback: ClickFarAwayCallback
+) => ClickFarAwayUnlistenCallback;
+
+export interface ClickOutsideProps {
+  onClickOutside: (e?: MouseEvent) => void;
+
+  /**
+   * A way to listen for clicks that are e.g. outside of the
+   * current frame for `ClickOutside`
+   */
+  registerClickFarAway?: ClickFarAwayRegister;
+
+  children: React.ReactNode;
+}
+
+export class ClickOutside extends React.Component<ClickOutsideProps> {
+  public domNode: Element | null = null;
+  private unlisten?: ClickFarAwayUnlistenCallback;
+
+  public handleClick = (e: MouseEvent) => {
+    const { onClickOutside } = this.props;
+    if (!e || !this.domNode!.contains(e.target as HTMLInputElement)) {
+      // eslint-disable-next-line no-unused-expressions
+      onClickOutside && onClickOutside(e);
+    }
+  };
+
+  public handleClickFarAway = () => {
+    const { onClickOutside } = this.props;
+    // eslint-disable-next-line no-unused-expressions
+    onClickOutside && onClickOutside();
+  };
+
+  public componentDidMount() {
+    // TODO: find another solution to `findDOMNode`.
+    // eslint-disable-next-line react/no-find-dom-node
+    this.domNode = findDOMNode(this) as Element;
+    document.addEventListener("click", this.handleClick, true);
+
+    // Listen to far away clicks.
+    if (this.props.registerClickFarAway) {
+      this.unlisten = this.props.registerClickFarAway(this.handleClickFarAway);
+    }
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("click", this.handleClick, true);
+
+    // Unlisten to far away clicks.
+    if (this.unlisten) {
+      this.unlisten();
+      this.unlisten = undefined;
+    }
+  }
+
+  public render() {
+    return this.props.children;
+  }
+}
+
+const ClickOutsideWithContext: FunctionComponent<ClickOutsideProps> = props => (
+  <UIContext.Consumer>
+    {({ registerClickFarAway }) => (
+      <ClickOutside {...props} registerClickFarAway={registerClickFarAway} />
+    )}
+  </UIContext.Consumer>
+);
+
+export default ClickOutsideWithContext;
diff --git a/src/core/client/ui/components/v2/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap b/src/core/client/ui/components/v2/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap
new file mode 100644
index 000000000..883a02a51
--- /dev/null
+++ b/src/core/client/ui/components/v2/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `"<span>Hello World!</span>"`;
diff --git a/src/core/client/ui/components/v2/ClickOutside/index.ts b/src/core/client/ui/components/v2/ClickOutside/index.ts
new file mode 100644
index 000000000..91803ea08
--- /dev/null
+++ b/src/core/client/ui/components/v2/ClickOutside/index.ts
@@ -0,0 +1 @@
+export { default, ClickFarAwayRegister } from "./ClickOutside";
diff --git a/src/core/client/ui/components/v2/Counter/Counter.css b/src/core/client/ui/components/v2/Counter/Counter.css
new file mode 100644
index 000000000..e884f571b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Counter/Counter.css
@@ -0,0 +1,56 @@
+.root {
+  font-size: var(--v2-font-size-2);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  letter-spacing: calc(0.2em / 14);
+  border-radius: var(--round-corners);
+  padding: 1px 3px 1px 3px;
+  color: inherit;
+}
+
+.sizeSmall {
+  font-size: var(--v2-font-size-1);
+  padding: 2px 3px;
+  line-height: var(--v2-line-height-reset);
+}
+
+.text {
+  color: var(--v2-palette-counter-badge-foreground);
+}
+
+.colorInherit {
+  background-color: currentColor;
+}
+
+.colorPrimary {
+  background-color: var(--palette-primary-main);
+}
+
+.colorGrey {
+  background-color: var(--palette-grey-lightest);
+  box-shadow: inset 0px 0px 0px 1px var(--palette-grey-dark);
+  & .text {
+    color: var(--palette-grey-dark);
+  }
+}
+
+.colorDark {
+  background-color: var(--palette-grey-dark);
+}
+
+.colorError {
+  background-color: var(--palette-error-darkest);
+}
+
+.colorEmphasis {
+  background-color: var(--v2-palette-counter-badge-background-emphasis);
+}
+
+.colorDefault {
+  background-color: var(--v2-palette-counter-badge-background-default);
+}
+
+.colorAlert {
+  background-color: var(--v2-palette-counter-badge-background-alert);
+}
diff --git a/src/core/client/ui/components/v2/Counter/Counter.mdx b/src/core/client/ui/components/v2/Counter/Counter.mdx
new file mode 100644
index 000000000..73e13787c
--- /dev/null
+++ b/src/core/client/ui/components/v2/Counter/Counter.mdx
@@ -0,0 +1,34 @@
+---
+name: Counter
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+import Flex from "../Flex";
+import Counter from "./Counter";
+
+# Counter
+
+## Basic usage
+
+<Playground>
+  <Flex alignItems="center">
+    <span>Comments</span> <Counter>23</Counter>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex itemGutter>
+    <Counter size="sm">23</Counter>
+    <Counter size="sm" color="primary">
+      15
+    </Counter>
+    <Counter size="sm" color="grey">
+      10
+    </Counter>
+    <Counter size="sm" color="dark">
+      20
+    </Counter>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Counter/Counter.spec.tsx b/src/core/client/ui/components/v2/Counter/Counter.spec.tsx
new file mode 100644
index 000000000..a1747e753
--- /dev/null
+++ b/src/core/client/ui/components/v2/Counter/Counter.spec.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import Counter from "./Counter";
+
+it("renders correctly", () => {
+  const renderer = createRenderer();
+  renderer.render(<Counter>20</Counter>);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Counter/Counter.tsx b/src/core/client/ui/components/v2/Counter/Counter.tsx
new file mode 100644
index 000000000..6f4007ecd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Counter/Counter.tsx
@@ -0,0 +1,65 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Counter.css";
+
+interface Props {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color?:
+    | "inherit"
+    | "dark"
+    | "grey"
+    | "primary"
+    | "error"
+    | "default"
+    | "emphasis"
+    | "alert";
+
+  size?: "sm" | "md";
+}
+
+const Counter: FunctionComponent<Props> = ({
+  classes,
+  color,
+  className,
+  children,
+  size,
+  ...rest
+}) => {
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorPrimary]: color === "primary",
+      [classes.colorDark]: color === "dark",
+      [classes.colorGrey]: color === "grey",
+      [classes.colorInherit]: color === "inherit",
+      [classes.colorError]: color === "error",
+      [classes.colorDefault]: color === "default",
+      [classes.colorEmphasis]: color === "emphasis",
+      [classes.colorAlert]: color === "alert",
+      [classes.sizeSmall]: size === "sm",
+    },
+    className
+  );
+  return (
+    <span className={rootClassName} {...rest}>
+      <span className={classes.text}>{children}</span>
+    </span>
+  );
+};
+
+Counter.defaultProps = {
+  color: "inherit",
+};
+
+const enhanced = withStyles(styles)(Counter);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Counter/__snapshots__/Counter.spec.tsx.snap b/src/core/client/ui/components/v2/Counter/__snapshots__/Counter.spec.tsx.snap
new file mode 100644
index 000000000..44fa0f8ea
--- /dev/null
+++ b/src/core/client/ui/components/v2/Counter/__snapshots__/Counter.spec.tsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Counter
+  classes={
+    Object {
+      "colorAlert": "Counter-colorAlert",
+      "colorDark": "Counter-colorDark",
+      "colorDefault": "Counter-colorDefault",
+      "colorEmphasis": "Counter-colorEmphasis",
+      "colorError": "Counter-colorError",
+      "colorGrey": "Counter-colorGrey",
+      "colorInherit": "Counter-colorInherit",
+      "colorPrimary": "Counter-colorPrimary",
+      "root": "Counter-root",
+      "sizeSmall": "Counter-sizeSmall",
+      "text": "Counter-text",
+    }
+  }
+  color="inherit"
+>
+  20
+</Counter>
+`;
diff --git a/src/core/client/ui/components/v2/Counter/index.ts b/src/core/client/ui/components/v2/Counter/index.ts
new file mode 100644
index 000000000..e09713ba4
--- /dev/null
+++ b/src/core/client/ui/components/v2/Counter/index.ts
@@ -0,0 +1 @@
+export { default } from "./Counter";
diff --git a/src/core/client/ui/components/v2/Delay/Delay.mdx b/src/core/client/ui/components/v2/Delay/Delay.mdx
new file mode 100644
index 000000000..9a3375d97
--- /dev/null
+++ b/src/core/client/ui/components/v2/Delay/Delay.mdx
@@ -0,0 +1,22 @@
+---
+name: Delay
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import Delay from "./Delay.tsx";
+import HorizontalGutter from "../HorizontalGutter";
+import Spinner from "../Spinner";
+
+# Delay
+
+## Basic Use
+
+<Playground>
+  <HorizontalGutter size="double">
+    <div>Spinner will show up in 3 seconds</div>
+    <Delay>
+      <Spinner />
+    </Delay>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Delay/Delay.spec.tsx b/src/core/client/ui/components/v2/Delay/Delay.spec.tsx
new file mode 100644
index 000000000..668882f5d
--- /dev/null
+++ b/src/core/client/ui/components/v2/Delay/Delay.spec.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import Delay from "./Delay";
+
+it("renders correctly", () => {
+  jest.useFakeTimers();
+  try {
+    const props: PropTypesOf<typeof Delay> = {
+      children: "custom",
+      ms: 3000,
+    };
+    const renderer = TestRenderer.create(<Delay {...props}>Hello</Delay>);
+    expect(renderer.toJSON()).toMatchSnapshot();
+    jest.advanceTimersByTime(3000);
+    expect(renderer.toJSON()).toMatchSnapshot();
+  } finally {
+    jest.useRealTimers();
+  }
+});
diff --git a/src/core/client/ui/components/v2/Delay/Delay.tsx b/src/core/client/ui/components/v2/Delay/Delay.tsx
new file mode 100644
index 000000000..3c90d65dd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Delay/Delay.tsx
@@ -0,0 +1,28 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+
+interface Props {
+  ms?: number;
+  children: React.ReactNode;
+}
+
+const Delay: FunctionComponent<Props> = ({ ms, children }) => {
+  const [render, setRender] = useState<boolean>(false);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setRender(true);
+    }, ms);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [ms]);
+  if (!render) {
+    return null;
+  }
+  return <>{children}</>;
+};
+
+Delay.defaultProps = {
+  ms: 500,
+};
+
+export default Delay;
diff --git a/src/core/client/ui/components/v2/Delay/__snapshots__/Delay.spec.tsx.snap b/src/core/client/ui/components/v2/Delay/__snapshots__/Delay.spec.tsx.snap
new file mode 100644
index 000000000..840f2a190
--- /dev/null
+++ b/src/core/client/ui/components/v2/Delay/__snapshots__/Delay.spec.tsx.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `null`;
+
+exports[`renders correctly 2`] = `"Hello"`;
diff --git a/src/core/client/ui/components/v2/Delay/index.ts b/src/core/client/ui/components/v2/Delay/index.ts
new file mode 100644
index 000000000..a478b6813
--- /dev/null
+++ b/src/core/client/ui/components/v2/Delay/index.ts
@@ -0,0 +1 @@
+export { default } from "./Delay";
diff --git a/src/core/client/ui/components/v2/Divider/Divider.css b/src/core/client/ui/components/v2/Divider/Divider.css
new file mode 100644
index 000000000..8599c35a4
--- /dev/null
+++ b/src/core/client/ui/components/v2/Divider/Divider.css
@@ -0,0 +1,23 @@
+$divider-border-color: var(--v2-colors-grey-300);
+
+.root {
+  border-top: 0;
+  border-bottom: 1px solid $divider-border-color;
+  padding: 0;
+}
+
+.spacing1 {
+  margin: var(--v2-spacing-1) 0;
+}
+
+.spacing2 {
+  margin: var(--v2-spacing-2) 0;
+}
+
+.spacing3 {
+  margin: var(--v2-spacing-3) 0;
+}
+
+.spacing4 {
+  margin: var(--v2-spacing-4) 0;
+}
diff --git a/src/core/client/ui/components/v2/Divider/Divider.tsx b/src/core/client/ui/components/v2/Divider/Divider.tsx
new file mode 100644
index 000000000..7ab35c851
--- /dev/null
+++ b/src/core/client/ui/components/v2/Divider/Divider.tsx
@@ -0,0 +1,23 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import styles from "./Divider.css";
+
+interface Props {
+  spacing?: 1 | 2 | 3 | 4;
+}
+
+const Divider: FunctionComponent<Props> = ({ spacing = 3 }) => {
+  return (
+    <hr
+      className={cn(styles.root, {
+        [styles.spacing1]: spacing && spacing === 1,
+        [styles.spacing2]: spacing && spacing === 2,
+        [styles.spacing3]: spacing && spacing === 3,
+        [styles.spacing4]: spacing && spacing === 4,
+      })}
+    />
+  );
+};
+
+export default Divider;
diff --git a/src/core/client/ui/components/v2/Divider/index.ts b/src/core/client/ui/components/v2/Divider/index.ts
new file mode 100644
index 000000000..980204123
--- /dev/null
+++ b/src/core/client/ui/components/v2/Divider/index.ts
@@ -0,0 +1 @@
+export { default } from "./Divider";
diff --git a/src/core/client/ui/components/v2/Dropdown/Button.css b/src/core/client/ui/components/v2/Dropdown/Button.css
new file mode 100644
index 000000000..1be6ccf8f
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Button.css
@@ -0,0 +1,55 @@
+.root {
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--v2-spacing-2);
+  width: 100%;
+  text-align: left;
+  line-height: 1;
+}
+
+.anchor {
+  color: var(--v2-palette-primary-main);
+  text-decoration: underline;
+  &:visited {
+    color: var(--v2-palette-primary-main);
+  }
+}
+
+.root:disabled {
+  opacity: 0.6;
+}
+
+.root:not(:disabled):active {
+  background-color: var(--v2-palette-primary-lightest);
+}
+
+.mouseHover {
+  background-color: var(--v2-palette-primary-lightest);
+}
+
+.iconBefore {
+  display: flex;
+  justify-content: baseline;
+  align-items: center;
+  color: var(--v2-palette-grey-main);
+  margin-right: var(--spacing-2);
+}
+.iconAfter {
+  display: flex;
+  align-items: center;
+  justify-content: baseline;
+  margin-left: var(--spacing-2);
+  text-decoration: unset;
+}
+.iconOpenInNew {
+  padding-top: 1px;
+  color: var(--v2-palette-primary-main);
+}
+
+.blankAdornment {
+  padding-right: var(--v2-spacing-6);
+}
diff --git a/src/core/client/ui/components/v2/Dropdown/Button.spec.tsx b/src/core/client/ui/components/v2/Dropdown/Button.spec.tsx
new file mode 100644
index 000000000..e25560b72
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Button.spec.tsx
@@ -0,0 +1,32 @@
+import { noop } from "lodash";
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import Button from "./Button";
+
+it("renders anchor button", () => {
+  const props: PropTypesOf<typeof Button> = {
+    href: "/moderate",
+    children: "link",
+    onClick: noop,
+    className: "custom",
+    target: "_blank",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders button", () => {
+  const props: PropTypesOf<typeof Button> = {
+    children: "link",
+    onClick: noop,
+    className: "custom",
+    blankAdornment: true,
+  };
+  const renderer = createRenderer();
+  renderer.render(<Button {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Dropdown/Button.tsx b/src/core/client/ui/components/v2/Dropdown/Button.tsx
new file mode 100644
index 000000000..b3acc8c5a
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Button.tsx
@@ -0,0 +1,78 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { Omit } from "coral-framework/types";
+import { withStyles } from "coral-ui/hocs";
+
+import BaseButton, { BaseButtonProps } from "coral-ui/components/BaseButton";
+import Icon from "coral-ui/components/Icon";
+
+import { Flex } from "coral-ui/components";
+import styles from "./Button.css";
+
+interface Props extends Omit<BaseButtonProps, "ref"> {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  href?: string;
+  className?: string;
+  onClick?: React.EventHandler<React.MouseEvent>;
+  classes: typeof styles;
+  /**
+   * adornment if set is rendered at the end of the button.
+   */
+  adornment?: React.ReactNode;
+  /**
+   * blankAdornment if true will leave some blank space after the text, so
+   * that it looks nice, if mixed with other buttons which have an external link
+   * icon as adornment.
+   */
+  blankAdornment?: boolean;
+}
+
+const Button: FunctionComponent<Props> = ({
+  blankAdornment,
+  className,
+  href,
+  onClick,
+  children,
+  classes,
+  icon,
+  disabled,
+  adornment,
+  ...rest
+}) => {
+  return (
+    <BaseButton
+      classes={{
+        root: cn(classes.root, className, {
+          [classes.blankAdornment]: blankAdornment,
+        }),
+        mouseHover: cn({ [classes.mouseHover]: !disabled }),
+      }}
+      href={href}
+      onClick={onClick}
+      anchor={Boolean(href)}
+      disabled={disabled}
+      {...rest}
+    >
+      <Flex alignItems="center">
+        {icon && <div className={classes.iconBefore}>{icon}</div>}
+        <div
+          className={cn({
+            [classes.anchor]: Boolean(href),
+          })}
+        >
+          {children}
+        </div>
+      </Flex>
+      {adornment && <div className={classes.iconAfter}>{adornment}</div>}
+      {!adornment && rest.target === "_blank" && (
+        <div className={classes.iconAfter}>
+          <Icon className={classes.iconOpenInNew}>open_in_new</Icon>
+        </div>
+      )}
+    </BaseButton>
+  );
+};
+
+export default withStyles(styles)(Button);
diff --git a/src/core/client/ui/components/v2/Dropdown/Divider.css b/src/core/client/ui/components/v2/Dropdown/Divider.css
new file mode 100644
index 000000000..64d612447
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Divider.css
@@ -0,0 +1,6 @@
+.root {
+  border: 0;
+  border-bottom: 1px solid var(--v2-palette-dropdown-divider-border);
+  margin: 0;
+  padding: calc(0.5 * var(--mini-unit)) 0 0 0;
+}
diff --git a/src/core/client/ui/components/v2/Dropdown/Divider.spec.tsx b/src/core/client/ui/components/v2/Dropdown/Divider.spec.tsx
new file mode 100644
index 000000000..0489e8451
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Divider.spec.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import Divider from "./Divider";
+
+it("renders correctly", () => {
+  const renderer = createRenderer();
+  renderer.render(<Divider />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Dropdown/Divider.tsx b/src/core/client/ui/components/v2/Dropdown/Divider.tsx
new file mode 100644
index 000000000..ba0fc2c91
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Divider.tsx
@@ -0,0 +1,17 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Divider.css";
+
+interface Props {
+  className?: string;
+  classes: typeof styles;
+}
+
+const Divider: FunctionComponent<Props> = ({ className, classes, ...rest }) => (
+  <hr {...rest} className={cn(classes.root, className)} />
+);
+
+export default withStyles(styles)(Divider);
diff --git a/src/core/client/ui/components/v2/Dropdown/Dropdown.css b/src/core/client/ui/components/v2/Dropdown/Dropdown.css
new file mode 100644
index 000000000..660ced0b0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Dropdown.css
@@ -0,0 +1,3 @@
+.root {
+  padding: calc(0.5 * var(--mini-unit)) 0;
+}
diff --git a/src/core/client/ui/components/v2/Dropdown/Dropdown.mdx b/src/core/client/ui/components/v2/Dropdown/Dropdown.mdx
new file mode 100644
index 000000000..46ac31ceb
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Dropdown.mdx
@@ -0,0 +1,58 @@
+---
+name: Dropdown
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+import {
+  Dropdown,
+  Divider as DropdownDivider,
+  Button as DropdownButton,
+} from "./";
+import { Button, ButtonIcon } from "../Button";
+import ClickOutside from "../ClickOutside";
+import Popover from "../Popover";
+
+# Dropdown
+
+## Basic usage
+
+<Playground>
+  <Popover
+    id="dropdownMenu"
+    description="Dropdown Menu"
+    placement="bottom-start"
+    body={({ toggleVisibility }) => (
+      <ClickOutside onClickOutside={toggleVisibility}>
+        <Dropdown>
+          <DropdownButton blankAdornment>Shortcuts</DropdownButton>
+          <DropdownButton
+            href="https://github.com/coralproject/talk/issues/new"
+            target="_blank"
+          >
+            Report Bug
+          </DropdownButton>
+          <DropdownDivider />
+          <DropdownButton blankAdornment>Sign Out</DropdownButton>
+        </Dropdown>
+      </ClickOutside>
+    )}
+  >
+    {({ toggleVisibility, ref, visible }) => (
+      <Button
+        onClick={toggleVisibility}
+        ref={ref}
+        variant="filled"
+        color="primary"
+      >
+        <span>Click me!</span>
+        {
+          <ButtonIcon size="md">
+            {visible ? "arrow_drop_up" : "arrow_drop_down"}
+          </ButtonIcon>
+        }
+      </Button>
+    )}
+  </Popover>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Dropdown/Dropdown.spec.tsx b/src/core/client/ui/components/v2/Dropdown/Dropdown.spec.tsx
new file mode 100644
index 000000000..2c70af334
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Dropdown.spec.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import Button from "./Button";
+import Divider from "./Divider";
+import Dropdown from "./Dropdown";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Dropdown> = {
+    children: (
+      <>
+        <Button blankAdornment>Shortcuts</Button>
+        <Button
+          href="https://github.com/coralproject/talk/issues/new"
+          target="_blank"
+        >
+          Report Bug
+        </Button>
+        <Divider />
+        <Button blankAdornment>Sign Out</Button>
+      </>
+    ),
+    className: "custom",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Dropdown {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Dropdown/Dropdown.tsx b/src/core/client/ui/components/v2/Dropdown/Dropdown.tsx
new file mode 100644
index 000000000..c3da8b50b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/Dropdown.tsx
@@ -0,0 +1,27 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Dropdown.css";
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  classes: typeof styles;
+}
+
+const Dropdown: FunctionComponent<Props> = ({
+  className,
+  children,
+  classes,
+  ...rest
+}) => {
+  return (
+    <div className={cn(classes.root, className)} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export default withStyles(styles)(Dropdown);
diff --git a/src/core/client/ui/components/v2/Dropdown/__snapshots__/Button.spec.tsx.snap b/src/core/client/ui/components/v2/Dropdown/__snapshots__/Button.spec.tsx.snap
new file mode 100644
index 000000000..6c34fec47
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/__snapshots__/Button.spec.tsx.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders anchor button 1`] = `
+<Button
+  className="custom"
+  classes={
+    Object {
+      "anchor": "Button-anchor",
+      "blankAdornment": "Button-blankAdornment",
+      "iconAfter": "Button-iconAfter",
+      "iconBefore": "Button-iconBefore",
+      "iconOpenInNew": "Button-iconOpenInNew",
+      "mouseHover": "Button-mouseHover",
+      "root": "Button-root",
+    }
+  }
+  href="/moderate"
+  onClick={[Function]}
+  target="_blank"
+>
+  link
+</Button>
+`;
+
+exports[`renders button 1`] = `
+<Button
+  blankAdornment={true}
+  className="custom"
+  classes={
+    Object {
+      "anchor": "Button-anchor",
+      "blankAdornment": "Button-blankAdornment",
+      "iconAfter": "Button-iconAfter",
+      "iconBefore": "Button-iconBefore",
+      "iconOpenInNew": "Button-iconOpenInNew",
+      "mouseHover": "Button-mouseHover",
+      "root": "Button-root",
+    }
+  }
+  onClick={[Function]}
+>
+  link
+</Button>
+`;
diff --git a/src/core/client/ui/components/v2/Dropdown/__snapshots__/Divider.spec.tsx.snap b/src/core/client/ui/components/v2/Dropdown/__snapshots__/Divider.spec.tsx.snap
new file mode 100644
index 000000000..722ea5f94
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/__snapshots__/Divider.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Divider
+  classes={
+    Object {
+      "root": "Divider-root",
+    }
+  }
+/>
+`;
diff --git a/src/core/client/ui/components/v2/Dropdown/__snapshots__/Dropdown.spec.tsx.snap b/src/core/client/ui/components/v2/Dropdown/__snapshots__/Dropdown.spec.tsx.snap
new file mode 100644
index 000000000..9c171d0f0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/__snapshots__/Dropdown.spec.tsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Dropdown
+  className="custom"
+  classes={
+    Object {
+      "root": "Dropdown-root",
+    }
+  }
+>
+  <React.Fragment>
+    <withPropsOnChange(Button)
+      blankAdornment={true}
+    >
+      Shortcuts
+    </withPropsOnChange(Button)>
+    <withPropsOnChange(Button)
+      href="https://github.com/coralproject/talk/issues/new"
+      target="_blank"
+    >
+      Report Bug
+    </withPropsOnChange(Button)>
+    <withPropsOnChange(Divider) />
+    <withPropsOnChange(Button)
+      blankAdornment={true}
+    >
+      Sign Out
+    </withPropsOnChange(Button)>
+  </React.Fragment>
+</Dropdown>
+`;
diff --git a/src/core/client/ui/components/v2/Dropdown/index.ts b/src/core/client/ui/components/v2/Dropdown/index.ts
new file mode 100644
index 000000000..ff2882546
--- /dev/null
+++ b/src/core/client/ui/components/v2/Dropdown/index.ts
@@ -0,0 +1,3 @@
+export { default as Dropdown } from "./Dropdown";
+export { default as Button } from "./Button";
+export { default as Divider } from "./Divider";
diff --git a/src/core/client/ui/components/v2/DurationField/DurationField.css b/src/core/client/ui/components/v2/DurationField/DurationField.css
new file mode 100644
index 000000000..d88b02a39
--- /dev/null
+++ b/src/core/client/ui/components/v2/DurationField/DurationField.css
@@ -0,0 +1,15 @@
+.value {
+  width: calc(6 * var(--mini-unit));
+}
+
+.select {
+  height: 100%;
+  min-width: calc(17 * var(--mini-unit));
+}
+
+.unit {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: 36px;
+}
diff --git a/src/core/client/ui/components/v2/DurationField/DurationField.spec.tsx b/src/core/client/ui/components/v2/DurationField/DurationField.spec.tsx
new file mode 100644
index 000000000..7cea24a92
--- /dev/null
+++ b/src/core/client/ui/components/v2/DurationField/DurationField.spec.tsx
@@ -0,0 +1,71 @@
+import { noop } from "lodash";
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import DurationField, { DURATION_UNIT } from "./DurationField";
+
+it("renders correctly with default units", () => {
+  const props: PropTypesOf<typeof DurationField> = {
+    name: "duration",
+    value: "",
+    disabled: false,
+    onChange: noop,
+  };
+  const renderer = createRenderer();
+  renderer.render(<DurationField {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("renders correctly with specified units", () => {
+  const props: PropTypesOf<typeof DurationField> = {
+    name: "duration",
+    value: "",
+    disabled: false,
+    onChange: noop,
+    units: [DURATION_UNIT.SECONDS, DURATION_UNIT.HOURS],
+  };
+  const renderer = createRenderer();
+  renderer.render(<DurationField {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("use best matching unit", () => {
+  const props: PropTypesOf<typeof DurationField> = {
+    name: "duration",
+    value: "3600",
+    disabled: false,
+    onChange: noop,
+    units: [DURATION_UNIT.SECONDS, DURATION_UNIT.MINUTES, DURATION_UNIT.HOURS],
+  };
+  const renderer = createRenderer();
+  renderer.render(<DurationField {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("use initial unit if 0", () => {
+  const props: PropTypesOf<typeof DurationField> = {
+    name: "duration",
+    value: "0",
+    disabled: false,
+    onChange: noop,
+    units: [DURATION_UNIT.SECONDS, DURATION_UNIT.MINUTES, DURATION_UNIT.HOURS],
+  };
+  const renderer = createRenderer();
+  renderer.render(<DurationField {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
+
+it("accepts invalid input", () => {
+  const props: PropTypesOf<typeof DurationField> = {
+    name: "duration",
+    value: "this is so invalid",
+    disabled: false,
+    onChange: noop,
+    units: [DURATION_UNIT.SECONDS, DURATION_UNIT.MINUTES, DURATION_UNIT.HOURS],
+  };
+  const renderer = createRenderer();
+  renderer.render(<DurationField {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/DurationField/DurationField.tsx b/src/core/client/ui/components/v2/DurationField/DurationField.tsx
new file mode 100644
index 000000000..b6d4419eb
--- /dev/null
+++ b/src/core/client/ui/components/v2/DurationField/DurationField.tsx
@@ -0,0 +1,176 @@
+import { Localized } from "fluent-react/compat";
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+
+import { UNIT } from "coral-common/helpers/i18n";
+import { Flex } from "coral-ui/components";
+
+import { Option, SelectField } from "../SelectField";
+import TextField, { TextFieldProps } from "../TextField";
+
+import styles from "./DurationField.css";
+
+/**
+ * DURATION_UNIT are units that can be used in the
+ * DurationField components.
+ */
+export const DURATION_UNIT = UNIT;
+
+const DURATION_UNIT_MAP = {
+  [DURATION_UNIT.SECONDS]: "second",
+  [DURATION_UNIT.MINUTES]: "minute",
+  [DURATION_UNIT.HOURS]: "hour",
+  [DURATION_UNIT.DAYS]: "day",
+  [DURATION_UNIT.WEEKS]: "week",
+};
+
+interface Props extends Pick<TextFieldProps, "color" | "name" | "disabled"> {
+  value: string;
+  onChange: (v: string) => void;
+  /** Specifiy units to include */
+  units?: ReadonlyArray<UNIT>;
+}
+
+function convertToSeconds(value: string, unit?: UNIT) {
+  const parsed = parseInt(value, 10);
+  return (isNaN(parsed) || !unit ? value : parsed * unit).toString();
+}
+
+function convertFromSeconds(
+  value: string,
+  units: ReadonlyArray<UNIT>,
+  unit?: UNIT
+) {
+  const parsed = parseInt(value, 10);
+
+  // If value was a valid number..
+  if (!isNaN(parsed)) {
+    // If unit is not set, we'll find the best matching unit.
+    if (!unit) {
+      // Start from the first unit,
+      // keep first unit if value is set to 0,
+      // otherwise use better matching unit if the value is fully dividable by the unit.
+      unit = units.reduce((x, cur) =>
+        parsed % cur === 0 && parsed !== 0 ? cur : x
+      );
+    }
+    // Compute new value relative to the selected unit.
+    value = (parsed / unit).toString();
+  }
+
+  return {
+    unit,
+    value,
+  };
+}
+
+/**
+ * Duration Field renders a TextField that accepts a number and a SelectField with a unit.
+ * If the entered value is a valid number, it'll propagate the computed value in seconds via
+ * onChange otherwise it'll just propogate whatever was entered as the value TextField.
+ */
+const DurationField: FunctionComponent<Props> = ({
+  value,
+  units = [UNIT.HOURS, UNIT.DAYS, UNIT.WEEKS],
+  onChange,
+  disabled,
+  name,
+  color,
+}) => {
+  const [selectedUnit, setSelectedUnit] = useState(
+    convertFromSeconds(value, units).unit
+  );
+
+  // If value changes, and selectedUnit has not been set, then set the value.
+  useEffect(() => {
+    if (!selectedUnit) {
+      setSelectedUnit(convertFromSeconds(value, units).unit);
+    }
+  }, [value]);
+
+  const elementCallbacks = useMemo(() => units.map(k => DURATION_UNIT_MAP[k]), [
+    units,
+  ]);
+
+  const { value: computedValue } = useMemo(
+    () => convertFromSeconds(value, units, selectedUnit),
+    [value, selectedUnit]
+  );
+
+  const handleValueChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange(convertToSeconds(e.target.value, selectedUnit));
+    },
+    [onChange, selectedUnit]
+  );
+
+  const handleUnitChange = useCallback(
+    (e: ChangeEvent<HTMLSelectElement>) => {
+      const unit = parseInt(e.target.value, 10);
+      setSelectedUnit(unit);
+      onChange(convertToSeconds(computedValue, unit));
+    },
+    [setSelectedUnit, onChange, computedValue]
+  );
+
+  return (
+    <Flex itemGutter>
+      <TextField
+        name={`${name}-value`}
+        className={styles.value}
+        onChange={handleValueChange}
+        value={computedValue}
+        disabled={disabled}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck={false}
+        textAlignCenter
+        aria-label="value"
+        color={color || "regular"}
+      />
+      {elementCallbacks.length === 1 ? (
+        <Localized
+          id="framework-durationField-unit"
+          $unit={elementCallbacks[0]}
+          $value={parseInt(computedValue, 10)}
+        >
+          <span className={styles.unit}>{elementCallbacks[0]}</span>
+        </Localized>
+      ) : (
+        <SelectField
+          name={`${name}-unit`}
+          onChange={handleUnitChange}
+          disabled={disabled}
+          aria-label="unit"
+          classes={{
+            select: styles.select,
+          }}
+          value={(selectedUnit || units[0]).toString()}
+        >
+          {elementCallbacks.map((unit, i) => {
+            const val = units[i];
+            return (
+              <Localized
+                id="framework-durationField-unit"
+                $unit={unit}
+                $value={parseInt(computedValue, 10)}
+                key={i}
+              >
+                <Option value={val.toString()}>{unit}</Option>
+              </Localized>
+            );
+          })}
+        </SelectField>
+      )}
+    </Flex>
+  );
+};
+
+export default DurationField;
diff --git a/src/core/client/ui/components/v2/DurationField/__snapshots__/DurationField.spec.tsx.snap b/src/core/client/ui/components/v2/DurationField/__snapshots__/DurationField.spec.tsx.snap
new file mode 100644
index 000000000..e64c3a6c8
--- /dev/null
+++ b/src/core/client/ui/components/v2/DurationField/__snapshots__/DurationField.spec.tsx.snap
@@ -0,0 +1,325 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`accepts invalid input 1`] = `
+<ForwardRef(forwardRef)
+  itemGutter={true}
+>
+  <withPropsOnChange(TextField)
+    aria-label="value"
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    className="DurationField-value"
+    color="regular"
+    disabled={false}
+    name="duration-value"
+    onChange={[Function]}
+    spellCheck={false}
+    textAlignCenter={true}
+    value="this is so invalid"
+  />
+  <withPropsOnChange(WithKeyboardFocus)
+    aria-label="unit"
+    classes={
+      Object {
+        "select": "DurationField-select",
+      }
+    }
+    disabled={false}
+    name="duration-unit"
+    onChange={[Function]}
+    value="1"
+  >
+    <Localized
+      $unit="second"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="1"
+      >
+        second
+      </Option>
+    </Localized>
+    <Localized
+      $unit="minute"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="60"
+      >
+        minute
+      </Option>
+    </Localized>
+    <Localized
+      $unit="hour"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="3600"
+      >
+        hour
+      </Option>
+    </Localized>
+  </withPropsOnChange(WithKeyboardFocus)>
+</ForwardRef(forwardRef)>
+`;
+
+exports[`renders correctly with default units 1`] = `
+<ForwardRef(forwardRef)
+  itemGutter={true}
+>
+  <withPropsOnChange(TextField)
+    aria-label="value"
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    className="DurationField-value"
+    color="regular"
+    disabled={false}
+    name="duration-value"
+    onChange={[Function]}
+    spellCheck={false}
+    textAlignCenter={true}
+    value=""
+  />
+  <withPropsOnChange(WithKeyboardFocus)
+    aria-label="unit"
+    classes={
+      Object {
+        "select": "DurationField-select",
+      }
+    }
+    disabled={false}
+    name="duration-unit"
+    onChange={[Function]}
+    value="3600"
+  >
+    <Localized
+      $unit="hour"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="3600"
+      >
+        hour
+      </Option>
+    </Localized>
+    <Localized
+      $unit="day"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="86400"
+      >
+        day
+      </Option>
+    </Localized>
+    <Localized
+      $unit="week"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="604800"
+      >
+        week
+      </Option>
+    </Localized>
+  </withPropsOnChange(WithKeyboardFocus)>
+</ForwardRef(forwardRef)>
+`;
+
+exports[`renders correctly with specified units 1`] = `
+<ForwardRef(forwardRef)
+  itemGutter={true}
+>
+  <withPropsOnChange(TextField)
+    aria-label="value"
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    className="DurationField-value"
+    color="regular"
+    disabled={false}
+    name="duration-value"
+    onChange={[Function]}
+    spellCheck={false}
+    textAlignCenter={true}
+    value=""
+  />
+  <withPropsOnChange(WithKeyboardFocus)
+    aria-label="unit"
+    classes={
+      Object {
+        "select": "DurationField-select",
+      }
+    }
+    disabled={false}
+    name="duration-unit"
+    onChange={[Function]}
+    value="1"
+  >
+    <Localized
+      $unit="second"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="1"
+      >
+        second
+      </Option>
+    </Localized>
+    <Localized
+      $unit="hour"
+      $value={NaN}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="3600"
+      >
+        hour
+      </Option>
+    </Localized>
+  </withPropsOnChange(WithKeyboardFocus)>
+</ForwardRef(forwardRef)>
+`;
+
+exports[`use best matching unit 1`] = `
+<ForwardRef(forwardRef)
+  itemGutter={true}
+>
+  <withPropsOnChange(TextField)
+    aria-label="value"
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    className="DurationField-value"
+    color="regular"
+    disabled={false}
+    name="duration-value"
+    onChange={[Function]}
+    spellCheck={false}
+    textAlignCenter={true}
+    value="1"
+  />
+  <withPropsOnChange(WithKeyboardFocus)
+    aria-label="unit"
+    classes={
+      Object {
+        "select": "DurationField-select",
+      }
+    }
+    disabled={false}
+    name="duration-unit"
+    onChange={[Function]}
+    value="3600"
+  >
+    <Localized
+      $unit="second"
+      $value={1}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="1"
+      >
+        second
+      </Option>
+    </Localized>
+    <Localized
+      $unit="minute"
+      $value={1}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="60"
+      >
+        minute
+      </Option>
+    </Localized>
+    <Localized
+      $unit="hour"
+      $value={1}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="3600"
+      >
+        hour
+      </Option>
+    </Localized>
+  </withPropsOnChange(WithKeyboardFocus)>
+</ForwardRef(forwardRef)>
+`;
+
+exports[`use initial unit if 0 1`] = `
+<ForwardRef(forwardRef)
+  itemGutter={true}
+>
+  <withPropsOnChange(TextField)
+    aria-label="value"
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    className="DurationField-value"
+    color="regular"
+    disabled={false}
+    name="duration-value"
+    onChange={[Function]}
+    spellCheck={false}
+    textAlignCenter={true}
+    value="0"
+  />
+  <withPropsOnChange(WithKeyboardFocus)
+    aria-label="unit"
+    classes={
+      Object {
+        "select": "DurationField-select",
+      }
+    }
+    disabled={false}
+    name="duration-unit"
+    onChange={[Function]}
+    value="1"
+  >
+    <Localized
+      $unit="second"
+      $value={0}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="1"
+      >
+        second
+      </Option>
+    </Localized>
+    <Localized
+      $unit="minute"
+      $value={0}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="60"
+      >
+        minute
+      </Option>
+    </Localized>
+    <Localized
+      $unit="hour"
+      $value={0}
+      id="framework-durationField-unit"
+    >
+      <Option
+        value="3600"
+      >
+        hour
+      </Option>
+    </Localized>
+  </withPropsOnChange(WithKeyboardFocus)>
+</ForwardRef(forwardRef)>
+`;
diff --git a/src/core/client/ui/components/v2/DurationField/index.ts b/src/core/client/ui/components/v2/DurationField/index.ts
new file mode 100644
index 000000000..a259133cb
--- /dev/null
+++ b/src/core/client/ui/components/v2/DurationField/index.ts
@@ -0,0 +1 @@
+export { default, DURATION_UNIT } from "./DurationField";
diff --git a/src/core/client/ui/components/v2/FieldSet/FieldSet.css b/src/core/client/ui/components/v2/FieldSet/FieldSet.css
new file mode 100644
index 000000000..0ca1b7a65
--- /dev/null
+++ b/src/core/client/ui/components/v2/FieldSet/FieldSet.css
@@ -0,0 +1,5 @@
+.root {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/core/client/ui/components/v2/FieldSet/FieldSet.mdx b/src/core/client/ui/components/v2/FieldSet/FieldSet.mdx
new file mode 100644
index 000000000..52fdd24fc
--- /dev/null
+++ b/src/core/client/ui/components/v2/FieldSet/FieldSet.mdx
@@ -0,0 +1,10 @@
+---
+name: FieldSet
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+# FieldSet
+
+Simple `fieldset` with removed styling for accessibility purposes.
diff --git a/src/core/client/ui/components/v2/FieldSet/FieldSet.spec.tsx b/src/core/client/ui/components/v2/FieldSet/FieldSet.spec.tsx
new file mode 100644
index 000000000..559840299
--- /dev/null
+++ b/src/core/client/ui/components/v2/FieldSet/FieldSet.spec.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import FieldSet from "./FieldSet";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof FieldSet> = {
+    children: "content",
+  };
+  const renderer = TestRenderer.create(<FieldSet {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/FieldSet/FieldSet.tsx b/src/core/client/ui/components/v2/FieldSet/FieldSet.tsx
new file mode 100644
index 000000000..3526f54aa
--- /dev/null
+++ b/src/core/client/ui/components/v2/FieldSet/FieldSet.tsx
@@ -0,0 +1,26 @@
+import cn from "classnames";
+import React, { AllHTMLAttributes, FunctionComponent, Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./FieldSet.css";
+
+interface InnerProps extends AllHTMLAttributes<HTMLElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLFieldSetElement>;
+}
+
+const FieldSet: FunctionComponent<InnerProps> = props => {
+  const { className, classes, forwardRef: ref, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <fieldset className={rootClassName} {...rest} ref={ref} />;
+};
+const enhanced = withForwardRef(withStyles(styles)(FieldSet));
+export type FieldSetProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/FieldSet/__snapshots__/FieldSet.spec.tsx.snap b/src/core/client/ui/components/v2/FieldSet/__snapshots__/FieldSet.spec.tsx.snap
new file mode 100644
index 000000000..e8dda0396
--- /dev/null
+++ b/src/core/client/ui/components/v2/FieldSet/__snapshots__/FieldSet.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<fieldset
+  className="FieldSet-root"
+>
+  content
+</fieldset>
+`;
diff --git a/src/core/client/ui/components/v2/FieldSet/index.ts b/src/core/client/ui/components/v2/FieldSet/index.ts
new file mode 100644
index 000000000..e9ef62e50
--- /dev/null
+++ b/src/core/client/ui/components/v2/FieldSet/index.ts
@@ -0,0 +1 @@
+export { default } from "./FieldSet";
diff --git a/src/core/client/ui/components/v2/Flex/Flex.css b/src/core/client/ui/components/v2/Flex/Flex.css
new file mode 100644
index 000000000..bebac3e69
--- /dev/null
+++ b/src/core/client/ui/components/v2/Flex/Flex.css
@@ -0,0 +1,574 @@
+.root {
+}
+
+.flex {
+  display: flex;
+}
+
+.spacing-1 {
+  & > * {
+    margin: 0 var(--v2-spacing-1) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-1) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-1) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-1) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-2 {
+  & > * {
+    margin: 0 var(--v2-spacing-2) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-2) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-2) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-2) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-3 {
+  & > * {
+    margin: 0 var(--v2-spacing-3) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-3) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-3) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-3) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-4 {
+  & > * {
+    margin: 0 var(--v2-spacing-4) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-4) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-4) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-4) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-5 {
+  & > * {
+    margin: 0 var(--v2-spacing-5) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-5) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-5) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-5) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-6 {
+  & > * {
+    margin: 0 var(--v2-spacing-6) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-6) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-6) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-6) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-7 {
+  & > * {
+    margin: 0 var(--v2-spacing-7) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-7) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-7) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-7) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-8 {
+  & > * {
+    margin: 0 var(--v2-spacing-8) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-8) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-8) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-8) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.spacing-9 {
+  & > * {
+    margin: 0 var(--v2-spacing-9) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--v2-spacing-9) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--v2-spacing-9) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--v2-spacing-9) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.halfItemGutter {
+  & > * {
+    margin: 0 calc(0.5 * var(--mini-unit)) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(0.5 * var(--mini-unit)) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: calc(0.5 * var(--mini-unit)) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.doubleItemGutter {
+  & > * {
+    margin: 0 calc(2 * var(--mini-unit)) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(2 * var(--mini-unit)) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(2 * var(--mini-unit)) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: calc(2 * var(--mini-unit)) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.itemGutter {
+  & > * {
+    margin: 0 var(--mini-unit) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 var(--mini-unit) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 var(--mini-unit) 0 !important;
+    }
+  }
+  &.directionColumnReverse {
+    & > * {
+      margin: var(--mini-unit) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.wrap {
+  flex-wrap: wrap;
+}
+
+.wrapReverse {
+  flex-wrap: wrap-reverse;
+}
+
+.wrap,
+.wrapReverse {
+  &:not(.directionColumn).itemGutter {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--mini-unit)) !important;
+    }
+    & > * {
+      margin-top: var(--mini-unit) !important;
+    }
+  }
+  &.directionColumn.itemGutter {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--mini-unit)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--mini-unit) !important;
+    }
+  }
+
+  &:not(.directionColumn).halfItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-0.5 * var(--mini-unit)) !important;
+    }
+    & > * {
+      margin-top: calc(0.5 * var(--mini-unit)) !important;
+    }
+  }
+  &.directionColumn.halfItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-0.5 * var(--mini-unit)) !important;
+    }
+    &.halfItemGutter > * {
+      margin-left: calc(0.5 * var(--mini-unit)) !important;
+    }
+  }
+
+  &:not(.directionColumn).doubleItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-2 * var(--mini-unit)) !important;
+    }
+    & > * {
+      margin-top: calc(2 * var(--mini-unit)) !important;
+    }
+  }
+  &.directionColumn.doubleItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-2 * var(--mini-unit)) !important;
+    }
+    &.doubleItemGutter > * {
+      margin-left: calc(2 * var(--mini-unit)) !important;
+    }
+  }
+
+  &:not(.directionColumn).tripleItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-3 * var(--mini-unit)) !important;
+    }
+    & > * {
+      margin-top: calc(3 * var(--mini-unit)) !important;
+    }
+  }
+  &.directionColumn.tripleItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-3 * var(--mini-unit)) !important;
+    }
+    &.tripleItemGutter > * {
+      margin-left: calc(3 * var(--mini-unit)) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-1 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-1)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-1) !important;
+    }
+  }
+  &.directionColumn.spacing-1 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-1)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-1) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-2 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-2)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-2) !important;
+    }
+  }
+  &.directionColumn.spacing-2 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-2)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-2) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-3 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-3)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-3) !important;
+    }
+  }
+  &.directionColumn.spacing-3 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-3)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-3) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-4 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-4)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-4) !important;
+    }
+  }
+  &.directionColumn.spacing-4 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-4)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-4) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-5 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-5)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-5) !important;
+    }
+  }
+  &.directionColumn.spacing-5 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-5)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-5) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-6 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-6)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-6) !important;
+    }
+  }
+  &.directionColumn.spacing-6 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-6)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-6) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-7 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-7)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-7) !important;
+    }
+  }
+  &.directionColumn.spacing-7 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-7)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-7) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-8 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-8)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-8) !important;
+    }
+  }
+  &.directionColumn.spacing-8 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-8)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-8) !important;
+    }
+  }
+
+  &:not(.directionColumn).spacing-9 {
+    &:not(:empty) {
+      margin-top: calc(-1 * var(--v2-spacing-9)) !important;
+    }
+    & > * {
+      margin-top: var(--v2-spacing-9) !important;
+    }
+  }
+  &.directionColumn.spacing-9 {
+    &:not(:empty) {
+      margin-left: calc(-1 * var(--v2-spacing-9)) !important;
+    }
+    &.itemGutter > * {
+      margin-left: var(--v2-spacing-9) !important;
+    }
+  }
+}
+
+.justifyFlexStart {
+  justify-content: flex-start;
+}
+.justifyFlexEnd {
+  justify-content: flex-end;
+}
+.justifyCenter {
+  justify-content: center;
+}
+.justifySpaceBetween {
+  justify-content: space-between;
+}
+.justifySpaceAround {
+  justify-content: space-around;
+}
+.justifySpaceEvenly {
+  justify-content: space-evenly;
+}
+
+.alignFlexStart {
+  align-items: flex-start;
+}
+.alignFlexEnd {
+  align-items: flex-end;
+}
+.alignCenter {
+  align-items: center;
+}
+.alignBaseline {
+  align-items: baseline;
+}
+.alignStretch {
+  align-items: stretch;
+}
+
+.directionRow {
+  flex-direction: row;
+}
+.directionColumn {
+  flex-direction: column;
+}
+.directionRowReverse {
+  flex-direction: row-reverse;
+}
+.directionColumnReverse {
+  flex-direction: column-reverse;
+}
diff --git a/src/core/client/ui/components/v2/Flex/Flex.mdx b/src/core/client/ui/components/v2/Flex/Flex.mdx
new file mode 100644
index 000000000..baf6177f4
--- /dev/null
+++ b/src/core/client/ui/components/v2/Flex/Flex.mdx
@@ -0,0 +1,60 @@
+---
+name: Flex
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import Flex from "./Flex";
+import HorizontalGutter from "../HorizontalGutter";
+import Button from "../Button";
+
+# Flex
+
+`Flex` is a wrapper around `flexbox`.
+
+## Justify content
+
+<Playground>
+  <Flex justifyContent="center">I'm centered</Flex>
+</Playground>
+
+## Align items
+
+<Playground>
+  <Flex alignItems="center" spacing={2}>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled" size="small">
+      Push Me
+    </Button>
+    <Button variant="filled" size="large">
+      Push Me
+    </Button>
+  </Flex>
+</Playground>
+
+## Direction
+
+<Playground>
+  <Flex direction="column" spacing={2}>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+## Item Gutter
+
+<Playground>
+  <HorizontalGutter>
+    <Flex direction="row" spacing={2}>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+    </Flex>
+    <Flex direction="row" spacing={8}>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+      <Button variant="filled">Push Me</Button>
+    </Flex>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Flex/Flex.spec.tsx b/src/core/client/ui/components/v2/Flex/Flex.spec.tsx
new file mode 100644
index 000000000..e1e6299d1
--- /dev/null
+++ b/src/core/client/ui/components/v2/Flex/Flex.spec.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import Flex from "./Flex";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    justifyContent: "center",
+    alignItems: "center",
+    direction: "row",
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with wrap", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    wrap: true,
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with wrap reverse", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    wrap: "reverse",
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with item gutter", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    itemGutter: true,
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders with half item gutter", () => {
+  const props: PropTypesOf<typeof Flex> = {
+    itemGutter: "half",
+  };
+  const renderer = TestRenderer.create(
+    <Flex {...props}>
+      <div>Hello World</div>
+    </Flex>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Flex/Flex.tsx b/src/core/client/ui/components/v2/Flex/Flex.tsx
new file mode 100644
index 000000000..878e90fd9
--- /dev/null
+++ b/src/core/client/ui/components/v2/Flex/Flex.tsx
@@ -0,0 +1,119 @@
+import cn from "classnames";
+import React, { FunctionComponent, Ref } from "react";
+
+import { pascalCase } from "coral-common/utils";
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Spacing } from "coral-ui/theme/variables";
+import { PropTypesOf } from "coral-ui/types";
+
+/** Needs to be loaded after styles, because Box styles have priority */
+import Box from "../Box";
+
+import styles from "./Flex.css";
+
+interface Props extends PropTypesOf<typeof Box> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+  id?: string;
+  role?: string;
+  justifyContent?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-around"
+    | "space-between"
+    | "space-evenly";
+  alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+  /** @deprecated use `spacing` instead */
+  itemGutter?: boolean | "half" | "double" | "triple";
+  /** Adds a gutter between items. Uses predefined sizes from design tokens */
+  spacing?: Spacing;
+  className?: string;
+  wrap?: boolean | "reverse";
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+const Flex: FunctionComponent<Props> = props => {
+  const {
+    classes,
+    className,
+    justifyContent,
+    alignItems,
+    direction,
+    itemGutter,
+    wrap,
+    forwardRef,
+    children,
+    spacing,
+    ...rest
+  } = props;
+
+  const classObject: Record<string, boolean> = {
+    [classes.itemGutter]: itemGutter === true,
+    [classes.halfItemGutter]: itemGutter === "half",
+    [classes.doubleItemGutter]: itemGutter === "double",
+    [classes.tripleItemGutter]: itemGutter === "triple",
+    [classes.wrap]: wrap === true,
+    [classes.wrapReverse]: wrap === "reverse",
+  };
+
+  if (justifyContent) {
+    classObject[
+      (classes as any)[`justify${pascalCase(justifyContent)}`]
+    ] = true;
+  }
+
+  if (alignItems) {
+    classObject[(classes as any)[`align${pascalCase(alignItems)}`]] = true;
+  }
+
+  if (direction) {
+    classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
+  }
+
+  const rootClassNames: string = cn(classes.root, className);
+  const flexClassNames: string = cn(
+    classes.flex,
+    classObject,
+    (itemGutter || spacing) && "gutter",
+    spacing && (classes as any)[`spacing-${spacing}`]
+  );
+
+  // text nodes can't be modified with css, so replace them with spans.
+  // Readd spaces at the beginning or end of text nodes because
+  // flex removes it.
+  const content = React.Children.map(children, child => {
+    if (typeof child === "string") {
+      return <span>{child.replace(/^ +| +$/g, "\xa0")}</span>;
+    }
+    return child;
+  });
+
+  if (wrap && itemGutter) {
+    // The first div is required to support nested `Flex` components with itemGutters.
+    return (
+      <Box ref={forwardRef} className={rootClassNames} {...rest}>
+        <div className={flexClassNames}>{content}</div>
+      </Box>
+    );
+  }
+  return (
+    <Box
+      ref={forwardRef}
+      className={cn(rootClassNames, flexClassNames)}
+      {...rest}
+    >
+      {content}
+    </Box>
+  );
+};
+
+const enhanced = withForwardRef(withStyles(styles)(Flex));
+export default enhanced;
+export type FlexProps = PropTypesOf<typeof enhanced>;
diff --git a/src/core/client/ui/components/v2/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/v2/Flex/__snapshots__/Flex.spec.tsx.snap
new file mode 100644
index 000000000..5f915908a
--- /dev/null
+++ b/src/core/client/ui/components/v2/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with half item gutter 1`] = `
+<div
+  className="Box-root Flex-root Flex-flex Flex-halfItemGutter gutter"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with item gutter 1`] = `
+<div
+  className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with wrap 1`] = `
+<div
+  className="Box-root Flex-root Flex-flex Flex-wrap"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders with wrap reverse 1`] = `
+<div
+  className="Box-root Flex-root Flex-flex Flex-wrapReverse"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/Flex/index.ts b/src/core/client/ui/components/v2/Flex/index.ts
new file mode 100644
index 000000000..434836f6d
--- /dev/null
+++ b/src/core/client/ui/components/v2/Flex/index.ts
@@ -0,0 +1 @@
+export { default, FlexProps } from "./Flex";
diff --git a/src/core/client/ui/components/v2/FormField/FormField.css b/src/core/client/ui/components/v2/FormField/FormField.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormField/FormField.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/v2/FormField/FormField.mdx b/src/core/client/ui/components/v2/FormField/FormField.mdx
new file mode 100644
index 000000000..f6b369861
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormField/FormField.mdx
@@ -0,0 +1,65 @@
+---
+name: FormField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import { Field } from "react-final-form";
+import { Label, FormFieldHeader, TextField, FormFieldDescription, HelperText, FormField, TextFieldWithValidation, DurationField, ValidationMessage } from '../'
+
+# FormField
+
+`FormField` is to be used with Form Components: `FormFieldDescription`, `FormFieldHeader`, `TextField`, `HelperText`, etc.
+These components manage the gutters between inner elements to ensure consistent spacing.
+
+- `FormField` should wrap a form input and its label, along with any field descriptions or helper text
+- `FormFieldHeader` wraps a form label and its helper text. Not necessary if there's only a label
+- `FormFieldDescription` is a general description or explanation of the field or series of fields
+- `HelperText` is clarifying information or instructions, that follows a label
+- `TextFieldWithValidation` wraps a text field and its validation
+
+## Justify content
+<Playground>
+  <FormField>
+    <Label htmlFor="simple.field">A simple form field</Label>
+    <Field name="simple.field">
+      {({ input, meta }) => (
+        <TextFieldWithValidation
+          meta={meta}
+          {...input}
+        />
+      )}
+    </Field>
+  </FormField>
+  <FormField>
+    <FormFieldDescription>This is a description of this form field</FormFieldDescription>
+    <FormFieldHeader>
+      <Label htmlFor="simple.field">A form field with helper text</Label>
+      <HelperText>This is some helper text or instructions</HelperText>
+    </FormFieldHeader>
+    <Field name="simple.field">
+      {({ input, meta }) => (
+        <TextFieldWithValidation
+          meta={meta}
+          {...input}
+        />
+      )}
+    </Field>
+  </FormField>
+  <FormField>
+    <Label htmlFor="simple.field">A form field with a different input type</Label>
+    <Field name="simple.field">
+      {({ input, meta }) => (
+        <HorizontalGutter spacing={2}>
+          <DurationField
+            units={[DURATION_UNIT.WEEKS,]}
+            disabled={disabled}
+            color={colorFromMeta(meta)}
+            {...input}
+          />
+          <ValidationMessage meta={meta} fullWidth />
+        </HorizontalGutter>
+      )}
+    </Field>
+  </FormField>
+</Playground>
diff --git a/src/core/client/ui/components/v2/FormField/FormField.spec.tsx b/src/core/client/ui/components/v2/FormField/FormField.spec.tsx
new file mode 100644
index 000000000..52b95b7d6
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormField/FormField.spec.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import FormField from "../FormField";
+import HelperText from "../HelperText";
+import Label from "../Label";
+import TextField from "../TextField";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <FormField>Form Components should go here</FormField>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("works with multiple form components", () => {
+  const renderer = TestRenderer.create(
+    <FormField>
+      <Label>Username</Label>
+      <HelperText>
+        An identifier displayed on your comments. You may use “_” and “.”
+      </HelperText>
+      <TextField />
+    </FormField>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/FormField/FormField.tsx b/src/core/client/ui/components/v2/FormField/FormField.tsx
new file mode 100644
index 000000000..d44afff6a
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormField/FormField.tsx
@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React, { FunctionComponent, ReactNode } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+import { Omit, PropTypesOf } from "coral-ui/types";
+
+import HorizontalGutter from "coral-ui/components/HorizontalGutter";
+
+import styles from "./FormField.css";
+
+interface Props extends Omit<PropTypesOf<typeof HorizontalGutter>, "ref"> {
+  children: ReactNode;
+  classes: typeof styles;
+  className?: string;
+}
+
+const FormField: FunctionComponent<Props> = props => {
+  const { classes, className, children, ...rest } = props;
+
+  return (
+    <HorizontalGutter
+      className={cn(classes.root, className)}
+      spacing={2}
+      {...rest}
+    >
+      {children}
+    </HorizontalGutter>
+  );
+};
+
+const enhanced = withStyles(styles)(FormField);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/FormField/__snapshots__/FormField.spec.tsx.snap b/src/core/client/ui/components/v2/FormField/__snapshots__/FormField.spec.tsx.snap
new file mode 100644
index 000000000..6cadb86a0
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormField/__snapshots__/FormField.spec.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+>
+  Form Components should go here
+</div>
+`;
+
+exports[`works with multiple form components 1`] = `
+<div
+  className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-spacing-2"
+>
+  <label
+    className="Label-root"
+  >
+    Username
+  </label>
+  <p
+    className="HelperText-root"
+  >
+    An identifier displayed on your comments. You may use “_” and “.”
+  </p>
+  <div
+    className="TextField-root"
+  >
+    <input
+      className="TextField-input TextField-colorRegular"
+      placeholder=""
+      type="text"
+    />
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/FormField/index.ts b/src/core/client/ui/components/v2/FormField/index.ts
new file mode 100644
index 000000000..e2d6f74d4
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormField/index.ts
@@ -0,0 +1 @@
+export { default } from "./FormField";
diff --git a/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css b/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css
new file mode 100644
index 000000000..8c2cff918
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.css
@@ -0,0 +1,7 @@
+.root {
+  color: var(--v2-palette-configure-description);
+  line-height: var(--v2-line-height-body-short);
+  font-size: var(--v2-font-size-3);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+}
diff --git a/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.tsx b/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.tsx
new file mode 100644
index 000000000..a986748df
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormFieldDescription/FormFieldDescription.tsx
@@ -0,0 +1,17 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import styles from "./FormFieldDescription.css";
+
+interface Props {
+  className?: string;
+}
+
+const FormFieldDescription: FunctionComponent<Props> = ({
+  children,
+  className,
+}) => {
+  return <p className={cn(className, styles.root)}>{children}</p>;
+};
+
+export default FormFieldDescription;
diff --git a/src/core/client/ui/components/v2/FormFieldDescription/index.ts b/src/core/client/ui/components/v2/FormFieldDescription/index.ts
new file mode 100644
index 000000000..71a77701f
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormFieldDescription/index.ts
@@ -0,0 +1 @@
+export { default } from "./FormFieldDescription";
diff --git a/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.css b/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx b/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx
new file mode 100644
index 000000000..e08b15daf
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormFieldHeader/FormFieldHeader.tsx
@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React, { FunctionComponent, ReactNode } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+import { Omit, PropTypesOf } from "coral-ui/types";
+
+import HorizontalGutter from "coral-ui/components/HorizontalGutter";
+
+import styles from "./FormFieldHeader.css";
+
+interface Props extends Omit<PropTypesOf<typeof HorizontalGutter>, "ref"> {
+  children: ReactNode;
+  classes: typeof styles;
+  className?: string;
+}
+
+const FormFieldHeader: FunctionComponent<Props> = props => {
+  const { classes, className, children, ...rest } = props;
+
+  return (
+    <HorizontalGutter
+      className={cn(classes.root, className)}
+      spacing={1}
+      {...rest}
+    >
+      {children}
+    </HorizontalGutter>
+  );
+};
+
+const enhanced = withStyles(styles)(FormFieldHeader);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/FormFieldHeader/index.ts b/src/core/client/ui/components/v2/FormFieldHeader/index.ts
new file mode 100644
index 000000000..a7f537ae7
--- /dev/null
+++ b/src/core/client/ui/components/v2/FormFieldHeader/index.ts
@@ -0,0 +1 @@
+export { default } from "./FormFieldHeader";
diff --git a/src/core/client/ui/components/v2/HelperText/HelperText.css b/src/core/client/ui/components/v2/HelperText/HelperText.css
new file mode 100644
index 000000000..0dd1ce851
--- /dev/null
+++ b/src/core/client/ui/components/v2/HelperText/HelperText.css
@@ -0,0 +1,7 @@
+.root {
+  color: var(--v2-palette-input-helper);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-body-short);
+}
diff --git a/src/core/client/ui/components/v2/HelperText/HelperText.tsx b/src/core/client/ui/components/v2/HelperText/HelperText.tsx
new file mode 100644
index 000000000..790e87a75
--- /dev/null
+++ b/src/core/client/ui/components/v2/HelperText/HelperText.tsx
@@ -0,0 +1,14 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import styles from "./HelperText.css";
+
+interface Props {
+  className?: string;
+}
+
+const HelperText: FunctionComponent<Props> = ({ children, className }) => {
+  return <p className={cn(className, styles.root)}>{children}</p>;
+};
+
+export default HelperText;
diff --git a/src/core/client/ui/components/v2/HelperText/index.ts b/src/core/client/ui/components/v2/HelperText/index.ts
new file mode 100644
index 000000000..97707a020
--- /dev/null
+++ b/src/core/client/ui/components/v2/HelperText/index.ts
@@ -0,0 +1 @@
+export { default } from "./HelperText";
diff --git a/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.css b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.css
new file mode 100644
index 000000000..f5d44939f
--- /dev/null
+++ b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.css
@@ -0,0 +1,85 @@
+.root {
+  display: block;
+  border: 0;
+  padding: 0;
+
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
+.half {
+  & > * {
+    margin: 0 0 calc(0.5 * var(--mini-unit)) 0 !important;
+  }
+}
+.full {
+  & > * {
+    margin: 0 0 var(--mini-unit) 0 !important;
+  }
+}
+.oneAndAHalf {
+  & > * {
+    margin: 0 0 calc(1.5 * var(--mini-unit)) 0 !important;
+  }
+}
+.double {
+  & > * {
+    margin: 0 0 calc(2 * var(--mini-unit)) 0 !important;
+  }
+}
+.triple {
+  & > * {
+    margin: 0 0 calc(3 * var(--mini-unit)) 0 !important;
+  }
+}
+.spacing-1 {
+  & > * {
+    margin: 0 0 var(--spacing-1) 0 !important;
+  }
+}
+.spacing-2 {
+  & > * {
+    margin: 0 0 var(--spacing-2) 0 !important;
+  }
+}
+.spacing-3 {
+  & > * {
+    margin: 0 0 var(--spacing-3) 0 !important;
+  }
+}
+.spacing-1 {
+  & > * {
+    margin: 0 0 var(--spacing-1) 0 !important;
+  }
+}
+.spacing-4 {
+  & > * {
+    margin: 0 0 var(--spacing-4) 0 !important;
+  }
+}
+.spacing-5 {
+  & > * {
+    margin: 0 0 var(--spacing-5) 0 !important;
+  }
+}
+.spacing-6 {
+  & > * {
+    margin: 0 0 var(--spacing-6) 0 !important;
+  }
+}
+.spacing-7 {
+  & > * {
+    margin: 0 0 var(--spacing-7) 0 !important;
+  }
+}
+.spacing-8 {
+  & > * {
+    margin: 0 0 var(--spacing-8) 0 !important;
+  }
+}
+.spacing-9 {
+  & > * {
+    margin: 0 0 var(--spacing-9) 0 !important;
+  }
+}
diff --git a/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.mdx b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.mdx
new file mode 100644
index 000000000..40a7908ad
--- /dev/null
+++ b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.mdx
@@ -0,0 +1,36 @@
+---
+name: HorizontalGutter
+menu: UI Kit
+---
+
+import { Playground } from "docz";
+import HorizontalGutter from "./HorizontalGutter";
+import Button from "../Button";
+
+# Spinner
+
+## Usage
+
+<Playground>
+  <HorizontalGutter spacing={2}>
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+  </HorizontalGutter>
+</Playground>
+
+<Playground>
+  <HorizontalGutter spacing={4}>
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+  </HorizontalGutter>
+</Playground>
+
+<Playground>
+  <HorizontalGutter spacing={6}>
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+    <div style={{ backgroundColor: "grey", height: "30px" }} />
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.spec.tsx b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.spec.tsx
new file mode 100644
index 000000000..470baa72d
--- /dev/null
+++ b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.spec.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import HorizontalGutter from "./HorizontalGutter";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    className: "custom",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders double size", () => {
+  const props: PropTypesOf<typeof HorizontalGutter> = {
+    size: "double",
+  };
+  const renderer = TestRenderer.create(<HorizontalGutter {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx
new file mode 100644
index 000000000..7efb764a8
--- /dev/null
+++ b/src/core/client/ui/components/v2/HorizontalGutter/HorizontalGutter.tsx
@@ -0,0 +1,72 @@
+import cn from "classnames";
+import React, { FunctionComponent, Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Spacing } from "coral-ui/theme/variables";
+import { PropTypesOf } from "coral-ui/types";
+
+/** Needs to be loaded after styles, because Box styles have priority */
+import Box from "../Box";
+
+import styles from "./HorizontalGutter.css";
+
+interface Props extends PropTypesOf<typeof Box> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  /** @deprecated use `spacing` instead */
+  size?: "half" | "full" | "double" | "triple" | "oneAndAHalf";
+
+  /** Choose gutter size, uses predefined sizes from design tokens */
+  spacing?: Spacing;
+
+  /** The name of the HorizontalGutter to render */
+  children?: React.ReactNode;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
+
+  /**
+   * The container used for the root node.
+   * Either a string to use a DOM element, a component, or an element.
+   * By default, it maps the variant to a good default headline component.
+   */
+  container?: React.ReactElement<any> | React.ComponentType<any> | string;
+}
+
+const HorizontalGutter: FunctionComponent<Props> = props => {
+  const {
+    classes,
+    className,
+    size,
+    forwardRef,
+    container,
+    spacing,
+    ...rest
+  } = props;
+  const rootClassName = cn(
+    classes.root,
+    className,
+    spacing ? (classes as any)[`spacing-${spacing}`] : classes[size!]
+  );
+
+  const innerProps = {
+    className: rootClassName,
+    ref: forwardRef,
+    container,
+    ...rest,
+  };
+  return <Box {...innerProps} />;
+};
+
+HorizontalGutter.defaultProps = {
+  size: "full",
+  container: "div",
+} as Partial<Props>;
+
+const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));
+export type HorizontalGutterProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap b/src/core/client/ui/components/v2/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
new file mode 100644
index 000000000..af7883930
--- /dev/null
+++ b/src/core/client/ui/components/v2/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Box-root HorizontalGutter-root custom HorizontalGutter-full"
+/>
+`;
+
+exports[`renders double size 1`] = `
+<div
+  className="Box-root HorizontalGutter-root HorizontalGutter-double"
+/>
+`;
diff --git a/src/core/client/ui/components/v2/HorizontalGutter/index.ts b/src/core/client/ui/components/v2/HorizontalGutter/index.ts
new file mode 100644
index 000000000..74ebbbd3c
--- /dev/null
+++ b/src/core/client/ui/components/v2/HorizontalGutter/index.ts
@@ -0,0 +1 @@
+export { default, HorizontalGutterProps } from "./HorizontalGutter";
diff --git a/src/core/client/ui/components/v2/Icon/Icon.css b/src/core/client/ui/components/v2/Icon/Icon.css
new file mode 100644
index 000000000..e5c21e976
--- /dev/null
+++ b/src/core/client/ui/components/v2/Icon/Icon.css
@@ -0,0 +1,58 @@
+.root {
+  font-family: "Material Icons";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  overflow: hidden;
+  vertical-align: middle;
+  display: inline-block;
+  letter-spacing: 0;
+  word-break: initial;
+
+  /* Enable Ligatures */
+  font-feature-settings: "liga";
+  font-variant-ligatures: "discretionary-ligatures";
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.xs {
+  font-size: 10px;
+  width: 10px;
+}
+
+.sm {
+  font-size: 14px;
+  width: 14px;
+}
+.md {
+  font-size: 18px;
+  width: 18px;
+}
+.lg {
+  font-size: 24px;
+  width: 24px;
+}
+.xl {
+  font-size: 36px;
+  width: 36px;
+}
+
+.colorPrimary {
+  color: var(--v2-colors-teal-700);
+}
+.colorError {
+  color: var(--v2-colors-red-500);
+}
+
+.colorSuccess {
+  color: var(--v2-colors-green-500);
+}
diff --git a/src/core/client/ui/components/v2/Icon/Icon.mdx b/src/core/client/ui/components/v2/Icon/Icon.mdx
new file mode 100644
index 000000000..83428c28b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Icon/Icon.mdx
@@ -0,0 +1,21 @@
+---
+name: Icon
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Icon from './Icon'
+
+# Icon
+
+Renders an icon.
+
+Checkout available icons https://material.io/tools/icons/
+
+## Basic usage
+<Playground>
+  <Icon size="sm">face</Icon>
+  <Icon size="md">face</Icon>
+  <Icon size="lg">face</Icon>
+  <Icon size="xl">face</Icon>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Icon/Icon.spec.tsx b/src/core/client/ui/components/v2/Icon/Icon.spec.tsx
new file mode 100644
index 000000000..b4175a5b2
--- /dev/null
+++ b/src/core/client/ui/components/v2/Icon/Icon.spec.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import Icon from "./Icon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Icon> = {
+    children: "face",
+  };
+  const renderer = TestRenderer.create(<Icon {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly with specified size", () => {
+  const props: PropTypesOf<typeof Icon> = {
+    size: "lg",
+    children: "bookmark",
+  };
+  const renderer = TestRenderer.create(<Icon {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Icon/Icon.tsx b/src/core/client/ui/components/v2/Icon/Icon.tsx
new file mode 100644
index 000000000..601624fb6
--- /dev/null
+++ b/src/core/client/ui/components/v2/Icon/Icon.tsx
@@ -0,0 +1,60 @@
+import cn from "classnames";
+import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
+
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./Icon.css";
+
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles;
+
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color?: "inherit" | "primary" | "error" | "success";
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+const Icon: FunctionComponent<Props> = props => {
+  const { classes, className, size, color, forwardRef, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    classes[size !== undefined ? size : "sm"],
+    {
+      [classes.colorPrimary]: color === "primary",
+      [classes.colorError]: color === "error",
+      [classes.colorSuccess]: color === "success",
+    },
+    className
+  );
+  return (
+    <i
+      className={rootClassName}
+      aria-hidden="true"
+      {...rest}
+      ref={forwardRef}
+    />
+  );
+};
+
+Icon.defaultProps = {
+  size: "sm",
+  color: "inherit",
+} as Partial<Props>;
+
+const enhanced = withForwardRef(withStyles(styles)(Icon));
+export type IconProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Icon/__snapshots__/Icon.spec.tsx.snap b/src/core/client/ui/components/v2/Icon/__snapshots__/Icon.spec.tsx.snap
new file mode 100644
index 000000000..a56052568
--- /dev/null
+++ b/src/core/client/ui/components/v2/Icon/__snapshots__/Icon.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<i
+  aria-hidden="true"
+  className="Icon-root Icon-sm"
+>
+  face
+</i>
+`;
+
+exports[`renders correctly with specified size 1`] = `
+<i
+  aria-hidden="true"
+  className="Icon-root Icon-lg"
+>
+  bookmark
+</i>
+`;
diff --git a/src/core/client/ui/components/v2/Icon/index.ts b/src/core/client/ui/components/v2/Icon/index.ts
new file mode 100644
index 000000000..d3ba5da55
--- /dev/null
+++ b/src/core/client/ui/components/v2/Icon/index.ts
@@ -0,0 +1 @@
+export { default, IconProps } from "./Icon";
diff --git a/src/core/client/ui/components/v2/Label/Label.css b/src/core/client/ui/components/v2/Label/Label.css
new file mode 100644
index 000000000..100976323
--- /dev/null
+++ b/src/core/client/ui/components/v2/Label/Label.css
@@ -0,0 +1,9 @@
+.root {
+  color: var(--v2-palette-input-label);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-reset);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-family: var(--v2-font-family-primary);
+  padding-left: 0;
+  display: block;
+}
diff --git a/src/core/client/ui/components/v2/Label/Label.tsx b/src/core/client/ui/components/v2/Label/Label.tsx
new file mode 100644
index 000000000..cccf50753
--- /dev/null
+++ b/src/core/client/ui/components/v2/Label/Label.tsx
@@ -0,0 +1,19 @@
+import React, { FunctionComponent, LabelHTMLAttributes } from "react";
+
+import styles from "./Label.css";
+
+interface Props extends LabelHTMLAttributes<any> {
+  className?: string;
+  component?: "legend" | "p";
+}
+
+const Label: FunctionComponent<Props> = ({ children, component, ...rest }) => {
+  const Component = component || "label";
+  return (
+    <Component {...rest} className={styles.root}>
+      {children}
+    </Component>
+  );
+};
+
+export default Label;
diff --git a/src/core/client/ui/components/v2/Label/index.ts b/src/core/client/ui/components/v2/Label/index.ts
new file mode 100644
index 000000000..8c8faebf8
--- /dev/null
+++ b/src/core/client/ui/components/v2/Label/index.ts
@@ -0,0 +1 @@
+export { default } from "./Label";
diff --git a/src/core/client/ui/components/v2/Marker/Count.css b/src/core/client/ui/components/v2/Marker/Count.css
new file mode 100644
index 000000000..86f07c13f
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/Count.css
@@ -0,0 +1,14 @@
+.root {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: 0.8125rem;
+  letter-spacing: calc(-0.35em / 13);
+
+  border-left: 1px solid currentColor;
+  margin-left: calc(0.5 * var(--mini-unit));
+  margin-right: calc(-0.25 * var(--mini-unit));
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: calc(0.5 * var(--mini-unit));
+  white-space: nowrap;
+}
diff --git a/src/core/client/ui/components/v2/Marker/Count.spec.tsx b/src/core/client/ui/components/v2/Marker/Count.spec.tsx
new file mode 100644
index 000000000..7b81152f5
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/Count.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import Count from "./Count";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Count> = {
+    className: "custom",
+    children: "30",
+  };
+  const renderer = TestRenderer.create(<Count {...props}>Hello</Count>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Marker/Count.tsx b/src/core/client/ui/components/v2/Marker/Count.tsx
new file mode 100644
index 000000000..96f13ae8c
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/Count.tsx
@@ -0,0 +1,29 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Count.css";
+
+interface Props {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  children: React.ReactNode;
+}
+
+const Count: FunctionComponent<Props> = props => {
+  const { className, children, classes, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <span className={rootClassName} {...rest}>
+      {children}
+    </span>
+  );
+};
+
+const enhanced = withStyles(styles)(Count);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Marker/Marker.css b/src/core/client/ui/components/v2/Marker/Marker.css
new file mode 100644
index 000000000..0f5e08967
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/Marker.css
@@ -0,0 +1,33 @@
+.root {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: 0.8125rem;
+  letter-spacing: calc(-0.35em / 13);
+
+  color: var(--v2-palette-marker-reported);
+  border: 1px solid currentColor;
+  border-radius: 20px;
+  padding: 1px var(--mini-unit);
+  white-space: nowrap;
+}
+
+.colorReported {
+  color: var(--v2-palette-marker-reported);
+}
+
+.colorPending {
+  color: var(--v2-palette-marker-pending);
+}
+
+.variantRegular {
+}
+
+.variantFilled {
+  &.colorReported {
+    background-color: var(--v2-palette-marker-reported);
+  }
+
+  &.colorPending {
+    background-color: var(--v2-palette-marker-pending);
+  }
+}
diff --git a/src/core/client/ui/components/v2/Marker/Marker.mdx b/src/core/client/ui/components/v2/Marker/Marker.mdx
new file mode 100644
index 000000000..7a5138a8f
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/Marker.mdx
@@ -0,0 +1,43 @@
+---
+name: Marker
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import Marker from "./Marker";
+import Count from "./Count";
+import HorizontalGutter from "../HorizontalGutter";
+import Flex from "../Flex";
+
+# Marker
+
+## Basic Use
+
+<Playground>
+  <HorizontalGutter>
+    <Flex itemGutter>
+      <Marker color="reported">Toxic</Marker>
+      <Marker color="reported">Karma</Marker>
+      <Marker color="reported">Spam</Marker>
+      <Marker color="reported">Banned Word</Marker>
+      <Marker color="reported">
+        With a count <Count>1</Count>
+      </Marker>
+    </Flex>
+    <Flex itemGutter>
+      <Marker color="pending">Premod</Marker>
+      <Marker color="pending">Link</Marker>
+    </Flex>
+    <Flex itemGutter>
+      <Marker color="reported" variant="filled">
+        Spam <Count>2</Count>
+      </Marker>
+      <Marker color="reported" variant="filled">
+        Suspect Word
+      </Marker>
+      <Marker color="reported" variant="filled">
+        Offensive <Count>1</Count>
+      </Marker>
+    </Flex>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Marker/Marker.spec.tsx b/src/core/client/ui/components/v2/Marker/Marker.spec.tsx
new file mode 100644
index 000000000..215c65a7a
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/Marker.spec.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import Marker from "./Marker";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Marker> = {
+    className: "custom",
+    color: "reported",
+    variant: "filled",
+    children: "Spam",
+  };
+  const renderer = TestRenderer.create(<Marker {...props}>Hello</Marker>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Marker/Marker.tsx b/src/core/client/ui/components/v2/Marker/Marker.tsx
new file mode 100644
index 000000000..3a6063d1c
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/Marker.tsx
@@ -0,0 +1,46 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Marker.css";
+
+interface Props {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  children: React.ReactNode;
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color?: "reported" | "pending";
+
+  variant?: "regular" | "filled";
+}
+
+const Marker: FunctionComponent<Props> = props => {
+  const { className, children, classes, color, variant, ...rest } = props;
+
+  const rootClassName = cn(classes.root, className, {
+    [classes.colorReported]: color === "reported",
+    [classes.colorPending]: color === "pending",
+    [classes.variantRegular]: variant === "regular",
+    [classes.variantFilled]: variant === "filled",
+  });
+
+  return (
+    <span className={rootClassName} {...rest}>
+      {children}
+    </span>
+  );
+};
+
+Marker.defaultProps = {
+  color: "pending",
+  variant: "regular",
+};
+
+const enhanced = withStyles(styles)(Marker);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Marker/__snapshots__/Count.spec.tsx.snap b/src/core/client/ui/components/v2/Marker/__snapshots__/Count.spec.tsx.snap
new file mode 100644
index 000000000..a0dfbda82
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/__snapshots__/Count.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<span
+  className="Count-root custom"
+>
+  Hello
+</span>
+`;
diff --git a/src/core/client/ui/components/v2/Marker/__snapshots__/Marker.spec.tsx.snap b/src/core/client/ui/components/v2/Marker/__snapshots__/Marker.spec.tsx.snap
new file mode 100644
index 000000000..b34064efa
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/__snapshots__/Marker.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<span
+  className="Marker-root custom Marker-colorReported Marker-variantFilled"
+>
+  Hello
+</span>
+`;
diff --git a/src/core/client/ui/components/v2/Marker/index.ts b/src/core/client/ui/components/v2/Marker/index.ts
new file mode 100644
index 000000000..2622c15bd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Marker/index.ts
@@ -0,0 +1,2 @@
+export { default, default as Marker } from "./Marker";
+export { default as Count } from "./Count";
diff --git a/src/core/client/ui/components/v2/Message/Message.css b/src/core/client/ui/components/v2/Message/Message.css
new file mode 100644
index 000000000..99ad852c3
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/Message.css
@@ -0,0 +1,43 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: var(--v2-spacing-1) var(--v2-spacing-2);
+  box-sizing: border-box;
+  border-radius: var(--round-corners);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-title);
+}
+
+.colorGrey {
+  background-color: var(--palette-common-white);
+  border-color: var(--palette-grey-main);
+  color: var(--palette-grey-main);
+}
+
+.colorDark {
+  background-color: var(--palette-text-primary);
+  border-width: 0px;
+  color: var(--palette-text-light);
+}
+
+.colorError {
+  background-color: var(--v2-palette-message-error-background);
+  color: var(--v2-palette-message-error-foreground);
+}
+
+.colorPrimary {
+  background-color: var(--palette-primary-light);
+  border-color: var(--palette-primary-darkest);
+  border-width: 0px;
+  border-left-width: calc(0.5 * var(--mini-unit));
+  color: var(--palette-text-light);
+}
+
+.fullWidth {
+  display: flex;
+  width: 100%;
+}
diff --git a/src/core/client/ui/components/v2/Message/Message.mdx b/src/core/client/ui/components/v2/Message/Message.mdx
new file mode 100644
index 000000000..5baa5aa78
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/Message.mdx
@@ -0,0 +1,38 @@
+---
+name: Message
+menu: UI Kit
+---
+
+import { Playground } from "docz";
+import Message from "./Message";
+import MessageIcon from "./MessageIcon";
+import HorizontalGutter from "../HorizontalGutter";
+
+# Message
+
+## Basic Use
+
+<Playground>
+  <HorizontalGutter>
+    <Message>This is a message</Message>
+    <Message fullWidth>
+      Contrary to popular belief, Lorem Ipsum is not simply random text.
+    </Message>
+    <Message fullWidth color="error">
+      Contrary to popular belief, Lorem Ipsum is not simply random text.
+    </Message>
+    <Message fullWidth color="primary">
+      Contrary to popular belief, Lorem Ipsum is not simply random text.
+    </Message>
+  </HorizontalGutter>
+</Playground>
+
+## Usage with icon
+
+<Playground>
+  <HorizontalGutter>
+    <Message>
+      <MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining
+    </Message>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Message/Message.spec.tsx b/src/core/client/ui/components/v2/Message/Message.spec.tsx
new file mode 100644
index 000000000..2e02522b6
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/Message.spec.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import Message from "./Message";
+import MessageIcon from "./MessageIcon";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Message> = {
+    className: "custom",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<Message {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders icon", () => {
+  const renderer = TestRenderer.create(
+    <Message>
+      <MessageIcon>alert</MessageIcon>Alert Message
+    </Message>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Message/Message.tsx b/src/core/client/ui/components/v2/Message/Message.tsx
new file mode 100644
index 000000000..b07db57a4
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/Message.tsx
@@ -0,0 +1,59 @@
+import cn from "classnames";
+import React, { FunctionComponent, ReactNode } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Message.css";
+
+export interface MessageProps {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /*
+   * If set renders a full width message
+   */
+  fullWidth?: boolean;
+  /*
+   * Name of color, "grey" stays by default - common gray one
+   */
+  color?: "error" | "grey" | "primary" | "dark";
+}
+
+const Message: FunctionComponent<MessageProps> = props => {
+  const { className, classes, fullWidth, children, color, ...rest } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.colorGrey]: color === "grey",
+      [classes.colorError]: color === "error",
+      [classes.colorPrimary]: color === "primary",
+      [classes.colorDark]: color === "dark",
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  return (
+    <div className={rootClassName} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+Message.defaultProps = {
+  color: "grey",
+  fullWidth: false,
+};
+
+const enhanced = withStyles(styles)(Message);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Message/MessageIcon.css b/src/core/client/ui/components/v2/Message/MessageIcon.css
new file mode 100644
index 000000000..a6ebb20be
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/MessageIcon.css
@@ -0,0 +1,8 @@
+.root {
+  align-self: flex-start;
+  margin-top: 1px;
+  flex-shrink: 0;
+  &:first-child {
+    margin-right: calc(0.5 * var(--mini-unit));
+  }
+}
diff --git a/src/core/client/ui/components/v2/Message/MessageIcon.tsx b/src/core/client/ui/components/v2/Message/MessageIcon.tsx
new file mode 100644
index 000000000..d6b2eed38
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/MessageIcon.tsx
@@ -0,0 +1,37 @@
+import cn from "classnames";
+import React, { FunctionComponent, HTMLAttributes, Ref } from "react";
+
+import Icon, { IconProps } from "coral-ui/components/Icon";
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { Omit } from "coral-ui/types";
+
+import styles from "./MessageIcon.css";
+
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
+  /**
+   * This prop can be used to add custom classnames.
+   * It is handled by the `withStyles `HOC.
+   */
+  classes: typeof styles & IconProps["classes"];
+
+  size?: IconProps["size"];
+
+  /** The name of the icon to render */
+  children: string;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLSpanElement>;
+}
+
+export const MessageIcon: FunctionComponent<Props> = props => {
+  const { classes, className, forwardRef, ...rest } = props;
+  const rootClassName = cn(classes.root, className);
+  return <Icon className={rootClassName} {...rest} ref={forwardRef} />;
+};
+
+MessageIcon.defaultProps = {
+  size: "sm",
+};
+
+const enhanced = withForwardRef(withStyles(styles)(MessageIcon));
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/v2/Message/__snapshots__/Message.spec.tsx.snap
new file mode 100644
index 000000000..2a977f72b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/__snapshots__/Message.spec.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Message-root Message-colorGrey custom"
+>
+  Hello World
+</div>
+`;
+
+exports[`renders icon 1`] = `
+<div
+  className="Message-root Message-colorGrey"
+>
+  <i
+    aria-hidden="true"
+    className="Icon-root Icon-sm MessageIcon-root"
+  >
+    alert
+  </i>
+  Alert Message
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/Message/index.ts b/src/core/client/ui/components/v2/Message/index.ts
new file mode 100644
index 000000000..84f6b9009
--- /dev/null
+++ b/src/core/client/ui/components/v2/Message/index.ts
@@ -0,0 +1,2 @@
+export { default, default as Message } from "./Message";
+export { default as MessageIcon } from "./MessageIcon";
diff --git a/src/core/client/ui/components/v2/Modal/Modal.css b/src/core/client/ui/components/v2/Modal/Modal.css
new file mode 100644
index 000000000..92b04ca37
--- /dev/null
+++ b/src/core/client/ui/components/v2/Modal/Modal.css
@@ -0,0 +1,32 @@
+.root {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  z-index: var(--zindex-modal);
+}
+
+.scroll {
+  pointer-events: none;
+  position: relative;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.alignContainer1 {
+  display: table;
+  margin: 0 auto;
+  height: 100%;
+}
+
+.alignContainer2 {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.wrapper {
+  pointer-events: all;
+}
diff --git a/src/core/client/ui/components/v2/Modal/Modal.mdx b/src/core/client/ui/components/v2/Modal/Modal.mdx
new file mode 100644
index 000000000..61fd1c278
--- /dev/null
+++ b/src/core/client/ui/components/v2/Modal/Modal.mdx
@@ -0,0 +1,66 @@
+---
+name: Modal
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import { useState, useCallback } from "react";
+
+import Button from "../Button";
+import Card, { CardCloseButton } from "../Card";
+import Typography from "../Typography";
+import Flex from "../Flex";
+import HorizontalGutter from "../HorizontalGutter";
+import Modal from "./Modal";
+
+import styles from "./Modal.mdx.css";
+
+# Modal
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const [open, setOpen] = useState(false);
+    const show = useCallback(() => setOpen(true));
+    const hide = useCallback(() => setOpen(false));
+    return (
+      <>
+        <Button variant="filled" color="primary" onClick={show}>
+          Show Modal
+        </Button>
+        <Modal open={open} onClose={hide} aria-labelledby="modal-title">
+          {({ firstFocusableRef, lastFocusableRef }) => (
+            <Card className={styles.card}>
+              <CardCloseButton onClick={hide} ref={firstFocusableRef} />
+              <HorizontalGutter size="double">
+                <HorizontalGutter>
+                  <Typography variant="header2" id="modal-title">
+                    Are you sure you want to ban <strong>ButFirstCoffee</strong>?
+                  </Typography>
+                  <Typography>
+                    Once banned, this user will no longer be able to comment,
+                    use reactions, or report comments.
+                  </Typography>
+                </HorizontalGutter>
+                <Flex justifyContent="flex-end" itemGutter="half">
+                  <Button variant="outlined" onClick={hide}>
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="filled"
+                    color="primary"
+                    onClick={hide}
+                    ref={lastFocusableRef}
+                  >
+                    Ban User
+                  </Button>
+                </Flex>
+              </HorizontalGutter>
+            </Card>
+          )}
+        </Modal>
+      </>
+    );
+  }}
+</Playground>
diff --git a/src/core/client/ui/components/v2/Modal/Modal.mdx.css b/src/core/client/ui/components/v2/Modal/Modal.mdx.css
new file mode 100644
index 000000000..9b2098d45
--- /dev/null
+++ b/src/core/client/ui/components/v2/Modal/Modal.mdx.css
@@ -0,0 +1,3 @@
+.card {
+  max-width: 500px;
+}
diff --git a/src/core/client/ui/components/v2/Modal/Modal.spec.tsx b/src/core/client/ui/components/v2/Modal/Modal.spec.tsx
new file mode 100644
index 000000000..02fa4f970
--- /dev/null
+++ b/src/core/client/ui/components/v2/Modal/Modal.spec.tsx
@@ -0,0 +1,90 @@
+import { noop } from "lodash";
+import React from "react";
+import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
+import sinon from "sinon";
+
+import Modal from "./Modal";
+
+const createNodeMock = () => ({
+  focus: noop,
+});
+
+it("renders correctly", () => {
+  expect(document.body.lastChild).toBeNull();
+  let testRenderer: ReactTestRenderer;
+  TestRenderer.act(() => {
+    testRenderer = TestRenderer.create(
+      <Modal>
+        <div>Test</div>
+      </Modal>,
+      { createNodeMock }
+    );
+  });
+  expect(testRenderer!.toJSON()).toBeNull();
+  expect(document.body.lastChild).toBeNull();
+  TestRenderer.act(() => {
+    testRenderer.update(
+      <Modal open>
+        <div>Test</div>
+      </Modal>
+    );
+  });
+  expect(testRenderer!.toJSON()).toMatchSnapshot();
+  expect(document.body.lastElementChild!.getAttribute("data-portal")).toBe(
+    "modal"
+  );
+  TestRenderer.act(() => {
+    testRenderer.unmount();
+  });
+  expect(document.body.lastChild).toBeNull();
+});
+
+it("relays backdrop click events", () => {
+  const event = {};
+  const onBackdropClick = sinon.stub();
+  const onClose = sinon.stub();
+  expect(document.body.lastChild).toBeNull();
+  let testRenderer: ReactTestRenderer;
+  TestRenderer.act(() => {
+    testRenderer = TestRenderer.create(
+      <Modal open onBackdropClick={onBackdropClick} onClose={onClose}>
+        <div>Test</div>
+      </Modal>,
+      { createNodeMock }
+    );
+  });
+  testRenderer!.root
+    .findByProps({ "data-testid": "backdrop" })
+    .props.onClick(event);
+  TestRenderer.act(() => {
+    testRenderer.unmount();
+  });
+  expect(onBackdropClick.called).toBe(true);
+  expect(onClose.calledWith(event, "backdropClick")).toBe(true);
+});
+
+it("relays esc events", () => {
+  const escEvent = { keyCode: 27 };
+  const otherEvent = { keyCode: 100 };
+  const onEscapeKeyDown = sinon.stub();
+  const onClose = sinon.stub();
+  expect(document.body.lastChild).toBeNull();
+  let testRenderer: ReactTestRenderer;
+  TestRenderer.act(() => {
+    testRenderer = TestRenderer.create(
+      <Modal open onEscapeKeyDown={onEscapeKeyDown} onClose={onClose}>
+        <div>Test</div>
+      </Modal>,
+      { createNodeMock }
+    );
+  });
+  const el = testRenderer!.root.find(i => i.props.onKeyDown);
+  el.props.onKeyDown(escEvent);
+  el.props.onKeyDown(otherEvent);
+  TestRenderer.act(() => {
+    testRenderer.unmount();
+  });
+  expect(onEscapeKeyDown.called).toBe(true);
+  expect(onClose.calledWith(escEvent, "escapeKeyDown")).toBe(true);
+  expect(onClose.calledWith(otherEvent, "escapeKeyDown")).toBe(false);
+});
diff --git a/src/core/client/ui/components/v2/Modal/Modal.tsx b/src/core/client/ui/components/v2/Modal/Modal.tsx
new file mode 100644
index 000000000..c5f72184d
--- /dev/null
+++ b/src/core/client/ui/components/v2/Modal/Modal.tsx
@@ -0,0 +1,132 @@
+import cn from "classnames";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import ReactDOM from "react-dom";
+
+import { withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import Backdrop from "../Backdrop";
+import NoScroll from "../NoScroll";
+import TrapFocus from "../TrapFocus";
+
+import styles from "./Modal.css";
+
+function appendDivNode() {
+  const div = document.createElement("div");
+  document.body.append(div);
+  div.setAttribute("data-portal", "modal");
+  return div;
+}
+
+/**
+ * useDOMNode is a React hook that returns a DOM node
+ * to be used as a portal for the modal.
+ *
+ * @param open whether the modal is open or not.
+ */
+function useDOMNode(open: boolean) {
+  const [modalDOMNode, setModalDOMNode] = useState<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (open) {
+      const node = appendDivNode();
+      setModalDOMNode(node);
+      return () => {
+        node.parentElement!.removeChild(node);
+        setModalDOMNode(null);
+      };
+    }
+    return;
+  }, [open]);
+  return modalDOMNode;
+}
+
+export interface ModalProps {
+  onClose?: (
+    event: React.KeyboardEvent | React.MouseEvent,
+    reason: "backdropClick" | "escapeKeyDown"
+  ) => void;
+  onBackdropClick?: React.EventHandler<React.MouseEvent>;
+  onEscapeKeyDown?: React.EventHandler<React.KeyboardEvent>;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  open?: boolean;
+  children?: PropTypesOf<typeof TrapFocus>["children"];
+}
+
+const Modal: FunctionComponent<ModalProps> = ({
+  classes,
+  open,
+  onClose,
+  className,
+  onBackdropClick,
+  onEscapeKeyDown,
+  children,
+  ...rest
+}) => {
+  const rootClassName = cn(classes.root, className);
+
+  const modalDOMNode = useDOMNode(Boolean(open));
+  const handleEscapeKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.keyCode === 27) {
+        if (onEscapeKeyDown) {
+          onEscapeKeyDown(e);
+        }
+        if (onClose) {
+          onClose(e, "escapeKeyDown");
+        }
+      }
+    },
+    [onEscapeKeyDown, onClose]
+  );
+  const handleBackdropClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (onBackdropClick) {
+        onBackdropClick(e);
+      }
+      if (onClose) {
+        onClose(e, "backdropClick");
+      }
+    },
+    [onBackdropClick, onClose]
+  );
+
+  if (open && modalDOMNode) {
+    return ReactDOM.createPortal(
+      <div role="dialog" className={rootClassName} {...rest}>
+        <NoScroll active={open} />
+        <Backdrop
+          active={open}
+          data-testid="backdrop"
+          onClick={handleBackdropClick}
+        />
+        <div
+          role="presentation"
+          className={styles.scroll}
+          onKeyDown={handleEscapeKeyDown}
+        >
+          <div className={styles.alignContainer1}>
+            <div className={styles.alignContainer2}>
+              <div className={styles.wrapper}>
+                <TrapFocus>{children}</TrapFocus>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>,
+      modalDOMNode
+    );
+  }
+  return null;
+};
+
+const enhanced = withStyles(styles)(Modal);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap b/src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap
new file mode 100644
index 000000000..380445832
--- /dev/null
+++ b/src/core/client/ui/components/v2/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Modal-root"
+  role="dialog"
+>
+  <div
+    className="Backdrop-root Backdrop-active"
+    data-testid="backdrop"
+    onClick={[Function]}
+  />
+  <div
+    className="Modal-scroll"
+    onKeyDown={[Function]}
+    role="presentation"
+  >
+    <div
+      className="Modal-alignContainer1"
+    >
+      <div
+        className="Modal-alignContainer2"
+      >
+        <div
+          className="Modal-wrapper"
+        >
+          <div
+            onFocus={[Function]}
+            tabIndex={0}
+          />
+          <div
+            tabIndex={-1}
+          />
+          <div>
+            Test
+          </div>
+          <div
+            onFocus={[Function]}
+            tabIndex={0}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/Modal/index.ts b/src/core/client/ui/components/v2/Modal/index.ts
new file mode 100644
index 000000000..2ddfc1688
--- /dev/null
+++ b/src/core/client/ui/components/v2/Modal/index.ts
@@ -0,0 +1 @@
+export { default, ModalProps } from "./Modal";
diff --git a/src/core/client/ui/components/v2/NoScroll/NoScroll.css b/src/core/client/ui/components/v2/NoScroll/NoScroll.css
new file mode 100644
index 000000000..7546b152d
--- /dev/null
+++ b/src/core/client/ui/components/v2/NoScroll/NoScroll.css
@@ -0,0 +1,3 @@
+.noScroll {
+  overflow: hidden;
+}
diff --git a/src/core/client/ui/components/v2/NoScroll/NoScroll.mdx b/src/core/client/ui/components/v2/NoScroll/NoScroll.mdx
new file mode 100644
index 000000000..6781badcb
--- /dev/null
+++ b/src/core/client/ui/components/v2/NoScroll/NoScroll.mdx
@@ -0,0 +1,35 @@
+---
+name: NoScroll
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import Container from "react-with-state-props";
+
+import Button from "../Button";
+import NoScroll from "./NoScroll";
+
+# NoScroll
+
+Disables scrolling of `<body>`.
+
+## Basic usage
+
+<Playground>
+  <Container
+    state={{ value: false }}
+    render={props => (
+      <div>
+        <NoScroll active={props.value} />
+        <Button
+          variant="ghost"
+          color="primary"
+          active={props.value}
+          onClick={() => props.setValue(!props.value)}
+        >
+          Disable Scrolling
+        </Button>
+      </div>
+    )}
+  />
+</Playground>
diff --git a/src/core/client/ui/components/v2/NoScroll/NoScroll.spec.tsx b/src/core/client/ui/components/v2/NoScroll/NoScroll.spec.tsx
new file mode 100644
index 000000000..f5df1c4e8
--- /dev/null
+++ b/src/core/client/ui/components/v2/NoScroll/NoScroll.spec.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import TestRenderer, { ReactTestRenderer } from "react-test-renderer";
+
+import NoScroll from "./NoScroll";
+
+it("renders correctly", () => {
+  expect(document.body.className).toBe("");
+  let testRenderer: ReactTestRenderer;
+  TestRenderer.act(() => {
+    testRenderer = TestRenderer.create(<NoScroll active />);
+  });
+  expect(document.body.className).toBe("NoScroll-noScroll");
+  TestRenderer.act(() => {
+    testRenderer.update(<NoScroll />);
+  });
+  expect(document.body.className).toBe("");
+});
+
+it("renders correctly with multiple instances", () => {
+  expect(document.body.className).toBe("");
+  let testRenderer: ReactTestRenderer;
+  TestRenderer.act(() => {
+    testRenderer = TestRenderer.create(
+      <>
+        <NoScroll active />
+        <NoScroll active />
+        <NoScroll active />
+      </>
+    );
+  });
+  expect(document.body.className).toBe("NoScroll-noScroll");
+  TestRenderer.act(() => {
+    testRenderer.update(
+      <>
+        <NoScroll />
+        <NoScroll />
+        <NoScroll active />
+      </>
+    );
+  });
+  expect(document.body.className).toBe("NoScroll-noScroll");
+  TestRenderer.act(() => {
+    testRenderer.update(
+      <>
+        <NoScroll />
+        <NoScroll />
+        <NoScroll />
+      </>
+    );
+  });
+  expect(document.body.className).toBe("");
+});
diff --git a/src/core/client/ui/components/v2/NoScroll/NoScroll.tsx b/src/core/client/ui/components/v2/NoScroll/NoScroll.tsx
new file mode 100644
index 000000000..5e995f542
--- /dev/null
+++ b/src/core/client/ui/components/v2/NoScroll/NoScroll.tsx
@@ -0,0 +1,41 @@
+import { FunctionComponent, useEffect } from "react";
+
+import styles from "./NoScroll.css";
+
+interface Props {
+  /** If set to true, will disable scrolling on `<body>` */
+  active?: boolean;
+}
+
+/** Counter of current <NoScroll> instances */
+let instances = 0;
+
+const NoScroll: FunctionComponent<Props> = ({ active }) => {
+  useEffect(() => {
+    if (active) {
+      if (instances++ === 0) {
+        // Add className.
+        document.body.className = document.body.className
+          .split(/\s+/)
+          .filter(s => s)
+          .concat(styles.noScroll)
+          .join(" ");
+      }
+
+      // Cleanup hook.
+      return () => {
+        if (--instances === 0) {
+          // Remove className.
+          document.body.className = document.body.className
+            .split(/\s+/)
+            .filter(s => s && s !== styles.noScroll)
+            .join(" ");
+        }
+      };
+    }
+    return;
+  }, [active]);
+  return null;
+};
+
+export default NoScroll;
diff --git a/src/core/client/ui/components/v2/NoScroll/index.ts b/src/core/client/ui/components/v2/NoScroll/index.ts
new file mode 100644
index 000000000..71333faa8
--- /dev/null
+++ b/src/core/client/ui/components/v2/NoScroll/index.ts
@@ -0,0 +1 @@
+export { default } from "./NoScroll";
diff --git a/src/core/client/ui/components/v2/PasswordField/PasswordField.css b/src/core/client/ui/components/v2/PasswordField/PasswordField.css
new file mode 100644
index 000000000..5f874c3b2
--- /dev/null
+++ b/src/core/client/ui/components/v2/PasswordField/PasswordField.css
@@ -0,0 +1,69 @@
+.root {
+  width: calc(29 * var(--mini-unit));
+  height: 36px;
+  line-height: 36px;
+  box-sizing: border-box;
+}
+
+.colorRegular {
+  background-color: var(--v2-palette-input-background);
+  color: var(--v2-palette-input-value);
+  border: 1px solid var(--v2-palette-input-border);
+}
+
+.colorError {
+  background-color: var(--v2-palette-input-background);
+  border-color: var(--v2-palette-error-main);
+  border: 2px solid var(--v2-palette-error-darkest);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.icon {
+  position: absolute;
+  display: inline-block;
+  right: 0px;
+  padding: 4px calc(1 * var(--mini-unit));
+  cursor: pointer;
+  line-height: 0;
+}
+
+.input {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
+  display: block;
+  padding: var(--v2-spacing-2);
+  border-radius: var(--round-corners);
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  &:read-only {
+    background-color: var(--v2-palette-input-disabled-background);
+  }
+  &:disabled {
+    background-color: var(--v2-palette-input-disabled-background);
+    border-color: var(--v2-palette-input-disabled-foreground);
+  }
+  &:focus {
+    outline: none;
+    border: 1px solid var(--v2-palette-input-focused-border);
+    box-shadow: inset 0px 0px 0px 1px var(--v2-palette-input-focused-border);
+  }
+  &::placeholder {
+    color: var(--v2-palette-input-placeholder);
+  }
+}
diff --git a/src/core/client/ui/components/v2/PasswordField/PasswordField.mdx b/src/core/client/ui/components/v2/PasswordField/PasswordField.mdx
new file mode 100644
index 000000000..965d2dd97
--- /dev/null
+++ b/src/core/client/ui/components/v2/PasswordField/PasswordField.mdx
@@ -0,0 +1,25 @@
+---
+name: PasswordField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import PasswordField from "./PasswordField.tsx";
+import HorizontalGutter from "../HorizontalGutter";
+
+# PasswordField
+
+## Basic Use
+
+<Playground>
+  <HorizontalGutter>
+    <PasswordField placeholder="This is a placeholder" />
+    <PasswordField defaultValue="This is an input field" />
+    <PasswordField color="error" defaultValue="A PasswordField with an error" />
+    <PasswordField
+      color="error"
+      defaultValue="A PasswordField with an error"
+      fullWidth
+    />
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/PasswordField/PasswordField.spec.tsx b/src/core/client/ui/components/v2/PasswordField/PasswordField.spec.tsx
new file mode 100644
index 000000000..a5e4618f5
--- /dev/null
+++ b/src/core/client/ui/components/v2/PasswordField/PasswordField.spec.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import PasswordField from "./PasswordField";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof PasswordField> = {
+    className: "custom",
+    defaultValue: "Hello World",
+  };
+  const renderer = TestRenderer.create(<PasswordField {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+
+  renderer.root.findByProps({ role: "button" }).props.onClick();
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/PasswordField/PasswordField.tsx b/src/core/client/ui/components/v2/PasswordField/PasswordField.tsx
new file mode 100644
index 000000000..f9772114c
--- /dev/null
+++ b/src/core/client/ui/components/v2/PasswordField/PasswordField.tsx
@@ -0,0 +1,162 @@
+import cn from "classnames";
+import React, {
+  AllHTMLAttributes,
+  ChangeEvent,
+  Component,
+  EventHandler,
+  KeyboardEvent,
+} from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import Icon from "coral-ui/components/Icon";
+
+import styles from "./PasswordField.css";
+
+export interface PasswordFieldProps {
+  id?: string;
+  /**
+   * The content value of the component.
+   */
+  defaultValue?: string;
+  /**
+   * The content value of the component.
+   */
+  value?: string;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Color of the PasswordField
+   */
+  color?: "regular" | "error";
+  /*
+   * If set renders a full width button
+   */
+  fullWidth?: boolean;
+  /**
+   * Placeholder
+   */
+  placeholder?: string;
+  /**
+   * Mark as readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Name
+   */
+  name?: string;
+  /**
+   * onChange
+   */
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
+
+  disabled?: boolean;
+
+  autoComplete?: AllHTMLAttributes<HTMLInputElement>["autoComplete"];
+  autoCorrect?: AllHTMLAttributes<HTMLInputElement>["autoCorrect"];
+  autoCapitalize?: AllHTMLAttributes<HTMLInputElement>["autoCapitalize"];
+  spellCheck?: AllHTMLAttributes<HTMLInputElement>["spellCheck"];
+
+  showPasswordTitle?: string;
+  hidePasswordTitle?: string;
+}
+
+interface State {
+  reveal: boolean;
+}
+
+class PasswordField extends Component<PasswordFieldProps, State> {
+  public static defaultProps: Partial<PasswordFieldProps> = {
+    color: "regular",
+    placeholder: "",
+    showPasswordTitle: "Hide password",
+    hidePasswordTitle: "Show password",
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    autoComplete: "off",
+    spellCheck: false,
+  };
+
+  public state = {
+    reveal: false,
+  };
+
+  private handleVisibilityKeyUp = (e: KeyboardEvent) => {
+    // Number 13 is the "Enter" key on the keyboard
+    if (e.keyCode === 13) {
+      this.toggleVisibility();
+    }
+  };
+
+  private toggleVisibility = () => {
+    this.setState(state => ({
+      reveal: !state.reveal,
+    }));
+  };
+
+  public render() {
+    const {
+      className,
+      classes,
+      color,
+      fullWidth,
+      value,
+      placeholder,
+      hidePasswordTitle,
+      showPasswordTitle,
+      ...rest
+    } = this.props;
+
+    const rootClassName = cn(
+      {
+        [classes.fullWidth]: fullWidth,
+      },
+      classes.root,
+      className
+    );
+
+    const inputClassName = cn(
+      {
+        [classes.colorRegular]: color === "regular",
+        [classes.colorError]: color === "error",
+        [classes.fullWidth]: fullWidth,
+      },
+      classes.input
+    );
+
+    const reveal = this.state.reveal;
+
+    return (
+      <div className={rootClassName}>
+        <div className={classes.wrapper}>
+          <input
+            className={inputClassName}
+            placeholder={placeholder}
+            value={value}
+            type={reveal ? "text" : "password"}
+            {...rest}
+          />
+          <div
+            role="button"
+            className={styles.icon}
+            title={reveal ? hidePasswordTitle : showPasswordTitle}
+            onClick={this.toggleVisibility}
+            onKeyUp={this.handleVisibilityKeyUp}
+            tabIndex={0}
+          >
+            <Icon>{reveal ? "visibility_off" : "visibility"}</Icon>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(PasswordField);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/PasswordField/__snapshots__/PasswordField.spec.tsx.snap b/src/core/client/ui/components/v2/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
new file mode 100644
index 000000000..0a900db11
--- /dev/null
+++ b/src/core/client/ui/components/v2/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="PasswordField-root custom"
+>
+  <div
+    className="PasswordField-wrapper"
+  >
+    <input
+      autoCapitalize="off"
+      autoComplete="off"
+      autoCorrect="off"
+      className="PasswordField-colorRegular PasswordField-input"
+      defaultValue="Hello World"
+      placeholder=""
+      spellCheck={false}
+      type="password"
+    />
+    <div
+      className="PasswordField-icon"
+      onClick={[Function]}
+      onKeyUp={[Function]}
+      role="button"
+      tabIndex={0}
+      title="Hide password"
+    >
+      <i
+        aria-hidden="true"
+        className="Icon-root Icon-sm"
+      >
+        visibility
+      </i>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders correctly 2`] = `
+<div
+  className="PasswordField-root custom"
+>
+  <div
+    className="PasswordField-wrapper"
+  >
+    <input
+      autoCapitalize="off"
+      autoComplete="off"
+      autoCorrect="off"
+      className="PasswordField-colorRegular PasswordField-input"
+      defaultValue="Hello World"
+      placeholder=""
+      spellCheck={false}
+      type="text"
+    />
+    <div
+      className="PasswordField-icon"
+      onClick={[Function]}
+      onKeyUp={[Function]}
+      role="button"
+      tabIndex={0}
+      title="Show password"
+    >
+      <i
+        aria-hidden="true"
+        className="Icon-root Icon-sm"
+      >
+        visibility_off
+      </i>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/PasswordField/index.ts b/src/core/client/ui/components/v2/PasswordField/index.ts
new file mode 100644
index 000000000..7cb96a599
--- /dev/null
+++ b/src/core/client/ui/components/v2/PasswordField/index.ts
@@ -0,0 +1,2 @@
+export * from "./PasswordField";
+export { default } from "./PasswordField";
diff --git a/src/core/client/ui/components/v2/Popover/Arrow.css b/src/core/client/ui/components/v2/Popover/Arrow.css
new file mode 100644
index 000000000..ba6cd14c1
--- /dev/null
+++ b/src/core/client/ui/components/v2/Popover/Arrow.css
@@ -0,0 +1,142 @@
+.root {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+
+  &[data-placement*="bottom"] {
+    top: 0;
+    left: 0;
+    margin-top: -6px;
+    width: 20px;
+    height: 6px;
+    filter: drop-shadow(0px -2px 1px rgba(0, 0, 0, 0.1));
+    &::before {
+      border-width: 0 10px 6px 10px;
+      border-color: transparent transparent var(--v2-palette-popover-border)
+        transparent;
+    }
+    &::after {
+      margin-top: -5px;
+      border-width: 0 10px 6px 10px;
+      border-color: transparent transparent var(--v2-palette-popover-background)
+        transparent;
+    }
+    &.colorDark {
+      &::before {
+        border-color: transparent transparent var(--v2-palette-popover-dark-border)
+          transparent;
+      }
+      &::after {
+        border-color: transparent transparent var(--v2-palette-popover-dark-border)
+          transparent;
+      }
+    }
+  }
+
+  &[data-placement*="top"] {
+    bottom: 0;
+    left: 0;
+    margin-bottom: -6px;
+    width: 20px;
+    height: 6px;
+    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.1));
+    &::before {
+      border-width: 6px 10px 0 10px;
+      border-color: var(--v2-palette-popover-border) transparent transparent
+        transparent;
+    }
+    &::after {
+      margin-top: -7px;
+      border-width: 6px 10px 0 10px;
+      border-color: var(--v2-palette-popover-background) transparent transparent
+        transparent;
+    }
+    &.colorDark {
+      &::before {
+        border-color: var(--v2-palette-popover-dark-border) transparent transparent
+          transparent;
+      }
+      &::after {
+        border-color: var(--v2-palette-popover-dark-border) transparent transparent
+          transparent;
+      }
+    }
+  }
+
+  &[data-placement*="right"] {
+    left: 0;
+    height: 20px;
+    width: 6px;
+    margin-left: -6px;
+    filter: drop-shadow(-1px 0px 1px rgba(0, 0, 0, 0.1));
+    &::before {
+      border-width: 10px 6px 10px 0;
+      border-color: transparent var(--v2-palette-popover-border) transparent
+        transparent;
+    }
+    &::after {
+      margin-top: -20px;
+      margin-right: -1px;
+      border-width: 10px 6px 10px 0;
+      border-color: transparent var(--v2-palette-popover-background) transparent
+        transparent;
+    }
+    &.colorDark {
+      &::before {
+        border-color: transparent var(--v2-palette-popover-dark-border) transparent
+          transparent;
+      }
+      &::after {
+        border-color: transparent var(--v2-palette-popover-dark-border) transparent
+          transparent;
+      }
+    }
+  }
+
+  &[data-placement*="left"] {
+    right: 0;
+    height: 20px;
+    width: 6px;
+    margin-right: -6px;
+    filter: drop-shadow(1px 0px 1px rgba(0, 0, 0, 0.1));
+    &::before {
+      border-width: 10px 0 10px 6px;
+      border-color: transparent transparent transparent
+        var(--v2-palette-popover-border);
+    }
+    &::after {
+      margin-top: -20px;
+      margin-left: -1px;
+      border-width: 10px 0 10px 6px;
+      border-color: transparent transparent transparent
+        var(--v2-palette-popover-background);
+    }
+    &.colorDark {
+      &::before {
+        border-color: transparent transparent transparent
+          var(--v2-palette-popover-dark-border);
+      }
+      &::after {
+        border-color: transparent transparent transparent
+          var(--v2-palette-popover-dark-border);
+      }
+    }
+  }
+
+  &::before {
+    content: "";
+    margin: auto;
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+  &::after {
+    content: "";
+    margin: auto;
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+}
diff --git a/src/core/client/ui/components/v2/Popover/Arrow.tsx b/src/core/client/ui/components/v2/Popover/Arrow.tsx
new file mode 100644
index 000000000..e40145a6a
--- /dev/null
+++ b/src/core/client/ui/components/v2/Popover/Arrow.tsx
@@ -0,0 +1,26 @@
+import cn from "classnames";
+import React, { FunctionComponent, Ref } from "react";
+
+import { withForwardRef } from "coral-ui/hocs";
+
+import styles from "./Arrow.css";
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  dark?: boolean;
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+const Arrow: FunctionComponent<Props> = props => {
+  const { className, dark, forwardRef: ref, ...rest } = props;
+  return (
+    <div
+      {...rest}
+      className={cn(className, styles.root, {
+        [styles.colorDark]: dark,
+      })}
+      ref={ref}
+    />
+  );
+};
+
+export default withForwardRef(Arrow);
diff --git a/src/core/client/ui/components/v2/Popover/Popover.css b/src/core/client/ui/components/v2/Popover/Popover.css
new file mode 100644
index 000000000..3b55e6491
--- /dev/null
+++ b/src/core/client/ui/components/v2/Popover/Popover.css
@@ -0,0 +1,30 @@
+.root {
+}
+
+.popover {
+  background: var(--v2-palette-popover-background);
+  border: 1px solid var(--v2-palette-popover-border);
+  box-sizing: border-box;
+  box-shadow: var(--elevation-main);
+  border-radius: var(--round-corners);
+  z-index: var(--zindex-popover);
+  margin: 2px;
+}
+
+.colorDark {
+  background: var(--v2-palette-popover-dark-background);
+  border-color: var(--v2-palette-popover-dark-border);
+}
+
+.top {
+  margin: calc(0.5 * var(--mini-unit)) 0;
+}
+.left {
+  margin: 0 calc(0.5 * var(--mini-unit));
+}
+.right {
+  margin: 0 calc(0.5 * var(--mini-unit));
+}
+.bottom {
+  margin: calc(0.5 * var(--mini-unit)) 0;
+}
diff --git a/src/core/client/ui/components/v2/Popover/Popover.mdx b/src/core/client/ui/components/v2/Popover/Popover.mdx
new file mode 100644
index 000000000..54434116b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Popover/Popover.mdx
@@ -0,0 +1,88 @@
+---
+name: Popover
+menu: UI Kit
+---
+
+import { Playground } from "docz";
+import Popover from "./Popover";
+import Button from "../Button";
+import Flex from "../Flex";
+import Typography from "../Typography";
+import ButtonIcon from "../Button/ButtonIcon";
+import BaseButton from "../BaseButton";
+import ClickOutside from "../ClickOutside";
+import Icon from "../Icon";
+
+# Popover
+
+`Popover` renders a popover dialog attached to another `Element`.
+
+## Basic usage
+
+<Playground>
+  <Popover
+    id="my-popover-1"
+    body={() => <Typography p={2}>This is the body</Typography>}
+  >
+    {({ toggleVisibility, ref }) => (
+      <Button
+        onClick={toggleVisibility}
+        ref={ref}
+        variant="filled"
+        color="primary"
+      >
+        Click me!
+      </Button>
+    )}
+  </Popover>
+</Playground>
+
+#### Example with `placement=top`
+
+<Playground>
+  <Popover
+    id="my-popover-2"
+    placement="top"
+    body={({ toggleVisibility }) => (
+      <Flex itemGutter="half">
+        <Typography p={2}>This is the body</Typography>
+        <Button onClick={toggleVisibility} size="small">
+          <ButtonIcon>close</ButtonIcon>
+        </Button>
+      </Flex>
+    )}
+  >
+    {({ toggleVisibility, ref }) => (
+      <Button
+        onClick={toggleVisibility}
+        ref={ref}
+        variant="filled"
+        color="primary"
+      >
+        Click me!
+      </Button>
+    )}
+  </Popover>
+</Playground>
+
+## Tooltip
+
+<Playground>
+  <Popover
+    id="my-popover-1"
+    body={({ toggleVisibility }) => (
+      <ClickOutside onClickOutside={toggleVisibility}>
+        <Typography color="textLight" p={2}>
+          I am a Tooltip
+        </Typography>
+      </ClickOutside>
+    )}
+    dark
+  >
+    {({ toggleVisibility, ref }) => (
+      <BaseButton onClick={toggleVisibility} ref={ref}>
+        <Icon color="primary">info</Icon>
+      </BaseButton>
+    )}
+  </Popover>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Popover/Popover.tsx b/src/core/client/ui/components/v2/Popover/Popover.tsx
new file mode 100644
index 000000000..af6cb4c31
--- /dev/null
+++ b/src/core/client/ui/components/v2/Popover/Popover.tsx
@@ -0,0 +1,202 @@
+import cn from "classnames";
+import React from "react";
+import { Manager, Popper, Reference, RefHandler } from "react-popper";
+
+import { oncePerFrame } from "coral-common/utils";
+import { withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import { AriaInfo } from "coral-ui/components";
+
+import Arrow from "./Arrow";
+import styles from "./Popover.css";
+
+type Placement =
+  | "top-start"
+  | "top"
+  | "top-end"
+  | "right-start"
+  | "right"
+  | "right-end"
+  | "bottom-end"
+  | "bottom"
+  | "bottom-start"
+  | "left-end"
+  | "left"
+  | "left-start";
+
+interface BodyRenderProps {
+  /** toggles visibility, if event is provided, the event will stop propagating. */
+  toggleVisibility: (event?: React.SyntheticEvent | Event) => void;
+  visible: boolean;
+  scheduleUpdate: () => void;
+}
+
+interface ChildrenRenderProps {
+  /** toggles visibility, if event is provided, the event will stop propagating. */
+  toggleVisibility: (event?: React.SyntheticEvent | Event) => void;
+  ref?: RefHandler;
+  visible: boolean;
+}
+
+interface PopoverProps {
+  body: (props: BodyRenderProps) => React.ReactNode | React.ReactElement<any>;
+  children: (props: ChildrenRenderProps) => React.ReactNode;
+  description?: string;
+  id: string;
+  className?: string;
+  placement?: Placement;
+  visible?: boolean;
+  classes: typeof styles;
+  modifiers?: PropTypesOf<typeof Popper>["modifiers"];
+  eventsEnabled?: PropTypesOf<typeof Popper>["eventsEnabled"];
+  positionFixed?: PropTypesOf<typeof Popper>["positionFixed"];
+  dark?: boolean;
+}
+
+interface State {
+  visible: boolean;
+}
+
+class Popover extends React.Component<PopoverProps> {
+  public static defaultProps: Partial<PopoverProps> = {
+    placement: "top",
+  };
+  public state: State = {
+    visible: false,
+  };
+
+  private toggleVisibility = (() => {
+    let fn = (event?: React.SyntheticEvent | Event) => {
+      this.setState((state: State) => ({
+        visible: !state.visible,
+      }));
+    };
+    if (process.env.NODE_ENV !== "test") {
+      /**
+       * Only run this once per frame in the browser, otherwise
+       * we might get into a situation where this is called twice
+       * by different event handlers cancelling each other out.
+       *
+       * We don't wan this behavior when running in a simulated browser
+       * environment with simulated events.
+       */
+      fn = oncePerFrame(fn);
+    }
+    return fn;
+  })();
+
+  private close = () => {
+    this.setState((state: State) => ({
+      visible: false,
+    }));
+  };
+
+  private handleEsc = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      this.close();
+    }
+  };
+
+  public componentDidMount() {
+    document.addEventListener("keydown", this.handleEsc, true);
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleEsc, true);
+  }
+
+  public render() {
+    const {
+      id,
+      body,
+      children,
+      description,
+      className,
+      placement,
+      classes,
+      visible: controlledVisible,
+      positionFixed,
+      modifiers,
+      eventsEnabled,
+      dark,
+      ...rest
+    } = this.props;
+
+    const visible =
+      controlledVisible !== undefined ? controlledVisible : this.state.visible;
+    const includeArrow =
+      !modifiers || !modifiers.arrow || modifiers.arrow.enabled;
+    const popoverClassName = cn(classes.popover, {
+      [classes.top]: placement!.startsWith("top"),
+      [classes.left]: placement!.startsWith("left"),
+      [classes.right]: placement!.startsWith("right"),
+      [classes.bottom]: placement!.startsWith("bottom"),
+    });
+
+    return (
+      <div className={cn(classes.root, className)} {...rest}>
+        <Manager>
+          <Reference>
+            {props =>
+              children({
+                ref: props.ref,
+                toggleVisibility: this.toggleVisibility,
+                visible,
+              })
+            }
+          </Reference>
+          <Popper
+            placement={placement}
+            eventsEnabled={eventsEnabled}
+            positionFixed={positionFixed}
+            modifiers={modifiers}
+          >
+            {props => (
+              <div
+                id={id}
+                role="dialog"
+                aria-labelledby={`${id}-ariainfo`}
+                aria-hidden={!visible}
+              >
+                {description && (
+                  <AriaInfo id={`${id}-ariainfo`}>{description}</AriaInfo>
+                )}
+                {visible && (
+                  <div
+                    style={props.style}
+                    className={cn(popoverClassName, {
+                      [classes.colorDark]: dark,
+                    })}
+                    ref={props.ref}
+                  >
+                    {includeArrow && (
+                      <Arrow
+                        ref={props.arrowProps.ref}
+                        data-placement={props.placement}
+                        style={props.arrowProps.style}
+                        dark={dark}
+                      />
+                    )}
+                    {typeof body === "function"
+                      ? body({
+                          scheduleUpdate: props.scheduleUpdate,
+                          toggleVisibility: this.toggleVisibility,
+                          visible,
+                        })
+                      : body}
+                  </div>
+                )}
+              </div>
+            )}
+          </Popper>
+        </Manager>
+      </div>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(Popover);
+
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Popover/index.ts b/src/core/client/ui/components/v2/Popover/index.ts
new file mode 100644
index 000000000..04072ed30
--- /dev/null
+++ b/src/core/client/ui/components/v2/Popover/index.ts
@@ -0,0 +1 @@
+export { default } from "./Popover";
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.css b/src/core/client/ui/components/v2/RadioButton/RadioButton.css
new file mode 100644
index 000000000..359089cdd
--- /dev/null
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.css
@@ -0,0 +1,80 @@
+.root {
+}
+
+.input {
+  cursor: pointer;
+  position: absolute; /* take it out of document flow */
+  opacity: 0; /* hide it */
+}
+
+.label {
+  display: flex;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  color: var(--v2-palette-input-label);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-body-short);
+  align-items: center;
+}
+
+.labelLight {
+  color: var(--palette-text-light);
+}
+
+/* Box. */
+.input + .label:before {
+  content: "";
+  margin-right: 10px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: var(--v2-palette-input-background);
+  border: 1px solid var(--v2-palette-input-label);
+  border-radius: 50%;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* Box focus */
+.label.focus:before {
+  @mixin outline;
+}
+
+/* Box checked */
+.input:checked + .label:before {
+  border: 1px solid var(--v2-palette-input-label);
+  background: var(--v2-palette-input-background);
+}
+
+/* Disabled state label. */
+.input:disabled + .label {
+  cursor: auto;
+  opacity: 0.6;
+}
+
+/* Disabled box. */
+.input:disabled + .label:before {
+  box-shadow: none;
+  border: 1px solid var(--v2-palette-input-disabled-foreground);
+  background: var(--v2-palette-input-disabled-background);
+}
+
+/* Checkmark. Could be replaced with an image */
+.input:checked + .label:after {
+  content: "";
+  background: var(--v2-palette-input-label);
+  border-radius: 50%;
+  position: absolute;
+  left: 3px;
+  top: 6px;
+  width: 8px;
+  height: 8px;
+  box-sizing: border-box;
+}
+
+.input:checked:disabled + .label:after {
+  background: var(--v2-palette-input-disabled-background);
+}
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.mdx b/src/core/client/ui/components/v2/RadioButton/RadioButton.mdx
new file mode 100644
index 000000000..20377f4bc
--- /dev/null
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.mdx
@@ -0,0 +1,20 @@
+---
+name: RadioButton
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import RadioButton from './RadioButton.tsx'
+import HorizontalGutter from '../HorizontalGutter'
+
+# RadioButton
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <RadioButton name="key" value="true">Yes I agree</RadioButton>
+    <RadioButton name="key" value="false">I don't agree</RadioButton>
+    <RadioButton name="key" value="disabled" disabled>Disabled</RadioButton>
+    <RadioButton name="another" value="undefined" disabled checked>Disabled + Checked</RadioButton>
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.spec.tsx b/src/core/client/ui/components/v2/RadioButton/RadioButton.spec.tsx
new file mode 100644
index 000000000..30958d6a7
--- /dev/null
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.spec.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import RadioButton from "./RadioButton";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof RadioButton> = {
+    className: "custom",
+    id: "radioID",
+    name: "key",
+    value: "true",
+    children: "Yes I agree",
+  };
+  const renderer = TestRenderer.create(<RadioButton {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx b/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
new file mode 100644
index 000000000..d725cdf77
--- /dev/null
+++ b/src/core/client/ui/components/v2/RadioButton/RadioButton.tsx
@@ -0,0 +1,89 @@
+import cn from "classnames";
+import React, { ChangeEvent, Component, EventHandler, FocusEvent } from "react";
+import uuid from "uuid/v4";
+
+import { Flex } from "coral-ui/components";
+import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
+
+import styles from "./RadioButton.css";
+
+export interface RadioButtonProps {
+  id?: string;
+  /**
+   * The content value of the component.
+   */
+  value?: string;
+
+  checked?: boolean;
+
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Mark as readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Name
+   */
+  name?: string;
+  /**
+   * onChange
+   */
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
+
+  disabled?: boolean;
+  children: React.ReactNode;
+  /**
+   * Display a light text.
+   */
+  light?: boolean;
+
+  // These handlers are passed down by the `withKeyboardFocus` HOC.
+  onFocus: EventHandler<FocusEvent<HTMLElement>>;
+  onBlur: EventHandler<FocusEvent<HTMLElement>>;
+  keyboardFocus: boolean;
+}
+
+class RadioButton extends Component<RadioButtonProps> {
+  public state = {
+    randomID: uuid(),
+  };
+  public render() {
+    const {
+      className,
+      classes,
+      id,
+      light,
+      children,
+      keyboardFocus,
+      ...rest
+    } = this.props;
+
+    const rootClassName = cn(classes.root, className);
+    const finalID = id || this.state.randomID;
+
+    return (
+      <Flex alignItems="center" className={rootClassName}>
+        <input className={classes.input} type="radio" id={finalID} {...rest} />
+        <label
+          className={cn(classes.label, {
+            [classes.labelLight]: light,
+            [classes.focus]: keyboardFocus,
+          })}
+          htmlFor={finalID}
+        >
+          {children}
+        </label>
+      </Flex>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(withKeyboardFocus(RadioButton));
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/RadioButton/__snapshots__/RadioButton.spec.tsx.snap b/src/core/client/ui/components/v2/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
new file mode 100644
index 000000000..f8dad0dcc
--- /dev/null
+++ b/src/core/client/ui/components/v2/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Box-root Flex-root RadioButton-root custom Flex-flex Flex-alignCenter"
+>
+  <input
+    className="RadioButton-input"
+    id="radioID"
+    name="key"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    type="radio"
+    value="true"
+  />
+  <label
+    className="RadioButton-label"
+    htmlFor="radioID"
+  >
+    Yes I agree
+  </label>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/RadioButton/index.ts b/src/core/client/ui/components/v2/RadioButton/index.ts
new file mode 100644
index 000000000..ed12488fa
--- /dev/null
+++ b/src/core/client/ui/components/v2/RadioButton/index.ts
@@ -0,0 +1,2 @@
+export * from "./RadioButton";
+export { default } from "./RadioButton";
diff --git a/src/core/client/ui/components/v2/RelativeTime/RelativeTime.css b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/v2/RelativeTime/RelativeTime.mdx b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.mdx
new file mode 100644
index 000000000..3122e8806
--- /dev/null
+++ b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.mdx
@@ -0,0 +1,17 @@
+---
+name: RelativeTime
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import RelativeTime from './RelativeTime'
+
+# RelativeTime
+
+Renders relative time until given `date`.
+
+## Basic usage
+<Playground>
+  <RelativeTime date="2018-07-04T12:14"
+    formatter={(value, unit, suffix, timestamp) => "".concat(value, " ", unit, " ", suffix)} />
+</Playground>
diff --git a/src/core/client/ui/components/v2/RelativeTime/RelativeTime.spec.tsx b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.spec.tsx
new file mode 100644
index 000000000..fe56898d3
--- /dev/null
+++ b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.spec.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import UIContext from "../UIContext";
+import RelativeTime from "./RelativeTime";
+
+it("uses default formatter", () => {
+  const props = {
+    date: "2018-12-17T03:24:00.000Z",
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from context", () => {
+  const context: any = {
+    timeagoFormatter: () => "My Context Formatter",
+  };
+  const props: PropTypesOf<typeof RelativeTime> = {
+    date: "2018-12-17T03:24:00.000Z",
+  };
+  const tree = create(
+    <UIContext.Provider value={context}>
+      <RelativeTime {...props} />
+    </UIContext.Provider>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("uses formatter from props", () => {
+  const props = {
+    date: "2018-12-17T03:24:00.000Z",
+    formatter: () => "My Props Formatter",
+  };
+  const tree = create(<RelativeTime {...props} />).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/RelativeTime/RelativeTime.tsx b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.tsx
new file mode 100644
index 000000000..8f203cdb5
--- /dev/null
+++ b/src/core/client/ui/components/v2/RelativeTime/RelativeTime.tsx
@@ -0,0 +1,43 @@
+import cn from "classnames";
+import React, { Ref } from "react";
+import TimeAgo, { Formatter } from "react-timeago";
+
+import { UIContext } from "coral-ui/components/v2";
+import { withForwardRef, withStyles } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./RelativeTime.css";
+
+interface Props {
+  date: string;
+  live?: boolean;
+  classes: typeof styles;
+  className?: string;
+  formatter?: Formatter;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+const defaultFormatter: Formatter = (value, unit, suffix, timestamp: string) =>
+  new Date(timestamp).toISOString();
+
+const RelativeTime: React.FunctionComponent<Props> = props => {
+  const { date, classes, live, className, formatter } = props;
+  return (
+    <UIContext.Consumer>
+      {({ timeagoFormatter }) => (
+        <TimeAgo
+          date={date}
+          className={cn(classes.root, className)}
+          live={live}
+          formatter={timeagoFormatter || formatter || defaultFormatter}
+        />
+      )}
+    </UIContext.Consumer>
+  );
+};
+
+const enhanced = withForwardRef(withStyles(styles)(RelativeTime));
+export type RelativeTimeProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap b/src/core/client/ui/components/v2/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
new file mode 100644
index 000000000..4c76ba168
--- /dev/null
+++ b/src/core/client/ui/components/v2/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`uses default formatter 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  2018-12-17T03:24:00.000Z
+</time>
+`;
+
+exports[`uses formatter from context 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  My Context Formatter
+</time>
+`;
+
+exports[`uses formatter from props 1`] = `
+<time
+  className="RelativeTime-root"
+  dateTime="2018-12-17T03:24:00.000Z"
+  title="2018-12-17T03:24:00.000Z"
+>
+  My Props Formatter
+</time>
+`;
diff --git a/src/core/client/ui/components/v2/RelativeTime/index.ts b/src/core/client/ui/components/v2/RelativeTime/index.ts
new file mode 100644
index 000000000..90bd4c0ca
--- /dev/null
+++ b/src/core/client/ui/components/v2/RelativeTime/index.ts
@@ -0,0 +1 @@
+export { default, RelativeTimeProps } from "./RelativeTime";
diff --git a/src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx b/src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx
new file mode 100644
index 000000000..e2f3ace37
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/OptGroup.spec.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+import OptGroup from "./OptGroup";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof OptGroup> = {
+    label: "mamals",
+    children: <span />,
+  };
+  const renderer = TestRenderer.create(<OptGroup {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/SelectField/OptGroup.tsx b/src/core/client/ui/components/v2/SelectField/OptGroup.tsx
new file mode 100644
index 000000000..04e3d2c93
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/OptGroup.tsx
@@ -0,0 +1,12 @@
+import React, { FunctionComponent } from "react";
+
+export interface OptGroupProps {
+  label: string;
+  children?: React.ReactNode;
+}
+
+const OptionGroup: FunctionComponent<OptGroupProps> = props => {
+  return <optgroup {...props} />;
+};
+
+export default OptionGroup;
diff --git a/src/core/client/ui/components/v2/SelectField/Option.spec.tsx b/src/core/client/ui/components/v2/SelectField/Option.spec.tsx
new file mode 100644
index 000000000..7b010ebf7
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/Option.spec.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+import Option from "./Option";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Option> = {
+    disabled: false,
+    hidden: false,
+    value: "apple",
+    children: "Apple",
+  };
+  const renderer = TestRenderer.create(<Option {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/SelectField/Option.tsx b/src/core/client/ui/components/v2/SelectField/Option.tsx
new file mode 100644
index 000000000..672cb3d15
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/Option.tsx
@@ -0,0 +1,14 @@
+import React, { FunctionComponent } from "react";
+
+export interface OptionProps {
+  value?: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  children?: React.ReactNode;
+}
+
+const Option: FunctionComponent<OptionProps> = props => {
+  return <option {...props} />;
+};
+
+export default Option;
diff --git a/src/core/client/ui/components/v2/SelectField/SelectField.css b/src/core/client/ui/components/v2/SelectField/SelectField.css
new file mode 100644
index 000000000..86048ce38
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/SelectField.css
@@ -0,0 +1,63 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+
+.afterWrapper {
+  position: absolute;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  right: var(--v2-spacing-2);;
+  height: 100%;
+  user-select: none;
+  pointer-events: none;
+}
+
+.keyboardFocus:focus {
+  outline: 1px solid var(--v2-palette-input-focused-border);
+  border: 1px solid var(--v2-palette-input-focused-border);
+}
+
+.select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
+  appearance: none;
+  outline: none;
+  color: var(--v2-palette-input-value);
+  width: 100%;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #000;
+  }
+
+  &:disabled {
+    background-color: var(--v2-palette-input-disabled-background);
+  }
+
+  border-radius: var(--round-corners);
+  background-color: var(--v2-palette-input-background);
+  border: 1px solid var(--v2-palette-input-border);
+  padding: var(--v2-spacing-2) var(--v2-spacing-6) var(--v2-spacing-2) var(--v2-spacing-2);
+
+  &::-ms-expand {
+    display: none;
+  }
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.afterWrapperDisabled {
+  color: var(--v2-palette-input-value);
+}
diff --git a/src/core/client/ui/components/v2/SelectField/SelectField.mdx b/src/core/client/ui/components/v2/SelectField/SelectField.mdx
new file mode 100644
index 000000000..f0d7dd4dc
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/SelectField.mdx
@@ -0,0 +1,52 @@
+---
+name: SelectField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import SelectField from './SelectField.tsx'
+import Option from './Option.tsx'
+import OptGroup from './OptGroup.tsx'
+import HorizontalGutter from '../HorizontalGutter'
+import Container from "react-with-state-props"
+
+# SelectField
+
+## Basic Use
+<Playground>
+  <Container
+  state={{ value: "blue" }}
+  render={props => (
+    <SelectField value={props.value} onChange={e => props.setValue(e.target.value)}>
+      <Option value="red">Red Pill</Option>
+      <Option value="blue">Blue Pill</Option>
+    </SelectField>
+  )}/>
+</Playground>
+
+## Groups
+<Playground>
+  <Container
+  state={{ value: "dog" }}
+  render={props => (
+    <SelectField value={props.value} onChange={e => props.setValue(e.target.value)}>
+      <OptGroup label="mammals">
+        <Option value="dog">Dog</Option>
+        <Option value="cat">Cat</Option>
+      </OptGroup>
+      <OptGroup label="fish">
+        <Option value="salmon">Salmon</Option>
+        <Option value="tuna">Tuna</Option>
+      </OptGroup>
+    </SelectField>
+  )}/>
+</Playground>
+
+
+## Disabled
+<Playground>
+  <SelectField disabled>
+    <Option value="red">Red Pill</Option>
+    <Option value="blue">Blue Pill</Option>
+  </SelectField>
+</Playground>
diff --git a/src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx b/src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx
new file mode 100644
index 000000000..4f72525b8
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/SelectField.spec.tsx
@@ -0,0 +1,21 @@
+import { noop } from "lodash";
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+import SelectField from "./SelectField";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof SelectField> = {
+    id: "selectID",
+    autofocus: true,
+    name: "selectName",
+    value: "pie",
+    className: "customClassName",
+    fullWidth: true,
+    onChange: noop,
+    disabled: true,
+  };
+  const renderer = TestRenderer.create(<SelectField {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/SelectField/SelectField.tsx b/src/core/client/ui/components/v2/SelectField/SelectField.tsx
new file mode 100644
index 000000000..156d35f83
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/SelectField.tsx
@@ -0,0 +1,86 @@
+import cn from "classnames";
+import React, { ChangeEvent, EventHandler, FocusEvent } from "react";
+import { FunctionComponent } from "react";
+
+import Icon from "coral-ui/components/Icon";
+import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
+
+import styles from "./SelectField.css";
+
+export interface SelectFieldProps {
+  /**
+   * Value that has been selected.
+   */
+  value?: string;
+
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  /*
+   * If set renders a full width button
+   */
+  fullWidth?: boolean;
+
+  id?: string;
+  autofocus?: boolean;
+  name?: string;
+  onChange?: EventHandler<ChangeEvent<HTMLSelectElement>>;
+  disabled?: boolean;
+
+  // These handlers are passed down by the `withKeyboardFocus` HOC.
+  onFocus: EventHandler<FocusEvent<HTMLSelectElement>>;
+  onBlur: EventHandler<FocusEvent<HTMLSelectElement>>;
+  keyboardFocus: boolean;
+
+  afterWrapper?: React.ReactElement<any>;
+}
+
+const SelectField: FunctionComponent<SelectFieldProps> = props => {
+  const {
+    className,
+    classes,
+    fullWidth,
+    keyboardFocus,
+    children,
+    disabled,
+    afterWrapper,
+    ...rest
+  } = props;
+
+  const rootClassName = cn(classes.root, className, {
+    [classes.fullWidth]: fullWidth,
+  });
+
+  const selectClassName = cn(classes.select, {
+    [classes.keyboardFocus]: keyboardFocus,
+  });
+
+  const afterWrapperClassName = cn(classes.afterWrapper, {
+    [classes.afterWrapperDisabled]: disabled,
+  });
+
+  return (
+    <span className={rootClassName}>
+      <select className={selectClassName} disabled={disabled} {...rest}>
+        {children}
+      </select>
+      <span className={afterWrapperClassName} aria-hidden>
+        {afterWrapper}
+      </span>
+    </span>
+  );
+};
+
+SelectField.defaultProps = {
+  afterWrapper: <Icon>expand_more</Icon>,
+};
+
+const enhanced = withStyles(styles)(withKeyboardFocus(SelectField));
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/SelectField/__snapshots__/OptGroup.spec.tsx.snap b/src/core/client/ui/components/v2/SelectField/__snapshots__/OptGroup.spec.tsx.snap
new file mode 100644
index 000000000..122f55640
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/__snapshots__/OptGroup.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<optgroup
+  label="mamals"
+>
+  <span />
+</optgroup>
+`;
diff --git a/src/core/client/ui/components/v2/SelectField/__snapshots__/Option.spec.tsx.snap b/src/core/client/ui/components/v2/SelectField/__snapshots__/Option.spec.tsx.snap
new file mode 100644
index 000000000..ccf4e9b7f
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/__snapshots__/Option.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<option
+  disabled={false}
+  hidden={false}
+  value="apple"
+>
+  Apple
+</option>
+`;
diff --git a/src/core/client/ui/components/v2/SelectField/__snapshots__/SelectField.spec.tsx.snap b/src/core/client/ui/components/v2/SelectField/__snapshots__/SelectField.spec.tsx.snap
new file mode 100644
index 000000000..480265bdb
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/__snapshots__/SelectField.spec.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<span
+  className="SelectField-root customClassName SelectField-fullWidth"
+>
+  <select
+    autofocus={true}
+    className="SelectField-select"
+    disabled={true}
+    id="selectID"
+    name="selectName"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    value="pie"
+  />
+  <span
+    aria-hidden={true}
+    className="SelectField-afterWrapper SelectField-afterWrapperDisabled"
+  >
+    <i
+      aria-hidden="true"
+      className="Icon-root Icon-sm"
+    >
+      expand_more
+    </i>
+  </span>
+</span>
+`;
diff --git a/src/core/client/ui/components/v2/SelectField/index.ts b/src/core/client/ui/components/v2/SelectField/index.ts
new file mode 100644
index 000000000..f2f8e347f
--- /dev/null
+++ b/src/core/client/ui/components/v2/SelectField/index.ts
@@ -0,0 +1,3 @@
+export { default, default as SelectField } from "./SelectField";
+export { default as Option } from "./Option";
+export { default as OptGroup } from "./OptGroup";
diff --git a/src/core/client/ui/components/v2/Spinner/Spinner.css b/src/core/client/ui/components/v2/Spinner/Spinner.css
new file mode 100644
index 000000000..6a2739702
--- /dev/null
+++ b/src/core/client/ui/components/v2/Spinner/Spinner.css
@@ -0,0 +1,63 @@
+.spinner {
+  animation: rotator 1.4s linear infinite;
+}
+
+@keyframes rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+
+.path {
+  stroke: var(--v2-palette-primary-main);
+  stroke-dasharray: 187;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
+}
+
+@keyframes colors {
+  0% {
+    stroke: var(--v2-palette-primary-main);
+  }
+  100% {
+    stroke: var(--v2-palette-primary-light);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 187;
+  }
+  50% {
+    stroke-dashoffset: 46.75;
+    transform: rotate(135deg);
+  }
+  100% {
+    stroke-dashoffset: 187;
+    transform: rotate(450deg);
+  }
+}
+
+@keyframes fullRotator {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Hack for IE and Edge as they don't support css animations on SVG elements. */
+_:-ms-lang(x),
+.path {
+  stroke-dasharray: 160;
+}
+
+_:-ms-lang(x),
+.spinner {
+  animation: fullRotator 1.4s linear infinite;
+}
diff --git a/src/core/client/ui/components/v2/Spinner/Spinner.mdx b/src/core/client/ui/components/v2/Spinner/Spinner.mdx
new file mode 100644
index 000000000..66ef80309
--- /dev/null
+++ b/src/core/client/ui/components/v2/Spinner/Spinner.mdx
@@ -0,0 +1,15 @@
+---
+name: Spinner
+menu: UI Kit
+---
+
+import { Playground } from "docz"
+import Spinner from "./Spinner"
+
+# Spinner
+
+## Basic usage
+
+<Playground>
+  <Spinner />
+</Playground>
diff --git a/src/core/client/ui/components/v2/Spinner/Spinner.spec.tsx b/src/core/client/ui/components/v2/Spinner/Spinner.spec.tsx
new file mode 100644
index 000000000..05521bf86
--- /dev/null
+++ b/src/core/client/ui/components/v2/Spinner/Spinner.spec.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Spinner from "../Spinner";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<Spinner />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Spinner/Spinner.tsx b/src/core/client/ui/components/v2/Spinner/Spinner.tsx
new file mode 100644
index 000000000..14d8e2d77
--- /dev/null
+++ b/src/core/client/ui/components/v2/Spinner/Spinner.tsx
@@ -0,0 +1,68 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Spinner.css";
+
+type Size = "xs" | "sm" | "md";
+
+export interface SpinnerProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  size?: Size;
+}
+
+function calculateSize(size: Size): number {
+  switch (size) {
+    case "xs":
+      return 15;
+    case "sm":
+      return 30;
+    case "md":
+      return 40;
+    default:
+      throw new Error(`Unknown ${size}`);
+  }
+}
+
+const Spinner: FunctionComponent<SpinnerProps> = props => {
+  const { className, classes } = props;
+
+  const rootClassName = cn(classes.spinner, className);
+  const s = calculateSize(props.size!);
+
+  return (
+    <svg
+      className={rootClassName}
+      width={`${s}px`}
+      height={`${s}px`}
+      viewBox="0 0 66 66"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        className={styles.path}
+        fill="none"
+        strokeWidth="6"
+        strokeLinecap="round"
+        cx="33"
+        cy="33"
+        r="30"
+      />
+    </svg>
+  );
+};
+
+Spinner.defaultProps = {
+  size: "md",
+};
+
+const enhanced = withStyles(styles)(Spinner);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/core/client/ui/components/v2/Spinner/__snapshots__/Spinner.spec.tsx.snap
new file mode 100644
index 000000000..cd6f511b5
--- /dev/null
+++ b/src/core/client/ui/components/v2/Spinner/__snapshots__/Spinner.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<svg
+  className="Spinner-spinner"
+  height="40px"
+  viewBox="0 0 66 66"
+  width="40px"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle
+    className="Spinner-path"
+    cx="33"
+    cy="33"
+    fill="none"
+    r="30"
+    strokeLinecap="round"
+    strokeWidth="6"
+  />
+</svg>
+`;
diff --git a/src/core/client/ui/components/v2/Spinner/index.ts b/src/core/client/ui/components/v2/Spinner/index.ts
new file mode 100644
index 000000000..66d1096a0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Spinner/index.ts
@@ -0,0 +1 @@
+export { default } from "./Spinner";
diff --git a/src/core/client/ui/components/v2/SubBar/Navigation.css b/src/core/client/ui/components/v2/SubBar/Navigation.css
new file mode 100644
index 000000000..7491c8fc4
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/Navigation.css
@@ -0,0 +1,20 @@
+.root {
+  height: 100%;
+  padding: 0 calc(1.5 * var(--mini-unit));
+}
+
+.ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  height: 100%;
+  margin: 0;
+  align-items: flex-end;
+
+  & > * {
+    margin: 0 calc(3 * var(--mini-unit)) 0 0;
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
diff --git a/src/core/client/ui/components/v2/SubBar/Navigation.spec.tsx b/src/core/client/ui/components/v2/SubBar/Navigation.spec.tsx
new file mode 100644
index 000000000..1a3953b98
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/Navigation.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import Navigation from "./Navigation";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Navigation> = {
+    children: "children",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Navigation {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/SubBar/Navigation.tsx b/src/core/client/ui/components/v2/SubBar/Navigation.tsx
new file mode 100644
index 000000000..8a19567b4
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/Navigation.tsx
@@ -0,0 +1,24 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Navigation.css";
+
+interface Props {
+  className?: string;
+  classes: typeof styles;
+  children?: React.ReactNode;
+}
+
+const Navigation: FunctionComponent<Props> = ({
+  children,
+  className,
+  classes,
+}) => (
+  <nav className={cn(classes.root, className)}>
+    <ul className={classes.ul}>{children}</ul>
+  </nav>
+);
+
+export default withStyles(styles)(Navigation);
diff --git a/src/core/client/ui/components/v2/SubBar/NavigationItem.css b/src/core/client/ui/components/v2/SubBar/NavigationItem.css
new file mode 100644
index 000000000..da37e281f
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/NavigationItem.css
@@ -0,0 +1,36 @@
+$navigation-item-selected: var(--v2-colors-teal-600);
+$navigation-item-default: var(--v2-colors-mono-100);
+
+.root {
+  height: 100%;
+}
+
+.anchor {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  font-size: var(--font-size-2);
+  text-transform: uppercase;
+  color: $navigation-item-default;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  box-sizing: border-box;
+  padding: var(--v2-spacing-3) 0;
+  border-bottom: 3px solid transparent;
+  &:hover {
+    cursor: pointer;
+  }
+  & > * {
+    margin: 0 calc(0.5 * var(--mini-unit)) 0 0;
+  }
+  & > *:last-child {
+    margin: 0;
+  }
+}
+
+.active {
+  font-weight: var(--v2-font-weight-primary-bold);
+  border-bottom: 3px solid $navigation-item-selected;
+  color: $navigation-item-selected;
+}
diff --git a/src/core/client/ui/components/v2/SubBar/NavigationItem.spec.tsx b/src/core/client/ui/components/v2/SubBar/NavigationItem.spec.tsx
new file mode 100644
index 000000000..1f7e58c22
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/NavigationItem.spec.tsx
@@ -0,0 +1,20 @@
+import { noop } from "lodash";
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import NavigationItem from "./NavigationItem";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof NavigationItem> = {
+    href: "/moderate",
+    children: "link",
+    onClick: noop,
+    active: true,
+    className: "custom",
+  };
+  const renderer = createRenderer();
+  renderer.render(<NavigationItem {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/SubBar/NavigationItem.tsx b/src/core/client/ui/components/v2/SubBar/NavigationItem.tsx
new file mode 100644
index 000000000..3f0d3ab06
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/NavigationItem.tsx
@@ -0,0 +1,41 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./NavigationItem.css";
+
+interface Props {
+  children: React.ReactNode;
+  href?: string;
+  className?: string;
+  active?: boolean;
+  onClick?: React.EventHandler<React.MouseEvent>;
+  classes: typeof styles;
+}
+
+const NavigationItem: FunctionComponent<Props> = ({
+  children,
+  href,
+  className,
+  active,
+  onClick,
+  classes,
+  ...rest
+}) => {
+  return (
+    <li {...rest} className={cn(className, classes.root)}>
+      <a
+        className={cn(className, classes.anchor, {
+          [classes.active]: active,
+        })}
+        href={href}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    </li>
+  );
+};
+
+export default withStyles(styles)(NavigationItem);
diff --git a/src/core/client/ui/components/v2/SubBar/SubBar.css b/src/core/client/ui/components/v2/SubBar/SubBar.css
new file mode 100644
index 000000000..012b6db98
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/SubBar.css
@@ -0,0 +1,22 @@
+$sub-bar-background: var(--v2-colors-pure-white);
+$sub-bar-border: var(--v2-colors-grey-300);
+
+.root {
+  background-color: $sub-bar-background;
+  border-bottom: 1px solid $sub-bar-border;
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.gutterBegin {
+  padding-left: calc(2 * var(--mini-unit));
+}
+.gutterEnd {
+  padding-right: calc(2 * var(--mini-unit));
+}
diff --git a/src/core/client/ui/components/v2/SubBar/SubBar.mdx b/src/core/client/ui/components/v2/SubBar/SubBar.mdx
new file mode 100644
index 000000000..4db8fc439
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/SubBar.mdx
@@ -0,0 +1,40 @@
+---
+name: SubBar
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+import { SubBar, Navigation, NavigationItem, Divider } from "./";
+import Icon from "../Icon";
+import Counter from "../Counter";
+
+# SubBar
+
+## Basic usage
+
+<Playground>
+  <SubBar>
+    <Navigation>
+      <NavigationItem active>
+        <Icon>flag</Icon>
+        <span>Reported</span>
+        <Counter color="primary">20</Counter>
+      </NavigationItem>
+      <NavigationItem>
+        <Icon>access_time</Icon>
+        <span>Pending</span>
+        <Counter>100</Counter>
+      </NavigationItem>
+      <NavigationItem>
+        <Icon>forum</Icon>
+        <span>Unmoderated</span>
+        <Counter>2.3k</Counter>
+      </NavigationItem>
+      <NavigationItem>
+        <Icon>cancel</Icon>
+        <span>Rejected</span>
+      </NavigationItem>
+    </Navigation>
+  </SubBar>
+</Playground>
diff --git a/src/core/client/ui/components/v2/SubBar/SubBar.spec.tsx b/src/core/client/ui/components/v2/SubBar/SubBar.spec.tsx
new file mode 100644
index 000000000..f5f348648
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/SubBar.spec.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import SubBar from "./SubBar";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof SubBar> = {
+    children: "child",
+    gutterBegin: true,
+    gutterEnd: true,
+    className: "custom",
+  };
+  const renderer = createRenderer();
+  renderer.render(<SubBar {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/SubBar/SubBar.tsx b/src/core/client/ui/components/v2/SubBar/SubBar.tsx
new file mode 100644
index 000000000..6576cac8b
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/SubBar.tsx
@@ -0,0 +1,44 @@
+import cn from "classnames";
+import React, { FunctionComponent, HTMLAttributes } from "react";
+
+import { Flex } from "coral-ui/components";
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./SubBar.css";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  className?: string;
+  gutterBegin?: boolean;
+  gutterEnd?: boolean;
+  classes: typeof styles;
+}
+
+const SubBar: FunctionComponent<Props> = ({
+  gutterBegin,
+  gutterEnd,
+  className,
+  children,
+  classes,
+  ...rest
+}) => {
+  return (
+    <div
+      {...rest}
+      className={cn(classes.root, className, {
+        [classes.gutterBegin]: gutterBegin,
+        [classes.gutterEnd]: gutterEnd,
+      })}
+    >
+      <Flex
+        className={classes.container}
+        justifyContent="center"
+        alignItems="center"
+      >
+        {children}
+      </Flex>
+    </div>
+  );
+};
+
+export default withStyles(styles)(SubBar);
diff --git a/src/core/client/ui/components/v2/SubBar/__snapshots__/Navigation.spec.tsx.snap b/src/core/client/ui/components/v2/SubBar/__snapshots__/Navigation.spec.tsx.snap
new file mode 100644
index 000000000..54f9bae45
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/__snapshots__/Navigation.spec.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Navigation
+  classes={
+    Object {
+      "root": "Navigation-root",
+      "ul": "Navigation-ul",
+    }
+  }
+>
+  children
+</Navigation>
+`;
diff --git a/src/core/client/ui/components/v2/SubBar/__snapshots__/NavigationItem.spec.tsx.snap b/src/core/client/ui/components/v2/SubBar/__snapshots__/NavigationItem.spec.tsx.snap
new file mode 100644
index 000000000..7ad60ce3d
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/__snapshots__/NavigationItem.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<NavigationItem
+  active={true}
+  className="custom"
+  classes={
+    Object {
+      "active": "NavigationItem-active",
+      "anchor": "NavigationItem-anchor",
+      "root": "NavigationItem-root",
+    }
+  }
+  href="/moderate"
+  onClick={[Function]}
+>
+  link
+</NavigationItem>
+`;
diff --git a/src/core/client/ui/components/v2/SubBar/__snapshots__/SubBar.spec.tsx.snap b/src/core/client/ui/components/v2/SubBar/__snapshots__/SubBar.spec.tsx.snap
new file mode 100644
index 000000000..22bc584a3
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/__snapshots__/SubBar.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<SubBar
+  className="custom"
+  classes={
+    Object {
+      "container": "SubBar-container",
+      "gutterBegin": "SubBar-gutterBegin",
+      "gutterEnd": "SubBar-gutterEnd",
+      "root": "SubBar-root",
+    }
+  }
+  gutterBegin={true}
+  gutterEnd={true}
+>
+  child
+</SubBar>
+`;
diff --git a/src/core/client/ui/components/v2/SubBar/index.ts b/src/core/client/ui/components/v2/SubBar/index.ts
new file mode 100644
index 000000000..7f912c793
--- /dev/null
+++ b/src/core/client/ui/components/v2/SubBar/index.ts
@@ -0,0 +1,3 @@
+export { default as SubBar } from "./SubBar";
+export { default as Navigation } from "./Navigation";
+export { default as NavigationItem } from "./NavigationItem";
diff --git a/src/core/client/ui/components/v2/Table/Table.css b/src/core/client/ui/components/v2/Table/Table.css
new file mode 100644
index 000000000..60ab1c748
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/Table.css
@@ -0,0 +1,8 @@
+.root {
+  border-collapse: collapse;
+  box-sizing: border-box;
+}
+
+.fullWidth {
+  width: 100%;
+}
diff --git a/src/core/client/ui/components/v2/Table/Table.mdx b/src/core/client/ui/components/v2/Table/Table.mdx
new file mode 100644
index 000000000..795190272
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/Table.mdx
@@ -0,0 +1,36 @@
+---
+name: Table
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+import { Table, TableBody, TableHead, TableRow, TableCell } from "./";
+
+# Table
+
+## Basic usage
+
+<Playground>
+  <Table fullWidth>
+    <TableHead>
+      <TableRow>
+        <TableCell>Username</TableCell>
+        <TableCell>Email Address</TableCell>
+        <TableCell>Member Since</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>ButFirstCoffee</TableCell>
+        <TableCell>coffee@mail.com</TableCell>
+        <TableCell>01/27/2019</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>SneaksOnSneaks</TableCell>
+        <TableCell>hisairness@mail.com</TableCell>
+        <TableCell>04/27/2019</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Table/Table.spec.tsx b/src/core/client/ui/components/v2/Table/Table.spec.tsx
new file mode 100644
index 000000000..3f3c7dae7
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/Table.spec.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { Table, TableBody, TableCell, TableHead, TableRow } from ".";
+
+it("renders correctly", () => {
+  const renderer = createRenderer();
+  renderer.render(
+    <Table fullWidth>
+      <TableHead>
+        <TableRow>
+          <TableCell>Username</TableCell>
+          <TableCell>Email Address</TableCell>
+          <TableCell>Member Since</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>ButFirstCoffee</TableCell>
+          <TableCell>coffee@mail.com</TableCell>
+          <TableCell>01/27/2019</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>SneaksOnSneaks</TableCell>
+          <TableCell>hisairness@mail.com</TableCell>
+          <TableCell>04/27/2019</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Table/Table.tsx b/src/core/client/ui/components/v2/Table/Table.tsx
new file mode 100644
index 000000000..16ba68cf9
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/Table.tsx
@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Table.css";
+
+interface Props extends React.HTMLAttributes<HTMLTableElement> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  fullWidth?: boolean;
+}
+
+const Table: FunctionComponent<Props> = ({
+  classes,
+  className,
+  fullWidth,
+  children,
+  ...rest
+}) => {
+  const rootClassName = cn(classes.root, className, {
+    [classes.fullWidth]: fullWidth,
+  });
+  return (
+    <table className={rootClassName} {...rest}>
+      {children}
+    </table>
+  );
+};
+
+const enhanced = withStyles(styles)(Table);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Table/TableBody.css b/src/core/client/ui/components/v2/Table/TableBody.css
new file mode 100644
index 000000000..c3a2af639
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableBody.css
@@ -0,0 +1,2 @@
+.root {
+}
diff --git a/src/core/client/ui/components/v2/Table/TableBody.tsx b/src/core/client/ui/components/v2/Table/TableBody.tsx
new file mode 100644
index 000000000..eec6528b8
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableBody.tsx
@@ -0,0 +1,31 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./TableBody.css";
+
+interface Props extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const TableBody: FunctionComponent<Props> = ({
+  classes,
+  className,
+  children,
+  ...rest
+}) => {
+  const rootClassName = cn(classes.root, className);
+  return (
+    <tbody className={rootClassName} {...rest}>
+      {children}
+    </tbody>
+  );
+};
+
+const enhanced = withStyles(styles)(TableBody);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Table/TableCell.css b/src/core/client/ui/components/v2/Table/TableCell.css
new file mode 100644
index 000000000..bd093e7db
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableCell.css
@@ -0,0 +1,32 @@
+.root {
+  /* acts like min-width in a cell */
+  height: calc(4.5 * var(--mini-unit));
+  text-align: left;
+  padding: var(--mini-unit) calc(1.5 * var(--mini-unit));
+  box-sizing: border-box;
+}
+
+.header {
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-reset);
+  font-weight: var(--v2-font-weight-primary-bold);
+  font-size: var(--v2-font-size-2);
+  color: var(--v2-palette-table-header-text);
+  padding: var(--v2-spacing-3);
+}
+
+.body {
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-title);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  color: var(--v2-palette-table-body-text);
+}
+
+.alignCenter {
+  text-align: center;
+}
+
+.alignEnd {
+  text-align: right;
+}
diff --git a/src/core/client/ui/components/v2/Table/TableCell.tsx b/src/core/client/ui/components/v2/Table/TableCell.tsx
new file mode 100644
index 000000000..4ccb29dff
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableCell.tsx
@@ -0,0 +1,45 @@
+import cn from "classnames";
+import React, { FunctionComponent, useContext } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+import { Omit } from "coral-ui/types";
+
+import { TableHeadContext } from "./TableHead";
+
+import styles from "./TableCell.css";
+
+interface Props
+  extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+
+  align?: "begin" | "center" | "end";
+}
+
+const TableCell: FunctionComponent<Props> = ({
+  align,
+  classes,
+  className,
+  children,
+  ...rest
+}) => {
+  const inTableHead = useContext(TableHeadContext);
+  const rootClassName = cn(classes.root, className, {
+    [classes.header]: inTableHead,
+    [classes.body]: !inTableHead,
+    [classes.alignCenter]: align === "center",
+    [classes.alignEnd]: align === "end",
+  });
+  const Component = inTableHead ? "th" : "td";
+  return (
+    <Component className={rootClassName} {...rest}>
+      {children}
+    </Component>
+  );
+};
+
+const enhanced = withStyles(styles)(TableCell);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Table/TableHead.css b/src/core/client/ui/components/v2/Table/TableHead.css
new file mode 100644
index 000000000..dadba5a5d
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableHead.css
@@ -0,0 +1,4 @@
+.root {
+  background: var(--v2-palette-table-header-background);
+  box-sizing: border-box;
+}
diff --git a/src/core/client/ui/components/v2/Table/TableHead.tsx b/src/core/client/ui/components/v2/Table/TableHead.tsx
new file mode 100644
index 000000000..84bf7eb1b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableHead.tsx
@@ -0,0 +1,35 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./TableHead.css";
+
+export const TableHeadContext = React.createContext<boolean>(false);
+
+interface Props extends React.HTMLAttributes<HTMLTableSectionElement> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const TableHead: FunctionComponent<Props> = ({
+  classes,
+  className,
+  children,
+  ...rest
+}) => {
+  const rootClassName = cn(classes.root, className);
+  return (
+    <TableHeadContext.Provider value>
+      <thead className={rootClassName} {...rest}>
+        {children}
+      </thead>
+    </TableHeadContext.Provider>
+  );
+};
+
+const enhanced = withStyles(styles)(TableHead);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Table/TableRow.css b/src/core/client/ui/components/v2/Table/TableRow.css
new file mode 100644
index 000000000..e064a3e14
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableRow.css
@@ -0,0 +1,11 @@
+.root {
+  box-sizing: border-box;
+}
+
+.body:nth-child(even) {
+  background-color: var(--v2-palette-table-highlight);
+}
+
+.body:hover {
+  background-color: var(--v2-palette-table-hover);
+}
diff --git a/src/core/client/ui/components/v2/Table/TableRow.tsx b/src/core/client/ui/components/v2/Table/TableRow.tsx
new file mode 100644
index 000000000..861589fc9
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/TableRow.tsx
@@ -0,0 +1,36 @@
+import cn from "classnames";
+import React, { FunctionComponent, useContext } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import { TableHeadContext } from "./TableHead";
+
+import styles from "./TableRow.css";
+
+interface Props extends React.HTMLAttributes<HTMLTableRowElement> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const TableRow: FunctionComponent<Props> = ({
+  classes,
+  className,
+  children,
+  ...rest
+}) => {
+  const inTableHead = useContext(TableHeadContext);
+  const rootClassName = cn(classes.root, className, {
+    [classes.body]: !inTableHead,
+  });
+  return (
+    <tr className={rootClassName} {...rest}>
+      {children}
+    </tr>
+  );
+};
+
+const enhanced = withStyles(styles)(TableRow);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Table/__snapshots__/Table.spec.tsx.snap b/src/core/client/ui/components/v2/Table/__snapshots__/Table.spec.tsx.snap
new file mode 100644
index 000000000..cc7452766
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/__snapshots__/Table.spec.tsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Table
+  classes={
+    Object {
+      "fullWidth": "Table-fullWidth",
+      "root": "Table-root",
+    }
+  }
+  fullWidth={true}
+>
+  <withPropsOnChange(TableHead)>
+    <withPropsOnChange(TableRow)>
+      <withPropsOnChange(TableCell)>
+        Username
+      </withPropsOnChange(TableCell)>
+      <withPropsOnChange(TableCell)>
+        Email Address
+      </withPropsOnChange(TableCell)>
+      <withPropsOnChange(TableCell)>
+        Member Since
+      </withPropsOnChange(TableCell)>
+    </withPropsOnChange(TableRow)>
+  </withPropsOnChange(TableHead)>
+  <withPropsOnChange(TableBody)>
+    <withPropsOnChange(TableRow)>
+      <withPropsOnChange(TableCell)>
+        ButFirstCoffee
+      </withPropsOnChange(TableCell)>
+      <withPropsOnChange(TableCell)>
+        coffee@mail.com
+      </withPropsOnChange(TableCell)>
+      <withPropsOnChange(TableCell)>
+        01/27/2019
+      </withPropsOnChange(TableCell)>
+    </withPropsOnChange(TableRow)>
+    <withPropsOnChange(TableRow)>
+      <withPropsOnChange(TableCell)>
+        SneaksOnSneaks
+      </withPropsOnChange(TableCell)>
+      <withPropsOnChange(TableCell)>
+        hisairness@mail.com
+      </withPropsOnChange(TableCell)>
+      <withPropsOnChange(TableCell)>
+        04/27/2019
+      </withPropsOnChange(TableCell)>
+    </withPropsOnChange(TableRow)>
+  </withPropsOnChange(TableBody)>
+</Table>
+`;
diff --git a/src/core/client/ui/components/v2/Table/index.ts b/src/core/client/ui/components/v2/Table/index.ts
new file mode 100644
index 000000000..627b960e7
--- /dev/null
+++ b/src/core/client/ui/components/v2/Table/index.ts
@@ -0,0 +1,5 @@
+export { default as Table } from "./Table";
+export { default as TableBody } from "./TableBody";
+export { default as TableHead } from "./TableHead";
+export { default as TableRow } from "./TableRow";
+export { default as TableCell } from "./TableCell";
diff --git a/src/core/client/ui/components/v2/Tabs/Tab.css b/src/core/client/ui/components/v2/Tabs/Tab.css
new file mode 100644
index 000000000..a8965eba5
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/Tab.css
@@ -0,0 +1,72 @@
+$tab-selected: var(--v2-colors-teal-600);
+$tab-default: var(--v2-colors-mono-100);
+
+.root {
+  display: inline-block;
+  list-style: none;
+  margin-right: var(--v2-spacing-3);
+  margin-bottom: -1px;
+}
+
+.button {
+  box-sizing: border-box;
+  border-bottom: 0;
+  list-style: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.root:first-child .primary {
+  border-top-left-radius: var(--v2-round-corners);
+}
+
+.root:last-child .primary {
+  border-top-right-radius: var(--v2-round-corners);
+}
+
+.default {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  color: $tab-default;
+  padding-bottom: calc(var(--v2-spacing-1) + 2px);
+
+  &.active {
+    color: $tab-selected;
+    font-weight: var(--v2-font-weight-primary-bold);
+    border-bottom: 2px solid $tab-selected;
+    padding-bottom: var(--v2-spacing-1);
+  }
+}
+
+.primary {
+  position: relative;
+  background: var(--palette-grey-lightest);
+  color: var(--palette-grey-main);
+  border: 1px solid var(--palette-grey-lighter);
+  padding: calc(0.5 * var(--mini-unit)) calc(var(--mini-unit) * 2);
+  &.active {
+    background-color: var(--palette-common-white);
+    color: var(--palette-common-black);
+    border-bottom: 0;
+    border-top-width: calc(0.5 * var(--mini-unit));
+    border-top-color: var(--palette-primary-main);
+    border-radius: 0;
+    z-index: 10;
+  }
+}
+
+.secondary {
+  font-family: var(--font-family-sans-serif);
+  color: $tab-default;
+  padding-bottom: var(--v2-spacing-2);
+  text-transform: uppercase;
+
+  &.active {
+    color: $tab-selected;
+    font-weight: var(--font-weight-medium);
+    border-bottom: 3px solid $tab-selected;
+    padding-bottom: calc(var(--v2-spacing-2) - 3px);
+  }
+}
diff --git a/src/core/client/ui/components/v2/Tabs/Tab.spec.tsx b/src/core/client/ui/components/v2/Tabs/Tab.spec.tsx
new file mode 100644
index 000000000..b2ad3ccc3
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/Tab.spec.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Tab from "./Tab";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<Tab tabID="three">Three</Tab>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Tabs/Tab.tsx b/src/core/client/ui/components/v2/Tabs/Tab.tsx
new file mode 100644
index 000000000..fc12ce123
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/Tab.tsx
@@ -0,0 +1,80 @@
+import cn from "classnames";
+import React from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import BaseButton from "coral-ui/components/v2/BaseButton";
+
+import styles from "./Tab.css";
+
+export interface TabProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * The id/name of the tab
+   */
+  tabID: string;
+  /**
+   * Active status
+   */
+  active?: boolean;
+  /**
+   * Style variant
+   */
+  variant?: "primary" | "secondary" | "default";
+  /**
+   * Action taken on tab click
+   */
+  onTabClick?: (tabID: string) => void;
+}
+
+class Tab extends React.Component<TabProps> {
+  public handleTabClick = () => {
+    if (this.props.onTabClick) {
+      this.props.onTabClick(this.props.tabID);
+    }
+  };
+
+  public render() {
+    const { className, classes, children, tabID, active, variant } = this.props;
+
+    const buttonClassName = cn(
+      classes.button,
+      {
+        [classes.primary]: variant === "primary",
+        [classes.secondary]: variant === "secondary",
+        [classes.default]: variant === "default",
+        [classes.active]: active,
+      },
+      className
+    );
+
+    return (
+      <li
+        className={styles.root}
+        key={tabID}
+        id={`tab-${tabID}`}
+        role="presentation"
+      >
+        <BaseButton
+          className={buttonClassName}
+          aria-controls={`tabPane-${tabID}`}
+          role="tab"
+          aria-selected={active}
+          onClick={this.handleTabClick}
+        >
+          {children}
+        </BaseButton>
+      </li>
+    );
+  }
+}
+
+const enhanced = withStyles(styles)(Tab);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.css b/src/core/client/ui/components/v2/Tabs/TabBar.css
new file mode 100644
index 000000000..1c1d2e461
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/TabBar.css
@@ -0,0 +1,17 @@
+.root {
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+.default {
+  border-bottom: 1px solid var(--v2-palette-tab-divider);
+}
+
+.primary {
+  border-bottom: 1px solid var(--palette-grey-lighter);
+}
+
+.secondary {
+  border-bottom: 1px solid var(--palette-divider);
+}
diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.spec.tsx b/src/core/client/ui/components/v2/Tabs/TabBar.spec.tsx
new file mode 100644
index 000000000..f0d3422aa
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/TabBar.spec.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import Tab from "./Tab";
+import TabBar from "./TabBar";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <TabBar activeTab="one">
+      <Tab tabID="one">One</Tab>
+      <Tab tabID="two">Two</Tab>
+      <Tab tabID="three">Three</Tab>
+    </TabBar>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("sets initial tab as active", () => {
+  const renderer = TestRenderer.create(
+    <TabBar activeTab="one">
+      <Tab tabID="one">One</Tab>
+      <Tab tabID="two">Two</Tab>
+      <Tab tabID="three">Three</Tab>
+    </TabBar>
+  );
+
+  const testInstance = renderer.root;
+  expect(testInstance.findByType(TabBar).props.activeTab).toBe("one");
+  const tabs = testInstance.findAllByType(Tab);
+  expect(tabs.length).toBe(3);
+  expect(tabs[0].props.active).toBe(true);
+  expect(tabs[1].props.active).toBe(false);
+  expect(tabs[2].props.active).toBe(false);
+});
diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.tsx b/src/core/client/ui/components/v2/Tabs/TabBar.tsx
new file mode 100644
index 000000000..7f8a50ab3
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/TabBar.tsx
@@ -0,0 +1,83 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./TabBar.css";
+
+export interface TabBarProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Style variant
+   */
+  variant?: "primary" | "secondary" | "default";
+  /**
+   * Active tab id/name
+   */
+  activeTab?: string;
+  /**
+   * Default active tab id/name
+   */
+  defaultActiveTab?: string;
+  /**
+   * Action taken on tab click
+   */
+  onTabClick?: (tabID: string) => void;
+}
+
+const TabBar: FunctionComponent<TabBarProps> = props => {
+  const {
+    className,
+    classes,
+    children,
+    onTabClick,
+    activeTab,
+    variant,
+    defaultActiveTab,
+  } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    [
+      {
+        [classes.primary]: variant === "primary",
+        [classes.secondary]: variant === "secondary",
+        [classes.default]: variant === "default",
+      },
+    ],
+    className
+  );
+
+  const tabs = React.Children.toArray(children).map(
+    (child: React.ReactElement<any>, index: number) =>
+      React.cloneElement(child, {
+        tabID: child.props.tabID ? child.props.tabID : index,
+        active:
+          defaultActiveTab && !activeTab
+            ? child.props.tabID === defaultActiveTab
+            : child.props.tabID === activeTab,
+        variant,
+        onTabClick,
+      })
+  );
+
+  return (
+    <ul className={rootClassName} role="tablist">
+      {tabs}
+    </ul>
+  );
+};
+
+TabBar.defaultProps = {
+  variant: "default",
+};
+
+const enhanced = withStyles(styles)(TabBar);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Tabs/TabContent.spec.tsx b/src/core/client/ui/components/v2/Tabs/TabContent.spec.tsx
new file mode 100644
index 000000000..050c82bde
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/TabContent.spec.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import TabContent from "./TabContent";
+import TabPane from "./TabPane";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(
+    <TabContent activeTab="one">
+      <TabPane tabID="one">Hola One</TabPane>
+      <TabPane tabID="two">Hola Two</TabPane>
+      <TabPane tabID="three">Hola Three</TabPane>
+    </TabContent>
+  );
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("sets initial tab as active, renders only one", () => {
+  const renderer = TestRenderer.create(
+    <TabContent activeTab="one">
+      <TabPane tabID="one">Hola One</TabPane>
+      <TabPane tabID="two">Hola Two</TabPane>
+      <TabPane tabID="three">Hola Three</TabPane>
+    </TabContent>
+  );
+
+  const testInstance = renderer.root;
+  expect(testInstance.findByType(TabContent).props.activeTab).toBe("one");
+  const panes = testInstance.findAllByType(TabPane);
+  expect(panes.length).toBe(1);
+});
diff --git a/src/core/client/ui/components/v2/Tabs/TabContent.tsx b/src/core/client/ui/components/v2/Tabs/TabContent.tsx
new file mode 100644
index 000000000..f419a0da4
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/TabContent.tsx
@@ -0,0 +1,33 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+export interface TabContentProps {
+  /**
+   * Active tab id/name
+   */
+  activeTab?: string;
+  /**
+   * classNames
+   */
+  className?: string;
+}
+
+const TabContent: FunctionComponent<TabContentProps> = props => {
+  const { children, activeTab, className } = props;
+  return (
+    <>
+      {React.Children.toArray(children)
+        .filter(
+          (child: React.ReactElement<any>) => child.props.tabID === activeTab
+        )
+        .map((child: React.ReactElement<any>, i) =>
+          React.cloneElement(child, {
+            tabID: child.props.tabID ? child.props.tabID : i,
+            className: cn(className, child.props.className),
+          })
+        )}
+    </>
+  );
+};
+
+export default TabContent;
diff --git a/src/core/client/ui/components/v2/Tabs/TabPane.spec.tsx b/src/core/client/ui/components/v2/Tabs/TabPane.spec.tsx
new file mode 100644
index 000000000..746fc4802
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/TabPane.spec.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import TabPane from "./TabPane";
+
+it("renders correctly", () => {
+  const renderer = TestRenderer.create(<TabPane tabID="three">Three</TabPane>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Tabs/TabPane.tsx b/src/core/client/ui/components/v2/Tabs/TabPane.tsx
new file mode 100644
index 000000000..757d757e9
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/TabPane.tsx
@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from "react";
+
+export interface TabBarProps {
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Name of the tab
+   */
+  tabID: string;
+}
+
+const TabPane: FunctionComponent<TabBarProps> = props => {
+  const { className, children, tabID, ...rest } = props;
+  return (
+    <section
+      {...rest}
+      className={className}
+      key={tabID}
+      id={`tabPane-${tabID}`}
+      role="tabpanel"
+      aria-labelledby={`tab-${tabID}`}
+    >
+      {children}
+    </section>
+  );
+};
+
+export default TabPane;
diff --git a/src/core/client/ui/components/v2/Tabs/__snapshots__/Tab.spec.tsx.snap b/src/core/client/ui/components/v2/Tabs/__snapshots__/Tab.spec.tsx.snap
new file mode 100644
index 000000000..44c943182
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/__snapshots__/Tab.spec.tsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<li
+  className="Tab-root"
+  id="tab-three"
+  role="presentation"
+>
+  <button
+    aria-controls="tabPane-three"
+    className="BaseButton-root Tab-button"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    onTouchEnd={[Function]}
+    role="tab"
+    type="button"
+  >
+    Three
+  </button>
+</li>
+`;
diff --git a/src/core/client/ui/components/v2/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/v2/Tabs/__snapshots__/TabBar.spec.tsx.snap
new file mode 100644
index 000000000..2963afb3d
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/__snapshots__/TabBar.spec.tsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ul
+  className="TabBar-root TabBar-default"
+  role="tablist"
+>
+  <li
+    className="Tab-root"
+    id="tab-one"
+    role="presentation"
+  >
+    <button
+      aria-controls="tabPane-one"
+      aria-selected={true}
+      className="BaseButton-root Tab-button Tab-default Tab-active"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      role="tab"
+      type="button"
+    >
+      One
+    </button>
+  </li>
+  <li
+    className="Tab-root"
+    id="tab-two"
+    role="presentation"
+  >
+    <button
+      aria-controls="tabPane-two"
+      aria-selected={false}
+      className="BaseButton-root Tab-button Tab-default"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      role="tab"
+      type="button"
+    >
+      Two
+    </button>
+  </li>
+  <li
+    className="Tab-root"
+    id="tab-three"
+    role="presentation"
+  >
+    <button
+      aria-controls="tabPane-three"
+      aria-selected={false}
+      className="BaseButton-root Tab-button Tab-default"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseOut={[Function]}
+      onMouseOver={[Function]}
+      onTouchEnd={[Function]}
+      role="tab"
+      type="button"
+    >
+      Three
+    </button>
+  </li>
+</ul>
+`;
diff --git a/src/core/client/ui/components/v2/Tabs/__snapshots__/TabContent.spec.tsx.snap b/src/core/client/ui/components/v2/Tabs/__snapshots__/TabContent.spec.tsx.snap
new file mode 100644
index 000000000..0069bd989
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/__snapshots__/TabContent.spec.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  aria-labelledby="tab-one"
+  className=""
+  id="tabPane-one"
+  role="tabpanel"
+>
+  Hola One
+</section>
+`;
diff --git a/src/core/client/ui/components/v2/Tabs/__snapshots__/TabPane.spec.tsx.snap b/src/core/client/ui/components/v2/Tabs/__snapshots__/TabPane.spec.tsx.snap
new file mode 100644
index 000000000..ad884add2
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/__snapshots__/TabPane.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  aria-labelledby="tab-three"
+  id="tabPane-three"
+  role="tabpanel"
+>
+  Three
+</section>
+`;
diff --git a/src/core/client/ui/components/v2/Tabs/index.ts b/src/core/client/ui/components/v2/Tabs/index.ts
new file mode 100644
index 000000000..f8818e9ea
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as TabBar } from "./TabBar";
+export { default as Tab } from "./Tab";
+export { default as TabPane } from "./TabPane";
+export { default as TabContent } from "./TabContent";
diff --git a/src/core/client/ui/components/v2/Tabs/tabs.mdx b/src/core/client/ui/components/v2/Tabs/tabs.mdx
new file mode 100644
index 000000000..f77c503fd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tabs/tabs.mdx
@@ -0,0 +1,63 @@
+---
+name: Tabs
+menu: UI Kit
+---
+
+# Tabs
+
+### Examples
+
+import { Playground } from "docz";
+import { Flex, TabBar, Tab, TabContent, TabPane } from "./index";
+import Container from "react-with-state-props";
+
+## Primary Tabs
+
+<Playground>
+  <Container
+    state={{ activeId: "two" }}
+    render={props => (
+      <div>
+        <TabBar
+          activeTab={props.activeId}
+          onTabClick={id => props.setActiveId(id)}
+        >
+          <Tab tabID="one">One</Tab>
+          <Tab tabID="two">Two</Tab>
+          <Tab tabID="three">Three</Tab>
+        </TabBar>
+        <TabContent activeTab={props.activeId}>
+          <TabPane tabID="one">Hola One</TabPane>
+          <TabPane tabID="two">Hola Two</TabPane>
+          <TabPane tabID="three">Hola Three</TabPane>
+        </TabContent>
+      </div>
+    )}
+  />
+</Playground>
+
+## Secondary Tabs
+
+<Playground>
+  <Container
+    state={{ activeId: "two" }}
+    render={props => (
+      <div>
+        <TabBar
+          variant="secondary"
+          activeTab={props.activeId}
+          onTabClick={id => props.setActiveId(id)}
+        >
+          <Tab tabID="one">One</Tab>
+          <Tab tabID="two">Two</Tab>
+          <Tab tabID="three">Three</Tab>
+        </TabBar>
+        <TabContent activeTab={props.activeId}>
+          <TabPane tabID="one">Hola One</TabPane>
+          <TabPane tabID="two">Hola Two</TabPane>
+          <TabPane tabID="three">Hola Three</TabPane>
+        </TabContent>
+      </div>
+    )}
+  />
+</Playground>
diff --git a/src/core/client/ui/components/v2/Tag/Tag.css b/src/core/client/ui/components/v2/Tag/Tag.css
new file mode 100644
index 000000000..b60b563c2
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tag/Tag.css
@@ -0,0 +1,64 @@
+$tag-color-primary: var(--v2-palette-primary-main);
+$tag-color-primary-light: var(--v2-palette-primary-lightest);
+$tag-color-grey: var(--v2-palette-grey-main);
+$tag-color-grey-light: var(--v2-palette-grey-light);
+$tag-color-error: var(--v2-palette-error-main);
+$tag-color-error-light: var(--v2-palette-error-lightest);
+$tag-color-dark: var(--v2-palette-primary-darkest);
+$tag-color-dark-light: var(--v2-palette-primary-lightest);
+$tag-text-color: var(--v2-palette-text-light);
+$tag-pill-bg: var(--v2-colors-pure-white);
+
+.root {
+  font-size: var(--v2-font-size-2);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-semi-bold);
+  color: $tag-text-color;
+  line-height: var(--v2-line-height-reset);
+  padding: var(--v2-spacing-1);
+  white-space: nowrap;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+.colorPrimary {
+  background-color: $tag-color-primary;
+}
+
+.colorGrey {
+  background-color: $tag-color-grey;
+}
+
+.colorError {
+  background-color: $tag-color-error;
+}
+
+.colorDarkest {
+  background-color: $tag-color-dark;
+}
+
+.variantPill {
+  border-radius: 20px;
+  padding: 2px 10px;
+  background-color: $tag-pill-bg;
+  &.colorGrey {
+    border: 1px solid $tag-color-grey;
+    color: $tag-color-grey;
+  }
+  &.colorPrimary {
+    border: 1px solid $tag-color-primary;
+    color: $tag-color-primary;
+  }
+  &.colorError {
+    border: 1px solid $tag-color-error;
+    color: $tag-color-error;
+  }
+  &.colorDarkest {
+    border: 1px solid $tag-color-dark;
+    color: $tag-color-dark;
+  }
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
diff --git a/src/core/client/ui/components/v2/Tag/Tag.mdx b/src/core/client/ui/components/v2/Tag/Tag.mdx
new file mode 100644
index 000000000..266f73948
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tag/Tag.mdx
@@ -0,0 +1,35 @@
+---
+name: Tag
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+import Tag from "./Tag";
+import HorizontalGutter from "../HorizontalGutter";
+import Flex from "../Flex";
+
+# Tag
+
+## Basic Use
+
+<Playground>
+  <Flex spacing={1}>
+    <Tag>Staff</Tag>
+    <Tag color="primary">Featured</Tag>
+    <Tag color="error">Rejected</Tag>
+  </Flex>
+</Playground>
+
+## Pill variant
+
+<Playground>
+  <Flex spacing={1}>
+    <Tag variant="pill">Staff</Tag>
+    <Tag variant="pill" color="primary">
+      Featured
+    </Tag>
+    <Tag variant="pill" color="error">
+      Rejected
+    </Tag>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/v2/Tag/Tag.spec.tsx b/src/core/client/ui/components/v2/Tag/Tag.spec.tsx
new file mode 100644
index 000000000..9505ec34b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tag/Tag.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import Tag from "./Tag";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Tag> = {
+    className: "custom",
+    children: "Spam",
+  };
+  const renderer = TestRenderer.create(<Tag {...props}>Staff</Tag>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Tag/Tag.tsx b/src/core/client/ui/components/v2/Tag/Tag.tsx
new file mode 100644
index 000000000..cc946d9ba
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tag/Tag.tsx
@@ -0,0 +1,45 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./Tag.css";
+
+interface Props {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  children: React.ReactNode;
+  color?: "grey" | "primary" | "error" | "dark";
+
+  variant?: "regular" | "pill";
+}
+
+const Tag: FunctionComponent<Props> = props => {
+  const { className, children, classes, variant, color, ...rest } = props;
+
+  const rootClassName = cn(classes.root, className, {
+    [classes.variantPill]: variant === "pill",
+    [classes.colorPrimary]: color === "primary",
+    [classes.colorError]: color === "error",
+    [classes.colorGrey]: color === "grey",
+    [classes.colorDarkest]: color === "dark",
+    [classes.uppercase]: variant !== "pill",
+  });
+
+  return (
+    <span className={rootClassName} {...rest}>
+      {children}
+    </span>
+  );
+};
+
+Tag.defaultProps = {
+  color: "grey",
+  variant: "regular",
+};
+
+const enhanced = withStyles(styles)(Tag);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Tag/__snapshots__/Tag.spec.tsx.snap b/src/core/client/ui/components/v2/Tag/__snapshots__/Tag.spec.tsx.snap
new file mode 100644
index 000000000..e28a88335
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tag/__snapshots__/Tag.spec.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<span
+  className="Tag-root custom Tag-colorGrey Tag-uppercase"
+>
+  Staff
+</span>
+`;
diff --git a/src/core/client/ui/components/v2/Tag/index.ts b/src/core/client/ui/components/v2/Tag/index.ts
new file mode 100644
index 000000000..5fa3b2fcd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tag/index.ts
@@ -0,0 +1 @@
+export { default, default as Tag } from "./Tag";
diff --git a/src/core/client/ui/components/v2/TextField/TextField.css b/src/core/client/ui/components/v2/TextField/TextField.css
new file mode 100644
index 000000000..39a82de70
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextField/TextField.css
@@ -0,0 +1,97 @@
+$input-value: var(--v2-colors-mono-500);
+$input-border: var(--v2-colors-grey-500);
+$input-background: var(--v2-colors-pure-white);
+$input-placeholder: var(--v2-colors-mono-100);
+$input-regular-focused-border: var(--v2-colors-teal-500);
+$input-disabled-background: var(--v2-colors-white-500);
+$input-disabled-value: var(--v2-colors-grey-400);
+$input-disabled-border: var(--v2-colors-grey-400);
+$input-error-border: var(--v2-colors-red-500);
+$input-dark-focused-border: var(--v2-colors-blue-500);
+
+.root {
+  display: flex;
+  width: calc(29 * var(--mini-unit));
+  align-items: center;
+  height: 34px;
+}
+
+.input {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-reset);
+  position: relative;
+  display: block;
+  padding: var(--v2-spacing-2);
+  box-sizing: border-box;
+  background-color: $input-background;
+  border-radius: var(--round-corners);
+  width: 100%;
+  align-self: stretch;
+  margin-top: 0;
+  margin-bottom: 0;
+  color: $input-value;
+
+  &:read-only,
+  &:disabled {
+    background-color: $input-disabled-background;
+    border-color: $input-disabled-border;
+    color: $input-disabled-value;
+  }
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    color: $input-placeholder;
+  }
+}
+
+.adornment {
+  margin-left: var(--v2-spacing-2);
+}
+
+.colorRegular {
+  border: 1px solid $input-border;
+  &:focus {
+    border: 1px solid $input-regular-focused-border;
+    box-shadow: inset 0px 0px 0px 1px $input-regular-focused-border;
+  }
+}
+
+.colorDark {
+  border: 1px solid $input-border;
+  &:focus {
+    border: 1px solid $input-dark-focused-border;
+    box-shadow: inset 0px 0px 0px 1px $input-dark-focused-border;
+  }
+}
+
+.colorError {
+  border: 2px solid $input-error-border;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.textAlignCenter {
+  text-align: center;
+}
+
+.seamlessAdornment {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  &:focus {
+    border-right: 0;
+  }
+
+  & + .adornment {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    align-items: stretch;
+  }
+}
diff --git a/src/core/client/ui/components/v2/TextField/TextField.mdx b/src/core/client/ui/components/v2/TextField/TextField.mdx
new file mode 100644
index 000000000..59be64785
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextField/TextField.mdx
@@ -0,0 +1,43 @@
+---
+name: TextField
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from "docz";
+
+import TextField from "./TextField";
+import Button from "../Button";
+import Icon from "../Icon";
+import Flex from "../Flex";
+import HorizontalGutter from "../HorizontalGutter";
+
+# TextField
+
+## Basic Use
+
+<Playground>
+  <HorizontalGutter>
+    <Flex>
+      <TextField
+        placeholder="This is a placeholder"
+        variant="seamlessAdornment"
+        adornment={
+          <Button variant="adornment" color="dark">
+            <Icon size="md">search</Icon>
+          </Button>
+        }
+      />
+    </Flex>
+    <TextField defaultValue="This is an input field" />
+    <TextField color="error" defaultValue="A TextField with an error" />
+    <TextField
+      color="error"
+      defaultValue="A TextField with an error"
+      fullWidth
+    />
+    <TextField
+      placeholder="This is a placeholder"
+      adornment={<span>Seconds</span>}
+    />
+  </HorizontalGutter>
+</Playground>
diff --git a/src/core/client/ui/components/v2/TextField/TextField.spec.tsx b/src/core/client/ui/components/v2/TextField/TextField.spec.tsx
new file mode 100644
index 000000000..9c0be1f70
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextField/TextField.spec.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import TextField from "./TextField";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof TextField> = {
+    className: "custom",
+    defaultValue: "Hello World",
+    adornment: "Unit",
+  };
+  const renderer = TestRenderer.create(<TextField {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/TextField/TextField.tsx b/src/core/client/ui/components/v2/TextField/TextField.tsx
new file mode 100644
index 000000000..b620aa64e
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextField/TextField.tsx
@@ -0,0 +1,119 @@
+import cn from "classnames";
+import React, { AllHTMLAttributes, ChangeEvent, EventHandler } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+import { FunctionComponent } from "react";
+
+import styles from "./TextField.css";
+
+export interface TextFieldProps {
+  id?: string;
+  /**
+   * The content value of the component.
+   */
+  defaultValue?: string;
+  /**
+   * The content value of the component.
+   */
+  value?: string;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+  /**
+   * Color of the TextField
+   */
+  color?: "regular" | "error" | "dark";
+  /*
+   * If set renders a full width button
+   */
+  fullWidth?: boolean;
+  /**
+   * Placeholder
+   */
+  placeholder?: string;
+  /**
+   * Mark as readonly
+   */
+  readOnly?: boolean;
+  /**
+   * Name
+   */
+  name?: string;
+  /**
+   * type: Here we only allow text type values
+   */
+  type?: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
+  /**
+   * onChange
+   */
+  onChange?: EventHandler<ChangeEvent<HTMLInputElement>>;
+
+  disabled?: boolean;
+
+  autoComplete?: AllHTMLAttributes<HTMLInputElement>["autoComplete"];
+  autoCorrect?: AllHTMLAttributes<HTMLInputElement>["autoCorrect"];
+  autoCapitalize?: AllHTMLAttributes<HTMLInputElement>["autoCapitalize"];
+  spellCheck?: AllHTMLAttributes<HTMLInputElement>["spellCheck"];
+
+  textAlignCenter?: boolean;
+  adornment?: React.ReactNode;
+
+  variant?: "regular" | "seamlessAdornment";
+}
+
+const TextField: FunctionComponent<TextFieldProps> = props => {
+  const {
+    className,
+    classes,
+    color,
+    fullWidth,
+    value,
+    placeholder,
+    adornment,
+    textAlignCenter,
+    variant,
+    ...rest
+  } = props;
+
+  const rootClassName = cn(
+    classes.root,
+    {
+      [classes.fullWidth]: fullWidth,
+    },
+    className
+  );
+
+  const inputClassName = cn(classes.input, {
+    [classes.colorRegular]: color === "regular",
+    [classes.colorError]: color === "error",
+    [classes.colorDark]: color === "dark",
+    [classes.textAlignCenter]: textAlignCenter,
+    [classes.seamlessAdornment]: variant === "seamlessAdornment",
+  });
+
+  return (
+    <div className={rootClassName}>
+      <input
+        className={inputClassName}
+        placeholder={placeholder}
+        value={value}
+        {...rest}
+      />
+      {adornment && <div className={styles.adornment}>{adornment}</div>}
+    </div>
+  );
+};
+
+TextField.defaultProps = {
+  color: "regular",
+  placeholder: "",
+  type: "text",
+} as Partial<TextFieldProps>;
+
+const enhanced = withStyles(styles)(TextField);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/v2/TextField/__snapshots__/TextField.spec.tsx.snap
new file mode 100644
index 000000000..13359b792
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="TextField-root custom"
+>
+  <input
+    className="TextField-input TextField-colorRegular"
+    defaultValue="Hello World"
+    placeholder=""
+    type="text"
+  />
+  <div
+    className="TextField-adornment"
+  >
+    Unit
+  </div>
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/TextField/index.ts b/src/core/client/ui/components/v2/TextField/index.ts
new file mode 100644
index 000000000..e38acd4ea
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextField/index.ts
@@ -0,0 +1,2 @@
+export * from "./TextField";
+export { default } from "./TextField";
diff --git a/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css b/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css
new file mode 100644
index 000000000..5284935ba
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.css
@@ -0,0 +1,7 @@
+.root {
+  color: var(--v2-palette-input-label);
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-title);
+}
diff --git a/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.tsx b/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.tsx
new file mode 100644
index 000000000..61f407d37
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextFieldAdornment/TextFieldAdornment.tsx
@@ -0,0 +1,17 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import styles from "./TextFieldAdornment.css";
+
+interface Props {
+  className?: string;
+}
+
+const TextFieldAdornment: FunctionComponent<Props> = ({
+  children,
+  className,
+}) => {
+  return <span className={cn(className, styles.root)}>{children}</span>;
+};
+
+export default TextFieldAdornment;
diff --git a/src/core/client/ui/components/v2/TextFieldAdornment/index.ts b/src/core/client/ui/components/v2/TextFieldAdornment/index.ts
new file mode 100644
index 000000000..7efa86fc9
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextFieldAdornment/index.ts
@@ -0,0 +1 @@
+export { default } from "./TextFieldAdornment";
diff --git a/src/core/client/ui/components/v2/TextLink/TextLink.css b/src/core/client/ui/components/v2/TextLink/TextLink.css
new file mode 100644
index 000000000..9a074c8d5
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextLink/TextLink.css
@@ -0,0 +1,10 @@
+.root {
+  color: var(--v2-palette-primary-main);
+  text-decoration: underline;
+}
+
+.icon {
+  padding-left: calc(0.5 * var(--mini-unit));
+  padding-bottom: 2px;
+  text-decoration: none;
+}
diff --git a/src/core/client/ui/components/v2/TextLink/TextLink.mdx b/src/core/client/ui/components/v2/TextLink/TextLink.mdx
new file mode 100644
index 000000000..8f6f42813
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextLink/TextLink.mdx
@@ -0,0 +1,19 @@
+---
+name: TextLink
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import TextLink from './TextLink.tsx'
+import HorizontalGutter from '../HorizontalGutter'
+
+# TextLink
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <TextLink href="https://coralproject.net">Well... Hello there.</TextLink>
+  </HorizontalGutter>
+</Playground>
+
+
diff --git a/src/core/client/ui/components/v2/TextLink/TextLink.spec.tsx b/src/core/client/ui/components/v2/TextLink/TextLink.spec.tsx
new file mode 100644
index 000000000..47e8dd97c
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextLink/TextLink.spec.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import TextLink from "./TextLink";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof TextLink> = {
+    className: "custom",
+  };
+  const renderer = TestRenderer.create(<TextLink {...props}>Hello</TextLink>);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/TextLink/TextLink.tsx b/src/core/client/ui/components/v2/TextLink/TextLink.tsx
new file mode 100644
index 000000000..31c886a88
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextLink/TextLink.tsx
@@ -0,0 +1,38 @@
+import cn from "classnames";
+import { Icon } from "coral-ui/components";
+import React, { AnchorHTMLAttributes, StatelessComponent } from "react";
+
+import { withStyles } from "coral-ui/hocs";
+
+import styles from "./TextLink.css";
+
+interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: typeof styles;
+}
+
+const TextLinkProps: StatelessComponent<Props> = props => {
+  const { className, children, classes, ...rest } = props;
+
+  const rootClassName = cn(classes.root, className);
+
+  return (
+    <a
+      className={rootClassName}
+      href={props.href || (children as string)}
+      {...rest}
+    >
+      {children}
+      {props.target === "_blank" && (
+        <Icon className={classes.icon} size="xs">
+          open_in_new
+        </Icon>
+      )}
+    </a>
+  );
+};
+
+const enhanced = withStyles(styles)(TextLinkProps);
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/TextLink/__snapshots__/TextLink.spec.tsx.snap b/src/core/client/ui/components/v2/TextLink/__snapshots__/TextLink.spec.tsx.snap
new file mode 100644
index 000000000..f0947cfb7
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextLink/__snapshots__/TextLink.spec.tsx.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<a
+  className="TextLink-root custom"
+  href="Hello"
+>
+  Hello
+</a>
+`;
diff --git a/src/core/client/ui/components/v2/TextLink/index.ts b/src/core/client/ui/components/v2/TextLink/index.ts
new file mode 100644
index 000000000..423f16141
--- /dev/null
+++ b/src/core/client/ui/components/v2/TextLink/index.ts
@@ -0,0 +1 @@
+export { default } from "./TextLink";
diff --git a/src/core/client/ui/components/v2/Textarea/Textarea.css b/src/core/client/ui/components/v2/Textarea/Textarea.css
new file mode 100644
index 000000000..6f67fec30
--- /dev/null
+++ b/src/core/client/ui/components/v2/Textarea/Textarea.css
@@ -0,0 +1,28 @@
+.root {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-3);
+  line-height: var(--v2-line-height-body-short);
+  padding: var(--v2-spacing-2);
+  box-sizing: border-box;
+  border-radius: var(--round-corners);
+  color: var(--v2-palette-input-value);
+  background-color: var(--v2-palette-input-background);
+  border: 1px solid var(--v2-palette-input-border);
+  &:read-only {
+    background-color: var(--v2-palette-input-disabled-background);
+  }
+  &:disabled {
+    background-color: var(--v2-palette-input-disabled-background);
+    border-color: var(--v2-palette-input-disabled-foreground);
+  }
+  &:focus {
+    outline: none;
+    border: 1px solid var(--v2-palette-input-focused-border);
+    box-shadow: inset 0px 0px 0px 1px var(--v2-palette-input-focused-border);
+  }
+}
+
+.fullwidth {
+  width: 100%;
+}
diff --git a/src/core/client/ui/components/v2/Textarea/Textarea.tsx b/src/core/client/ui/components/v2/Textarea/Textarea.tsx
new file mode 100644
index 000000000..433ee4220
--- /dev/null
+++ b/src/core/client/ui/components/v2/Textarea/Textarea.tsx
@@ -0,0 +1,31 @@
+import cn from "classnames";
+import React, { FunctionComponent, TextareaHTMLAttributes } from "react";
+
+import styles from "./Textarea.css";
+
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  className?: string;
+  fullwidth?: boolean;
+}
+
+const Textarea: FunctionComponent<Props> = ({
+  className,
+  children,
+  fullwidth,
+  ...rest
+}) => (
+  <textarea
+    {...rest}
+    className={cn(
+      styles.root,
+      {
+        [styles.fullwidth]: fullwidth,
+      },
+      className
+    )}
+  >
+    {children}
+  </textarea>
+);
+
+export default Textarea;
diff --git a/src/core/client/ui/components/v2/Textarea/index.ts b/src/core/client/ui/components/v2/Textarea/index.ts
new file mode 100644
index 000000000..3fb65ab35
--- /dev/null
+++ b/src/core/client/ui/components/v2/Textarea/index.ts
@@ -0,0 +1 @@
+export { default } from "./Textarea";
diff --git a/src/core/client/ui/components/v2/Timestamp/Timestamp.css b/src/core/client/ui/components/v2/Timestamp/Timestamp.css
new file mode 100644
index 000000000..c183d89a8
--- /dev/null
+++ b/src/core/client/ui/components/v2/Timestamp/Timestamp.css
@@ -0,0 +1,11 @@
+.root {
+  cursor: default;
+}
+
+.text {
+  color: var(--v2-palette-timestamp);
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-size: var(--v2-font-size-2);
+  line-height: var(--v2-line-height-reset);
+}
diff --git a/src/core/client/ui/components/v2/Timestamp/Timestamp.spec.tsx b/src/core/client/ui/components/v2/Timestamp/Timestamp.spec.tsx
new file mode 100644
index 000000000..a17e264dd
--- /dev/null
+++ b/src/core/client/ui/components/v2/Timestamp/Timestamp.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { createRenderer } from "react-test-renderer/shallow";
+
+import { PropTypesOf } from "coral-framework/types";
+
+import Timestamp from "./Timestamp";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Timestamp> = {
+    children: "1995-12-17T03:24:00.000Z",
+  };
+  const renderer = createRenderer();
+  renderer.render(<Timestamp {...props} />);
+  expect(renderer.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/Timestamp/Timestamp.tsx b/src/core/client/ui/components/v2/Timestamp/Timestamp.tsx
new file mode 100644
index 000000000..151cfc427
--- /dev/null
+++ b/src/core/client/ui/components/v2/Timestamp/Timestamp.tsx
@@ -0,0 +1,42 @@
+import cn from "classnames";
+import React, { FunctionComponent, useCallback, useState } from "react";
+
+import { AbsoluteTime, BaseButton, RelativeTime } from "coral-ui/components";
+
+import styles from "./Timestamp.css";
+
+export interface TimestampProps {
+  className?: string;
+  children: string;
+  toggleAbsolute?: boolean;
+}
+
+const Timestamp: FunctionComponent<TimestampProps> = props => {
+  const [showAbsolute, setShowAbsolute] = useState(false);
+  const toggleShowAbsolute = useCallback(() => {
+    if (props.toggleAbsolute) {
+      setShowAbsolute(!showAbsolute);
+    }
+  }, [showAbsolute, setShowAbsolute]);
+  return (
+    <BaseButton className={styles.root} onClick={toggleShowAbsolute}>
+      {showAbsolute ? (
+        <AbsoluteTime
+          date={props.children}
+          className={cn(styles.text, props.className)}
+        />
+      ) : (
+        <RelativeTime
+          className={cn(styles.text, props.className)}
+          date={props.children}
+        />
+      )}
+    </BaseButton>
+  );
+};
+
+Timestamp.defaultProps = {
+  toggleAbsolute: true,
+};
+
+export default Timestamp;
diff --git a/src/core/client/ui/components/v2/Timestamp/__snapshots__/Timestamp.spec.tsx.snap b/src/core/client/ui/components/v2/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
new file mode 100644
index 000000000..d317c931b
--- /dev/null
+++ b/src/core/client/ui/components/v2/Timestamp/__snapshots__/Timestamp.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<ForwardRef(forwardRef)
+  className="Timestamp-root"
+  onClick={[Function]}
+>
+  <ForwardRef(forwardRef)
+    className="Timestamp-text"
+    date="1995-12-17T03:24:00.000Z"
+  />
+</ForwardRef(forwardRef)>
+`;
diff --git a/src/core/client/ui/components/v2/Timestamp/index.ts b/src/core/client/ui/components/v2/Timestamp/index.ts
new file mode 100644
index 000000000..02586ccf3
--- /dev/null
+++ b/src/core/client/ui/components/v2/Timestamp/index.ts
@@ -0,0 +1 @@
+export { default } from "./Timestamp";
diff --git a/src/core/client/ui/components/v2/Tooltip/Tooltip.css b/src/core/client/ui/components/v2/Tooltip/Tooltip.css
new file mode 100644
index 000000000..a29ee6e9a
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tooltip/Tooltip.css
@@ -0,0 +1,29 @@
+$tooltip-contents: var(--v2-colors-pure-white);
+
+.root {
+  align-items: center;
+  display: flex;
+}
+
+.tooltip {
+  width: max-content;
+  max-width: 220px;
+}
+
+.title {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-bold);
+  color: $tooltip-contents;
+  line-height: var(--v2-line-height-body-short);
+  margin: 0 0 var(--v2-spacing-1) 0;
+  font-size: var(--v2-font-size-2);
+}
+
+.contents {
+  font-family: var(--v2-font-family-primary);
+  font-weight: var(--v2-font-weight-primary-regular);
+  color: $tooltip-contents;
+  line-height: var(--v2-line-height-body-short);
+  margin: 0;
+  font-size: var(--v2-font-size-2);
+}
diff --git a/src/core/client/ui/components/v2/Tooltip/Tooltip.tsx b/src/core/client/ui/components/v2/Tooltip/Tooltip.tsx
new file mode 100644
index 000000000..a68f370be
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tooltip/Tooltip.tsx
@@ -0,0 +1,53 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+
+import { Box, ClickOutside } from "coral-ui/components";
+import { Popover } from "coral-ui/components/v2";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./Tooltip.css";
+
+interface Props {
+  id: string;
+  className?: string;
+  title: React.ReactNode;
+  body: React.ReactNode;
+  button: PropTypesOf<typeof Popover>["children"];
+}
+
+export const Tooltip: FunctionComponent<Props> = ({
+  id,
+  className,
+  title,
+  body,
+  button,
+}) => {
+  return (
+    <Popover
+      id={id}
+      className={cn(styles.root, className)}
+      placement={"bottom"}
+      dark
+      body={({ toggleVisibility }) => (
+        <ClickOutside onClickOutside={toggleVisibility}>
+          <Box
+            p={2}
+            className={styles.tooltip}
+            onClick={evt => {
+              // Don't propagate click events when clicking inside of popover to
+              // avoid accidentally activating other components.
+              evt.stopPropagation();
+            }}
+          >
+            <h4 className={styles.title}>{title}</h4>
+            <p className={styles.contents}>{body}</p>
+          </Box>
+        </ClickOutside>
+      )}
+    >
+      {props => button(props)}
+    </Popover>
+  );
+};
+
+export default Tooltip;
diff --git a/src/core/client/ui/components/v2/Tooltip/TooltipButton.css b/src/core/client/ui/components/v2/Tooltip/TooltipButton.css
new file mode 100644
index 000000000..ba72cfef2
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tooltip/TooltipButton.css
@@ -0,0 +1,7 @@
+$tooltip-button: var(--v2-colors-mono-500);
+
+.button {
+  line-height: 0;
+  color: $tooltip-button;
+  padding: 6px;
+}
diff --git a/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx b/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
new file mode 100644
index 000000000..58f6c63b0
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tooltip/TooltipButton.tsx
@@ -0,0 +1,39 @@
+import cn from "classnames";
+import React, { ButtonHTMLAttributes, FunctionComponent, Ref } from "react";
+
+import { BaseButton, Icon } from "coral-ui/components/v2";
+import { withForwardRef } from "coral-ui/hocs";
+import { PropTypesOf } from "coral-ui/types";
+
+import styles from "./TooltipButton.css";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  className?: string;
+  toggleVisibility: () => void;
+
+  /** Internal: Forwarded Ref */
+  forwardRef?: Ref<HTMLButtonElement>;
+}
+
+const TooltipButton: FunctionComponent<Props> = ({
+  active,
+  className,
+  toggleVisibility,
+  forwardRef,
+}) => (
+  <BaseButton
+    className={cn(styles.button, className)}
+    onClick={evt => {
+      evt.stopPropagation();
+      toggleVisibility();
+    }}
+    ref={forwardRef}
+  >
+    <Icon color={active ? "primary" : "inherit"}>info</Icon>
+  </BaseButton>
+);
+
+const enhanced = withForwardRef(TooltipButton);
+export type TooltipButtonProps = PropTypesOf<typeof enhanced>;
+export default enhanced;
diff --git a/src/core/client/ui/components/v2/Tooltip/index.ts b/src/core/client/ui/components/v2/Tooltip/index.ts
new file mode 100644
index 000000000..cb15bc14c
--- /dev/null
+++ b/src/core/client/ui/components/v2/Tooltip/index.ts
@@ -0,0 +1,2 @@
+export { default, default as Tooltip } from "./Tooltip";
+export { default as TooltipButton } from "./TooltipButton";
diff --git a/src/core/client/ui/components/v2/TrapFocus/TrapFocus.mdx b/src/core/client/ui/components/v2/TrapFocus/TrapFocus.mdx
new file mode 100644
index 000000000..da30e1171
--- /dev/null
+++ b/src/core/client/ui/components/v2/TrapFocus/TrapFocus.mdx
@@ -0,0 +1,27 @@
+---
+name: TrapFocus
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import TrapFocus from './TrapFocus'
+import Button from '../Button'
+
+# TrapFocus
+
+Traps focus inside component when using keyboard navigation for accessibility purposes.
+
+## Basic usage
+
+<Playground>
+  <div>
+    <TrapFocus>
+    {({firstFocusableRef, lastFocusableRef}) =>
+      <div>
+        <Button forwardRef={firstFocusableRef} autoFocus>Cancel</Button>
+        <Button forwardRef={lastFocusableRef}>Send</Button>
+      </div>
+    }
+    </TrapFocus>
+  </div>
+</Playground>
diff --git a/src/core/client/ui/components/v2/TrapFocus/TrapFocus.spec.tsx b/src/core/client/ui/components/v2/TrapFocus/TrapFocus.spec.tsx
new file mode 100644
index 000000000..228600e9e
--- /dev/null
+++ b/src/core/client/ui/components/v2/TrapFocus/TrapFocus.spec.tsx
@@ -0,0 +1,94 @@
+/* eslint-disable react/display-name */
+import { noop } from "lodash";
+import React from "react";
+import { create } from "react-test-renderer";
+import sinon from "sinon";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import TrapFocus from "./TrapFocus";
+
+const FakeFocusable: any = class FakeFocusable extends React.Component {
+  public focus = sinon.spy();
+  public render() {
+    return null;
+  }
+};
+
+const createNodeMock = () => ({
+  focus: noop,
+});
+
+it("renders correctly", () => {
+  const props: PropTypesOf<TrapFocus> = {
+    children: (
+      <>
+        <span>child1</span>
+        <span>child2</span>
+      </>
+    ),
+  };
+  const renderer = create(<TrapFocus {...props} />, { createNodeMock });
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
+
+it("autofocus", () => {
+  const autoFocus = sinon.stub();
+  create(<TrapFocus />, {
+    createNodeMock: el => ({
+      focus: el.props.tabIndex === -1 ? autoFocus : noop,
+    }),
+  });
+  expect(autoFocus.called).toBe(true);
+});
+
+it("return focus to last active element", () => {
+  expect(document.activeElement).toBe(document.body);
+  const bodyMock = sinon.mock(document.body);
+  const testRenderer = create(<TrapFocus />, { createNodeMock });
+  bodyMock.expects("focus");
+  testRenderer.unmount();
+  bodyMock.verify();
+});
+
+it("Change focus to `lastFocusable` when focus reaches beginning", () => {
+  const props: PropTypesOf<TrapFocus> = {
+    children: ({ firstFocusableRef, lastFocusableRef }) => (
+      <>
+        <FakeFocusable ref={firstFocusableRef} />
+        <span>child1</span>
+        <span>child2</span>
+        <FakeFocusable ref={lastFocusableRef} />
+      </>
+    ),
+  };
+  const renderer = create(<TrapFocus {...props} />, { createNodeMock });
+  renderer.root.findAllByProps({ tabIndex: 0 })[0].props.onFocus();
+  expect(
+    renderer.root.findAllByType(FakeFocusable)[0].instance.focus.called
+  ).toBe(false);
+  expect(
+    renderer.root.findAllByType(FakeFocusable)[1].instance.focus.called
+  ).toBe(true);
+});
+
+it("Change focus to `firstFocusable` when focus reaches end", () => {
+  const props: PropTypesOf<TrapFocus> = {
+    children: ({ firstFocusableRef, lastFocusableRef }) => (
+      <>
+        <FakeFocusable ref={firstFocusableRef} />
+        <span>child1</span>
+        <span>child2</span>
+        <FakeFocusable ref={lastFocusableRef} />
+      </>
+    ),
+  };
+  const renderer = create(<TrapFocus {...props} />, { createNodeMock });
+  renderer.root.findAllByProps({ tabIndex: 0 })[1].props.onFocus();
+  expect(
+    renderer.root.findAllByType(FakeFocusable)[0].instance.focus.called
+  ).toBe(true);
+  expect(
+    renderer.root.findAllByType(FakeFocusable)[1].instance.focus.called
+  ).toBe(false);
+});
diff --git a/src/core/client/ui/components/v2/TrapFocus/TrapFocus.tsx b/src/core/client/ui/components/v2/TrapFocus/TrapFocus.tsx
new file mode 100644
index 000000000..e26142826
--- /dev/null
+++ b/src/core/client/ui/components/v2/TrapFocus/TrapFocus.tsx
@@ -0,0 +1,59 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import React, { RefObject } from "react";
+
+interface RenderProps {
+  firstFocusableRef: RefObject<any>;
+  lastFocusableRef: RefObject<any>;
+}
+
+type RenderPropsCallback = (props: RenderProps) => React.ReactNode;
+
+export interface TrapFocusProps {
+  children?: React.ReactNode | RenderPropsCallback;
+}
+
+function isRenderProp(
+  children: TrapFocusProps["children"]
+): children is RenderPropsCallback {
+  return typeof children === "function";
+}
+
+export default class TrapFocus extends React.Component<TrapFocusProps> {
+  private fallbackRef = React.createRef<any>();
+  private firstFocusableRef = React.createRef<any>();
+  private lastFocusableRef = React.createRef<any>();
+  private previousActiveElement: any | null;
+
+  // Trap keyboard focus inside the dropdown until a value has been chosen.
+  private focusBegin = () =>
+    (this.firstFocusableRef.current || this.fallbackRef.current).focus();
+  private focusEnd = () =>
+    (this.lastFocusableRef.current || this.fallbackRef.current).focus();
+
+  public componentDidMount() {
+    this.previousActiveElement = document.activeElement;
+    this.fallbackRef.current.focus();
+  }
+
+  public componentWillUnmount() {
+    if (this.previousActiveElement && this.previousActiveElement.focus) {
+      this.previousActiveElement.focus();
+    }
+  }
+
+  public render() {
+    return (
+      <>
+        <div tabIndex={0} onFocus={this.focusEnd} />
+        <div tabIndex={-1} ref={this.fallbackRef} />
+        {isRenderProp(this.props.children)
+          ? this.props.children({
+              firstFocusableRef: this.firstFocusableRef,
+              lastFocusableRef: this.lastFocusableRef,
+            })
+          : this.props.children}
+        <div tabIndex={0} onFocus={this.focusBegin} />
+      </>
+    );
+  }
+}
diff --git a/src/core/client/ui/components/v2/TrapFocus/__snapshots__/TrapFocus.spec.tsx.snap b/src/core/client/ui/components/v2/TrapFocus/__snapshots__/TrapFocus.spec.tsx.snap
new file mode 100644
index 000000000..3888ed381
--- /dev/null
+++ b/src/core/client/ui/components/v2/TrapFocus/__snapshots__/TrapFocus.spec.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+Array [
+  <div
+    onFocus={[Function]}
+    tabIndex={0}
+  />,
+  <div
+    tabIndex={-1}
+  />,
+  <span>
+    child1
+  </span>,
+  <span>
+    child2
+  </span>,
+  <div
+    onFocus={[Function]}
+    tabIndex={0}
+  />,
+]
+`;
diff --git a/src/core/client/ui/components/v2/TrapFocus/index.ts b/src/core/client/ui/components/v2/TrapFocus/index.ts
new file mode 100644
index 000000000..2bb55f23d
--- /dev/null
+++ b/src/core/client/ui/components/v2/TrapFocus/index.ts
@@ -0,0 +1 @@
+export { default, TrapFocusProps } from "./TrapFocus";
diff --git a/src/core/client/ui/components/v2/UIContext/UIContext.ts b/src/core/client/ui/components/v2/UIContext/UIContext.ts
new file mode 100644
index 000000000..6e734d277
--- /dev/null
+++ b/src/core/client/ui/components/v2/UIContext/UIContext.ts
@@ -0,0 +1,21 @@
+import React from "react";
+import { MediaQueryMatchers } from "react-responsive";
+import { Formatter } from "react-timeago";
+
+import { ClickFarAwayRegister } from "../ClickOutside";
+
+export interface UIContextProps {
+  /** Allows to integrate translated strings into `RelativeTime` Component */
+  timeagoFormatter?: Formatter | null;
+  /** Allows testing `MatchMedia` by setting media query values */
+  mediaQueryValues?: Partial<MediaQueryMatchers>;
+  /**
+   * A way to listen for clicks that are e.g. outside of the
+   * current frame for `ClickOutside`
+   */
+  registerClickFarAway?: ClickFarAwayRegister;
+}
+
+const UIContext = React.createContext<UIContextProps>({} as any);
+
+export default UIContext;
diff --git a/src/core/client/ui/components/v2/UIContext/index.ts b/src/core/client/ui/components/v2/UIContext/index.ts
new file mode 100644
index 000000000..86504f205
--- /dev/null
+++ b/src/core/client/ui/components/v2/UIContext/index.ts
@@ -0,0 +1 @@
+export { default, UIContextProps } from "./UIContext";
diff --git a/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.mdx
new file mode 100644
index 000000000..28bbec5a6
--- /dev/null
+++ b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.mdx
@@ -0,0 +1,20 @@
+---
+name: ValidationMessage
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import ValidationMessage from './ValidationMessage'
+import HorizontalGutter from '../HorizontalGutter'
+
+# ValidationMessage
+
+## Basic Use
+<Playground>
+  <HorizontalGutter>
+    <ValidationMessage>Invalid characters. Try again</ValidationMessage>
+    <ValidationMessage fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
+  </HorizontalGutter>
+</Playground>
+
+
diff --git a/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.spec.tsx b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.spec.tsx
new file mode 100644
index 000000000..aa212591c
--- /dev/null
+++ b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.spec.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { PropTypesOf } from "coral-ui/types";
+
+import ValidationMessage from "./ValidationMessage";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof ValidationMessage> = {
+    className: "custom",
+    children: "Hello World",
+  };
+  const renderer = TestRenderer.create(<ValidationMessage {...props} />);
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx
new file mode 100644
index 000000000..d9cac0d65
--- /dev/null
+++ b/src/core/client/ui/components/v2/ValidationMessage/ValidationMessage.tsx
@@ -0,0 +1,41 @@
+import React, { FunctionComponent, ReactNode } from "react";
+
+import Message from "../Message";
+import MessageIcon from "../Message/MessageIcon";
+
+export interface ValidationMessageProps {
+  /**
+   * The content of the component.
+   */
+  children: ReactNode;
+  /**
+   * Convenient prop to override the root styling.
+   */
+  className?: string;
+  /**
+   * If set renders a full width message
+   */
+  fullWidth?: boolean;
+}
+
+const ValidationMessage: FunctionComponent<ValidationMessageProps> = props => {
+  const { className, fullWidth, children, ...rest } = props;
+
+  return (
+    <Message
+      color="error"
+      className={className}
+      fullWidth={fullWidth}
+      {...rest}
+    >
+      <MessageIcon>warning</MessageIcon>
+      {children}
+    </Message>
+  );
+};
+
+ValidationMessage.defaultProps = {
+  fullWidth: false,
+};
+
+export default ValidationMessage;
diff --git a/src/core/client/ui/components/v2/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/v2/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
new file mode 100644
index 000000000..664fcfcc8
--- /dev/null
+++ b/src/core/client/ui/components/v2/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Message-root Message-colorError custom"
+>
+  <i
+    aria-hidden="true"
+    className="Icon-root Icon-sm MessageIcon-root"
+  >
+    warning
+  </i>
+  Hello World
+</div>
+`;
diff --git a/src/core/client/ui/components/v2/ValidationMessage/index.ts b/src/core/client/ui/components/v2/ValidationMessage/index.ts
new file mode 100644
index 000000000..6fb76fcbc
--- /dev/null
+++ b/src/core/client/ui/components/v2/ValidationMessage/index.ts
@@ -0,0 +1 @@
+export { default, ValidationMessageProps } from "./ValidationMessage";
diff --git a/src/core/client/ui/components/v2/index.ts b/src/core/client/ui/components/v2/index.ts
new file mode 100644
index 000000000..87187dd34
--- /dev/null
+++ b/src/core/client/ui/components/v2/index.ts
@@ -0,0 +1,65 @@
+export { default as AriaInfo } from "./AriaInfo";
+export {
+  AppBar,
+  Begin as AppBarBegin,
+  End as AppBarEnd,
+  Divider as AppBarDivider,
+  Navigation as AppBarNavigation,
+  NavigationItem as AppBarNavigationItem,
+} from "./AppBar";
+export { default as Backdrop } from "./Backdrop";
+export { default as BaseButton } from "./BaseButton";
+export { default as UIContext, UIContextProps } from "./UIContext";
+export { default as ClickOutside } from "./ClickOutside";
+export { default as Box } from "./Box";
+export { default as Button } from "./Button";
+export { default as ButtonIcon } from "./Button/ButtonIcon";
+export { default as CallOut } from "./CallOut";
+export { default as Card, CardCloseButton } from "./Card";
+export { default as CheckBox } from "./CheckBox";
+export { default as Counter } from "./Counter";
+export { default as Delay } from "./Delay";
+export { default as Divider } from "./Divider";
+export {
+  Dropdown,
+  Button as DropdownButton,
+  Divider as DropdownDivider,
+} from "./Dropdown";
+export { default as DurationField, DURATION_UNIT } from "./DurationField";
+export { default as FieldSet } from "./FieldSet";
+export { default as Flex } from "./Flex";
+export { default as FormField } from "./FormField";
+export { default as FormFieldDescription } from "./FormFieldDescription";
+export { default as FormFieldHeader } from "./FormFieldHeader";
+export { default as HelperText } from "./HelperText";
+export { default as HorizontalGutter } from "./HorizontalGutter";
+export { default as Icon } from "./Icon";
+export { default as Label } from "./Label";
+export { Marker, Count as MarkerCount } from "./Marker";
+export { default as Message, MessageIcon } from "./Message";
+export { default as Modal, ModalProps } from "./Modal";
+export { default as PasswordField } from "./PasswordField";
+export { default as Popover } from "./Popover";
+export { default as RadioButton } from "./RadioButton";
+export { default as RelativeTime } from "./RelativeTime";
+export { SelectField, Option, OptGroup } from "./SelectField";
+export { default as Spinner } from "./Spinner";
+export {
+  SubBar,
+  Navigation as SubBarNavigation,
+  NavigationItem as SubBarNavigationItem,
+} from "./SubBar";
+export { Table, TableHead, TableBody, TableRow, TableCell } from "./Table";
+export { Tab, TabBar, TabContent, TabPane } from "./Tabs";
+export { default as Tag } from "./Tag";
+export { default as Textarea } from "./Textarea";
+export { default as TextField } from "./TextField";
+export { default as TextFieldAdornment } from "./TextFieldAdornment";
+export { default as TextLink } from "./TextLink";
+export { default as Timestamp } from "./Timestamp";
+export { default as Tooltip, TooltipButton } from "./Tooltip";
+export { default as TrapFocus } from "./TrapFocus";
+export {
+  default as ValidationMessage,
+  ValidationMessageProps,
+} from "./ValidationMessage";
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 636fb9f45..026af2cbd 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -101,6 +101,60 @@
     url("typeface-manuale/files/manuale-latin-700.woff") format("woff");
 }
 
+/* V2 Font Faces */
+
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-display: block;
+  font-weight: 400;
+  src: local("Nunito Regular"), local("Nunito-Regular"),
+    url("typeface-nunito/files/nunito-latin-400.woff2") format("woff2"),
+    url("typeface-nunito/files/nunito-latin-400.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Nunito";
+  font-style: normal;
+  font-display: block;
+  font-weight: 700;
+  src: local("Nunito SemiBold"), local("Nunito-SemiBold"),
+    url("typeface-nunito/files/nunito-latin-700.woff2") format("woff2"),
+    url("typeface-nunito/files/nunito-latin-700.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-display: block;
+  font-weight: 400;
+  src: local("Open Sans Regular"), local("Open Sans-Regular"),
+    url("typeface-open-sans/files/open-sans-latin-400.woff2") format("woff2"),
+    url("typeface-open-sans/files/open-sans-latin-400.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-display: block;
+  font-weight: 600;
+  src: local("Open Sans SemiBold"), local("Open Sans-SemiBold"),
+    url("typeface-open-sans/files/open-sans-latin-600.woff2") format("woff2"),
+    url("typeface-open-sans/files/open-sans-latin-600.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-display: block;
+  font-weight: 700;
+  src: local("Open Sans Bold"), local("Open Sans-Bold"),
+    url("typeface-open-sans/files/open-sans-latin-700.woff2") format("woff2"),
+    url("typeface-open-sans/files/open-sans-latin-700.woff") format("woff");
+}
+
+/* --- */
+
 .heading1 {
   @mixin heading1;
 }
@@ -320,3 +374,11 @@
   letter-spacing: calc(0.2em / 18);
   color: var(--palette-text-dark);
 }
+
+/* V2 Typography */
+
+.bodyCommentV2 {
+  @mixin bodyCommentV2;
+}
+
+/* --- */
diff --git a/src/core/client/ui/theme/mixins.css b/src/core/client/ui/theme/mixins.css
index 9163c6bdb..75e58b651 100644
--- a/src/core/client/ui/theme/mixins.css
+++ b/src/core/client/ui/theme/mixins.css
@@ -116,3 +116,13 @@
   outline-color: -webkit-focus-ring-color;
   outline-style: auto;
 }
+
+/* V2 --- */
+
+@define-mixin bodyCommentV2 {
+  font-size: var(--v2-font-size-3);
+  font-weight: var(--v2-font-weight-primary-regular);
+  font-family: var(--v2-font-family-primary);
+  line-height: var(--v2-line-height-body-comment);
+  color: var(--v2-palette-text-primary);
+}
diff --git a/src/core/client/ui/theme/variables.css.ts b/src/core/client/ui/theme/variables.css.ts
index fbff26410..c1809f033 100644
--- a/src/core/client/ui/theme/variables.css.ts
+++ b/src/core/client/ui/theme/variables.css.ts
@@ -9,6 +9,7 @@ import flat from "flat";
 import { kebabCase, mapKeys, mapValues, pickBy } from "lodash";
 
 import variables from "./variables";
+import variables2 from "./variables2";
 
 const flatKebabVariables = mapKeys(
   mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
@@ -21,9 +22,19 @@ const cssVariables = pickBy(
   (v, k) => !k.startsWith("breakpoints-")
 );
 
+const v2FlatKebabVariables = mapKeys(
+  mapValues(flat(variables2, { delimiter: "-" }), v => v.toString()),
+  (_, k) => `--v2-${kebabCase(k)}`
+);
+
+const cssVariablesV2 = pickBy(
+  v2FlatKebabVariables,
+  (v, k) => !k.startsWith("breakpoints-")
+);
+
 const style = {
   ":root": {
-    ...cssVariables,
+    ...Object.assign({}, cssVariables, cssVariablesV2),
     "--mini-unit": "calc(1px * var(--mini-unit-small))",
   },
   [`@media (min-width: ${variables.breakpoints.xs}px)`]: {
diff --git a/src/core/client/ui/theme/variables2.ts b/src/core/client/ui/theme/variables2.ts
new file mode 100644
index 000000000..708a53c98
--- /dev/null
+++ b/src/core/client/ui/theme/variables2.ts
@@ -0,0 +1,320 @@
+const colors = {
+  coral200: "#FED5C0",
+  coral100: "#FEECDF",
+  coral300: "#FCB99F",
+  coral400: "#FA9D87",
+  coral500: "#F77160",
+  coral600: "#D44A46",
+  coral700: "#B13036",
+  coral800: "#8F1E2D",
+  coral900: "#761227",
+  blue100: "#D2DCF6",
+  blue200: "#A7BAEE",
+  blue300: "#7188CD",
+  blue400: "#44589C",
+  blue500: "#17255A",
+  blue600: "#101C4D",
+  blue700: "#0B1440",
+  blue800: "#070D34",
+  blue900: "#04092B",
+  grey100: "#F4F7F7",
+  grey200: "#EAEFF0",
+  grey300: "#CBD1D2",
+  grey400: "#9FA4A6",
+  grey500: "#65696B",
+  grey600: "#49545C",
+  grey700: "#32404D",
+  grey800: "#202E3E",
+  grey900: "#132033",
+  green100: "#D8F9D5",
+  green200: "#ADF3AD",
+  green300: "#7CDB85",
+  green400: "#54B767",
+  green500: "#268742",
+  green600: "#1B743D",
+  green700: "#136138",
+  green800: "#0C4E32",
+  green900: "#07402E",
+  red100: "#FCE5D9",
+  red200: "#FAC6B4",
+  red300: "#F29D8B",
+  red400: "#E5766C",
+  red500: "#D53F3F",
+  red600: "#B72E39",
+  red700: "#991F34",
+  red800: "#7B142E",
+  red900: "#660C2B",
+  yellow100: "#FFFADF",
+  yellow200: "#FFF4C0",
+  yellow300: "#FFECA1",
+  yellow400: "#FFE48A",
+  yellow500: "#FFD863",
+  yellow600: "#DBB248",
+  yellow700: "#B78F31",
+  yellow800: "#936D1F",
+  yellow900: "#7A5513",
+  teal100: "#E2FAF7",
+  teal200: "#C2F9EA",
+  teal300: "#9FECDF",
+  teal400: "#81DBD3",
+  teal500: "#59C3C3",
+  teal600: "#419EA7",
+  teal700: "#2C7B8C",
+  teal800: "#1C5B71",
+  teal900: "#11435D",
+  mono900: "#14171A",
+  mono500: "#353F44",
+  mono100: "#65696B",
+  white500: "#EFEFEF",
+  pure: {
+    white: "#FFFFFF",
+    black: "#000000",
+  },
+};
+
+const variables2 = {
+  colors,
+  palette: {
+    text: {
+      light: colors.white500,
+      dark: colors.mono900,
+      primary: colors.mono500,
+      secondary: colors.mono100,
+    },
+    primary: {
+      lightest: colors.teal100,
+      light: colors.teal300,
+      main: colors.teal700,
+      darkest: colors.teal900,
+    },
+    grey: {
+      main: colors.grey500,
+      lightest: colors.grey200,
+      lighter: colors.grey300,
+      darkest: colors.grey700,
+    },
+    error: {
+      lightest: colors.red100,
+      main: colors.red500,
+      darkest: colors.red700,
+    },
+    success: {
+      main: colors.green500,
+    },
+    divider: "rgba(0, 0, 0, 0.12)",
+    // New Tokens
+    timestamp: colors.mono100,
+    label: {
+      regular: colors.mono100,
+      emphasis: colors.mono500,
+    },
+    storyTitle: colors.mono500,
+    username: {
+      regular: colors.mono500,
+      emphasis: colors.mono900,
+      background: {
+        hover: colors.grey200,
+      },
+    },
+    commentText: colors.mono900,
+    linkText: colors.teal700,
+    marker: {
+      reported: colors.red500,
+      pending: colors.teal700,
+    },
+    counterBadge: {
+      background: {
+        default: colors.grey500,
+        emphasis: colors.teal600,
+        alert: colors.red500,
+      },
+      foreground: colors.pure.white,
+    },
+    button: {
+      outline: {
+        approve: colors.green500,
+        reject: colors.red500,
+        labelSecondary: colors.mono100,
+      },
+    },
+    accordionLabel: colors.mono500,
+    reasonText: colors.mono500,
+    details: {
+      header: colors.mono500,
+      divider: colors.grey100,
+    },
+    tab: {
+      default: colors.mono100,
+      active: colors.teal600,
+      divider: colors.grey100,
+    },
+    table: {
+      header: {
+        background: colors.grey200,
+        text: colors.mono500,
+        altText: colors.mono100,
+      },
+      body: {
+        text: colors.mono500,
+        disabled: colors.mono100,
+      },
+      highlight: colors.grey100,
+      hover: colors.teal100,
+    },
+    mainNav: {
+      text: {
+        default: colors.mono100,
+        active: colors.pure.white,
+      },
+      background: {
+        default: colors.pure.white,
+        active: colors.coral500,
+        hover: colors.coral200,
+      },
+      divider: colors.grey400,
+    },
+    storySearch: {
+      storyTitle: colors.mono900,
+      results: {
+        heading: colors.white500,
+        headingBackground: colors.grey500,
+        seeAllLabel: colors.white500,
+        seeAllBackground: colors.blue500,
+        border: colors.grey400,
+        divider: colors.grey300,
+      },
+      background: colors.teal600,
+      input: {
+        text: colors.mono500,
+        label: colors.mono500,
+        background: colors.pure.white,
+      },
+    },
+    popover: {
+      border: colors.grey400,
+      background: colors.pure.white,
+      dark: {
+        background: colors.grey500,
+        border: colors.grey500,
+      },
+    },
+    dropdown: {
+      background: colors.pure.white,
+      divider: {
+        border: colors.grey300,
+      },
+    },
+    userMenu: {
+      button: colors.mono100,
+    },
+    decisionHistory: {
+      border: colors.grey300,
+      title: {
+        background: colors.grey200,
+      },
+    },
+    input: {
+      value: colors.mono500,
+      placeholder: colors.mono100,
+      icon: colors.mono500,
+      label: colors.mono500,
+      helper: colors.mono100,
+      border: colors.grey500,
+      background: colors.pure.white,
+      disabled: {
+        foreground: colors.grey400,
+        background: colors.white500,
+      },
+      focused: {
+        border: colors.teal500,
+      },
+      error: {
+        border: colors.red500,
+      },
+    },
+    searchButton: {
+      icon: colors.white500,
+      background: colors.blue500,
+    },
+    sideNav: {
+      item: colors.mono100,
+      border: colors.grey300,
+      indicator: colors.coral500,
+      active: colors.mono500,
+    },
+    configure: {
+      heading: {
+        background: colors.blue500,
+        foreground: colors.pure.white,
+      },
+      description: colors.mono500,
+      subHeading: {
+        foreground: colors.mono500,
+        border: colors.grey300,
+      },
+      subDescription: colors.mono500,
+    },
+    configHeading: {
+      background: colors.blue500,
+      foreground: colors.pure.white,
+    },
+    configBox: {
+      border: colors.grey300,
+    },
+    message: {
+      error: {
+        background: colors.red500,
+        foreground: colors.pure.white,
+      },
+    },
+  },
+  fontFamily: {
+    primary: "Open Sans",
+    secondary: "Nunito",
+  },
+  lineHeight: {
+    bodyComment: 1.45,
+    bodyShort: 1.3,
+    reset: 1,
+    title: 1.15,
+  },
+  fontSize: {
+    1: "0.75rem",
+    2: "0.875rem",
+    3: "1rem",
+    4: "1.125rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    iconLarge: "1.5rem",
+    iconMedium: "1.125rem",
+    iconSmall: "0.875rem",
+    iconXSmall: "0.75rem",
+  },
+  fontWeight: {
+    primary: {
+      bold: 700,
+      semiBold: 600,
+      regular: 300,
+    },
+    secondary: {
+      bold: 700,
+      regular: 300,
+    },
+  },
+  spacing: {
+    1: "4px",
+    2: "8px",
+    3: "12px",
+    4: "16px",
+    5: "24px",
+    6: "32px",
+    7: "44px",
+    8: "60px",
+    9: "84px",
+  },
+  roundCorners: "2px",
+};
+
+export default variables2;
diff --git a/src/locales/en-US/admin.ftl b/src/locales/en-US/admin.ftl
index 2ad76f281..e76617955 100644
--- a/src/locales/en-US/admin.ftl
+++ b/src/locales/en-US/admin.ftl
@@ -425,6 +425,7 @@ moderate-comment-approveButton =
   .aria-label = Approve
 moderate-comment-decision = Decision
 moderate-comment-story = Story
+moderate-comment-storyLabel = Comment On
 moderate-comment-moderateStory = Moderate Story
 moderate-comment-featureText = Feature
 moderate-comment-featuredText = Featured
@@ -462,11 +463,11 @@ moderate-searchBar-searchResultsMostRecentFirst = Search results (Most recent fi
 moderate-searchBar-moderateAllStories = Moderate all stories
 moderate-searchBar-comboBoxTextField =
   .aria-label = Search or jump to story...
-  .placeholder = Use quotation marks around each search term (e.g. “team”, “St. Louis”)
+  .placeholder = search by story title, author, url, id, etc.
 moderate-searchBar-goTo = Go to
 moderate-searchBar-seeAllResults = See all results
 
-moderateCardDetails-tab-details = Details
+moderateCardDetails-tab-info = Info
 moderateCardDetails-tab-edits = Edit history
 ### Moderate User History Drawer
 
@@ -548,7 +549,7 @@ moderate-user-drawer-recent-history-tooltip-submitted = Submitted
 moderate-user-drawer-notes-field =
   .placeholder = Leave a note...
 moderate-user-drawer-notes-button = Add note
-moderatorNote-left-by = Left by:
+moderatorNote-left-by = Left by
 moderatorNote-delete = Delete
 
 ## Create Username
diff --git a/src/locales/pt-BR/admin.ftl b/src/locales/pt-BR/admin.ftl
index ff72b69fb..464c55f6e 100644
--- a/src/locales/pt-BR/admin.ftl
+++ b/src/locales/pt-BR/admin.ftl
@@ -538,7 +538,7 @@ moderate-user-drawer-recent-history-tooltip-submitted = Enviado
 moderate-user-drawer-notes-field =
   .placeholder = Deixar uma anotação...
 moderate-user-drawer-notes-button = Adicionar notação
-moderatorNote-left-by = Deixado por:
+moderatorNote-left-by = Deixado por
 moderatorNote-delete = Deletar
 
 ## Create Username