diff --git a/packages/freesewing.dev/components/footer.js b/packages/freesewing.dev/components/footer.js
index f04a7cbbb7d..dcd81c4e185 100644
--- a/packages/freesewing.dev/components/footer.js
+++ b/packages/freesewing.dev/components/footer.js
@@ -1,8 +1,8 @@
 const Footer = ({ app }) => {
   return (
       <footer>
-        <div className="theme-gradient h-8 w-full"></div>
-        <div className="p-4 flex flex-row">
+        <div className="theme-gradient h-8 w-full relative"></div>
+        <div className="p-4 flex flex-row bg-neutral -mt-4 z-0">
           <p>Some content here</p>
           <p>Some more content here</p>
         </div>
diff --git a/packages/freesewing.dev/components/header.js b/packages/freesewing.dev/components/header.js
index 51847ee40c2..37e1008ee25 100644
--- a/packages/freesewing.dev/components/header.js
+++ b/packages/freesewing.dev/components/header.js
@@ -12,12 +12,12 @@ const Left = props => (
 const Header = ({ app }) => {
   return (
       <header className={`
-        bg-primary
+        bg-neutral
         block
         sm:hidden
-        z-10
-        p-4
+        z-30
       `}>
+        <div className="p-2">
         <button
           className={`
             btn border-base-100 text-base-100 btn-sm border border-transparent bg-transparent
@@ -29,6 +29,8 @@ const Header = ({ app }) => {
               : <>Show menu &nbsp;<Right /></>
             }
         </button>
+        </div>
+        <div className="theme-gradient h-2 w-full z-10 relative -mb-2"></div>
       </header>
   )
 }
diff --git a/packages/freesewing.dev/hooks/useApp.js b/packages/freesewing.dev/hooks/useApp.js
index 3c1b00b821b..69de1de49b8 100644
--- a/packages/freesewing.dev/hooks/useApp.js
+++ b/packages/freesewing.dev/hooks/useApp.js
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import set from 'lodash.set'
 // Stores state in local storage
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
 // Translation
@@ -29,6 +30,19 @@ function useApp(full = true) {
   const openPrimaryMenu = () => setPrimaryMenu(true)
   const closePrimaryMenu = () => setPrimaryMenu(false)
 
+  /*
+   * Hot-update navigation method
+   */
+  const updateNavigation = (path, content) => {
+    const newNavigation = {...navigation}
+    if (typeof path === 'string') {
+      path = (path.slice(0,1) === '/')
+        ? path.slice(1).split('/')
+        : path.split('/')
+    }
+    setNavigation(set(navigation, path, content))
+  }
+
   /*
    * Translation method
    *
@@ -72,6 +86,7 @@ function useApp(full = true) {
     setTheme,
     startLoading: () => setLoading(true),
     stopLoading: () => setLoading(false),
+    updateNavigation,
 
     // State handlers
     togglePrimaryMenu,
diff --git a/packages/freesewing.dev/pages/index.js b/packages/freesewing.dev/pages/index.js
index 5d2afbc6591..11347a13e2a 100644
--- a/packages/freesewing.dev/pages/index.js
+++ b/packages/freesewing.dev/pages/index.js
@@ -8,7 +8,6 @@ export default (props) => {
     <Page app={app} title='FIXME: Create homepage content'>
       <Logo size={200} theme={app.theme}/>
       <button className="btn btn-primary" onClick={app.togglePrimaryMenu}>toggle menu</button>
-      <div className="theme-gradient loading">test</div>
     </Page>
   )
 }
diff --git a/packages/freesewing.dev/pages/typography.js b/packages/freesewing.dev/pages/typography.js
new file mode 100644
index 00000000000..370b1428fef
--- /dev/null
+++ b/packages/freesewing.dev/pages/typography.js
@@ -0,0 +1,96 @@
+import { useEffect } from 'react'
+import Page from 'shared/components/wrappers/page.js'
+import useApp from 'site/hooks/useApp.js'
+import Popout from 'shared/components/popout.js'
+
+export default (props) => {
+  const app = useApp()
+
+  useEffect(() => {
+    app.updateNavigation(
+      ['typography'],
+      {
+        __title: 'Typography',
+        __linktitle: 'Typography',
+        __slug: 'typography',
+        __order: 'typography'
+      })
+  }, [])
+
+  const p = (
+    <p>
+      This paragraph is here to show the vertical spacing between headings and paragraphs.
+      In addition, let's make it a bit longer so we can see the line height as the text wraps.
+    </p>
+  )
+
+  return (
+    <Page app={app} title='Typography'>
+      <div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
+        <p>This typography page shows an overview of different elements and how they are styled.</p>
+        <p>It's a good starting point for theme development.</p>
+        <h2>Headings (this is h2)</h2>
+        {p}
+        <h3>This is h3</h3>{p}
+        <h4>This is h4</h4>{p}
+        <h5>This is h5</h5>{p}
+        <h6>This is h6</h6>{p}
+        <h2>Links and buttons</h2>
+        <p>A regular link <a href="#">looks like this</a>, whereas buttons look like this:</p>
+        <h3>Main button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-neutral">Neutral button</button>
+          <button className="btn btn-primary">Primary button</button>
+          <button className="btn btn-secondary">Secondary button</button>
+          <button className="btn btn-accent">Accent button</button>
+        </div>
+        <h3>State button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-info">Info button</button>
+          <button className="btn btn-success">Success button</button>
+          <button className="btn btn-warning">Warning button</button>
+          <button className="btn btn-error">Error button</button>
+        </div>
+        <h3>Other button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-ghost">Ghost button</button>
+          <button className="btn btn-link">Link button</button>
+        </div>
+        <h3>Outlined button styles</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-outline btn-neutral">Neutral button</button>
+          <button className="btn btn-outline btn-primary">Primary button</button>
+          <button className="btn btn-outline btn-secondary">Secondary button</button>
+          <button className="btn btn-outline btn-accent">Accent button</button>
+        </div>
+        <h3>Button sizes</h3>
+        <div className="flex flex-row gap-2 flex-wrap">
+          <button className="btn btn-primary btn-lg">Large</button>
+          <button className="btn btn-primary">Normal</button>
+          <button className="btn btn-primary btn-sm">Small</button>
+          <button className="btn btn-primary btn-xs">Tiny</button>
+          <button className="btn btn-primary btn-lg btn-wide">Large wide</button>
+          <button className="btn btn-primary btn-wide">Normal wide</button>
+          <button className="btn btn-primary btn-sm btn-wide">Small wide</button>
+          <button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
+        </div>
+        <h2>Popouts</h2>
+        <p>The Popout component is what powers various custom MDX components under the hood:</p>
+        {['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map(type => {
+          const props = {}
+          props[type] = true
+          return (
+            <div key={type}>
+              <h3 className="capitalize">{type}</h3>
+              <Popout {...props}>
+                <h5>I am the {type} title</h5>
+                {p}
+              </Popout>
+            </div>
+          )
+        })}
+      </div>
+    </Page>
+  )
+}
+
diff --git a/packages/freesewing.shared/components/layouts/default.js b/packages/freesewing.shared/components/layouts/default.js
index ddc8abf3a5e..41cc4e9b3e5 100644
--- a/packages/freesewing.shared/components/layouts/default.js
+++ b/packages/freesewing.shared/components/layouts/default.js
@@ -25,7 +25,7 @@ const Breadcrumbs = ({ app, slug=false, title }) => {
   for (const i in chunks) {
     const j = parseInt(i)+parseInt(1)
     const page = get(app.navigation, chunks.slice(0,j))
-    crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
+    if (page) crumbs.push([page.__linktitle, '/'+chunks.slice(0,j).join('/'), (j < chunks.length)])
   }
 
   return (
@@ -79,6 +79,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
       <div className={`
         h-1 w-full theme-gradient ${app.loading ? 'loading' : ''}
         fixed top-0 right-0 z-20
+        -mt-1
       `}></div>
       <main className={`
         grow flex flex-row
@@ -90,7 +91,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
         <aside className={`
           fixed top-0 right-0
           ${app.primaryMenu ? '' : 'translate-x-[-100%]'} transition-transform
-          pt-16
+          pt-24
           sm:pt-4
           sm:relative sm:transform-none
           h-screen w-screen
@@ -101,6 +102,7 @@ const DefaultLayout = ({ app, title=false, children=[]}) => {
           sm:sticky
           overflow-y-scroll
           py-4
+          z-20
         `}>
           <PrimaryNavigation app={app} active={slug}/>
         </aside>
diff --git a/packages/freesewing.shared/components/popout.js b/packages/freesewing.shared/components/popout.js
index c4a5a79b345..e2900449dc3 100644
--- a/packages/freesewing.shared/components/popout.js
+++ b/packages/freesewing.shared/components/popout.js
@@ -1,11 +1,11 @@
 import Icon from "shared/components/icon"
 
 const colors = {
-  note: 'accent',
-  tip: 'secondary',
+  note: 'primary',
+  tip: 'accent',
   warning: 'error',
   fixme: 'warning',
-  link: 'info',
+  link: 'secondary',
   related: 'info',
   none: '',
 }
@@ -20,6 +20,10 @@ forceTailwind = <p className="border-warning bg-warning" />
 forceTailwind = <p className="text-warning" />
 forceTailwind = <p className="border-info bg-info" />
 forceTailwind = <p className="text-info" />
+forceTailwind = <p className="border-success bg-success" />
+forceTailwind = <p className="text-success" />
+forceTailwind = <p className="border-primary bg-primary" />
+forceTailwind = <p className="text-primary" />
 
 const Popout = (props) => {
   let type = 'none'
diff --git a/packages/freesewing.shared/styles/globals.css b/packages/freesewing.shared/styles/globals.css
index c343d5b4da8..5a37ac4865a 100644
--- a/packages/freesewing.shared/styles/globals.css
+++ b/packages/freesewing.shared/styles/globals.css
@@ -93,6 +93,20 @@
   svg.freesewing.pattern .fill-current { @apply fs-fill-current }
 }
 
+/* Override DaisyUI button text color */
+.btn-info {
+  color: var(--btn-info-content);
+}
+.btn-success {
+  color: var(--btn-success-content);
+}
+.btn-warning {
+  color: var(--btn-warning-content);
+}
+.btn-error {
+  color: var(--btn-error-content);
+}
+
 /* Theme gradient */
 .theme-gradient {
   background: var(--theme-gradient);
@@ -102,6 +116,8 @@
   animation-duration: 2s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
+  margin-top: 0;
+  transition: margin-top 0.2s ease-out;
 }
 @keyframes MOVE-BG {
    from {
diff --git a/packages/freesewing.shared/themes/dark/index.js b/packages/freesewing.shared/themes/dark/index.js
index ba098d10d73..5a7fea56ee8 100644
--- a/packages/freesewing.shared/themes/dark/index.js
+++ b/packages/freesewing.shared/themes/dark/index.js
@@ -3,42 +3,43 @@ const gray = colors.neutral
 
 module.exports = {
   'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
-  'primary': gray['300'],
-  'primary-focus': colors.violet['300'],
-  'primary-content': gray['900'],
+  'primary': colors.violet['700'],
+  'primary-focus': colors.violet['600'],
+  'primary-content': colors.violet['50'],
 
-  'secondary': colors.violet['500'],
-  'secondary-focus': colors.violet['400'],
-  'secondary-content': colors.violet['900'],
+  'secondary': colors.sky['500'],
+  'secondary-focus': colors.sky['400'],
+  'secondary-content': colors.sky['50'],
 
-  'accent': colors.emerald['500'],
-  'accent-focus': colors.emerald['400'],
-  'accent-content': gray['900'],
+  'accent': colors.pink['500'],
+  'accent-focus': colors.pink['400'],
+  'accent-content': colors.pink['50'],
 
-  'neutral': gray['900'],
-  'neutral-focus': gray['800'],
-  'neutral-content': gray['300'],
+  'neutral': colors.neutral['300'],
+  'neutral-focus': colors.neutral['50'],
+  'neutral-content': colors.neutral['900'],
 
-  'base-100': gray['900'],
-  'base-200': gray['700'],
-  'base-300': gray['600'],
-  'base-content': gray['300'],
+  'base-100': colors.neutral['900'],
+  'base-200': colors.neutral['700'],
+  'base-300': colors.neutral['600'],
+  'base-content': colors.neutral['300'],
 
-  'info': colors.emerald['700'],
-  'success': colors.green['500'],
-  'warning': colors.amber['500'],
-  'error': colors.red['400'],
+  'info': colors.indigo['700'],
+  'success': colors.green['700'],
+  'warning': colors.orange['500'],
+  'error': colors.red['700'],
+
+  '--btn-info-content': colors.neutral[50],
+  '--btn-success-content': colors.neutral[50],
+  '--btn-warning-content': colors.neutral[50],
+  '--btn-error-content': colors.neutral[50],
 
   '--theme-gradient': `repeating-linear-gradient(
     -45deg,
-    ${colors.gray[500]},
-    ${colors.gray[500]} 10px,
-    transparent 10px,
-    transparent 20px,
-    ${colors.violet[500]} 20px,
-    ${colors.violet[500]} 30px,
-    transparent 30px,
-    transparent 40px
+    ${colors.gray[300]},
+    ${colors.gray[300]} 15px,
+    transparent 15px,
+    transparent 25px
   )`,
 
   '--code-background-color': '#111',
diff --git a/packages/freesewing.shared/themes/hax0r/index.js b/packages/freesewing.shared/themes/hax0r/index.js
index bb0f872dc21..6ab481524fe 100644
--- a/packages/freesewing.shared/themes/hax0r/index.js
+++ b/packages/freesewing.shared/themes/hax0r/index.js
@@ -1,45 +1,46 @@
 const colors = require('tailwindcss/colors')
 
+const bg = '#002808'
 module.exports = {
   'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
-  'primary': colors.lime['600'],
-  'primary-focus': colors.lime['700'],
-  'primary-content': colors.lime['100'],
+  'primary': colors.lime['700'],
+  'primary-focus': colors.lime['600'],
+  'primary-content': colors.lime['50'],
 
-  'secondary': colors.lime['600'],
-  'secondary-focus': colors.lime['500'],
-  'secondary-content': colors.lime['100'],
+  'secondary': colors.lime['700'],
+  'secondary-focus': colors.lime['600'],
+  'secondary-content': bg,
 
-  'accent': colors.yellow['400'],
-  'accent-focus': colors.yellow['500'],
-  'accent-content': colors.neutral['900'],
+  'accent': colors.lime['700'],
+  'accent-focus': colors.lime['600'],
+  'accent-content': colors.yellow['200'],
 
-  'neutral': colors.lime['900'],
-  'neutral-focus': colors.neutral['200'],
-  'neutral-content': colors.lime['300'],
+  'neutral': colors.lime['700'],
+  'neutral-focus': colors.lime['600'],
+  'neutral-content': colors.lime['200'],
 
-  'base-100': '#002808',
-  'base-200': '#002808',
-  'base-300': colors.lime['900'],
+  'base-100': bg,
+  'base-200': colors.lime['900'],
+  'base-300': colors.lime['800'],
   'base-content': colors.lime['500'],
 
   'info': colors.lime['700'],
-  'success': colors.green['600'],
-  'warning': colors.amber['400'],
-  'error': colors.red['400'],
+  'success': colors.lime['700'],
+  'warning': colors.lime['700'],
+  'error': colors.lime['700'],
 
+  '--btn-info-content': colors.teal[300],
+  '--btn-success-content': colors.green[300],
+  '--btn-warning-content': colors.orange[300],
+  '--btn-error-content': colors.red[300],
   '--rounded-btn': '0',
 
   '--theme-gradient': `repeating-linear-gradient(
     -45deg,
-    ${colors.lime[500]},
-    ${colors.lime[500]} 10px,
-    transparent 10px,
-    transparent 20px,
-    ${colors.lime[700]} 20px,
-    ${colors.lime[700]} 30px,
-    transparent 30px,
-    transparent 40px
+    ${colors.lime['700']},
+    ${colors.lime['700']} 15px,
+    ${bg} 15px,
+    ${bg} 30px
   )`,
 
   '--code-background-color': '#002407',
diff --git a/packages/freesewing.shared/themes/light/index.js b/packages/freesewing.shared/themes/light/index.js
index e2762681a9c..65663ba868b 100644
--- a/packages/freesewing.shared/themes/light/index.js
+++ b/packages/freesewing.shared/themes/light/index.js
@@ -51,7 +51,7 @@ module.exports = {
   // primary-focus: The :hover color for the primary button
   'primary-focus': colors.violet['600'],
   // primary-content: The text color for the primary button
-  'primary-content': colors.violet['50'],
+  'primary-content': colors.neutral['50'],
 
   // secondary: The link color
   'secondary': colors.sky['500'],
@@ -59,37 +59,45 @@ module.exports = {
   'secondary-focus': colors.sky['400'],
   // secondary: An alternative link color for on dark backgrounds
   // Typically a light shade of the secondary color
-  'secondary-content': colors.sky['300'],
+  'secondary-content': colors.sky['50'],
 
   // accent: The accent color is used to highlight active things
   // Should be something is positive/neutral. Avoid red or orange.
-  'accent': colors.emerald['500'],
+  'accent': colors.pink['400'],
   // accent-focus: The :hover color for the accent button
-  'accent-focus': colors.emerald['400'],
+  'accent-focus': colors.pink['300'],
   // accent-content: The text color for the accent button
-  'accent-content': colors.neutral['900'],
+  'accent-content': colors.pink['50'],
 
   // neutral: Used as the background for the footer and code blocks.
   // Should always be dark(ish) because of prism syntax highlighting
-  'neutral': colors.neutral['800'],
+  'neutral': colors.neutral['900'],
   // neutral-focus: Typically a shade lighter than neutral
   'neutral-focus': colors.neutral['700'],
   // neutral-content: The text color on neutral backgrounds
-  'neutral-content': colors.neutral['200'],
+  'neutral-content': colors.neutral['50'],
 
   // info: Used rarely, can be another color best somewhat neutral looking
   // and should work with the default text color
-  'info': colors.violet['400'],
+  'info': colors.indigo['600'],
+  // Text color on the info button
+  '--btn-info-content': colors.neutral[50],
   // success: Used rarely, but if it is it's in notifications indicating success
   // Typically some shade of green
-  'success': colors.green['500'],
+  'success': colors.green['600'],
+  // Text color on the success button
+  '--btn-success-content': colors.neutral[50],
   // warning: We don't do warnings, but this is used for the tabs under code blocks
   // and a couple of other UI elements.
-  'warning': colors.amber['500'],
+  'warning': colors.orange['500'],
+  // Text color on the warning button
+  '--btn-warning-content': colors.neutral[50],
   // error: Used rarely, but if it is it's in notifications indicating success
   // or the danger button
   // Typically some shade of red
   'error': colors.red['600'],
+  // Text color on the error button
+  '--btn-error-content': colors.neutral[50],
 
   /* VARIOUS
   *
@@ -125,14 +133,10 @@ module.exports = {
   */
   '--theme-gradient': `repeating-linear-gradient(
     -45deg,
-    ${colors.sky[400]},
-    ${colors.sky[400]} 10px,
-    transparent 10px,
-    transparent 20px,
-    ${colors.violet[400]} 20px,
-    ${colors.violet[400]} 30px,
-    transparent 30px,
-    transparent 40px
+    ${colors.gray[900]},
+    ${colors.gray[900]} 15px,
+    transparent 15px,
+    transparent 25px
   )`,
 
   /* CODE HIGHLIGHTING COLORS