diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
index 422e6e98b5c..6ac4a0934c2 100644
--- a/packages/@ourworldindata/components/src/Checkbox.scss
+++ b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -7,6 +7,10 @@
 
     position: relative;
 
+    label {
+        margin: 0; // style leak in admin
+    }
+
     input {
         position: absolute;
         opacity: 0;
diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
index 2bc2ce39a83..66ae19aa7ae 100644
--- a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
+++ b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
@@ -18,11 +18,12 @@
 
     color: $light-text;
     background: white;
-    border: 1px solid $light-stroke !important;
+    border: 1px solid $light-stroke;
     border-radius: 50%;
 
     &:hover {
         background: $hover-fill;
+        border-color: $hover-fill;
         cursor: pointer;
         color: $dark-text;
     }
diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
index e104c7af8bb..2295366d2cb 100644
--- a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
+++ b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
@@ -6,6 +6,10 @@
 
     position: relative;
 
+    label {
+        margin: 0; // style leak in admin
+    }
+
     input {
         position: absolute;
         opacity: 0;
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 42d7d32da94..228ea985dbd 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -2492,7 +2492,7 @@ export class Grapher
                     justifyContent: "center",
                     textAlign: "center",
                     lineHeight: 1.5,
-                    padding: "3rem",
+                    padding: "48px",
                 }}
             >
                 <p style={{ color: "#cc0000", fontWeight: 700 }}>
diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
index bde2d7e1743..769d18f2e21 100644
--- a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
+++ b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
@@ -6,7 +6,13 @@
     align-items: center;
     padding: var(--padding) var(--padding) 16px;
 
-    button {
+    .title {
+        @include grapher_h5-black-caps;
+        color: $light-text;
+    }
+
+    .close-button {
         margin-left: 8px;
+        flex-shrink: 0;
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
index 6157a7ab2a5..ad96dd46c11 100644
--- a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
+++ b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
@@ -4,16 +4,25 @@ import { CloseButton } from "../closeButton/CloseButton.js"
 
 export function OverlayHeader({
     title,
+    onTitleClick,
     onDismiss,
     className,
 }: {
     title: string
+    onTitleClick?: () => void
     onDismiss?: () => void
     className?: string
 }): JSX.Element {
     return (
         <div className={cx("overlay-header", className)}>
-            <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
+            <h2
+                className={cx("title", {
+                    clickable: !!onTitleClick,
+                })}
+                onClick={onTitleClick}
+            >
+                {title}
+            </h2>
             {onDismiss && <CloseButton onClick={onDismiss} />}
         </div>
     )
diff --git a/packages/@ourworldindata/grapher/src/core/typography.scss b/packages/@ourworldindata/grapher/src/core/typography.scss
index 0ba748d14c4..a8054100293 100644
--- a/packages/@ourworldindata/grapher/src/core/typography.scss
+++ b/packages/@ourworldindata/grapher/src/core/typography.scss
@@ -2,12 +2,34 @@
 // headings
 //
 
+@mixin grapher_h1-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.1667;
+    letter-spacing: 0;
+}
+
+@mixin grapher_h2-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: 0;
+}
+
 @mixin grapher_h3-semibold {
     display: block;
     margin: 0;
 
     font-family: $serif-font-stack;
-    font-size: 1.125rem;
+    font-size: 18px;
     font-weight: 600;
     line-height: 1.1111;
     letter-spacing: 0;
@@ -22,7 +44,7 @@
     margin: 0;
 
     font-family: $serif-font-stack;
-    font-size: 1.1rem;
+    font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
     letter-spacing: 0;
@@ -37,7 +59,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 900;
     line-height: 1.3333;
     letter-spacing: 0.1em;
@@ -58,7 +80,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
     letter-spacing: 0;
@@ -73,7 +95,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 500;
     line-height: 1.3846;
     letter-spacing: 0;
@@ -110,7 +132,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 500;
     line-height: 1.2;
     letter-spacing: 0;
@@ -125,7 +147,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 400;
     line-height: 1.2;
     letter-spacing: 0.01em;
diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
index 92e95dd5641..22d71ecec1c 100644
--- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
+++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
@@ -226,7 +226,7 @@
 }
 
 .closest-time-notice-tippy {
-    max-width: 13rem;
+    max-width: 208px;
     text-align: center;
-    padding: 0.25rem;
+    padding: 4px;
 }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
index 8686cdcbcc8..0be3508c858 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -1,6 +1,9 @@
 .entity-selector {
     --padding: var(--modal-padding, 16px);
 
+    $sort-button-size: 32px;
+    $sort-button-margin: 16px;
+
     color: $dark-text;
 
     // necessary for scrolling
@@ -114,22 +117,19 @@
         .label {
             flex-shrink: 0;
             margin-right: 8px;
-            color: $dark-text;
         }
 
         button.sort {
             flex-shrink: 0;
-            margin-left: 16px;
-
-            $size: 32px;
+            margin-left: $sort-button-margin;
 
             display: flex;
             align-items: center;
             justify-content: center;
 
             position: relative;
-            height: $size;
-            width: $size;
+            height: $sort-button-size;
+            width: $sort-button-size;
             padding: 7px;
 
             color: $dark-text;
@@ -185,6 +185,14 @@
             position: relative;
             cursor: pointer;
 
+            &.hovered {
+                background: rgba(219, 229, 240, 0.4);
+            }
+
+            &--with-bar.hovered {
+                background: rgba(219, 229, 240, 0.6);
+            }
+
             .value {
                 color: #a1a1a1;
                 white-space: nowrap;
@@ -217,7 +225,7 @@
             }
         }
 
-        .animated-entity {
+        .flipped {
             position: relative;
             z-index: 0;
             background: #fff;
@@ -259,21 +267,17 @@
         box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
 
         .footer__selected {
-            font-size: 0.6875rem;
+            font-size: 11px;
             font-weight: 500;
             letter-spacing: 0.06em;
             text-transform: uppercase;
-
-            display: flex;
-            flex-wrap: wrap;
-            column-gap: 4px;
         }
 
         button {
             background: none;
             border: none;
             color: $dark-text;
-            font-size: 0.8125rem;
+            font-size: 13px;
             font-weight: 500;
             letter-spacing: 0.01em;
             text-decoration-line: underline;
@@ -287,4 +291,8 @@
             }
         }
     }
+
+    .grapher-dropdown .menu {
+        width: calc(100% + $sort-button-margin + $sort-button-size);
+    }
 }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
index 28994ab4caa..691d9663262 100644
--- a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
+++ b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.tsx
@@ -102,7 +102,7 @@ const EXTERNAL_SORT_INDICATORS = [
     },
     {
         key: "gdpPerCapita",
-        label: "GDP per capita",
+        label: "GDP per capita (int. $)",
         indicatorId: GDP_PER_CAPITA_INDICATOR_ID_USED_IN_ENTITY_SELECTOR,
         isMatch: (column: CoreColumn): boolean => {
             const label = makeColumnLabel(column)
@@ -555,6 +555,11 @@ export class EntitySelector extends React.Component<{
         )
     }
 
+    @action.bound onTitleClick(): void {
+        if (this.scrollableContainer.current)
+            this.scrollableContainer.current.scrollTop = 0
+    }
+
     @action.bound onSearchKeyDown(e: React.KeyboardEvent<HTMLElement>): void {
         const { searchResults } = this
         if (e.key === "Enter" && searchResults && searchResults.length > 0) {
@@ -568,7 +573,6 @@ export class EntitySelector extends React.Component<{
             this.selectionArray.toggleSelection(entityName)
         } else {
             this.selectionArray.setSelectedEntities([entityName])
-            if (this.props.onDismiss) this.props.onDismiss()
         }
 
         this.set({ mostRecentlySelectedEntityName: entityName })
@@ -709,7 +713,9 @@ export class EntitySelector extends React.Component<{
     private renderSortBar(): JSX.Element {
         return (
             <div className="entity-selector__sort-bar">
-                <span className="label grapher_label-2-medium">Sort by</span>
+                <span className="label grapher_label-2-medium grapher_light">
+                    Sort by
+                </span>
                 <Dropdown
                     options={this.sortOptions}
                     onChange={this.onChangeSortSlug}
@@ -760,21 +766,56 @@ export class EntitySelector extends React.Component<{
     }
 
     private renderAllEntitiesInSingleMode(): JSX.Element {
+        const { selected, unselected } = this.partitionedAvailableEntities
         return (
-            <ul>
-                {this.sortedAvailableEntities.map((entity) => (
-                    <li key={entity.name}>
-                        <SelectableEntity
-                            name={entity.name}
-                            type="radio"
-                            checked={this.isEntitySelected(entity)}
-                            bar={this.getBarConfigForEntity(entity)}
-                            onChange={() => this.onChange(entity.name)}
-                            local={entity.local}
-                        />
-                    </li>
-                ))}
-            </ul>
+            <Flipper
+                spring={{
+                    stiffness: 300,
+                    damping: 33,
+                }}
+                flipKey={this.selectionArray.selectedEntityNames.join(",")}
+            >
+                <ul>
+                    {selected.map((entity, entityIndex) => (
+                        <FlippedListItem
+                            index={entityIndex}
+                            key={entity.name}
+                            flipId={entity.name}
+                            mostRecentlySelectedFlipId={
+                                this.mostRecentlySelectedEntityName
+                            }
+                        >
+                            <SelectableEntity
+                                name={entity.name}
+                                type="radio"
+                                checked={true}
+                                bar={this.getBarConfigForEntity(entity)}
+                                onChange={() => this.onChange(entity.name)}
+                                local={entity.local}
+                            />
+                        </FlippedListItem>
+                    ))}
+                    {unselected.map((entity, entityIndex) => (
+                        <FlippedListItem
+                            index={entityIndex}
+                            key={entity.name}
+                            flipId={entity.name}
+                            mostRecentlySelectedFlipId={
+                                this.mostRecentlySelectedEntityName
+                            }
+                        >
+                            <SelectableEntity
+                                name={entity.name}
+                                type="radio"
+                                checked={false}
+                                bar={this.getBarConfigForEntity(entity)}
+                                onChange={() => this.onChange(entity.name)}
+                                local={entity.local}
+                            />
+                        </FlippedListItem>
+                    ))}
+                </ul>
+            </Flipper>
         )
     }
 
@@ -831,33 +872,24 @@ export class EntitySelector extends React.Component<{
                         </Flipped>
                     )}
                     <ul>
-                        {selected.map((entity) => (
-                            <Flipped
+                        {selected.map((entity, entityIndex) => (
+                            <FlippedListItem
+                                index={entityIndex}
                                 key={entity.name}
                                 flipId={entity.name}
-                                translate
-                                opacity
+                                mostRecentlySelectedFlipId={
+                                    this.mostRecentlySelectedEntityName
+                                }
                             >
-                                <li
-                                    className={cx("animated-entity", {
-                                        "most-recently-selected":
-                                            this
-                                                .mostRecentlySelectedEntityName ===
-                                            entity.name,
-                                    })}
-                                >
-                                    <SelectableEntity
-                                        name={entity.name}
-                                        type="checkbox"
-                                        checked={true}
-                                        bar={this.getBarConfigForEntity(entity)}
-                                        onChange={() =>
-                                            this.onChange(entity.name)
-                                        }
-                                        local={entity.local}
-                                    />
-                                </li>
-                            </Flipped>
+                                <SelectableEntity
+                                    name={entity.name}
+                                    type="checkbox"
+                                    checked={true}
+                                    bar={this.getBarConfigForEntity(entity)}
+                                    onChange={() => this.onChange(entity.name)}
+                                    local={entity.local}
+                                />
+                            </FlippedListItem>
                         ))}
                     </ul>
                 </div>
@@ -872,33 +904,24 @@ export class EntitySelector extends React.Component<{
                     )}
 
                     <ul>
-                        {unselected.map((entity) => (
-                            <Flipped
+                        {unselected.map((entity, entityIndex) => (
+                            <FlippedListItem
+                                index={entityIndex}
                                 key={entity.name}
                                 flipId={entity.name}
-                                translate
-                                opacity
+                                mostRecentlySelectedFlipId={
+                                    this.mostRecentlySelectedEntityName
+                                }
                             >
-                                <li
-                                    className={cx("animated-entity", {
-                                        "most-recently-selected":
-                                            this
-                                                .mostRecentlySelectedEntityName ===
-                                            entity.name,
-                                    })}
-                                >
-                                    <SelectableEntity
-                                        name={entity.name}
-                                        type="checkbox"
-                                        checked={false}
-                                        bar={this.getBarConfigForEntity(entity)}
-                                        onChange={() =>
-                                            this.onChange(entity.name)
-                                        }
-                                        local={entity.local}
-                                    />
-                                </li>
-                            </Flipped>
+                                <SelectableEntity
+                                    name={entity.name}
+                                    type="checkbox"
+                                    checked={false}
+                                    bar={this.getBarConfigForEntity(entity)}
+                                    onChange={() => this.onChange(entity.name)}
+                                    local={entity.local}
+                                />
+                            </FlippedListItem>
                         ))}
                     </ul>
                 </div>
@@ -907,40 +930,23 @@ export class EntitySelector extends React.Component<{
     }
 
     private renderFooter(): JSX.Element {
-        const { numSelectedEntities, selectedEntityNames } = this.selectionArray
+        const { numSelectedEntities } = this.selectionArray
         const { partitionedVisibleEntities: visibleEntities } = this
 
         return (
             <div className="entity-selector__footer">
-                {this.isMultiMode ? (
-                    <>
-                        <div className="footer__selected">
-                            {numSelectedEntities > 0
-                                ? `${numSelectedEntities} selected`
-                                : "Empty selection"}
-                        </div>
-                        <button
-                            type="button"
-                            onClick={this.onClear}
-                            disabled={visibleEntities.selected.length === 0}
-                        >
-                            Clear
-                        </button>
-                    </>
-                ) : (
-                    <div className="footer__selected">
-                        {selectedEntityNames.length > 0 ? (
-                            <>
-                                Current selection:
-                                <span className="entity-name">
-                                    {selectedEntityNames[0]}
-                                </span>
-                            </>
-                        ) : (
-                            "Empty selection"
-                        )}
-                    </div>
-                )}
+                <div className="footer__selected">
+                    {numSelectedEntities > 0
+                        ? `${numSelectedEntities} selected`
+                        : "Empty selection"}
+                </div>
+                <button
+                    type="button"
+                    onClick={this.onClear}
+                    disabled={visibleEntities.selected.length === 0}
+                >
+                    Clear
+                </button>
             </div>
         )
     }
@@ -948,7 +954,11 @@ export class EntitySelector extends React.Component<{
     render(): JSX.Element {
         return (
             <div className="entity-selector">
-                <OverlayHeader title={this.title} onDismiss={this.onDismiss} />
+                <OverlayHeader
+                    title={this.title}
+                    onTitleClick={this.onTitleClick}
+                    onDismiss={this.onDismiss}
+                />
 
                 {this.renderSearchBar()}
 
@@ -966,7 +976,7 @@ export class EntitySelector extends React.Component<{
                     </div>
                 </div>
 
-                {this.renderFooter()}
+                {this.isMultiMode && this.renderFooter()}
             </div>
         )
     }
@@ -1011,7 +1021,12 @@ function SelectableEntity({
 
     return (
         <div
-            className="selectable-entity"
+            className={cx("selectable-entity", {
+                "selectable-entity--with-bar": bar && bar.width !== undefined,
+            })}
+            // can't use :hover because an element keeps its hover style while it's animated
+            onMouseEnter={(e) => e.currentTarget.classList.add("hovered")}
+            onMouseLeave={(e) => e.currentTarget.classList.remove("hovered")}
             // make the whole row clickable
             onClickCapture={(e) => {
                 e.stopPropagation()
@@ -1032,6 +1047,39 @@ function SelectableEntity({
     )
 }
 
+function FlippedListItem({
+    flipId,
+    mostRecentlySelectedFlipId,
+    index = 0,
+    children,
+}: {
+    flipId: string
+    mostRecentlySelectedFlipId?: string
+    index?: number
+    children: React.ReactNode
+}) {
+    return (
+        <Flipped
+            flipId={flipId}
+            translate
+            opacity
+            spring={{
+                stiffness: Math.max(300 - index, 180),
+                damping: 33,
+            }}
+        >
+            <li
+                className={cx("flipped", {
+                    "most-recently-selected":
+                        mostRecentlySelectedFlipId === flipId,
+                })}
+            >
+                {children}
+            </li>
+        </Flipped>
+    )
+}
+
 function makeColumnLabel(column: CoreColumn): string {
     return column.titlePublicOrDisplayName.title
 }
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
index 257b8793194..45caa152565 100644
--- a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
@@ -96,12 +96,12 @@
         }
 
         .title {
-            font-size: 1rem;
+            font-size: 16px;
         }
 
         p {
             margin: 8px 0 0;
-            font-size: 0.875rem;
+            font-size: 14px;
         }
 
         a {
@@ -125,6 +125,18 @@
     }
 }
 
+&.GrapherComponentSmall .download-modal-content {
+    .grouped-menu-item h4,
+    .grouped-menu-callout h4 {
+        font-size: 14px;
+    }
+
+    .grouped-menu-item p,
+    .grouped-menu-callout p {
+        font-size: 13px;
+    }
+}
+
 &.GrapherComponentNarrow .download-modal-content {
     .grouped-menu-icon img {
         display: none;
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss
index 63384e330d1..119ac55551d 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesDescriptions.scss
@@ -7,7 +7,7 @@
         padding: 24px;
 
         &__title {
-            @include h2-semibold;
+            @include grapher_h2-semibold;
             color: $dark-text;
             margin-top: 0;
             margin-bottom: 16px;
@@ -15,14 +15,17 @@
 
         &__content,
         &__content ul {
-            @include body-2-regular;
-            font-size: 0.875rem;
+            font-family: $sans-serif-font-stack;
+            font-size: 14px;
             font-weight: 500;
+            line-height: 1.5;
+            letter-spacing: 0.01em;
             color: $dark-text;
             margin: 0;
         }
 
         &__content ul {
+            padding: 0;
             margin-left: 1em;
             li {
                 margin-bottom: 1em;
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
index 97e1b09bd22..9c077d0cb12 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
@@ -6,7 +6,7 @@
     gap: 16px;
 
     .key-data {
-        @include label-2-medium;
+        @include grapher_label-2-medium;
 
         &__title {
             margin-bottom: 4px;
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
index 98d08a2b303..55129c9e41c 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -16,17 +16,21 @@
     }
 
     .scrollable {
-        max-width: $max-content-width;
-        margin: 0 auto;
-        width: 100%;
-
         flex: 1 1 auto;
         overflow-y: auto;
+
         padding: 0 var(--modal-padding) var(--modal-padding);
 
         &--pad-top {
             padding-top: var(--modal-padding);
         }
+    }
+
+    .scrollable .centered {
+        max-width: $max-content-width;
+        margin: 0 auto;
+        width: 100%;
+        height: 100%;
 
         // needed for the loading indicator
         position: relative;
@@ -43,28 +47,31 @@
     .note-multiple-indicators {
         margin-top: 0;
         color: $light-text;
-        font-size: 0.875rem;
+        font-size: 14px;
         font-style: italic;
         font-weight: 500;
     }
 
+    .Tabs__tab {
+        font-size: $tab-font-size;
+        padding: 8px $tab-padding;
+        margin: 0 $tab-gap 8px 0;
+    }
+
     .source {
         color: $light-text;
+        padding-bottom: var(--modal-padding);
 
         h2 {
-            @include h1-semibold;
+            @include grapher_h1-semibold;
             margin-top: 0;
             margin-bottom: 8px;
             margin-right: 8px;
             color: $dark-text;
-
-            @include sm-up {
-                font-size: 1.5rem;
-            }
         }
 
         .description-below-title {
-            @include body-3-medium;
+            @include grapher_body-3-medium;
             color: $dark-text;
 
             p {
@@ -85,7 +92,7 @@
 
         .title-fragments {
             color: $light-text;
-            font-size: 1.25rem;
+            font-size: 20px;
         }
 
         a {
@@ -102,7 +109,7 @@
         }
 
         .heading {
-            @include h2-semibold;
+            @include grapher_h2-semibold;
             margin-top: 32px;
             margin-bottom: 16px;
             color: $dark-text;
@@ -127,6 +134,11 @@
                 }
             }
 
+            .ExpandableToggle__title,
+            .NonExpandable__title {
+                @include grapher_h4-semibold;
+            }
+
             &--single .NonExpandable {
                 border: none;
                 padding: 0;
@@ -171,16 +183,15 @@
             h6 {
                 color: $dark-text;
                 font-family: $sans-serif-font-stack;
-                font-size: 1em !important;
+                font-size: 16px !important;
                 margin-top: 14px;
                 margin-bottom: 6px;
             }
-        }
 
-        .Tabs__tab {
-            font-size: $tab-font-size;
-            padding: 8px $tab-padding;
-            margin-right: $tab-gap;
+            p,
+            li {
+                font-size: 14px;
+            }
         }
 
         .data-citation__item:not(:first-of-type) {
@@ -189,7 +200,7 @@
 
         .citation__paragraph {
             color: $light-text;
-            font-size: 0.875rem;
+            font-size: 14px;
         }
 
         .citation__type {
@@ -197,11 +208,16 @@
             line-height: 1.5;
             color: $dark-text;
             font-weight: 500;
-            font-size: 0.875rem;
+            font-size: 14px;
+        }
+
+        .indicator-processing p {
+            font-size: 14px;
         }
 
         .indicator-processing .indicator-processing__link {
             @include body-3-medium;
+            font-size: 14px;
             display: inline-block;
             height: auto;
             padding: 0;
@@ -220,20 +236,17 @@
 
 &.GrapherComponentSmall .sources-modal-content {
     .source {
-        --text-small: 0.8125rem;
+        --text-small: 13px;
 
         --indicator-processing-content-size: var(--text-small);
         --data-processing-content-size: var(--text-small);
-        --expandable-toggle-title-size: 0.875rem;
+        --expandable-toggle-title-size: 14px;
         --expandable-toggle-content-size: var(--text-small);
-        --non-expandable-title-size: 0.875rem;
+        --non-expandable-title-size: 14px;
         --non-expandable-content-size: var(--text-small);
 
         h2 {
-            font-size: 1.25rem;
-            @include sm-up {
-                font-size: 1.25rem;
-            }
+            font-size: 20px;
         }
 
         h2 + p {
@@ -241,7 +254,7 @@
         }
 
         .heading {
-            font-size: 1.125rem;
+            font-size: 18px;
         }
 
         .indicator-descriptions .key-info {
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
index d4c034cff3b..72f763b9efe 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -278,11 +278,13 @@ export class SourcesModal extends React.Component<
                             "scrollable--pad-top": !this.showStickyHeader,
                         })}
                     >
-                        {this.manager.isReady ? (
-                            this.renderModalContent()
-                        ) : (
-                            <LoadingIndicator />
-                        )}
+                        <div className="centered">
+                            {this.manager.isReady ? (
+                                this.renderModalContent()
+                            ) : (
+                                <LoadingIndicator />
+                            )}
+                        </div>
                     </div>
                 </div>
             </Modal>
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
index 7de5ab99a67..a1a860839a2 100644
--- a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
@@ -15,7 +15,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        background: rgba(0, 0, 0, 0.2);
+        background: rgba(0, 0, 0, 0.1);
         z-index: $zindex-controls-backdrop;
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/tabs/Tabs.scss b/packages/@ourworldindata/grapher/src/tabs/Tabs.scss
index a97ffa470a7..b4deb7f3f7e 100644
--- a/packages/@ourworldindata/grapher/src/tabs/Tabs.scss
+++ b/packages/@ourworldindata/grapher/src/tabs/Tabs.scss
@@ -13,14 +13,13 @@
     }
 
     &__tab {
+        @include grapher_label-2-medium;
+        display: inline-block;
         margin: 0 8px 8px 0;
         padding: 8px 16px;
         border: 1px solid $blue-10;
         background: #fff;
         color: $light-text;
-        font-size: 0.8125rem;
-        font-weight: 500;
-        letter-spacing: 0.01em;
         white-space: nowrap;
 
         &:hover {
diff --git a/site/gdocs/components/Chart.tsx b/site/gdocs/components/Chart.tsx
index bb10e3fc494..fd3eb21e9f5 100644
--- a/site/gdocs/components/Chart.tsx
+++ b/site/gdocs/components/Chart.tsx
@@ -36,6 +36,8 @@ export default function Chart({
     const { linkedChart } = useLinkedChart(d.url)
     if (!linkedChart) return null
 
+    console.log(linkedChart.resolvedUrl)
+
     const url = Url.fromURL(d.url)
     const resolvedUrl = linkedChart.resolvedUrl
     const isExplorer = url.isExplorer