--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -193,37 +193,53 @@ button {
   height: 100%;
 }
 
 .error-page .error-page-details {
   color: gray;
 }
 
 .AddonTarget {
+  --AddonTarget-padding-value: 16;
+  --AddonTarget-padding-y-value: 20;
+  --AddonTarget-button-padding-value: 4;
+
+  /* Overall padding. */
+  --AddonTarget-padding: calc(var(--AddonTarget-padding-value) * 1px);
+  /* Spacing between boxes. */
+  --AddonTarget-spacing: calc(var(--AddonTarget-padding-value) * 0.5px);
+  /* Additional padding on top/bottom. */
+  --AddonTarget-padding-y: calc((var(--AddonTarget-padding-y-value) - var(--AddonTarget-padding-value)) * 1px);
+  /* Add some padding and subtract it from the margin for buttons so they're clickier. */
+  --AddonTarget-button-padding: calc(var(--AddonTarget-button-padding-value) * 1px);
+  --AddonTarget-button-margin: calc((var(--AddonTarget-padding-value) - var(--AddonTarget-button-padding-value)) * 1px);
+}
+
+.AddonTarget {
   background: #fff;
   box-shadow: 0 0 1px rgba(0,0,0,0.12);
   list-style-type: none;
-  margin: 0 0 8px;
-  padding: 4px 16px;
+  margin: 0 0 var(--AddonTarget-spacing);
+  padding: var(--AddonTarget-padding-y) var(--AddonTarget-padding);
   transition: box-shadow 150ms;
 }
 
 .AddonTarget:hover {
   box-shadow: 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .AddonTarget-header {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   display: flex;
-  padding: 16px 0;
+  padding: var(--AddonTarget-padding) 0;
 }
 
 .AddonTarget-icon {
   height: 24px;
-  margin-inline-end: 16px;
+  margin-inline-end: var(--AddonTarget-padding);
 }
 
 .AddonTarget-icon:not([src]) {
   display: none;
 }
 
 .inverted-icons .AddonTarget-icon {
   filter: invert(30%);
@@ -235,19 +251,19 @@ button {
   font-weight: 600;
 }
 
 .AddonTarget-button {
   background: none;
   border: none;
   color: #0087ff;
   font-size: 14px;
-  margin: 12px;
+  margin: var(--AddonTarget-button-margin);
   min-width: auto;
-  padding: 4px;
+  padding: var(--AddonTarget-button-padding);
   transition: color 150ms;
 }
 
 .AddonTarget-button:active,
 .AddonTarget-button:hover,
 .AddonTarget-button:enabled:hover:active {
   background: none;
 }
@@ -268,10 +284,10 @@ button {
 .AddonTarget-button:enabled:hover:active {
   color: #003399;
   text-decoration: none;
 }
 
 .AddonTarget-button:first-of-type {
   /* Subtract the start padding so the button is still a bigger click target but
    * lines up with the icon. */
-  margin-inline-start: -4px;
+  margin-inline-start: calc(-1 * var(--AddonTarget-button-padding));
 }