diff --git a/docs/docs-next/.gitignore b/docs/docs-next/.gitignore
index b2d6de30624f6..c739995f49f8d 100644
--- a/docs/docs-next/.gitignore
+++ b/docs/docs-next/.gitignore
@@ -18,3 +18,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+*.sqlite
diff --git a/docs/docs-next/src/styles/custom.scss b/docs/docs-next/src/styles/custom.scss
index 057c7b1c91d0b..dfddbc1be8f52 100644
--- a/docs/docs-next/src/styles/custom.scss
+++ b/docs/docs-next/src/styles/custom.scss
@@ -3,10 +3,24 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
+@font-face {
+  font-family: 'Geist';
+  src: url('/fonts/GeistVF.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Geist-Mono';
+  src: url('/fonts/GeistMonoVF.woff') format('woff');
+}
 
 /* You can override the default Infima variables here. */
 /* Some styles heavily influenced from: https://github.com/electron/website/blob/main/src/css/custom.scss */
 :root {
+
+  --ifm-font-family-base: 'Geist';
+  --ifm-heading-font-family: 'Geist';
+  --ifm-font-family-monospace: 'Geist-Mono';
+
   // modified base colors
   --ifm-color-primary: var(--dagster-color-primary-500);
   --ifm-color-primary-dark: var(--dagster-color-primary-700);
@@ -17,7 +31,7 @@
   --ifm-color-primary-lightest: var(--dagster-color-gray-50);
 
   // modified base vars
-  --ifm-code-font-size: 95%;
+  --ifm-code-font-size: 90%;
   --ifm-navbar-height: 70px;
 
   // brand-specific colors
@@ -71,7 +85,7 @@
   --ifm-menu-color-active: var(--dagster-color-dark);
   // these require !important because of some weirdness in CSS ordering
   // see: https://github.com/facebook/docusaurus/issues/3678
-  --docusaurus-highlighted-code-line-bg: rgb(217, 220, 222);
+  --docusaurus-highlighted-code-line-bg: var(--dagster-color-yellow-50);
 
   // infima shadow levels
   // generated from https://www.joshwcomeau.com/shadow-palette/
@@ -123,6 +137,7 @@
   --dagster-inline-code: var(--dagster-color-secondary-light);
 }
 
+
 /* Main content */
 .theme-doc-markdown {
   max-width: 900px;
@@ -179,6 +194,10 @@ a.pyobject {
 .markdown {
   line-height: 150%;
 
+  code {
+    font-size: var(--ifm-code-font-size)
+  }
+
   a {
     font-weight: var(--ifm-font-weight-semibold);
     code {
diff --git a/docs/docs-next/static/fonts/GeistMonoVF.woff b/docs/docs-next/static/fonts/GeistMonoVF.woff
new file mode 100644
index 0000000000000..f2ae185cbfd16
Binary files /dev/null and b/docs/docs-next/static/fonts/GeistMonoVF.woff differ
diff --git a/docs/docs-next/static/fonts/GeistVF.woff b/docs/docs-next/static/fonts/GeistVF.woff
new file mode 100644
index 0000000000000..1b62daacff96d
Binary files /dev/null and b/docs/docs-next/static/fonts/GeistVF.woff differ