diff --git a/src/view/nova/components/Button.tsx b/src/view/nova/components/Button.tsx
index ae18cb7835..f7e504e900 100644
--- a/src/view/nova/components/Button.tsx
+++ b/src/view/nova/components/Button.tsx
@@ -4,6 +4,6 @@ import {styled} from '#/view/nova/system'
 export const Button = styled(Pressable, {
   px: 'l',
   py: 's',
-  bg: 'l3',
+  bg: 'l2',
   radius: 40,
 })
diff --git a/src/view/nova/components/Typography.tsx b/src/view/nova/components/Typography.tsx
index 627f6b8078..16b72ed1a9 100644
--- a/src/view/nova/components/Typography.tsx
+++ b/src/view/nova/components/Typography.tsx
@@ -3,7 +3,7 @@ import {styled} from '#/view/nova/system'
 import {web} from '#/view/nova/util/platform'
 
 export const Text = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 's',
 })
 
@@ -12,7 +12,7 @@ export const Text = styled(RNText, {
  * @see https://docs.expo.dev/develop/user-interface/fonts/
  */
 export const H1 = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 'l',
   gtMobile: {
     fontSize: 'xl',
@@ -23,7 +23,7 @@ export const H1 = styled(RNText, {
   }),
 })
 export const H2 = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 'm',
   gtMobile: {
     fontSize: 'l',
@@ -34,7 +34,7 @@ export const H2 = styled(RNText, {
   }),
 })
 export const H3 = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 'm',
   ...web({
     role: 'heading',
@@ -42,7 +42,7 @@ export const H3 = styled(RNText, {
   }),
 })
 export const H4 = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 's',
   ...web({
     role: 'heading',
@@ -50,7 +50,7 @@ export const H4 = styled(RNText, {
   }),
 })
 export const H5 = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 'xs',
   ...web({
     role: 'heading',
@@ -58,7 +58,7 @@ export const H5 = styled(RNText, {
   }),
 })
 export const H6 = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 'xxs',
   ...web({
     role: 'heading',
@@ -66,7 +66,7 @@ export const H6 = styled(RNText, {
   }),
 })
 export const P = styled(RNText, {
-  color: 'l8',
+  color: 'l7',
   fontSize: 's',
   ...web({
     role: 'paragraph',
diff --git a/src/view/nova/themes.ts b/src/view/nova/themes.ts
index 977a77eb25..eb40335184 100644
--- a/src/view/nova/themes.ts
+++ b/src/view/nova/themes.ts
@@ -1,15 +1,24 @@
 import {createTheme} from './lib/theme'
 
-const palette = {
+const BLUE_HUE = 210
+const GRAYSCALE_SATURATION = 12
+
+export const palette = {
   white: '#FFFFFF',
-  black: '#0A0B0D',
-  gray1: '#F7F9FC',
-  gray2: '#E4E8EE',
-  gray3: '#CED5DE',
-  gray4: '#828A99',
-  gray5: '#4D5564',
-  gray6: '#1D2126',
-  blue: '#1185FE',
+
+  /**
+   * Mathematical scale of grays, from lightest to darkest, all based on the
+   * primary blue color
+   */
+  gray1: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
+  gray2: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
+  gray3: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
+  gray4: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
+  gray5: `hsl(${BLUE_HUE} ${GRAYSCALE_SATURATION}%, 20%)`,
+  gray6: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
+  black: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
+
+  blue: `hsl(${BLUE_HUE}, 100%, 53%)`,
   green: '#54D469',
   red: '#FB4566',
 }
@@ -27,14 +36,14 @@ export const light = createTheme({
     },
     color: {
       primary: palette.blue,
-      l1: palette.white,
-      l2: palette.gray1,
-      l3: palette.gray2,
-      l4: palette.gray3,
-      l5: palette.gray4,
-      l6: palette.gray5,
-      l7: palette.gray6,
-      l8: palette.black,
+      l0: palette.white,
+      l1: palette.gray1,
+      l2: palette.gray2,
+      l3: palette.gray3,
+      l4: palette.gray4,
+      l5: palette.gray5,
+      l6: palette.gray6,
+      l7: palette.black,
     },
     fontSize: {
       xxs: 10,
@@ -54,6 +63,17 @@ export const light = createTheme({
       xl: 22,
       xxl: 26,
     },
+    borderRadius: {
+      s: 8,
+      m: 12,
+      xl: 36,
+      round: 999,
+    },
+    fontWeight: {
+      normal: '400',
+      semi: '700',
+      bold: '900',
+    },
   },
   properties: {
     /** Alias for `width` */
@@ -149,14 +169,14 @@ export const dark = createTheme({
     ...light.config.tokens,
     color: {
       ...light.config.tokens.color,
-      l1: palette.black,
-      l2: palette.gray6,
-      l3: palette.gray5,
-      l4: palette.gray4,
-      l5: palette.gray3,
-      l6: palette.gray2,
-      l7: palette.gray1,
-      l8: palette.white,
+      l0: palette.black,
+      l1: palette.gray6,
+      l2: palette.gray5,
+      l3: palette.gray4,
+      l4: palette.gray3,
+      l5: palette.gray2,
+      l6: palette.gray1,
+      l7: palette.white,
     },
   },
 })
diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx
index 90bc6e5601..ae8a983f1c 100644
--- a/src/view/screens/Debug.tsx
+++ b/src/view/screens/Debug.tsx
@@ -41,10 +41,10 @@ function BreakpointDebugger() {
 
   return (
     <Box>
-      <H3 pb="s" fontWeight="900">
+      <H3 pb="s" fontWeight="bold">
         Breakpoint Debugger
       </H3>
-      <Text pa="m" bg="l2" fontFamily="monospace">
+      <Text pa="m" bg="l1" fontFamily="monospace">
         {JSON.stringify(breakpoints, null, 2)}
       </Text>
     </Box>
@@ -54,12 +54,12 @@ function BreakpointDebugger() {
 function Hooks() {
   const outer = useStyle({
     pa: 'm',
-    bg: 'l2',
+    bg: 'l1',
   })
   const {heading} = useStyles({
     heading: {
       fontSize: 'l',
-      fontWeight: '900',
+      fontWeight: 'bold',
       gtTablet: {
         fontSize: 'xl',
       },
@@ -74,26 +74,42 @@ function Hooks() {
 }
 
 export function DebugScreen() {
+  const backgroundStyles = useStyle({
+    bg: 'l0',
+  })
+
   return (
     <ScrollView>
-      <CenteredView>
+      <CenteredView style={backgroundStyles}>
         <Box pa="xl" gap="xxl">
           <ThemeSelector />
+
+          <Box row gap="m">
+            <Box column bg="l0" h={60} />
+            <Box column bg="l1" h={60} />
+            <Box column bg="l2" h={60} />
+            <Box column bg="l3" h={60} />
+            <Box column bg="l4" h={60} />
+            <Box column bg="l5" h={60} />
+            <Box column bg="l6" h={60} />
+            <Box column bg="l7" h={60} />
+          </Box>
+
           <BreakpointDebugger />
 
           <Box>
-            <H3 pb="s" fontWeight="900">
+            <H3 pb="s" fontWeight="bold">
               Typography
             </H3>
 
-            <Box gap="m" pa="m" bg="l2">
+            <Box gap="m" pa="m" bg="l1">
               <H1>Heading 1</H1>
               <H2>Heading 2</H2>
               <H3>Heading 3</H3>
               <H4>Heading 4</H4>
               <H5>Heading 5</H5>
               <H6>Heading 6</H6>
-              <Text fontSize="xl" fontWeight="900">
+              <Text fontSize="xl" fontWeight="bold">
                 H1 Size Text
               </Text>
               <Text fontSize="l">H2 Size Text</Text>
@@ -105,10 +121,10 @@ export function DebugScreen() {
           </Box>
 
           <Box>
-            <H3 pb="s" fontWeight="900">
+            <H3 pb="s" fontWeight="bold">
               Grid
             </H3>
-            <Box pa="m" gap="m" bg="l3">
+            <Box pa="m" gap="m" bg="l1">
               <Box row gap="s">
                 <Box pa="s" bg="l6" />
                 <Box pa="s" bg="l6" />
@@ -116,21 +132,21 @@ export function DebugScreen() {
               </Box>
 
               <Box row gap="s">
-                <Box pa="s" bg="l6" flex={1} />
-                <Box pa="s" bg="l6" flex={1} />
-                <Box pa="s" bg="l6" flex={1} />
+                <Box column pa="s" bg="l6" />
+                <Box column pa="s" bg="l6" />
+                <Box column pa="s" bg="l6" />
               </Box>
 
               <Box row gap="s">
-                <Box pa="s" bg="l6" flex={1} />
-                <Box pa="s" bg="l6" flex={2} />
-                <Box pa="s" bg="l6" flex={1} />
+                <Box column pa="s" bg="l6" debug />
+                <Box column pa="s" bg="l6" debug flex={2} />
+                <Box column pa="s" bg="l6" />
               </Box>
             </Box>
           </Box>
 
           <Box>
-            <H3 pb="s" fontWeight="900">
+            <H3 pb="s" fontWeight="bold">
               Breakpoint styles
             </H3>
 
@@ -139,14 +155,14 @@ export function DebugScreen() {
               justifyContent="center"
               px="l"
               py="l"
-              bg="l3"
+              bg="l2"
               gtMobile={{
                 py: 'xl',
-                bg: 'l5',
+                bg: 'l4',
               }}
               gtTablet={{
                 py: 64,
-                bg: 'l7',
+                bg: 'l6',
               }}>
               <Box w={64} h={64} bg="primary" />
             </Box>