diff --git a/snuba/admin/dist/index.html b/snuba/admin/dist/index.html
index e4efa0c6301..a39a843f287 100644
--- a/snuba/admin/dist/index.html
+++ b/snuba/admin/dist/index.html
@@ -5,33 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Snuba admin</title>
     <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
-    <style>
-      html, body, #root {margin: 0; height: 100%}
-      body {
-        font-family: -apple-system,BlinkMacSystemFont,sans-serif;
-        -webkit-font-smoothing: antialiased;
-      }
-
-      fieldset {
-        border: none;
-        padding: 0;
-        margin: 0 0 10px 0;
-      }
-
-      /* Hack since we can't put hover/active pseudo selectors in inline styles */
-      .nav-link:hover {
-        background-color: #efefef;
-      }
-      .nav-link:active {
-        background-color: #cfcfcf;
-      }
-
-      .nav-link-active:hover {
-        background-color: #efefef;
-      }
-
-    </style>
-    <!-- imported css in index.tsx, so esbuild builds a bundle.css next to bundle.js -->
+    <!-- css imported in index.tsx (bootstrap and static/styles.css) is bundled by esbuild into bundle.css -->
     <link rel="stylesheet" href="./static/bundle.css" />
   </head>
   <body>
diff --git a/snuba/admin/static/body.tsx b/snuba/admin/static/body.tsx
index 6c7b74bcc93..5b1213c348e 100644
--- a/snuba/admin/static/body.tsx
+++ b/snuba/admin/static/body.tsx
@@ -20,8 +20,8 @@ function Body(props: Props) {
 }
 
 const bodyStyle = {
-  width: "100%",
-  maxWidth: "calc(100% - 260px)",
+  flex: 1,
+  minWidth: 0,
   margin: 10,
   fontSize: 20,
 };
diff --git a/snuba/admin/static/common/components/theme.tsx b/snuba/admin/static/common/components/theme.tsx
index 8fe75e4e927..dfc05af57ff 100644
--- a/snuba/admin/static/common/components/theme.tsx
+++ b/snuba/admin/static/common/components/theme.tsx
@@ -1,10 +1,14 @@
 import { EditorView } from "@codemirror/view";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { tags } from "@lezer/highlight";
+import { COLORS } from "SnubaAdmin/theme";
 
 export const theme = EditorView.theme({
   "&": {
     fontSize: "14px",
+    backgroundColor: COLORS.PANEL_BG,
+    border: `1px solid ${COLORS.BORDER_GRAY}`,
+    borderRadius: "4px",
   },
 });
 
diff --git a/snuba/admin/static/copy_tables/index.tsx b/snuba/admin/static/copy_tables/index.tsx
index 50ee032c04a..5d8cff2801a 100644
--- a/snuba/admin/static/copy_tables/index.tsx
+++ b/snuba/admin/static/copy_tables/index.tsx
@@ -300,7 +300,7 @@ const copyTableResultStyle = {
 
 const sectionContainerStyle = {
   padding: 15,
-  backgroundColor: COLORS.WHITE,
+  backgroundColor: COLORS.PANEL_BG,
   border: `1px solid ${COLORS.BORDER_GRAY}`,
   borderRadius: 5,
   marginTop: 0,
diff --git a/snuba/admin/static/data.tsx b/snuba/admin/static/data.tsx
index f66c0529b61..366c3352d70 100644
--- a/snuba/admin/static/data.tsx
+++ b/snuba/admin/static/data.tsx
@@ -16,87 +16,137 @@ import RpcEndpoints from "SnubaAdmin/rpc_endpoints";
 import EapStats from "SnubaAdmin/eap_stats";
 
 const NAV_ITEMS = [
-  { id: "overview", display: "🤿 Snuba Admin", component: Welcome },
   {
-    id: "auto-replacements-bypass-projects",
-    display: "👻 Replacements",
-    component: AutoReplacementsBypassProjects,
-  },
-  {
-    id: "snql-to-sql",
-    display: "🌐 SnQL to SQL",
-    component: SnQLToSQL,
-  },
-  {
-    id: "snuba-explain",
-    display: "🩺 Snubsplain",
-    component: SnubaExplain,
+    id: "overview",
+    display: "🤿 Snuba Admin",
+    description: "",
+    component: Welcome,
   },
   {
     id: "clusters",
     display: "🗄️ ClickHouse Clusters",
+    description:
+      "Inspect the ClickHouse clusters, nodes and storages in this region.",
     component: Clusters,
   },
   {
     id: "system-queries",
     display: "🏚️ System Queries",
+    description:
+      "Run predefined queries against ClickHouse system tables.",
     component: ClickhouseQueries,
   },
   {
     id: "system-shell",
     display: "💻 System Shell",
+    description:
+      "Interactive SQL shell for querying ClickHouse system tables.",
     component: SystemShellPage,
   },
   {
     id: "copy-tables",
     display: "📋 Copy Tables",
+    description:
+      "Copy table definitions from a source ClickHouse host to other hosts.",
     component: CopyTables,
   },
   {
     id: "clickhouse-migrations",
     display: "🚧 ClickHouse Migrations",
+    description:
+      "Check migration status and run or reverse migrations by group.",
     component: ClickhouseMigrations,
   },
   {
     id: "tracing",
     display: "🔎 ClickHouse Tracing",
+    description:
+      "Run a query with tracing enabled and inspect ClickHouse's trace logs.",
     component: TracingQueries,
   },
   {
     id: "tracing-shell",
     display: "💻 Tracing Shell",
+    description:
+      "Interactive SQL shell that runs queries with ClickHouse tracing.",
     component: SQLShellPage,
   },
   {
     id: "rpc-endpoints",
     display: "🔌 RPC Endpoints",
+    description:
+      "Send requests to EAP RPC endpoints and inspect the responses.",
     component: RpcEndpoints,
   },
   {
     id: "querylog",
     display: "🔍 ClickHouse Querylog",
+    description:
+      "Search the Snuba querylog for what ran, who ran it and how it performed.",
     component: QuerylogQueries,
   },
-  {
-    id: "eap-stats",
-    display: "📊 EAP Stats",
-    component: EapStats,
-  },
   {
     id: "outcomes-analyzer",
     display: "📈 Outcomes Analyzer",
+    description:
+      "Query outcomes to see accepted, filtered and dropped events.",
     component: OutcomesAnalyzer,
   },
   {
     id: "production-queries",
     display: "🔦 Production Queries",
+    description:
+      "Run SnQL queries against production data for allowed projects.",
     component: ProductionQueries,
   },
   {
     id: "run-custom-jobs",
     display: "▶️ View/Run Custom Jobs",
+    description:
+      "List manual jobs, check their status and run them.",
     component: ViewCustomJobs,
   },
+  {
+    id: "snuba-explain",
+    display: "🩺 Snubsplain",
+    description:
+      "Step through how Snuba processes a query, from parsing to the final SQL.",
+    component: SnubaExplain,
+  },
+  {
+    id: "snql-to-sql",
+    display: "🌐 SnQL to SQL",
+    description:
+      "Translate a SnQL query into the ClickHouse SQL that Snuba would run.",
+    component: SnQLToSQL,
+  },
+  {
+    id: "eap-stats",
+    display: "📊 EAP Stats",
+    description:
+      "Sample EAP data to see item and attribute coverage.",
+    component: EapStats,
+  },
+  {
+    id: "auto-replacements-bypass-projects",
+    display: "👻 Replacements",
+    description:
+      "See which projects are currently bypassing the replacements pipeline.",
+    component: AutoReplacementsBypassProjects,
+  },
 ];
 
-export { NAV_ITEMS };
+// Shell pages inherit permissions from their parent pages
+const PERMISSION_OVERRIDES: Record<string, string> = {
+  "tracing-shell": "tracing",
+  "system-shell": "system-queries",
+};
+
+function isToolAllowed(itemId: string, allowedTools: string[] | null): boolean {
+  const permissionId = PERMISSION_OVERRIDES[itemId] ?? itemId;
+  return (
+    allowedTools?.includes(permissionId) || allowedTools?.includes("all") || false
+  );
+}
+
+export { NAV_ITEMS, isToolAllowed };
diff --git a/snuba/admin/static/header.tsx b/snuba/admin/static/header.tsx
index 6e39d905f38..9203a8fb6aa 100644
--- a/snuba/admin/static/header.tsx
+++ b/snuba/admin/static/header.tsx
@@ -26,11 +26,13 @@ function Header() {
 
   return (
     <header style={headerStyle}>
-      <img
-        style={{ height: "100%" }}
-        src="./static/snuba.svg"
-        alt="Snuba admin"
-      />
+      <a href="#overview" style={{ height: "100%" }}>
+        <img
+          style={{ height: "100%" }}
+          src="./static/snuba.svg"
+          alt="Snuba admin"
+        />
+      </a>
       <div
         style={{
           ...regionBarStyle,
@@ -51,6 +53,7 @@ const headerStyle = {
   alignItems: "center",
   padding: "10px 20px",
   justifyContent: "space-between",
+  borderBottom: `1px solid ${COLORS.NAV_BORDER}`,
 };
 
 const adminTextStyle = {
diff --git a/snuba/admin/static/index.tsx b/snuba/admin/static/index.tsx
index 860f016ca1b..ce774f94a1d 100644
--- a/snuba/admin/static/index.tsx
+++ b/snuba/admin/static/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 
 import * as Sentry from "@sentry/react";
@@ -8,14 +8,19 @@ import Body from "SnubaAdmin/body";
 import { NAV_ITEMS } from "SnubaAdmin/data";
 import Client from "SnubaAdmin/api_client";
 import { MantineProvider } from "@mantine/core";
+import { COLORS, sloganTiling } from "SnubaAdmin/theme";
 import { ShellStateProvider } from "SnubaAdmin/sql_shell/shell_context";
 
 import 'bootstrap/dist/css/bootstrap.min.css';
+// Imported after bootstrap so these rules take precedence.
+import './styles.css';
 
 const containerStyle = {
   display: "flex",
   flexDirection: "column" as const,
   height: "100%",
+  backgroundColor: COLORS.PAGE_BG,
+  color: COLORS.TEXT_DEFAULT,
 };
 
 const bodyStyle = {
@@ -66,6 +71,18 @@ function App() {
     }
   }
 
+  // Pages can link to each other with plain hrefs (e.g. the overview tiles),
+  // so keep the active tab in sync with the hash.
+  useEffect(() => {
+    function onHashChange() {
+      try {
+        setActiveTab(getTab(window.location.hash));
+      } catch {}
+    }
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+
   function navigate(nextTab: string) {
     setActiveTab(nextTab);
     window.location.hash = nextTab;
@@ -74,10 +91,19 @@ function App() {
   return (
     <MantineProvider withGlobalStyles withNormalizeCSS>
       <ShellStateProvider>
-        <div style={containerStyle}>
+        <div
+          style={{
+            ...containerStyle,
+            // The slogan tiling is only shown on the home page.
+            backgroundImage:
+              activeTab === "overview" ? sloganTiling() : undefined,
+          }}
+        >
           <Header />
           <div style={bodyStyle}>
-            <Nav active={activeTab} navigate={navigate} api={client} />
+            {activeTab !== "overview" && (
+              <Nav active={activeTab} navigate={navigate} api={client} />
+            )}
             {activeTab && <Body active={activeTab} api={client} />}
           </div>
         </div>
diff --git a/snuba/admin/static/nav.tsx b/snuba/admin/static/nav.tsx
index 3b089077692..d11ec4bb268 100644
--- a/snuba/admin/static/nav.tsx
+++ b/snuba/admin/static/nav.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { COLORS } from "SnubaAdmin/theme";
-import { NAV_ITEMS } from "SnubaAdmin/data";
+import { NAV_ITEMS, isToolAllowed } from "SnubaAdmin/data";
 import Client from "SnubaAdmin/api_client";
 
 type NavProps = {
@@ -29,11 +29,7 @@ function Nav(props: NavProps) {
     <nav style={navStyle}>
       <ul style={ulStyle}>
         {NAV_ITEMS.map((item) => {
-          // Shell pages inherit permissions from their parent pages
-          const permissionId = item.id === "tracing-shell" ? "tracing"
-            : item.id === "system-shell" ? "system-queries"
-            : item.id;
-          return allowedTools?.includes(permissionId) || allowedTools?.includes("all") ? (
+          return isToolAllowed(item.id, allowedTools) ? (
             item.id === active ? (
               <li key={item.id} >
                 <a style={{ ...linkStyle, ...activeLinkStyle }} className="nav-link-active">
@@ -61,6 +57,7 @@ function Nav(props: NavProps) {
 }
 
 const navStyle: React.CSSProperties = {
+  backgroundColor: COLORS.NAV_BG,
   borderRight: `1px solid ${COLORS.NAV_BORDER}`,
   width: 250,
   overflowY: "auto",
@@ -82,8 +79,8 @@ const linkStyle = {
 
 const activeLinkStyle = {
   color: COLORS.TEXT_DEFAULT,
-  backgroundColor: "rgba(59, 130, 246, 0.15)",
-  borderLeft: "3px solid #3b82f6",
+  backgroundColor: "rgba(31, 111, 235, 0.12)",
+  borderLeft: `3px solid ${COLORS.SNUBA_BLUE}`,
   fontWeight: "bold" as const,
 };
 
diff --git a/snuba/admin/static/styles.css b/snuba/admin/static/styles.css
new file mode 100644
index 00000000000..00bb2b95097
--- /dev/null
+++ b/snuba/admin/static/styles.css
@@ -0,0 +1,58 @@
+html, body, #root {margin: 0; height: 100%}
+body {
+  font-family: -apple-system,BlinkMacSystemFont,sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0 0 10px 0;
+}
+
+/* Hack since we can't put hover/active pseudo selectors in inline styles */
+.nav-link:hover {
+  background-color: #e6e6e6;
+}
+.nav-link:active {
+  background-color: #d6d6d6;
+}
+
+.nav-link-active:hover {
+  background-color: rgba(31, 111, 235, 0.18);
+}
+
+.tool-tile {
+  background-color: #ffffff;
+  border: 1px solid #d4d4d4;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  transition: transform 150ms ease, box-shadow 150ms ease,
+    border-color 150ms ease, background-color 150ms ease;
+}
+.tool-tile:hover {
+  transform: translateY(-3px);
+  background-color: #ffffff;
+  border-color: #1f6feb;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12),
+    0 0 0 1px rgba(31, 111, 235, 0.35);
+}
+.tool-tile:active {
+  transform: translateY(-1px);
+}
+
+.danger-button {
+  background-color: #ffffff;
+  transition: background-color 150ms ease;
+}
+.danger-button:hover {
+  background-color: #fbeceb;
+}
+
+.region-button {
+  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
+}
+.region-button:hover {
+  transform: translateY(-2px);
+  filter: brightness(1.08);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
+}
diff --git a/snuba/admin/static/table.tsx b/snuba/admin/static/table.tsx
index 248dcda95be..6d100c484f2 100644
--- a/snuba/admin/static/table.tsx
+++ b/snuba/admin/static/table.tsx
@@ -97,13 +97,14 @@ const tableStyle = {
   ...border,
   borderCollapse: "collapse" as const,
   width: "100%",
+  backgroundColor: COLORS.TABLE_BG,
   fontSize: 16,
   marginBottom: 20,
 };
 
 const headerStyle = {
-  backgroundColor: COLORS.SNUBA_BLUE,
-  color: "white",
+  backgroundColor: COLORS.TABLE_HEADER_BG,
+  color: COLORS.TABLE_HEADER_TEXT,
 };
 
 const thStyle = {
diff --git a/snuba/admin/static/theme.tsx b/snuba/admin/static/theme.tsx
index b44e8f97236..83f49596e9f 100644
--- a/snuba/admin/static/theme.tsx
+++ b/snuba/admin/static/theme.tsx
@@ -1,22 +1,48 @@
+// High-contrast light palette: near-black text on near-white surfaces.
 const COLORS = {
-  HEADER_BG: "#303030",
-  HEADER_TEXT: "white",
+  PAGE_BG: "#fafafa",
+  HEADER_BG: "#ffffff",
+  HEADER_TEXT: "#111111",
+  NAV_BG: "#f2f2f2",
+  PANEL_BG: "#ffffff",
   REGION_TEXT: "black",
-  NAV_BORDER: "#CBCBCB",
-  TABLE_BORDER: "#CBCBCB",
-  SNUBA_BLUE: "#4681e0",
-  TEXT_DEFAULT: "black",
-  TEXT_LIGHTER: "#464646",
-  TEXT_INACTIVE: "#858585",
-  BG_LIGHT: "#E3E3E3",
+  NAV_BORDER: "#d4d4d4",
+  // Slightly darker than TABLE_HEADER_BG so it shows on the header and body.
+  TABLE_BORDER: "#b9c6d6",
+  TABLE_BG: "#ffffff",
+  // Light slate blue, calmer than SNUBA_BLUE.
+  TABLE_HEADER_BG: "#cfdbea",
+  TABLE_HEADER_TEXT: "#111111",
+  SNUBA_BLUE: "#1f6feb",
+  TEXT_DEFAULT: "#111111",
+  TEXT_LIGHTER: "#3d3d3d",
+  TEXT_INACTIVE: "#2b2b2b",
+  BG_LIGHT: "#e3e3e3",
   RED: "#c42e2b",
   WHITE: "#fff",
-  BG_GRAY_LIGHT: "#f5f5f5",
-  BG_GRAY_LIGHTER: "#fafafa",
-  BORDER_GRAY: "#e0e0e0",
-  BORDER_GRAY_LIGHT: "#ddd",
-  ERROR: "#d32f2f",
-  SUCCESS: "#2e7d32",
+  BG_GRAY_LIGHT: "#f0f0f0",
+  BG_GRAY_LIGHTER: "#f7f7f7",
+  BORDER_GRAY: "#c8c8c8",
+  BORDER_GRAY_LIGHT: "#dddddd",
+  ERROR: "#c62828",
+  DANGER: "#a8322d",
+  SUCCESS: "#1b5e20",
 };
 
-export { COLORS };
+// Diagonal, staggered tiling of the slogan. The fill is only a few shades off
+// the page background so the pattern stays visible without competing with text.
+function sloganTiling(): string {
+  const fill = "#ececec";
+  const text = (x: number, y: number) =>
+    `<text x='${x}' y='${y}' text-anchor='middle' dominant-baseline='middle' ` +
+    `transform='rotate(-30 ${x} ${y})' font-family='-apple-system,sans-serif' ` +
+    `font-size='22' font-weight='800' letter-spacing='2' fill='${fill}'>MEREDITH IS #1</text>`;
+  const svg =
+    `<svg xmlns='http://www.w3.org/2000/svg' width='360' height='220'>` +
+    text(90, 55) +
+    text(270, 165) +
+    `</svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+
+export { COLORS, sloganTiling };
diff --git a/snuba/admin/static/welcome/index.tsx b/snuba/admin/static/welcome/index.tsx
index e37f47ddeb8..df2091b432c 100644
--- a/snuba/admin/static/welcome/index.tsx
+++ b/snuba/admin/static/welcome/index.tsx
@@ -1,15 +1,30 @@
 import React, { useEffect, useState } from "react";
-import { Button } from "@mantine/core";
 import Client from "SnubaAdmin/api_client";
+import { NAV_ITEMS, isToolAllowed } from "SnubaAdmin/data";
+import { COLORS } from "SnubaAdmin/theme";
 import { AdminRegion } from "SnubaAdmin/types";
+import { regionColor } from "SnubaAdmin/utils/region_color";
 
 function Welcome(props: { api: Client }) {
   const [adminRegions, setAdminRegions] = useState<AdminRegion[]>([]);
+  const [allowedTools, setAllowedTools] = useState<string[] | null>(null);
+  const [toolsError, setToolsError] = useState<string | null>(null);
 
   useEffect(() => {
     props.api.getAdminRegions().then((res) => {
       setAdminRegions(res);
     });
+    props.api
+      .getAllowedTools()
+      .then((res) => {
+        if (!Array.isArray(res?.tools)) {
+          throw new Error("unexpected response from /tools");
+        }
+        setAllowedTools(res.tools);
+      })
+      .catch((err) => {
+        setToolsError(err?.message ?? String(err));
+      });
   }, []);
 
   async function clearSiteData() {
@@ -38,28 +53,165 @@ function Welcome(props: { api: Client }) {
     window.location.reload();
   }
 
-  function urls() {
-    return (
-      <div>
-        <p>MEREDITH IS #1</p>
-        <p>Available regions:</p>
-        <ul>
-          {adminRegions.map((region) => (
-            <li key={region.name}>
-              <a href={region.url} target="_blank">
-                {region.is_main ? `SaaS (${region.name})` : region.name}
-              </a>
-            </li>
-          ))}
-        </ul>
-        <Button color="red" onClick={clearSiteData}>
-          Clear site data
-        </Button>
-      </div>
-    );
-  }
+  const tools = NAV_ITEMS.filter(
+    (item) => item.id !== "overview" && isToolAllowed(item.id, allowedTools)
+  );
 
-  return <div>{urls()}</div>;
+  return (
+    <div style={containerStyle}>
+      <section style={{ ...sectionStyle, ...regionSectionStyle }}>
+        {adminRegions.length > 0 && (
+          <>
+            <h2 style={{ ...headingStyle, margin: 0 }}>Regions</h2>
+            <div style={regionRowStyle}>
+              {adminRegions.map((region) => (
+                <a
+                  key={region.name}
+                  href={region.url}
+                  target="_blank"
+                  className="region-button"
+                  style={{
+                    ...regionButtonStyle,
+                    // Match the header banner, which calls the main region "SaaS".
+                    backgroundColor: regionColor(
+                      region.is_main ? "SaaS" : region.name
+                    ),
+                  }}
+                >
+                  {region.is_main ? `SaaS (${region.name})` : region.name}
+                </a>
+              ))}
+            </div>
+          </>
+        )}
+        <button
+          className="danger-button"
+          onClick={clearSiteData}
+          style={clearSiteDataStyle}
+        >
+          Clear site data
+        </button>
+      </section>
+      <section style={sectionStyle}>
+        <h2 style={headingStyle}>Tools</h2>
+        {toolsError && (
+          <p style={errorStyle}>
+            Couldn't load the tools you have access to: {toolsError}
+          </p>
+        )}
+        <div style={tileGridStyle}>
+          {tools.map((item) => {
+            const [icon, ...title] = item.display.split(" ");
+            return (
+              <a
+                key={item.id}
+                href={`#${item.id}`}
+                className="tool-tile"
+                style={tileStyle}
+              >
+                <span style={tileIconStyle}>{icon}</span>
+                <span style={tileTitleStyle}>{title.join(" ")}</span>
+                <span style={tileDescriptionStyle}>{item.description}</span>
+              </a>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
 }
 
+const containerStyle = {
+  padding: "10px 20px",
+};
+
+const sectionStyle = {
+  marginBottom: 30,
+};
+
+const headingStyle = {
+  fontSize: 14,
+  fontWeight: 700,
+  letterSpacing: "0.1em",
+  textTransform: "uppercase" as const,
+  color: COLORS.TEXT_LIGHTER,
+  margin: "0 0 12px 0",
+};
+
+// Heading and pills share one line.
+const regionSectionStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 16,
+};
+
+const regionRowStyle = {
+  display: "flex",
+  flexWrap: "wrap" as const,
+  gap: 10,
+};
+
+// Same treatment as the region banner in the header.
+const regionButtonStyle = {
+  color: COLORS.REGION_TEXT,
+  fontSize: 16,
+  fontWeight: 700,
+  letterSpacing: "0.05em",
+  textTransform: "uppercase" as const,
+  textDecoration: "none",
+  padding: "6px 16px",
+  borderRadius: 4,
+  whiteSpace: "nowrap" as const,
+};
+
+// Same type as the region pills, but outlined so it doesn't read as a region.
+const clearSiteDataStyle = {
+  ...regionButtonStyle,
+  marginLeft: "auto",
+  color: COLORS.DANGER,
+  border: `1px solid ${COLORS.DANGER}`,
+  // Buttons don't inherit line height, and the border adds 2px, so match the
+  // pills' height explicitly.
+  lineHeight: "inherit",
+  padding: "5px 16px",
+  cursor: "pointer",
+};
+
+const tileGridStyle = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
+  gap: 16,
+};
+
+const tileStyle = {
+  display: "flex",
+  flexDirection: "column" as const,
+  gap: 6,
+  padding: 18,
+  borderRadius: 8,
+  textDecoration: "none",
+  color: COLORS.TEXT_DEFAULT,
+};
+
+const tileIconStyle = {
+  fontSize: 28,
+  lineHeight: 1,
+};
+
+const tileTitleStyle = {
+  fontSize: 18,
+  fontWeight: 700,
+};
+
+const tileDescriptionStyle = {
+  fontSize: 14,
+  lineHeight: 1.4,
+  color: COLORS.TEXT_LIGHTER,
+};
+
+const errorStyle = {
+  fontSize: 14,
+  color: COLORS.ERROR,
+};
+
 export default Welcome;