Build out storybook

src/alf/themes.ts

@@ -25,13 +25,13 @@ export const light = {
   palette: lightPalette,
   atoms: {
     text: {
-      color: tokens.color.gray_950,
+      color: tokens.color.gray_1000,
     },
     text_contrast_700: {
-      color: tokens.color.gray_600,
+      color: tokens.color.gray_700,
     },
     text_contrast_500: {
-      color: tokens.color.gray_400,
+      color: tokens.color.gray_500,
     },
     text_inverted: {
       color: tokens.color.white,
@@ -40,19 +40,25 @@ export const light = {
       backgroundColor: tokens.color.white,
     },
     bg_contrast_100: {
-      backgroundColor: tokens.color.gray_50,
-    },
-    bg_contrast_200: {
       backgroundColor: tokens.color.gray_100,
     },
-    bg_contrast_300: {
+    bg_contrast_200: {
       backgroundColor: tokens.color.gray_200,
     },
+    bg_contrast_300: {
+      backgroundColor: tokens.color.gray_300,
+    },
+    bg_positive: {
+      backgroundColor: tokens.color.green_500,
+    },
+    bg_negative: {
+      backgroundColor: tokens.color.red_400,
+    },
     border: {
-      borderColor: tokens.color.gray_100,
+      borderColor: tokens.color.gray_200,
     },
     border_contrast_500: {
-      borderColor: tokens.color.gray_400,
+      borderColor: tokens.color.gray_500,
     },
   },
 }
@@ -70,10 +76,10 @@ export const dark: Theme = {
       color: tokens.color.gray_500,
     },
     text_inverted: {
-      color: tokens.color.gray_950,
+      color: tokens.color.gray_1000,
     },
     bg: {
-      backgroundColor: tokens.color.gray_950,
+      backgroundColor: tokens.color.gray_1000,
     },
     bg_contrast_100: {
       backgroundColor: tokens.color.gray_900,
@@ -84,6 +90,12 @@ export const dark: Theme = {
     bg_contrast_300: {
       backgroundColor: tokens.color.gray_700,
     },
+    bg_positive: {
+      backgroundColor: tokens.color.green_400,
+    },
+    bg_negative: {
+      backgroundColor: tokens.color.red_400,
+    },
     border: {
       borderColor: tokens.color.gray_800,
     },

src/alf/tokens.ts

@@ -4,19 +4,19 @@ const GRAYSCALE_SATURATION = 22
 export const color = {
   white: '#FFFFFF',
 
-  gray_50: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
+  gray_0: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 100%)`,
-  gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 90%)`,
+  gray_100: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 95%)`,
-  gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 80%)`,
+  gray_200: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 85%)`,
-  gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 70%)`,
+  gray_300: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 75%)`,
-  gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 60%)`,
+  gray_400: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 65%)`,
-  gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 50%)`,
+  gray_500: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 55%)`,
-  gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 40%)`,
+  gray_600: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 45%)`,
-  gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 30%)`,
+  gray_700: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 35%)`,
-  gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 20%)`,
+  gray_800: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 25%)`,
-  gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 10%)`,
+  gray_900: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 15%)`,
-  gray_950: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
+  gray_1000: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 5%)`,
 
-  blue_50: `hsl(${BLUE_HUE}, 99%, 98%)`,
+  blue_0: `hsl(${BLUE_HUE}, 99%, 100%)`,
   blue_100: `hsl(${BLUE_HUE}, 99%, 93%)`,
   blue_200: `hsl(${BLUE_HUE}, 99%, 83%)`,
   blue_300: `hsl(${BLUE_HUE}, 99%, 73%)`,
@@ -26,31 +26,31 @@ export const color = {
   blue_700: `hsl(${BLUE_HUE}, 99%, 33%)`,
   blue_800: `hsl(${BLUE_HUE}, 99%, 23%)`,
   blue_900: `hsl(${BLUE_HUE}, 99%, 13%)`,
-  blue_950: `hsl(${BLUE_HUE}, 99%, 8%)`,
+  blue_1000: `hsl(${BLUE_HUE}, 99%, 8%)`,
 
-  green_50: `hsl(130, 60%, 95%)`,
+  green_0: `hsl(130, 60%, 100%)`,
-  green_100: `hsl(130, 60%, 90%)`,
+  green_100: `hsl(130, 60%, 95%)`,
-  green_200: `hsl(130, 60%, 80%)`,
+  green_200: `hsl(130, 60%, 85%)`,
-  green_300: `hsl(130, 60%, 70%)`,
+  green_300: `hsl(130, 60%, 75%)`,
-  green_400: `hsl(130, 60%, 60%)`,
+  green_400: `hsl(130, 60%, 65%)`,
-  green_500: `hsl(130, 60%, 50%)`,
+  green_500: `hsl(130, 60%, 55%)`,
-  green_600: `hsl(130, 60%, 40%)`,
+  green_600: `hsl(130, 60%, 45%)`,
-  green_700: `hsl(130, 60%, 30%)`,
+  green_700: `hsl(130, 60%, 35%)`,
-  green_800: `hsl(130, 60%, 20%)`,
+  green_800: `hsl(130, 60%, 25%)`,
-  green_900: `hsl(130, 60%, 10%)`,
+  green_900: `hsl(130, 60%, 15%)`,
-  green_950: `hsl(130, 60%, 5%)`,
+  green_1000: `hsl(130, 60%, 5%)`,
 
-  red_50: `hsl(349, 96%, 95%)`,
+  red_0: `hsl(349, 96%, 100%)`,
-  red_100: `hsl(349, 96%, 90%)`,
+  red_100: `hsl(349, 96%, 95%)`,
-  red_200: `hsl(349, 96%, 80%)`,
+  red_200: `hsl(349, 96%, 85%)`,
-  red_300: `hsl(349, 96%, 70%)`,
+  red_300: `hsl(349, 96%, 75%)`,
-  red_400: `hsl(349, 96%, 60%)`,
+  red_400: `hsl(349, 96%, 65%)`,
-  red_500: `hsl(349, 96%, 50%)`,
+  red_500: `hsl(349, 96%, 55%)`,
-  red_600: `hsl(349, 96%, 40%)`,
+  red_600: `hsl(349, 96%, 45%)`,
-  red_700: `hsl(349, 96%, 30%)`,
+  red_700: `hsl(349, 96%, 35%)`,
-  red_800: `hsl(349, 96%, 20%)`,
+  red_800: `hsl(349, 96%, 25%)`,
-  red_900: `hsl(349, 96%, 10%)`,
+  red_900: `hsl(349, 96%, 15%)`,
-  red_950: `hsl(349, 96%, 5%)`,
+  red_1000: `hsl(349, 96%, 5%)`,
 }
 
 export const space = {

src/view/com/Button.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Pressable, Text, PressableProps, TextProps} from 'react-native'
 import * as tokens from '#/alf/tokens'
-import {useTheme, atoms} from '#/alf'
+import {atoms} from '#/alf'
 
 export type ButtonType =
   | 'primary'
@@ -34,18 +34,23 @@ export type ButtonProps = Omit<PressableProps, 'children'> &
 export type ButtonTextProps = TextProps & VariantProps
 
 export function Button({children, style, type, size, ...rest}: ButtonProps) {
-  const t = useTheme()
   const {baseStyles, hoverStyles} = React.useMemo(() => {
     const baseStyles = []
     const hoverStyles = []
 
     switch (type) {
       case 'primary':
-        baseStyles.push(t.atoms.backgroundColor.primary)
+        baseStyles.push({
+          backgroundColor: tokens.color.blue_500,
+        })
         break
       case 'secondary':
-        baseStyles.push(t.atoms.backgroundColor.l2)
+        baseStyles.push({
-        hoverStyles.push(t.atoms.backgroundColor.l1)
+          backgroundColor: tokens.color.gray_200,
+        })
+        hoverStyles.push({
+          backgroundColor: tokens.color.gray_100,
+        })
         break
       default:
     }
@@ -53,18 +58,18 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
     switch (size) {
       case 'large':
         baseStyles.push(
-          atoms.padding.py.m,
+          atoms.py_md,
-          atoms.padding.px.xl,
+          atoms.px_xl,
-          atoms.radius.m,
+          atoms.rounded_md,
-          atoms.flex.gap.s,
+          atoms.gap_sm,
         )
         break
       case 'small':
         baseStyles.push(
-          atoms.padding.py.s,
+          atoms.py_sm,
-          atoms.padding.px.m,
+          atoms.px_md,
-          atoms.radius.s,
+          atoms.rounded_sm,
-          atoms.flex.gap.xs,
+          atoms.gap_xs,
         )
         break
       default:
@@ -74,7 +79,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
       baseStyles,
       hoverStyles,
     }
-  }, [type, size, t])
+  }, [type, size])
 
   const [state, setState] = React.useState({
     pressed: false,
@@ -123,8 +128,8 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
     <Pressable
       {...rest}
       style={state => [
-        atoms.flex.row,
+        atoms.flex_row,
-        atoms.flex.alignCenter,
+        atoms.align_center,
         ...baseStyles,
         ...(state.hovered ? hoverStyles : []),
         typeof style === 'function' ? style(state) : style,
@@ -155,7 +160,6 @@ export function ButtonText({
   size,
   ...rest
 }: ButtonTextProps) {
-  const t = useTheme()
   const textStyles = React.useMemo(() => {
     const base = []
 
@@ -164,31 +168,33 @@ export function ButtonText({
         base.push({color: tokens.color.white})
         break
       case 'secondary':
-        base.push(t.atoms.color.l5)
+        base.push({
+          color: tokens.color.gray_700,
+        })
         break
       default:
     }
 
     switch (size) {
       case 'small':
-        base.push(atoms.font.s, {paddingBottom: 1})
+        base.push(atoms.text_sm, {paddingBottom: 1})
         break
       case 'large':
-        base.push(atoms.font.m, {paddingBottom: 1})
+        base.push(atoms.text_md, {paddingBottom: 1})
         break
       default:
     }
 
     return base
-  }, [type, size, t])
+  }, [type, size])
 
   return (
     <Text
       {...rest}
       style={[
-        atoms.flex.one,
+        atoms.flex_1,
-        atoms.font.semi,
+        atoms.font_semibold,
-        atoms.font.center,
+        atoms.text_center,
         ...textStyles,
         style,
       ]}>

src/view/com/Typography.tsx

@@ -4,7 +4,7 @@ import {useTheme, atoms, web} from '#/alf'
 
 export function Text({style, ...rest}: TextProps) {
   const t = useTheme()
-  return <RNText style={[atoms.font.s, t.atoms.color.l7, style]} {...rest} />
+  return <RNText style={[atoms.text_sm, t.atoms.text, style]} {...rest} />
 }
 
 export function H1({style, ...rest}: TextProps) {
@@ -18,7 +18,7 @@ export function H1({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.font.xxl, atoms.font.bold, t.atoms.color.l7, style]}
+      style={[atoms.text_xl, atoms.font_bold, t.atoms.text, style]}
     />
   )
 }
@@ -34,7 +34,7 @@ export function H2({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.font.l, atoms.font.bold, t.atoms.color.l7, style]}
+      style={[atoms.text_lg, atoms.font_bold, t.atoms.text, style]}
     />
   )
 }
@@ -50,7 +50,7 @@ export function H3({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.font.m, atoms.font.bold, t.atoms.color.l7, style]}
+      style={[atoms.text_md, atoms.font_bold, t.atoms.text, style]}
     />
   )
 }
@@ -66,7 +66,7 @@ export function H4({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.font.s, atoms.font.bold, t.atoms.color.l7, style]}
+      style={[atoms.text_sm, atoms.font_bold, t.atoms.text, style]}
     />
   )
 }
@@ -82,7 +82,7 @@ export function H5({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.font.xs, atoms.font.bold, t.atoms.color.l7, style]}
+      style={[atoms.text_xs, atoms.font_bold, t.atoms.text, style]}
     />
   )
 }
@@ -98,7 +98,7 @@ export function H6({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[atoms.font.xxs, atoms.font.bold, t.atoms.color.l7, style]}
+      style={[atoms.text_xxs, atoms.font_bold, t.atoms.text, style]}
     />
   )
 }

src/view/screens/DebugNew.tsx

@@ -4,6 +4,7 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 
 import {useSetColorMode} from '#/state/shell'
+import * as tokens from '#/alf/tokens'
 import {atoms as a, useTheme, useBreakpoints, ThemeProvider as Alf} from '#/alf'
 import {Button, ButtonText} from '#/view/com/Button'
 import {Text, H1, H2, H3, H4, H5, H6} from '#/view/com/Typography'
@@ -59,13 +60,83 @@ function ThemedSection() {
   const t = useTheme()
 
   return (
-    <View style={[t.atoms.bg, a.p_md]}>
+    <View style={[t.atoms.bg, a.gap_md, a.p_xl]}>
-      <H3 style={[a.pb_md, a.font_bold]}>
+      <H3 style={[a.font_bold]}>theme.atoms.text</H3>
-        Colors (this theme is always light)
+      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <H3 style={[a.font_bold, t.atoms.text_contrast_700]}>
+        theme.atoms.text_contrast_700
       </H3>
+      <View style={[a.flex_1, t.atoms.border, a.border_t]} />
+      <H3 style={[a.font_bold, t.atoms.text_contrast_500]}>
+        theme.atoms.text_contrast_500
+      </H3>
+      <View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
+
       <View style={[a.flex_row, a.gap_md]}>
-        <View style={[a.flex_1, t.atoms.bg, {height: 60}]} />
+        <View
-        <View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} />
+          style={[
+            a.flex_1,
+            t.atoms.bg,
+            a.align_center,
+            a.justify_center,
+            {height: 60},
+          ]}>
+          <Text>theme.bg</Text>
+        </View>
+        <View
+          style={[
+            a.flex_1,
+            t.atoms.bg_contrast_100,
+            a.align_center,
+            a.justify_center,
+            {height: 60},
+          ]}>
+          <Text>theme.bg_contrast_100</Text>
+        </View>
+      </View>
+      <View style={[a.flex_row, a.gap_md]}>
+        <View
+          style={[
+            a.flex_1,
+            t.atoms.bg_contrast_200,
+            a.align_center,
+            a.justify_center,
+            {height: 60},
+          ]}>
+          <Text>theme.bg_contrast_200</Text>
+        </View>
+        <View
+          style={[
+            a.flex_1,
+            t.atoms.bg_contrast_300,
+            a.align_center,
+            a.justify_center,
+            {height: 60},
+          ]}>
+          <Text>theme.bg_contrast_300</Text>
+        </View>
+      </View>
+      <View style={[a.flex_row, a.gap_md]}>
+        <View
+          style={[
+            a.flex_1,
+            t.atoms.bg_positive,
+            a.align_center,
+            a.justify_center,
+            {height: 60},
+          ]}>
+          <Text>theme.bg_positive</Text>
+        </View>
+        <View
+          style={[
+            a.flex_1,
+            t.atoms.bg_negative,
+            a.align_center,
+            a.justify_center,
+            {height: 60},
+          ]}>
+          <Text>theme.bg_negative</Text>
+        </View>
       </View>
     </View>
   )
@@ -80,54 +151,29 @@ export function DebugScreen() {
         <View style={[a.p_xl, a.gap_xxl, {paddingBottom: 200}]}>
           <ThemeSelector />
 
-          <BreakpointDebugger />
-
-          <View>
-            <H3 style={[a.pb_md, a.font_bold]}>Colors</H3>
-            <View style={[a.flex_row, a.gap_md]}>
-              <View style={[a.flex_1, t.atoms.bg, {height: 60}]} />
-            </View>
-          </View>
-
-          <View>
-            <H3 style={[a.pb_md, a.font_bold]}>Spacing</H3>
-
-            <View style={[a.gap_md]}>
-              <View style={[a.flex_row, a.text_center]}>
-                <Text style={{width: 80}}>xxs (2px)</Text>
-                <View style={[a.flex_1, a.pt_xxs, t.atoms.bg_contrast_300]} />
-              </View>
-            </View>
-          </View>
-
-          <View>
-            <H3 style={[a.p_md, a.font_bold]}>Typography</H3>
-
-            <View style={[a.gap_md, a.p_md, t.atoms.bg_contrast_100]}>
-              <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 style={[a.text_xxl]}>H1 Size Text</Text>
-              <Text style={[a.text_xl]}>H2 Size Text</Text>
-              <Text style={[a.text_lg]}>H3 Size Text</Text>
-              <Text style={[a.text_md]}>H4 Size Text</Text>
-              <Text style={[a.text_sm]}>H5 Size Text</Text>
-              <Text style={[a.text_xs]}>H6 Size Text</Text>
-              <Text style={[a.text_xxs]}>Very Small Size Text</Text>
-            </View>
-          </View>
-
           <Alf theme="light">
             <ThemedSection />
           </Alf>
+          <Alf theme="dark">
+            <ThemedSection />
+          </Alf>
+
+          <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 style={[a.text_xxl]}>atoms.text_xxl</Text>
+          <Text style={[a.text_xl]}>atoms.text_xl</Text>
+          <Text style={[a.text_lg]}>atoms.text_lg</Text>
+          <Text style={[a.text_md]}>atoms.text_md</Text>
+          <Text style={[a.text_sm]}>atoms.text_sm</Text>
+          <Text style={[a.text_xs]}>atoms.text_xs</Text>
+          <Text style={[a.text_xxs]}>atoms.text_xxs</Text>
 
           <View style={[a.gap_md, a.align_start]}>
-            <H3 style={[a.pb_md, a.font_bold]}>Buttons</H3>
-
             <Button>
               {({state}) => (
                 <View style={[a.p_md, a.rounded_full, t.atoms.bg_contrast_300]}>
@@ -169,6 +215,325 @@ export function DebugScreen() {
               )}
             </Button>
           </View>
+
+          <View style={[a.gap_md]}>
+            <View style={[a.flex_row, a.gap_md]}>
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_0},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_100},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_200},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_300},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_400},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_500},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_600},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_700},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_800},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_900},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.gray_1000},
+                ]}
+              />
+            </View>
+
+            <View style={[a.flex_row, a.gap_md]}>
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_0},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_100},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_200},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_300},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_400},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_500},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_600},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_700},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_800},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_900},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.blue_1000},
+                ]}
+              />
+            </View>
+            <View style={[a.flex_row, a.gap_md]}>
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_0},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_100},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_200},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_300},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_400},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_500},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_600},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_700},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_800},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_900},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.green_1000},
+                ]}
+              />
+            </View>
+            <View style={[a.flex_row, a.gap_md]}>
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_0},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_100},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_200},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_300},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_400},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_500},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_600},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_700},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_800},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_900},
+                ]}
+              />
+              <View
+                style={[
+                  a.flex_1,
+                  {height: 60, backgroundColor: tokens.color.red_1000},
+                ]}
+              />
+            </View>
+          </View>
+
+          <View>
+            <H3 style={[a.pb_md, a.font_bold]}>Spacing</H3>
+
+            <View style={[a.gap_md]}>
+              <View style={[a.flex_row, a.align_center]}>
+                <Text style={{width: 80}}>xxs (2px)</Text>
+                <View style={[a.flex_1, a.pt_xxs, t.atoms.bg_contrast_300]} />
+              </View>
+
+              <View style={[a.flex_row, a.align_center]}>
+                <Text style={{width: 80}}>xs (4px)</Text>
+                <View style={[a.flex_1, a.pt_xs, t.atoms.bg_contrast_300]} />
+              </View>
+
+              <View style={[a.flex_row, a.align_center]}>
+                <Text style={{width: 80}}>sm (8px)</Text>
+                <View style={[a.flex_1, a.pt_sm, t.atoms.bg_contrast_300]} />
+              </View>
+
+              <View style={[a.flex_row, a.align_center]}>
+                <Text style={{width: 80}}>md (12px)</Text>
+                <View style={[a.flex_1, a.pt_md, t.atoms.bg_contrast_300]} />
+              </View>
+
+              <View style={[a.flex_row, a.align_center]}>
+                <Text style={{width: 80}}>lg (18px)</Text>
+                <View style={[a.flex_1, a.pt_lg, t.atoms.bg_contrast_300]} />
+              </View>
+
+              <View style={[a.flex_row, a.align_center]}>
+                <Text style={{width: 80}}>xl (24px)</Text>
+                <View style={[a.flex_1, a.pt_xl, t.atoms.bg_contrast_300]} />
+              </View>
+
+              <View style={[a.flex_row, a.align_center]}>
+                <Text style={{width: 80}}>xxl (32px)</Text>
+                <View style={[a.flex_1, a.pt_xxl, t.atoms.bg_contrast_300]} />
+              </View>
+            </View>
+          </View>
+
+          <BreakpointDebugger />
         </View>
       </CenteredView>
     </ScrollView>