diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass
index 257205d5..a3e025a5 100644
--- a/app/assets/stylesheets/_layout.sass
+++ b/app/assets/stylesheets/_layout.sass
@@ -1,4 +1,5 @@
@import "partials/icon"
+@import fonts
@import url(//fonts.googleapis.com/css?family=Droid+Sans:400,700)
@import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic)
@import url(//fonts.googleapis.com/css?family=Calligraffitti)
diff --git a/app/assets/stylesheets/fonts.sass b/app/assets/stylesheets/fonts.sass
new file mode 100644
index 00000000..f9fec655
--- /dev/null
+++ b/app/assets/stylesheets/fonts.sass
@@ -0,0 +1,14 @@
+/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl
+@font-face
+ font-family: Delicious
+ src: local("Delicious"), font-url("Delicious-Roman.otf")
+
+@font-face
+ font-family: Delicious
+ font-weight: bold
+ src: local("Delicious"), font-url("Delicious-Bold.otf")
+
+@font-face
+ font-family: Delicious
+ font-style: italic
+ src: local("Delicious"), font-url("Delicious-Italic.otf")
diff --git a/app/javascript/wardrobe-2020/AppProvider.js b/app/javascript/wardrobe-2020/AppProvider.js
index 333ab415..6aa29d3a 100644
--- a/app/javascript/wardrobe-2020/AppProvider.js
+++ b/app/javascript/wardrobe-2020/AppProvider.js
@@ -2,7 +2,7 @@ import React from "react";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import { Auth0Provider } from "@auth0/auth0-react";
-import { ChakraProvider, Box } from "@chakra-ui/react";
+import { ChakraProvider, Box, useColorModeValue } from "@chakra-ui/react";
import { ApolloProvider } from "@apollo/client";
import { useAuth0 } from "@auth0/auth0-react";
import { BrowserRouter } from "react-router-dom";
@@ -141,6 +141,8 @@ function setupLogging() {
* ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its
* children (or, well, any element with the chakra-css-reset class).
*
+ * We also apply some base styles, like the default text color.
+ *
* TODO: What about Chakra's portal elements like toast messages, which are
* intentionally mounted elsewhere in the document?
*
@@ -150,9 +152,13 @@ function setupLogging() {
* the selector `:where(.chakra-css-reset) h1` is lower specificity.
*/
function ScopedCSSReset({ children }) {
+ const baseTextColor = useColorModeValue("green.800", "green.50");
+
return (
<>
- {children}
+
+ {children}
+