diff --git a/skrub/_reporting/_data/templates/base.css b/skrub/_reporting/_data/templates/base.css
index 93df2eb72..28d2a2852 100644
--- a/skrub/_reporting/_data/templates/base.css
+++ b/skrub/_reporting/_data/templates/base.css
@@ -2,13 +2,30 @@
 /* -------------------------------- */
 
 :host {
-    --micro: 0.25rem;
-    --tiny: 0.5rem;
-    --small: 1.0rem;
-    --large: 1.2rem;
-    --huge: 1.5rem;
-    --max-content-width: 45rem;
-    --radius: 0.25rem;
+    --base-size: 1em;
+
+    --text-xs: calc(0.8 * var(--base-size));
+    --text-s: calc(0.9 * var(--base-size));
+    --text-m: var(--base-size);
+    --text-l: calc(1.2 * var(--base-size));
+    --text-xl: calc(1.5 * var(--base-size));
+
+    --space-xs: calc(0.125 * var(--base-size));
+    --space-s: calc(0.25 * var(--base-size));
+    --space-m: calc(0.5 * var(--base-size));
+    --space-l: calc(1.0 * var(--base-size));
+    --space-xl: calc(1.2 * var(--base-size));
+    --space-xxl: calc(1.5 * var(--base-size));
+
+    --border-s: 1px;
+    --border-m: 2px;
+
+    --checkbox-size: var(--text-s);
+    --button-s: calc(1.8 * var(--base-size));
+    --button-m: calc(2.0 * var(--base-size));
+
+    --max-content-width: calc(45 * var(--base-size));
+    --radius: var(--space-s);
     --line-height: 1.5;
 
     --lightgreen: #eafaea;
@@ -30,7 +47,7 @@
 }
 
 :host {
-    font-size: 1rem;
+    font-size: var(--text-m);
     line-height: var(--line-height);
     -webkit-text-size-adjust: 100%;
 }
@@ -55,13 +72,18 @@
 
 
 h1 {
-    font-size: var(--huge);
+    font-size: var(--text-xl);
 }
 
 button > * {
     pointer-events: none;
 }
 
+input[type="checkbox"] {
+    height: var(--checkbox-size);
+    width: var(--checkbox-size);
+}
+
 /* pure.css / Normalize.css overrides the default firefox blue ring around focussed */
 /* elements with something almost impossible to see, making it impossible to use */
 /* tab navigation. We revert it to the browser's appropriate default. */
@@ -79,8 +101,7 @@ summary > * {
 }
 
 p {
-    margin-block-start: var(--tiny);
-    margin-block-end: var(--tiny);
+    margin: var(--space-m) 0;
 }
 
 code {
@@ -93,11 +114,15 @@ pre {
 
 code, pre {
     font-family: var(--fontStack-monospace);
-    font-size: calc(0.9 * var(--small));
+    font-size: var(--text-s);
+}
+
+table {
+    font-size: var(--text-m);
 }
 
-:is(td, th) {
-    padding: var(--tiny);
+#report :is(td, th) {
+    padding: var(--space-s) var(--space-m);
     white-space: nowrap;
 }
 
@@ -107,7 +132,7 @@ code, pre {
 dl {
     display: grid;
     grid-template-columns: max-content auto;
-    column-gap: var(--tiny);
+    column-gap: var(--space-m);
     margin: 0;
 }
 
@@ -142,17 +167,17 @@ dd {
     overflow-wrap: anywhere;
 }
 
-.margin-r-s {
-    margin-inline-end: var(--small);
+.margin-r-m {
+    margin-inline-end: var(--space-m);
 }
 
-.margin-r-t {
-    margin-inline-end: var(--tiny);
+.margin-v-m {
+    margin-block-start: var(--space-m);
+    margin-block-end: var(--space-m);
 }
 
-.margin-v-t {
-    margin-block-start: var(--tiny);
-    margin-block-end: var(--tiny);
+.margin-t-s {
+    margin-top: var(--space-s);
 }
 
 .horizontal-scroll {
@@ -168,18 +193,13 @@ dd {
 }
 
 .wrapper {
-    padding-inline-start: var(--small);
-    padding-inline-end: var(--small);
-    padding-block-end: var(--tiny);
-}
-
-.wrapper-vert {
-    padding-block-end: var(--tiny);
+    padding-inline-start: var(--space-l);
+    padding-inline-end: var(--space-l);
+    padding-block-end: var(--space-m);
 }
 
-.wrapper-vert-l {
-    padding-block-start: var(--large);
-    padding-block-end: var(--huge);
+.flow > * + * {
+    margin-top: var(--space-m);
 }
 
 .text {
@@ -202,12 +222,12 @@ dd {
 
 .flex {
     display: flex;
-    gap: var(--tiny);
+    gap: var(--space-m);
     align-items: center;
 }
 
 .gap-l {
-    gap: var(--large);
+    gap: var(--space-xl);
 }
 
 .flex-reverse {
@@ -221,8 +241,6 @@ dd {
 
 .flex-wrap {
     flex-wrap: wrap;
-    padding-block-start: var(--tiny);
-    padding-block-end: var(--tiny);
 }
 
 .flex-wrap > * {
@@ -276,11 +294,19 @@ dd {
 /* ----------- */
 
 
+#report {
+    padding-top: var(--space-s);
+}
+
+#report svg {
+    max-width: 100%;
+}
+
 .report-header {
-    --max-content-width: 100rem;
-    font-size: var(--large);
-    padding-block-start: var(--micro);
-    padding-block-end: var(--micro);
+    --max-content-width: 100em;
+    font-size: var(--text-l);
+    padding-block-start: var(--space-s);
+    padding-block-end: var(--space-s);
 }
 
 .report-header > h1 {
@@ -289,6 +315,6 @@ dd {
 
 .important-note {
     background-color: var(--lightgreen);
-    padding: var(--tiny);
+    padding: var(--space-m);
     border-radius: var(--radius);
 }
diff --git a/skrub/_reporting/_data/templates/column-associations.html b/skrub/_reporting/_data/templates/column-associations.html
index 91eb09801..0c9c19133 100644
--- a/skrub/_reporting/_data/templates/column-associations.html
+++ b/skrub/_reporting/_data/templates/column-associations.html
@@ -1,4 +1,4 @@
-<article class="flex-reverse wrapper wrapper-vert-l gap-l">
+<article class="margin-t-s flex-reverse wrapper gap-l">
     {% if summary["top_associations"] %}
 
     <div class="horizontal-scroll">
diff --git a/skrub/_reporting/_data/templates/column-filter.css b/skrub/_reporting/_data/templates/column-filter.css
index 97709039e..8f3e3b0fd 100644
--- a/skrub/_reporting/_data/templates/column-filter.css
+++ b/skrub/_reporting/_data/templates/column-filter.css
@@ -1,9 +1,11 @@
 .column-filter {
     display: flex;
-    gap: var(--tiny);
+    flex-wrap: wrap;
+    gap: var(--space-m);
     align-items: flex-end;
-    margin-bottom: var(--micro);
-    margin-left: var(--small);
+    margin-bottom: var(--space-s);
+    margin-left: var(--space-l);
+    margin-right: var(--space-s);
 }
 
 .column-filter > label {
diff --git a/skrub/_reporting/_data/templates/column-summaries.css b/skrub/_reporting/_data/templates/column-summaries.css
index 7fcc0e82b..1e8a4208a 100644
--- a/skrub/_reporting/_data/templates/column-summaries.css
+++ b/skrub/_reporting/_data/templates/column-summaries.css
@@ -7,14 +7,17 @@
 .column-summary-group {
     display: flex;
     flex-direction: column;
-    gap: var(--small);
-    padding-block-start: var(--tiny);
-    padding-block-end: var(--tiny);
-    padding-inline-end: var(--small);
+    gap: var(--space-l);
     min-width: min-content;
     max-width: max-content;
 }
 
+/* Increase the gap between buttons & columns to make it clearer the buttons are
+   associated with the bar above them. */
+.column-selection-buttons + .column-summary-group {
+    margin-top: var(--space-l);
+}
+
 .column-summary-group > .card {
     margin: 0;
 }
@@ -28,7 +31,7 @@
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: var(--small);
+        gap: var(--space-l);
     }
 
 }
@@ -39,7 +42,7 @@
 
 .card {
     padding: 0;
-    margin: 0.75rem;
+    margin: var(--space-l);
     border-radius: var(--radius);
     min-width: min-content;
     border: 1px solid var(--mediumg);
@@ -51,22 +54,22 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    column-gap: 1ch;
+    column-gap: var(--space-l);
 
-    padding: var(--tiny);
-    margin-block-end: var(--tiny);
+    padding: var(--space-m);
+    margin-block-end: var(--space-m);
     background-color: var(--header-color, var(--lightg));
-    border-block-end: 1px solid var(--mediumg);
+    border-block-end: var(--border-s) solid var(--mediumg);
 }
 
 .card-header > * {
     margin-block-start: 0;
     margin-block-end: 0;
-    font-size: var(--small);
+    font-size: var(--space-l);
 }
 
 .card-header input[type="checkbox"] {
-    margin-right: var(--micro);
+    margin-right: var(--space-s);
 }
 
 .column-summary-content {
@@ -79,9 +82,9 @@
 .copybutton-grid {
     display: flex;
     flex-direction: column;
-    gap: var(--tiny);
-    padding-block-start: var(--tiny);
-    padding-block-end: var(--tiny);
+    gap: var(--space-m);
+    padding-block-start: var(--space-m);
+    padding-block-end: var(--space-m);
 }
 
 
@@ -94,6 +97,10 @@
 /* Aspects specific to the single card shown in the dataframe sample tab */
 /* --------------------------------------------------------------------- */
 
+.columns-in-sample-tab {
+    margin-top: var(--space-m);
+}
+
 /* Hide the container when it is empty */
 
 .columns-in-sample-tab:not(:has([data-role="sample-column"]:not([data-hidden]))) {
@@ -105,8 +112,8 @@
 .columns-in-sample-tab .card-header {
     position: relative;
     background-color: var(--darkgreen);
-    border-block-end: 1px solid var(--shadowgreen);
-    padding-right: 2.4rem;
+    border-block-end: var(--border-s) solid var(--shadowgreen);
+    padding-right: calc(var(--button-s) + var(--space-m));
 }
 
 .columns-in-sample-tab .card {
@@ -116,17 +123,17 @@
 /* Button for closing the card / deselecting the column in the table */
 
 .card .close-card-button {
-    height: 1.8rem;
-    width: 1.8rem;
+    height: var(--button-s);
+    width: var(--button-s);
 
-    padding: var(--micro);
+    padding: var(--space-s);
     border: none;
     border-radius: var(--radius);
     background: var(--darkgreen);
 
     position: absolute;
-    top: var(--tiny);
-    right: var(--micro);
+    top: var(--space-m);
+    right: var(--space-s);
 }
 
 .card .close-card-button:hover {
diff --git a/skrub/_reporting/_data/templates/column-summaries.html b/skrub/_reporting/_data/templates/column-summaries.html
index 5abaee0c1..98217e27b 100644
--- a/skrub/_reporting/_data/templates/column-summaries.html
+++ b/skrub/_reporting/_data/templates/column-summaries.html
@@ -1,15 +1,15 @@
 {% import "buttons.html" as buttons %}
 
-<article class="wrapper"
+<article class="wrapper margin-t-s flow"
          data-show-on="NON_EMPTY_COLUMN_FILTER_SELECTED"
          data-hide-on="EMPTY_COLUMN_FILTER_SELECTED">
-    <div class="flex wrapper-vert">
+    <div class="flex">
         <div class="box">
         <pre id="selected-columns-display" data-manager="SelectedColumnsDisplay"></pre>
         {{ buttons.copybutton("selected-columns-display") }}
         </div>
     </div>
-    <div class="flex flex-wrap toggletip-wrapper">
+    <div class="flex flex-wrap toggletip-wrapper column-selection-buttons">
         <div class="toggletip" data-manager="Toggletip">
         <button type="button" class="toggletip">i</button>
         <div class="toggletip-info box-shadow">
diff --git a/skrub/_reporting/_data/templates/column-summary.html b/skrub/_reporting/_data/templates/column-summary.html
index 4d74bc3cf..3aa652e7f 100644
--- a/skrub/_reporting/_data/templates/column-summary.html
+++ b/skrub/_reporting/_data/templates/column-summary.html
@@ -9,7 +9,7 @@
     {% if in_sample_tab %} data-role="sample-column" data-hidden {% else %}
     data-role="selectable-column" {% endif %}>
     <div class="card-header">
-        <h3 class="margin-r-t">
+        <h3 class="margin-r-m">
             {% if not in_sample_tab %}
             <input data-role="select-column-checkbox"
                 data-manager="SelectColumnCheckBox" type="checkbox">
@@ -66,7 +66,7 @@ <h3 class="margin-r-t">
 
         {% if column.value_is_constant %}
         {% set val_id = "{}-constant-value".format(col_id) %}
-        <div class="margin-v-t">
+        <div class="margin-v-m">
             <strong>Constant value:</strong>
             <div class="copybutton-grid">
                 <div class="box">
@@ -79,8 +79,7 @@ <h3 class="margin-r-t">
 
         {% for plot_name in column.plot_names %}
         <div>
-            <img class="pure-img" src="{{ column[plot_name] | svg_to_img_src | safe }}"
-                alt="{{ plot_name }}">
+            {{ column[plot_name] | safe }}
             {% if plot_name == "value_counts_plot" %}
             <details data-test="frequent-values-details">
                 <summary>Most frequent values</summary>
diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css
index 68084e8af..a06107617 100644
--- a/skrub/_reporting/_data/templates/copybutton.css
+++ b/skrub/_reporting/_data/templates/copybutton.css
@@ -3,36 +3,42 @@
 
 /* Those are used to quickly copy some code snippets, column names, etc. */
 
+:host {
+    --box-min-width: calc(6 * var(--base-size));
+    --box-max-width: calc(40 * var(--base-size));
+    --table-box-max-width: calc(55 * var(--base-size));
+    --box-min-height: calc(1.9 * var(--base-size));
+    --box-max-height: calc(10 * var(--base-size));
+}
+
 .box {
     display: flex;
     justify-content: space-between;
     align-items: stretch;
-    border: 1px solid var(--darkg);
+    border: var(--border-s) solid var(--darkg);
     padding: 0;
-    min-width: 6rem;
-    max-width: 40rem;
-    max-height: 10rem;
-    min-height: 1.8rem;
+    min-width: var(--box-min-width);
+    max-width: var(--box-max-width);
+    min-height: var(--box-min-height);
+    max-height: var(--box-max-height);
 }
 
 .box pre {
     overflow-x: auto;
-    padding: var(--micro);
+    padding: var(--space-s);
+    padding-left: var(--space-m);
     flex-grow: 1;
     white-space: pre;
 }
 
 .copybutton {
-    margin: 1px;
-    min-width: 2rem;
-    min-height: calc(1.8rem - 4px);
-    display: inline-block;
-    padding: var(--micro);
-    padding-left: var(--tiny);
-    padding-right: var(--tiny);
+    margin: var(--border-s);
+    min-width: var(--button-s);
+    max-width: var(--button-s);
+    max-height: var(--button-s);
+    padding: var(--space-s);
     border: none;
     position: relative;
-    align-self: flex-start;
 }
 
 .copybutton-left {
@@ -60,19 +66,19 @@
 }
 
 .copied-message {
-    font-size: 0.8rem;
+    font-size: var(--text-s);
     background-color: black;
     color: white;
-    padding: 5px;
-    border-radius: var(--radius, 5px);
+    padding: var(--space-s);
+    border-radius: var(--radius);
     position: absolute;
-    top: 1px;
+    top: var(--space-xs);
     margin: 0;
-    right: calc(100% + 5px);
+    right: calc(100% + var(--space-s));
 }
 
 .copybutton-left .copied-message {
-    left: calc(100% + 5px);
+    left: calc(100% + var(--space-s));
     right: auto;
 }
 
@@ -82,5 +88,5 @@
 
 .table-bar .box {
     flex-grow: 1;
-    max-width: 55rem;
+    max-width: var(--table-box-max-width);
 }
diff --git a/skrub/_reporting/_data/templates/dataframe-sample.css b/skrub/_reporting/_data/templates/dataframe-sample.css
index 4183de259..f338fe2cd 100644
--- a/skrub/_reporting/_data/templates/dataframe-sample.css
+++ b/skrub/_reporting/_data/templates/dataframe-sample.css
@@ -2,17 +2,21 @@
 /* -------------------------------------------------------------- */
 
 .table-with-selectable-cells {
-    margin: 2px;
+    --arrow-width: var(--base-size);
+}
+
+.table-with-selectable-cells {
+    margin: var(--border-m);
     border: none;
 }
 
 .table-with-selectable-cells tbody {
-    border: 1px solid var(--mediumg);
+    border: var(--border-s) solid var(--mediumg);
 }
 
 .table-with-selectable-cells thead th {
     vertical-align: top;
-    border: 1px solid var(--mediumg);
+    border: var(--border-s) solid var(--mediumg);
 }
 
 /* The column containing the selected cell has green stripes. */
@@ -41,19 +45,19 @@ thead {
 
 .table-with-selectable-cells th[data-role="columns-level-name"]{
     text-align: right;
-    padding-right: 1.5rem;
+    padding-right: calc(calc(2 * var(--space-s)) + var(--arrow-width));
     position: relative;
 }
 
 .table-with-selectable-cells th[data-role="columns-level-name"] > .arrow-icon {
     position: absolute;
-    width: 1rem;
+    width: var(--arrow-width);
     height: 100%;
     top: 0;
     bottom: 0;
     left: 100%;
-    right: -1rem;
-    transform: translateX(-1.3rem);
+    right: calc(-1 * var(--arrow-width));
+    transform: translateX(calc(-1 * var(--space-s)));
     display: flex;
     user-select: none;
 }
@@ -76,17 +80,21 @@ thead {
 }
 
 table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
-    outline: 2px dotted black;
+    outline: var(--border-m) dotted black;
 }
 
 .table-cell[data-is-active]:focus {
-    outline: 2px solid Highlight;
-    outline: 2px solid -webkit-focus-ring-color;
+    outline-width: var(--border-m);
+    outline-style: solid;
+    outline-color: Highlight;
+    outline-color: -webkit-focus-ring-color;
 }
 
 #report .table-cell[data-is-active][data-just-copied]:focus {
-    outline: 2px dashed Highlight;
-    outline: 2px dashed -webkit-focus-ring-color;
+    outline-width: var(--border-m);
+    outline-style: dashed;
+    outline-color: Highlight;
+    outline-color: -webkit-focus-ring-color;
 }
 
 
@@ -94,21 +102,17 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
 
 #report .ellided-table-part,
 #report .ellided-table-part td {
-    border: 2px dashed var(--mediumg);
+    border: var(--border-m) dashed var(--mediumg);
     text-align: center;
     border-top: 0;
     border-bottom: 0;
     background: inherit;
 }
 
-#report .ellided-table-part td {
-    padding: var(--tiny);
-}
-
 #report .ellipsis-icon {
     display: flex;
     flex-direction: column;
-    max-height: var(--large);
+    max-height: var(--space-xl);
 }
 
 #report table:has([data-role="index-level-value"]) .ellided-table-part td:first-child .ellipsis-icon * {
@@ -116,11 +120,11 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
 }
 
 .table-bar-wrapper {
-    min-height: calc(var(--line-height, 1.5) * 1em + 3.5 * var(--tiny));
+    min-height: calc(var(--line-height) * 1em + 2 * var(--space-m));
     display: flex;
     flex-direction: column;
     justify-content: center;
-    margin-bottom: var(--micro);
+    margin-bottom: var(--space-s);
 }
 
 /* Information below the table: dimensions and keyboard shortcuts */
@@ -128,8 +132,8 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
 .table-footer {
     display: flex;
     justify-content: flex-start;
-    column-gap: 4ch;
-    padding-top: var(--micro);
+    column-gap: var(--space-xxl);
+    padding-top: var(--space-s);
 }
 
 .keyboard-hints  {
@@ -137,9 +141,9 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
     flex-basis: max(0px, min(50%, calc((50% - 30ch) * 99999)));
     flex-shrink: 0;
     min-width: 0px;
-    height: 2rem;
-    margin-bottom: calc(-1 * var(--small));
-    margin-right: var(--micro);
+    height: 2em;
+    margin-bottom: calc(-1 * var(--space-l));
+    margin-right: var(--space-s);
     overflow: hidden;
 }
 
@@ -148,18 +152,18 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
 }
 
 .keyboard-key {
-    font-size: 0.75em;
+    font-size: var(--text-xs);
     font-family: var(--fontStack-monospace);
-    padding: 0 0.5em;
+    padding: 0 var(--space-m);
     line-height: 1.8;
     color: #444444;
-    border: 1px solid #cccccc;
-    border-bottom: 1px solid #bbbbbb;
-    box-shadow: inset 0 -1px 0 #bbbbbb;
+    border: var(--border-s) solid #cccccc;
+    border-bottom: var(--border-s) solid #bbbbbb;
+    box-shadow: inset 0 calc(-1 * var(--border-s)) 0 #bbbbbb;
     border-radius: 0.2em;
     min-width: 1em;
     text-align: center;
-    margin: 0.1em;
+    margin: var(--space-xs);
     display: inline-block;
     vertical-align: center;
 }
diff --git a/skrub/_reporting/_data/templates/inline-report.css b/skrub/_reporting/_data/templates/inline-report.css
deleted file mode 100644
index 25184a6e8..000000000
--- a/skrub/_reporting/_data/templates/inline-report.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* Add a horizontal line below the report to separate it from surrounding content. */
-/* This only gets included when generating an html snippet, not a full page, */
-/* because it is unnecessary and looks worse when the report is the only content on */
-/* the page. */
-
-.tab-panel {
-    border-bottom: 1px solid var(--mediumg);
-}
diff --git a/skrub/_reporting/_data/templates/report.css b/skrub/_reporting/_data/templates/report.css
index cd6f1ffe2..01ddc0e84 100644
--- a/skrub/_reporting/_data/templates/report.css
+++ b/skrub/_reporting/_data/templates/report.css
@@ -8,9 +8,4 @@
 {% include "summary-statistics.css" %}
 {% include "tabs.css" %}
 {% include "toggletip.css" %}
-{% include "tooltip.css" %}
 {% include "column-filter.css" %}
-
-{% if is_inline_report %}
-{% include "inline-report.css" %}
-{% endif %}
diff --git a/skrub/_reporting/_data/templates/report.html b/skrub/_reporting/_data/templates/report.html
index 2149b9cd1..5f9e23f98 100644
--- a/skrub/_reporting/_data/templates/report.html
+++ b/skrub/_reporting/_data/templates/report.html
@@ -4,11 +4,11 @@
          {% include "report.css" %}
         </style>
         <div id="report">
+            {% if summary.title %}
             <div class="report-header wrapper text">
-                {% if summary.title %}
                 <h1>{{ summary.title }}</h1>
-                {% endif %}
             </div>
+            {% endif %}
 
             {% if summary.dataframe_is_empty  %}
             <div class="text wrapper">
diff --git a/skrub/_reporting/_data/templates/report.js b/skrub/_reporting/_data/templates/report.js
index 27a4e3c97..41c90603a 100644
--- a/skrub/_reporting/_data/templates/report.js
+++ b/skrub/_reporting/_data/templates/report.js
@@ -522,7 +522,7 @@ if (customElements.get('skrub-table-report') === undefined) {
     }
     SkrubTableReport.register(TabList);
 
-    class sortableTable extends Manager {
+    class SortableTable extends Manager {
         constructor(elem, exchange) {
             super(elem, exchange);
             this.elem.querySelectorAll("button[data-role='sort-button']").forEach(
@@ -588,7 +588,7 @@ if (customElements.get('skrub-table-report') === undefined) {
         }
 
     }
-    SkrubTableReport.register(sortableTable);
+    SkrubTableReport.register(SortableTable);
 
     class SelectedColumnsDisplay extends Manager {
 
diff --git a/skrub/_reporting/_data/templates/summary-statistics.css b/skrub/_reporting/_data/templates/summary-statistics.css
index 47446b04a..3e599c42c 100644
--- a/skrub/_reporting/_data/templates/summary-statistics.css
+++ b/skrub/_reporting/_data/templates/summary-statistics.css
@@ -1,24 +1,24 @@
 .summary-stats-table {
-    margin: 2px;
+    margin: var(--border-m);
 }
 
 
-th.sort-button-group-wrapper {
-    --btn-width: 2rem;
+#report th.sort-button-group-wrapper {
+    --btn-width: var(--button-m);
     --btn-group-width: calc(var(--btn-width) * 2);
     position: relative;
-    padding-top: var(--micro);
-    padding-bottom: var(--micro);
-    padding-right: calc(var(--tiny) + var(--btn-group-width));
+    padding-top: var(--space-s);
+    padding-bottom: var(--space-s);
+    padding-right: calc(var(--space-m) + var(--btn-group-width));
 }
 
 .sort-button-group {
     position: absolute;
-    top: -1px;
+    top: calc(-1 * var(--border-s));
     bottom: 0;
     right: calc(-1 * var(--btn-group-width));
     left: 100%;
-    transform: translateX(calc(-1 * var(--btn-group-width) + 1px));
+    transform: translateX(calc(-1 * var(--btn-group-width) + var(--border-s)));
     display: flex;
     gap: 0px;
     padding: 0px;
@@ -30,10 +30,10 @@ th.sort-button-group-wrapper {
     height: 100%;
     flex-grow: 1;
     border-radius: 0;
-    border: 1px solid #aaa;
+    border: var(--border-s) solid #aaa;
     background: #e0e0e0;
     color: #222;
-    padding: var(--micro);
+    padding: var(--space-s);
 }
 
 .sort-button-group > .sort-button:focus-visible {
@@ -41,7 +41,7 @@ th.sort-button-group-wrapper {
 }
 
 .sort-button-group > .sort-button ~ .sort-button {
-    margin-left: -1px;
+    margin-left: calc(-1 * var(--border-s));
 }
 
 .sort-button:hover {
diff --git a/skrub/_reporting/_data/templates/summary-statistics.html b/skrub/_reporting/_data/templates/summary-statistics.html
index 8237d3064..66ace4046 100644
--- a/skrub/_reporting/_data/templates/summary-statistics.html
+++ b/skrub/_reporting/_data/templates/summary-statistics.html
@@ -1,7 +1,7 @@
 {% macro th(name, ascending, descending, is_numeric) %}
 <th class="sort-button-group-wrapper" scope="col">
     {% if name %}
-    <span class="margin-r-t">{{ name }}</span>
+    <span class="margin-r-m">{{ name }}</span>
     {% endif %}
     <div class="sort-button-group">
         <button class="sort-button" type="button" data-role="sort-button"
@@ -28,11 +28,11 @@
 {{ th(name, "from columns with " + low + " to columns with " + high, "from columns with " + high + " to columns with " + low, is_numeric) }}
 {% endmacro %}
 
-<article class="wrapper" data-show-on="NON_EMPTY_COLUMN_FILTER_SELECTED"
+<article class="wrapper margin-t-s" data-show-on="NON_EMPTY_COLUMN_FILTER_SELECTED"
     data-hide-on="EMPTY_COLUMN_FILTER_SELECTED">
     <div class="horizontal-scroll">
         <table class="pure-table pure-table-bordered summary-stats-table"
-            data-manager="sortableTable">
+            data-manager="SortableTable">
             <thead>
                 <tr>
                     {{ th("Column", "from first column to last column", "from last column to first column", True) }}
diff --git a/skrub/_reporting/_data/templates/tabs.css b/skrub/_reporting/_data/templates/tabs.css
index dbe83bca5..8f477debc 100644
--- a/skrub/_reporting/_data/templates/tabs.css
+++ b/skrub/_reporting/_data/templates/tabs.css
@@ -7,9 +7,9 @@
 
 .tab-list-wrapper {
     align-items: flex-start;
-    border-bottom: 1px solid var(--darkg);
-    column-gap: 2rem;
-    row-gap: var(--micro);
+    border-bottom: var(--border-s) solid var(--darkg);
+    column-gap: calc(2 * var(--base-size));
+    row-gap: var(--space-s);
 }
 
 .tab-list-scroller {
@@ -18,31 +18,31 @@
 
 .tab-list {
     display: flex;
-    column-gap: var(--tiny);
-    padding-left: var(--tiny);
-    padding-right: var(--tiny);
+    column-gap: var(--space-m);
+    padding-left: var(--space-m);
+    padding-right: var(--space-m);
     align-items: stretch;
-    margin-bottom: -1.2px;
+    margin-bottom: calc(-1 * var(--border-s));
 }
 
 .tab-list > * {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    margin-top: 2px;
+    margin-top: var(--border-m);
 }
 
 .tab {
     display: flex;
     align-items: center;
-    column-gap: var(--micro);
-    border: 1px solid transparent;
+    column-gap: var(--space-s);
+    border: var(--border-s) solid transparent;
     border-bottom: none;
     border-radius: var(--radius) var(--radius) 0 0;
-    padding: var(--tiny);
-    padding-top: var(--micro);
-    padding-bottom: var(--tiny);
-    font-size: var(--small);
+    padding: var(--space-m);
+    padding-top: var(--space-s);
+    padding-bottom: calc(var(--space-s) + var(--border-s));
+    font-size: var(--space-l);
     background-color: transparent;
     --color-muted: var(--darkg);
     --color-default: inherit;
@@ -65,9 +65,9 @@
 
 .tab-list .tab .warning-sign {
     display: none;
-    width: 1em;
-    height: 1em;
-    margin: 1px;
+    width: var(--text-m);
+    height: var(--text-m);
+    margin: var(--space-xs);
 }
 
 .tab-list .tab[data-has-warning] .warning-sign {
@@ -84,6 +84,12 @@
 /* ----------------------------- */
 
 .tab-panel {
-    padding-top: var(--tiny);
+    padding-top: var(--space-m);
     border-radius: 0 0 var(--radius) var(--radius);
 }
+
+.report-bottom-border {
+    width: calc(100% - 2 * var(--radius));
+    border-bottom: var(--border-s) solid var(--mediumg);
+    margin: var(--space-m) auto 0 auto;
+}
diff --git a/skrub/_reporting/_data/templates/tabs.html b/skrub/_reporting/_data/templates/tabs.html
index 72012833c..186866f10 100644
--- a/skrub/_reporting/_data/templates/tabs.html
+++ b/skrub/_reporting/_data/templates/tabs.html
@@ -58,3 +58,7 @@
     data-test="associations-panel">
     {% include "column-associations.html" %}
 </div>
+
+{% if is_inline_report %}
+<div class="report-bottom-border"></div>
+{% endif %}
diff --git a/skrub/_reporting/_data/templates/toggletip.css b/skrub/_reporting/_data/templates/toggletip.css
index c7c28f72c..0b2b21ab5 100644
--- a/skrub/_reporting/_data/templates/toggletip.css
+++ b/skrub/_reporting/_data/templates/toggletip.css
@@ -6,7 +6,7 @@
     display: inline-block;
     --blue: #3584e4;
     --darkblue: #0f4e9b;
-    --buttonheight: 1.4rem;
+    --buttonheight: var(--text-xl);
 }
 
 .toggletip > button {
@@ -17,7 +17,7 @@
     font-family: var(--fontStack-monospace);
     font-weight: bold;
     color: white;
-    border: 1px solid var(--darkblue);
+    border: var(--border-s) solid var(--darkblue);
     border-radius: 50%;
     margin: 0;
     padding: none;
@@ -26,13 +26,13 @@
 .toggletip > .toggletip-info {
     box-sizing: border-box;
     position: absolute;
-    top: calc(1.8 * var(--buttonheight));
-    left: calc(0.5 * var(--buttonheight));
+    top: calc(1.2 * var(--buttonheight));
+    left: calc(0.9 * var(--buttonheight));
     width: calc(min(50ch, 100% - var(--buttonheight)));
     min-width: min-content;
-    padding: var(--small);
+    padding: var(--space-l);
     background: white;
-    border: 2px solid var(--blue);
+    border: var(--border-m) solid var(--blue);
     border-radius: var(--radius);
     z-index: 2;
     visibility: hidden;
@@ -46,6 +46,6 @@
 }
 
 .toggletip > button:is(:focus, :active) {
-    outline: 2px solid var(--blue);
-    outline-offset: 2px;
+    outline: var(--border-m) solid var(--blue);
+    outline-offset: var(--border-m);
 }
diff --git a/skrub/_reporting/_data/templates/tooltip.css b/skrub/_reporting/_data/templates/tooltip.css
deleted file mode 100644
index cd30e7cbb..000000000
--- a/skrub/_reporting/_data/templates/tooltip.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/* A tooltip shown when an element is hovered. */
-/* ------------------------------------------- */
-
-/* The actual content is wrapped in a positioned element so we can control its */
-/* position wrt to the parent. */
-
-.tooltip {
-    position: relative;
-}
-
-.tooltip-text {
-    display: none;
-    background-color: black;
-    color: #fff;
-    border: 1px solid black;
-    border-radius: var(--radius);
-    padding: var(--tiny);
-    position: absolute;
-    top: calc(100% + 7px);
-    text-align: left;
-    font-size: var(--small);
-    cursor: auto;
-}
-
-.tooltip:hover .tooltip-text {
-    display: block;
-}
-
-/* The arrow above the tooltip */
-
-.tooltip .tooltip-text::after {
-    content: "";
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: transparent transparent black transparent;
-}
-
-/* To enable making the tooltips a bit wider
-   we can offset them to the right or left. */
-
-.tooltip-right {
-    left: 0%;
-    right: -50%;
-}
-
-.tooltip-center {
-    left: -25%;
-    right: -25%;
-}
-
-.tooltip-left {
-    left: -50%;
-    right: 0%;
-
-}
diff --git a/skrub/_reporting/_plotting.py b/skrub/_reporting/_plotting.py
index cd1664010..7d9f94a33 100644
--- a/skrub/_reporting/_plotting.py
+++ b/skrub/_reporting/_plotting.py
@@ -2,7 +2,9 @@
 
 The figures are returned in the form of svg strings.
 """
+
 import io
+import re
 
 from matplotlib import pyplot as plt
 
@@ -37,10 +39,19 @@ def _despine(ax):
     ax.spines["right"].set_visible(False)
 
 
+def _to_em(pt_match):
+    attr, pt = pt_match.groups()
+    pt = float(pt)
+    px = pt * 96 / 72
+    em = px / 16
+    return f'{attr}="{em:.2f}em"'
+
+
 def _serialize(fig):
     buffer = io.BytesIO()
     fig.savefig(buffer, format="svg", bbox_inches="tight")
     out = buffer.getvalue().decode("UTF-8")
+    out = re.sub(r'(width|height)="([0-9.]+)pt"', _to_em, out)
     plt.close(fig)
     return out