diff --git a/src/alf/README.md b/src/alf/README.md
index 175b7d2b92..81a2096ffe 100644
--- a/src/alf/README.md
+++ b/src/alf/README.md
@@ -1,34 +1,23 @@
 # Application Layout Framework (ALF)
 
 ```tsx
-import { View } from 'react-native'
-import { useAlf } from '#/alf'
-import { H3 } from '#/view/com/Typography'
+import {View} from 'react-native'
+import {atoms, useTheme, useBreakpoints, web} from '#/alf'
+import {H3, Text} from '#/view/com/Typography'
 
 function App() {
-  const { styles, breakpoints } = useAlf()
+  const theme = useAlf()
+  const breakpoints = useBreakpoints()
 
   return (
-    <View style={[styles.flex.row, styles.padding.pa.xl]}>
-      <H3 style={[styles.padding.pb.m, styles.color.primary]}>I'm the blue color</H3>
-    </View>
-  )
-}
-```
-
-Is a little nicer than:
-
-```tsx
-import { View } from 'react-native'
-import { useTheme, styles } from '#/alf'
-import { H3 } from '#/view/com/Typography'
-
-function App() {
-  const theme = useTheme()
-
-  return (
-    <View style={[styles.flex.row, styles.padding.pa.xl]}>
-      <H3 style={[styles.padding.pb.m, theme.color.primary]}>I'm the blue color</H3>
+    <View style={[atoms.flex.row, atoms.padding.pa.xl, web({height: '100vh'})]}>
+      <H3 style={[atoms.padding.pb.m, theme.atoms.color.primary]}>
+        I'm the blue color
+      </H3>
+
+      {breakpoints.gtMobile && (
+        <Text style={[theme.atoms.backgroundColor.l1]}>Only visible on tablet and above!</Text>
+      )}
     </View>
   )
 }
diff --git a/src/alf/styles.ts b/src/alf/atoms.ts
similarity index 99%
rename from src/alf/styles.ts
rename to src/alf/atoms.ts
index abf6123449..651ba0fc9e 100644
--- a/src/alf/styles.ts
+++ b/src/alf/atoms.ts
@@ -252,7 +252,7 @@ const margin = Object.keys(tokens.space).reduce(
   },
 )
 
-export const styles = {
+export const atoms = {
   radius,
   padding,
   margin,
diff --git a/src/alf/index.tsx b/src/alf/index.tsx
index c8ca3d0391..ce8f5e967f 100644
--- a/src/alf/index.tsx
+++ b/src/alf/index.tsx
@@ -2,8 +2,7 @@ import React from 'react'
 import {Dimensions} from 'react-native'
 import * as themes from '#/alf/themes'
 
-export * as tokens from '#/alf/tokens'
-export {styles} from '#/alf/styles'
+export {atoms} from '#/alf/atoms'
 export * from '#/alf/util/platform'
 
 type BreakpointName = keyof typeof breakpoints
@@ -34,7 +33,7 @@ function getActiveBreakpoints({width}: {width: number}) {
  */
 export const Context = React.createContext<{
   themeName: themes.ThemeName
-  styles: themes.Theme
+  theme: themes.Theme
   breakpoints: {
     active: BreakpointName | undefined
     gtMobile: boolean
@@ -42,7 +41,7 @@ export const Context = React.createContext<{
   }
 }>({
   themeName: 'light',
-  styles: themes.light,
+  theme: themes.light,
   breakpoints: {
     active: undefined,
     gtMobile: false,
@@ -73,7 +72,7 @@ export function ThemeProvider({
       value={React.useMemo(
         () => ({
           themeName: themeName,
-          styles: theme,
+          theme: theme,
           breakpoints,
         }),
         [theme, themeName, breakpoints],
@@ -83,8 +82,8 @@ export function ThemeProvider({
   )
 }
 
-export function useAlf() {
-  return React.useContext(Context)
+export function useTheme() {
+  return React.useContext(Context).theme
 }
 
 export function useBreakpoints() {
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
index 51c2939b65..31d4ee2d0f 100644
--- a/src/alf/themes.ts
+++ b/src/alf/themes.ts
@@ -1,5 +1,4 @@
 import * as tokens from '#/alf/tokens'
-import {styles as sharedStyles} from '#/alf/styles'
 
 export type ThemeName = 'light' | 'dark'
 export type Theme = typeof light
@@ -47,37 +46,41 @@ export const darkPalette: Palette = {
 } as const
 
 export const light = {
-  ...sharedStyles,
-  color: Object.keys(lightPalette).reduce((acc, key) => {
-    const k = key as keyof Palette
-    acc[k] = {
-      color: lightPalette[k],
-    }
-    return acc
-  }, {} as Record<keyof Palette, {color: string}>),
-  backgroundColor: Object.keys(lightPalette).reduce((acc, key) => {
-    const k = key as keyof Palette
-    acc[k] = {
-      backgroundColor: lightPalette[k],
-    }
-    return acc
-  }, {} as Record<keyof Palette, {backgroundColor: string}>),
+  palette: lightPalette,
+  atoms: {
+    color: Object.keys(lightPalette).reduce((acc, key) => {
+      const k = key as keyof Palette
+      acc[k] = {
+        color: lightPalette[k],
+      }
+      return acc
+    }, {} as Record<keyof Palette, {color: string}>),
+    backgroundColor: Object.keys(lightPalette).reduce((acc, key) => {
+      const k = key as keyof Palette
+      acc[k] = {
+        backgroundColor: lightPalette[k],
+      }
+      return acc
+    }, {} as Record<keyof Palette, {backgroundColor: string}>),
+  },
 } as const
 
-export const dark = {
-  ...sharedStyles,
-  color: Object.keys(darkPalette).reduce((acc, key) => {
-    const k = key as keyof Palette
-    acc[k] = {
-      color: darkPalette[k],
-    }
-    return acc
-  }, {} as Record<keyof Palette, {color: string}>),
-  backgroundColor: Object.keys(darkPalette).reduce((acc, key) => {
-    const k = key as keyof Palette
-    acc[k] = {
-      backgroundColor: darkPalette[k],
-    }
-    return acc
-  }, {} as Record<keyof Palette, {backgroundColor: string}>),
+export const dark: Theme = {
+  palette: darkPalette,
+  atoms: {
+    color: Object.keys(darkPalette).reduce((acc, key) => {
+      const k = key as keyof Palette
+      acc[k] = {
+        color: darkPalette[k],
+      }
+      return acc
+    }, {} as Record<keyof Palette, {color: string}>),
+    backgroundColor: Object.keys(darkPalette).reduce((acc, key) => {
+      const k = key as keyof Palette
+      acc[k] = {
+        backgroundColor: darkPalette[k],
+      }
+      return acc
+    }, {} as Record<keyof Palette, {backgroundColor: string}>),
+  },
 } as const
diff --git a/src/view/com/Button.tsx b/src/view/com/Button.tsx
index 569743943f..974fb64837 100644
--- a/src/view/com/Button.tsx
+++ b/src/view/com/Button.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {Pressable, Text, PressableProps, TextProps} from 'react-native'
-import {useAlf, tokens} from '#/alf'
+import * as tokens from '#/alf/tokens'
+import {useTheme, atoms} from '#/alf'
 
 export type ButtonType =
   | 'primary'
@@ -33,18 +34,18 @@ export type ButtonProps = Omit<PressableProps, 'children'> &
 export type ButtonTextProps = TextProps & VariantProps
 
 export function Button({children, style, type, size, ...rest}: ButtonProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const {baseStyles, hoverStyles} = React.useMemo(() => {
     const baseStyles = []
     const hoverStyles = []
 
     switch (type) {
       case 'primary':
-        baseStyles.push(styles.backgroundColor.primary)
+        baseStyles.push(t.atoms.backgroundColor.primary)
         break
       case 'secondary':
-        baseStyles.push(styles.backgroundColor.l2)
-        hoverStyles.push(styles.backgroundColor.l1)
+        baseStyles.push(t.atoms.backgroundColor.l2)
+        hoverStyles.push(t.atoms.backgroundColor.l1)
         break
       default:
     }
@@ -52,18 +53,18 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
     switch (size) {
       case 'large':
         baseStyles.push(
-          styles.padding.py.m,
-          styles.padding.px.xl,
-          styles.radius.m,
-          styles.flex.gap.s,
+          atoms.padding.py.m,
+          atoms.padding.px.xl,
+          atoms.radius.m,
+          atoms.flex.gap.s,
         )
         break
       case 'small':
         baseStyles.push(
-          styles.padding.py.s,
-          styles.padding.px.m,
-          styles.radius.s,
-          styles.flex.gap.xs,
+          atoms.padding.py.s,
+          atoms.padding.px.m,
+          atoms.radius.s,
+          atoms.flex.gap.xs,
         )
         break
       default:
@@ -73,7 +74,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
       baseStyles,
       hoverStyles,
     }
-  }, [type, size, styles])
+  }, [type, size, t])
 
   const [state, setState] = React.useState({
     pressed: false,
@@ -122,8 +123,8 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
     <Pressable
       {...rest}
       style={state => [
-        styles.flex.row,
-        styles.flex.alignCenter,
+        atoms.flex.row,
+        atoms.flex.alignCenter,
         ...baseStyles,
         ...(state.hovered ? hoverStyles : []),
         typeof style === 'function' ? style(state) : style,
@@ -154,7 +155,7 @@ export function ButtonText({
   size,
   ...rest
 }: ButtonTextProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const textStyles = React.useMemo(() => {
     const base = []
 
@@ -163,33 +164,31 @@ export function ButtonText({
         base.push({color: tokens.color.white})
         break
       case 'secondary':
-        base.push(styles.color.l5)
+        base.push(t.atoms.color.l5)
         break
       default:
     }
 
     switch (size) {
       case 'small':
-        base.push(styles.font.s, {paddingBottom: 1})
+        base.push(atoms.font.s, {paddingBottom: 1})
         break
       case 'large':
-        base.push(styles.font.m, {paddingBottom: 1})
+        base.push(atoms.font.m, {paddingBottom: 1})
         break
       default:
     }
 
     return base
-  }, [type, size, styles])
-
-  console.log(textStyles)
+  }, [type, size, t])
 
   return (
     <Text
       {...rest}
       style={[
-        styles.flex.one,
-        styles.font.semi,
-        styles.font.center,
+        atoms.flex.one,
+        atoms.font.semi,
+        atoms.font.center,
         ...textStyles,
         style,
       ]}>
diff --git a/src/view/com/Typography.tsx b/src/view/com/Typography.tsx
index c2a8139a8a..ffb35e3cd4 100644
--- a/src/view/com/Typography.tsx
+++ b/src/view/com/Typography.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import {Text as RNText, TextProps} from 'react-native'
-import {useAlf, web} from '#/alf'
+import {useTheme, atoms, web} from '#/alf'
 
 export function Text({style, ...rest}: TextProps) {
-  const {styles} = useAlf()
-  return <RNText style={[styles.font.s, styles.color.l7, style]} {...rest} />
+  const t = useTheme()
+  return <RNText style={[atoms.font.s, t.atoms.color.l7, style]} {...rest} />
 }
 
 export function H1({style, ...rest}: TextProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const attr =
     web({
       role: 'heading',
@@ -18,13 +18,13 @@ export function H1({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[styles.font.xxl, styles.font.bold, styles.color.l7, style]}
+      style={[atoms.font.xxl, atoms.font.bold, t.atoms.color.l7, style]}
     />
   )
 }
 
 export function H2({style, ...rest}: TextProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const attr =
     web({
       role: 'heading',
@@ -34,13 +34,13 @@ export function H2({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[styles.font.l, styles.font.bold, styles.color.l7, style]}
+      style={[atoms.font.l, atoms.font.bold, t.atoms.color.l7, style]}
     />
   )
 }
 
 export function H3({style, ...rest}: TextProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const attr =
     web({
       role: 'heading',
@@ -50,13 +50,13 @@ export function H3({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[styles.font.m, styles.font.bold, styles.color.l7, style]}
+      style={[atoms.font.m, atoms.font.bold, t.atoms.color.l7, style]}
     />
   )
 }
 
 export function H4({style, ...rest}: TextProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const attr =
     web({
       role: 'heading',
@@ -66,13 +66,13 @@ export function H4({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[styles.font.s, styles.font.bold, styles.color.l7, style]}
+      style={[atoms.font.s, atoms.font.bold, t.atoms.color.l7, style]}
     />
   )
 }
 
 export function H5({style, ...rest}: TextProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const attr =
     web({
       role: 'heading',
@@ -82,13 +82,13 @@ export function H5({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[styles.font.xs, styles.font.bold, styles.color.l7, style]}
+      style={[atoms.font.xs, atoms.font.bold, t.atoms.color.l7, style]}
     />
   )
 }
 
 export function H6({style, ...rest}: TextProps) {
-  const {styles} = useAlf()
+  const t = useTheme()
   const attr =
     web({
       role: 'heading',
@@ -98,7 +98,7 @@ export function H6({style, ...rest}: TextProps) {
     <RNText
       {...attr}
       {...rest}
-      style={[styles.font.xxs, styles.font.bold, styles.color.l7, style]}
+      style={[atoms.font.xxs, atoms.font.bold, t.atoms.color.l7, style]}
     />
   )
 }
diff --git a/src/view/screens/DebugNew.tsx b/src/view/screens/DebugNew.tsx
index e64f5d596e..d6051a6e26 100644
--- a/src/view/screens/DebugNew.tsx
+++ b/src/view/screens/DebugNew.tsx
@@ -4,16 +4,15 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 
 import {useSetColorMode} from '#/state/shell'
-import {useAlf, ThemeProvider as Alf} from '#/alf'
+import {atoms, 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'
 
 function ThemeSelector() {
   const setColorMode = useSetColorMode()
-  const {styles} = useAlf()
 
   return (
-    <View style={[styles.flex.row, styles.flex.gap.m]}>
+    <View style={[atoms.flex.row, atoms.flex.gap.m]}>
       <Button
         type="secondary"
         size="small"
@@ -37,20 +36,21 @@ function ThemeSelector() {
 }
 
 function BreakpointDebugger() {
-  const {styles, breakpoints} = useAlf()
+  const t = useTheme()
+  const breakpoints = useBreakpoints()
 
   return (
     <View>
-      <H3 style={[styles.padding.pb.m]}>Breakpoint Debugger</H3>
-      <Text style={[styles.padding.pb.m]}>
+      <H3 style={[atoms.padding.pb.m]}>Breakpoint Debugger</H3>
+      <Text style={[atoms.padding.pb.m]}>
         Current breakpoint: {!breakpoints.gtMobile && <Text>mobile</Text>}
         {breakpoints.gtMobile && !breakpoints.gtTablet && <Text>tablet</Text>}
         {breakpoints.gtTablet && <Text>desktop</Text>}
       </Text>
       <Text
         style={[
-          styles.padding.pa.m,
-          styles.backgroundColor.l1,
+          atoms.padding.pa.m,
+          t.atoms.backgroundColor.l1,
           {fontFamily: 'monospace'},
         ]}>
         {JSON.stringify(breakpoints, null, 2)}
@@ -60,37 +60,37 @@ function BreakpointDebugger() {
 }
 
 function ThemedSection() {
-  const {styles} = useAlf()
+  const t = useTheme()
 
   return (
-    <View style={[styles.backgroundColor.l0, styles.padding.pa.m]}>
-      <H3 style={[styles.padding.pb.m, styles.font.bold]}>
+    <View style={[t.atoms.backgroundColor.l0, atoms.padding.pa.m]}>
+      <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>
         Colors (this theme is always light)
       </H3>
-      <View style={[styles.flex.row, styles.flex.gap.m]}>
+      <View style={[atoms.flex.row, atoms.flex.gap.m]}>
         <View
-          style={[styles.flex.one, styles.backgroundColor.l0, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l0, {height: 60}]}
         />
         <View
-          style={[styles.flex.one, styles.backgroundColor.l1, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l1, {height: 60}]}
         />
         <View
-          style={[styles.flex.one, styles.backgroundColor.l2, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l2, {height: 60}]}
         />
         <View
-          style={[styles.flex.one, styles.backgroundColor.l3, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l3, {height: 60}]}
         />
         <View
-          style={[styles.flex.one, styles.backgroundColor.l4, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l4, {height: 60}]}
         />
         <View
-          style={[styles.flex.one, styles.backgroundColor.l5, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l5, {height: 60}]}
         />
         <View
-          style={[styles.flex.one, styles.backgroundColor.l6, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l6, {height: 60}]}
         />
         <View
-          style={[styles.flex.one, styles.backgroundColor.l7, {height: 60}]}
+          style={[atoms.flex.one, t.atoms.backgroundColor.l7, {height: 60}]}
         />
       </View>
     </View>
@@ -98,15 +98,15 @@ function ThemedSection() {
 }
 
 export function DebugScreen() {
-  const {styles} = useAlf()
+  const t = useTheme()
 
   return (
     <ScrollView>
-      <CenteredView style={[styles.backgroundColor.l0]}>
+      <CenteredView style={[t.atoms.backgroundColor.l0]}>
         <View
           style={[
-            styles.padding.pa.xl,
-            styles.flex.gap.xxl,
+            atoms.padding.pa.xl,
+            atoms.flex.gap.xxl,
             {paddingBottom: 200},
           ]}>
           <ThemeSelector />
@@ -114,61 +114,61 @@ export function DebugScreen() {
           <BreakpointDebugger />
 
           <View>
-            <H3 style={[styles.padding.pb.m, styles.font.bold]}>Colors</H3>
-            <View style={[styles.flex.row, styles.flex.gap.m]}>
+            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Colors</H3>
+            <View style={[atoms.flex.row, atoms.flex.gap.m]}>
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l0,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l0,
                   {height: 60},
                 ]}
               />
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l1,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l1,
                   {height: 60},
                 ]}
               />
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l2,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l2,
                   {height: 60},
                 ]}
               />
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l3,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l3,
                   {height: 60},
                 ]}
               />
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l4,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l4,
                   {height: 60},
                 ]}
               />
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l5,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l5,
                   {height: 60},
                 ]}
               />
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l6,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l6,
                   {height: 60},
                 ]}
               />
               <View
                 style={[
-                  styles.flex.one,
-                  styles.backgroundColor.l7,
+                  atoms.flex.one,
+                  t.atoms.backgroundColor.l7,
                   {height: 60},
                 ]}
               />
@@ -176,76 +176,76 @@ export function DebugScreen() {
           </View>
 
           <View>
-            <H3 style={[styles.padding.pb.m, styles.font.bold]}>Spacing</H3>
+            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Spacing</H3>
 
-            <View style={[styles.flex.gap.m]}>
-              <View style={[styles.flex.row, styles.flex.alignCenter]}>
+            <View style={[atoms.flex.gap.m]}>
+              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
                 <Text style={{width: 80}}>xxs (2px)</Text>
                 <View
                   style={[
-                    styles.flex.one,
-                    styles.padding.pt.xxs,
-                    styles.backgroundColor.l3,
+                    atoms.flex.one,
+                    atoms.padding.pt.xxs,
+                    t.atoms.backgroundColor.l3,
                   ]}
                 />
               </View>
-              <View style={[styles.flex.row, styles.flex.alignCenter]}>
+              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
                 <Text style={{width: 80}}>xs (4px)</Text>
                 <View
                   style={[
-                    styles.flex.one,
-                    styles.padding.pt.xs,
-                    styles.backgroundColor.l3,
+                    atoms.flex.one,
+                    atoms.padding.pt.xs,
+                    t.atoms.backgroundColor.l3,
                   ]}
                 />
               </View>
-              <View style={[styles.flex.row, styles.flex.alignCenter]}>
+              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
                 <Text style={{width: 80}}>s (8px)</Text>
                 <View
                   style={[
-                    styles.flex.one,
-                    styles.padding.pt.s,
-                    styles.backgroundColor.l3,
+                    atoms.flex.one,
+                    atoms.padding.pt.s,
+                    t.atoms.backgroundColor.l3,
                   ]}
                 />
               </View>
-              <View style={[styles.flex.row, styles.flex.alignCenter]}>
+              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
                 <Text style={{width: 80}}>m (12px)</Text>
                 <View
                   style={[
-                    styles.flex.one,
-                    styles.padding.pt.m,
-                    styles.backgroundColor.l3,
+                    atoms.flex.one,
+                    atoms.padding.pt.m,
+                    t.atoms.backgroundColor.l3,
                   ]}
                 />
               </View>
-              <View style={[styles.flex.row, styles.flex.alignCenter]}>
+              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
                 <Text style={{width: 80}}>l (18px)</Text>
                 <View
                   style={[
-                    styles.flex.one,
-                    styles.padding.pt.l,
-                    styles.backgroundColor.l3,
+                    atoms.flex.one,
+                    atoms.padding.pt.l,
+                    t.atoms.backgroundColor.l3,
                   ]}
                 />
               </View>
-              <View style={[styles.flex.row, styles.flex.alignCenter]}>
+              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
                 <Text style={{width: 80}}>xl (24px)</Text>
                 <View
                   style={[
-                    styles.flex.one,
-                    styles.padding.pt.xl,
-                    styles.backgroundColor.l3,
+                    atoms.flex.one,
+                    atoms.padding.pt.xl,
+                    t.atoms.backgroundColor.l3,
                   ]}
                 />
               </View>
-              <View style={[styles.flex.row, styles.flex.alignCenter]}>
+              <View style={[atoms.flex.row, atoms.flex.alignCenter]}>
                 <Text style={{width: 80}}>xxl (32px)</Text>
                 <View
                   style={[
-                    styles.flex.one,
-                    styles.padding.pt.xxl,
-                    styles.backgroundColor.l3,
+                    atoms.flex.one,
+                    atoms.padding.pt.xxl,
+                    t.atoms.backgroundColor.l3,
                   ]}
                 />
               </View>
@@ -253,13 +253,13 @@ export function DebugScreen() {
           </View>
 
           <View>
-            <H3 style={[styles.padding.pb.m, styles.font.bold]}>Typography</H3>
+            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Typography</H3>
 
             <View
               style={[
-                styles.flex.gap.m,
-                styles.padding.pa.m,
-                styles.backgroundColor.l1,
+                atoms.flex.gap.m,
+                atoms.padding.pa.m,
+                t.atoms.backgroundColor.l1,
               ]}>
               <H1>Heading 1</H1>
               <H2>Heading 2</H2>
@@ -268,34 +268,34 @@ export function DebugScreen() {
               <H5>Heading 5</H5>
               <H6>Heading 6</H6>
 
-              <Text style={[styles.font.xxl]}>H1 Size Text</Text>
-              <Text style={[styles.font.xl]}>H2 Size Text</Text>
-              <Text style={[styles.font.l]}>H3 Size Text</Text>
-              <Text style={[styles.font.m]}>H4 Size Text</Text>
-              <Text style={[styles.font.s]}>H5 Size Text</Text>
-              <Text style={[styles.font.xs]}>H6 Size Text</Text>
-              <Text style={[styles.font.xxs]}>Very Small Size Text</Text>
+              <Text style={[atoms.font.xxl]}>H1 Size Text</Text>
+              <Text style={[atoms.font.xl]}>H2 Size Text</Text>
+              <Text style={[atoms.font.l]}>H3 Size Text</Text>
+              <Text style={[atoms.font.m]}>H4 Size Text</Text>
+              <Text style={[atoms.font.s]}>H5 Size Text</Text>
+              <Text style={[atoms.font.xs]}>H6 Size Text</Text>
+              <Text style={[atoms.font.xxs]}>Very Small Size Text</Text>
             </View>
           </View>
 
           <View>
-            <H3 style={[styles.padding.pb.m, styles.font.bold]}>Breakpoints</H3>
+            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Breakpoints</H3>
           </View>
 
           <Alf theme="light">
             <ThemedSection />
           </Alf>
 
-          <View style={[styles.flex.gap.m, styles.flex.alignStart]}>
-            <H3 style={[styles.padding.pb.m, styles.font.bold]}>Buttons</H3>
+          <View style={[atoms.flex.gap.m, atoms.flex.alignStart]}>
+            <H3 style={[atoms.padding.pb.m, atoms.font.bold]}>Buttons</H3>
 
             <Button>
               {({state}) => (
                 <View
                   style={[
-                    styles.padding.pa.m,
-                    styles.radius.round,
-                    styles.backgroundColor.l2,
+                    atoms.padding.pa.m,
+                    atoms.radius.round,
+                    t.atoms.backgroundColor.l2,
                   ]}>
                   <Text>Unstyled button, state: {JSON.stringify(state)}</Text>
                 </View>