diff --git a/web/settings/danger-zone.css b/web/settings/danger-zone.css
--- a/web/settings/danger-zone.css
+++ b/web/settings/danger-zone.css
@@ -1,9 +1,28 @@
 .container {
   padding: 40px;
+  width: 343px;
 }
 
 .header {
   color: var(--fg);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
+  padding-bottom: 40px;
+}
+
+.subheading {
+  color: var(--danger-zone-subheading-color);
+  font-size: var(--xl-font-20);
+  font-weight: var(--semi-bold);
+  line-height: var(--line-height-display);
+  padding-bottom: 40px;
+}
+
+.button {
+  width: 100%;
+}
+
+.explanation {
+  padding-top: 8px;
+  color: var(--danger-zone-explanation-color);
 }
diff --git a/web/settings/danger-zone.react.js b/web/settings/danger-zone.react.js
--- a/web/settings/danger-zone.react.js
+++ b/web/settings/danger-zone.react.js
@@ -2,12 +2,21 @@
 
 import * as React from 'react';
 
+import Button from '../components/button.react.js';
 import css from './danger-zone.css';
 
 function DangerZone(): React.Node {
   return (
     <div className={css.container}>
       <h4 className={css.header}>Danger Zone</h4>
+      <h5 className={css.subheading}>Delete Account</h5>
+      <Button onClick={() => {}} variant="danger" className={css.button}>
+        Delete Account
+      </Button>
+      <p className={css.explanation}>
+        Your account will be permanently deleted. There is no way to reverse
+        this.
+      </p>
     </div>
   );
 }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -166,4 +166,6 @@
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
+  --danger-zone-subheading-color: var(--shades-white-60);
+  --danger-zone-explanation-color: var(--shades-black-60);
 }