diff --git a/package.json b/package.json
index 6dbbb7d..354ddf1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.71.0",
+  "version": "1.72.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
@@ -65,6 +65,7 @@
     "accordion-collapse-react-native": "^1.1.1",
     "color": "^5.0.3",
     "react-native-logs": "^5.5.0",
+    "react-native-render-html": "^6.3.4",
     "react-native-scalable-image": "^1.1.0"
   },
   "packageManager": "yarn@3.6.4",
diff --git a/src/@types/font.ts b/src/@types/font.ts
new file mode 100644
index 0000000..4773007
--- /dev/null
+++ b/src/@types/font.ts
@@ -0,0 +1,36 @@
+import { TextStyle } from 'react-native'
+
+import { MixedSizeCSSPropertiesKeys } from 'react-native-render-html'
+
+/**
+ * React Native's TextStyle without the overflow:'scroll' property.
+ *
+ * The component @native-html (used by react-native-render-html) is missing the overflow: 'scroll' property.
+ * In order to use the React Native's TextStyle together with the HtmlContent (RenderHtml) component
+ * (and type checking) we override the overflow property with our own overflow type.
+ */
+export type FontStyle = TextStyle & { overflow?: 'visible' | 'hidden' | undefined } & {
+  [k in MixedSizeCSSPropertiesKeys]?: number | string
+}
+export type FontName =
+  | 'extraSmall'
+  | 'small'
+  | 'smallBold'
+  | 'smallLight'
+  | 'medium'
+  | 'mediumBold'
+  | 'large'
+  | 'largeBold'
+  | 'extraLarge'
+  | 'extraLargeBold'
+  | 'huge'
+  | 'hugeBold'
+
+export type FontMetrics = {
+  extraSmall: number
+  small: number
+  medium: number
+  large: number
+  extraLarge: number
+  huge: number
+}
diff --git a/src/@types/layout.ts b/src/@types/layout.ts
new file mode 100644
index 0000000..d0ec4c8
--- /dev/null
+++ b/src/@types/layout.ts
@@ -0,0 +1,10 @@
+import { Insets, ViewStyle } from 'react-native'
+
+export type LayoutStyles = {
+  absolute: ViewStyle
+  absoluteLeft: ViewStyle
+  absoluteRight: ViewStyle
+  absoluteTop: ViewStyle
+  absoluteBottom: ViewStyle
+  hitSlop: Insets
+}
diff --git a/src/@types/rounded.ts b/src/@types/rounded.ts
new file mode 100644
index 0000000..8189269
--- /dev/null
+++ b/src/@types/rounded.ts
@@ -0,0 +1,10 @@
+export type RoundedStyle = {
+  borderRadius: number
+  overflow: 'hidden'
+}
+
+export type RoundedStyles = {
+  normal: RoundedStyle
+  large: RoundedStyle
+  huge: RoundedStyle
+}
diff --git a/src/@types/shadow.ts b/src/@types/shadow.ts
new file mode 100644
index 0000000..9d19165
--- /dev/null
+++ b/src/@types/shadow.ts
@@ -0,0 +1,11 @@
+import { ViewStyle } from 'react-native'
+
+export type ShadowStyle = {
+  android: ViewStyle
+  ios: ViewStyle
+}
+
+export type ShadowStyles = {
+  normal: ShadowStyle
+  small: ShadowStyle
+}
diff --git a/src/@types/theme.ts b/src/@types/theme.ts
new file mode 100644
index 0000000..9ebd6d1
--- /dev/null
+++ b/src/@types/theme.ts
@@ -0,0 +1,81 @@
+export interface ThemeAnimation {
+  duration: {
+    medium: number
+  }
+}
+
+export interface ThemeColor {
+  white: string
+  black: string
+  grey800: string
+  grey500: string
+  grey300: string
+  grey50: string
+  grey100: string
+  primary500: string
+  primary300: string
+  primary50: string
+  success500: string
+  success200: string
+  success700: string
+  success600: string
+  success400: string
+  success50: string
+  warning500: string
+  warning700: string
+  warning200: string
+  error500: string
+  error200: string
+  error700: string
+  accentLime400: string
+  accentLime50: string
+  accentSky400: string
+  accentSky50: string
+}
+
+export interface ThemeOverlay {
+  white00: string
+  white05: string
+  white10: string
+  white70: string
+  white80: string
+  black50: string
+  grey60: string
+}
+
+export interface ThemeGradient {
+  bottom: string[]
+  top: string[]
+}
+
+export interface ThemeIcon {
+  size: {
+    xxs: number
+    xs: number
+    s: number
+    m: number
+    l: number
+    xl: number
+    xxl: number
+    xxxl: number
+  }
+}
+
+export interface ThemeMargin {
+  eighth: number
+  quarter: number
+  half: number
+  common: number
+  large: number
+  double: number
+  huge: number
+}
+
+export interface Theme {
+  animation: ThemeAnimation
+  icon: ThemeIcon
+  color: ThemeColor
+  overlay: ThemeOverlay
+  gradient: ThemeGradient
+  margin: ThemeMargin
+}
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
index 4986597..a845d92 100644
--- a/src/components/BackButton.tsx
+++ b/src/components/BackButton.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { NavigationProp, ParamListBase } from '@react-navigation/native'
 
 import IconButton from '../components/IconButton'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   navigation: NavigationProp<ParamListBase>
@@ -13,7 +13,7 @@ const BackButton = ({ navigation }: Props) => (
   <IconButton
     containerStyle={{ padding: theme.margin.common }}
     onPress={() => navigation.goBack()}
-    icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary500 }}
+    icon={{ name: 'chevron-left', size: theme.icon.size.xxl, color: theme.color.primary500 }}
   />
 )
 
diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
index d641e5c..d8bb26d 100644
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@@ -4,8 +4,8 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { useTheme } from '@react-navigation/native'
 
 import LargeButton, { LargeButtonProps } from './LargeButton'
+import { shadow, theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   title?: string
@@ -61,12 +61,12 @@ export default BottomSheet
 
 const styles = StyleSheet.create({
   container: {
-    ...theme.shadow.ios,
+    ...shadow.normal.ios,
     borderTopWidth: 1 / 3,
     borderTopColor: theme.color.grey300,
   },
   bottomSheetContainer: {
-    ...theme.shadow.android,
+    ...shadow.normal.android,
   },
   bottomSheet: {
     flexDirection: 'column',
diff --git a/src/components/BrandIcon.tsx b/src/components/BrandIcon.tsx
index 1166d96..77241b1 100644
--- a/src/components/BrandIcon.tsx
+++ b/src/components/BrandIcon.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 import BrandIcons, { BrandIconName } from '../lib/BrandIcons'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   name: BrandIconName
@@ -14,7 +14,7 @@ type Props = {
 export const BrandIcon = ({ name, color, size }: Props) => {
   const icon = BrandIcons[name]
   const iconColor = color ?? theme.color.primary500
-  const iconSize = size ?? theme.icon.size.large
+  const iconSize = size ?? theme.icon.size.l
   const FontAwesomeIconTypeErased = FontAwesomeIcon as unknown as any
 
   return <FontAwesomeIconTypeErased icon={icon} color={iconColor} size={iconSize} />
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index f71e042..7414b79 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-
 
 import { Icon } from './Icon'
 import Log from '../lib/Log'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   enabled: boolean
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index a99f507..1055a82 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -10,8 +10,8 @@ import {
   ViewStyle,
 } from 'react-native'
 
+import { fontSize, theme } from '../styles'
 import appTextStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   text?: string
@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
     ...appTextStyle.body,
     color: theme.color.white,
     lineHeight: theme.margin.common,
-    fontSize: theme.font.size.medium,
+    fontSize: fontSize.medium,
   },
   chipContainer: {
     backgroundColor: theme.color.accentLime400,
diff --git a/src/components/ContentImage.tsx b/src/components/ContentImage.tsx
index 79484e9..971f991 100644
--- a/src/components/ContentImage.tsx
+++ b/src/components/ContentImage.tsx
@@ -4,8 +4,7 @@ import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'rea
 import ScalableImage from 'react-native-scalable-image'
 
 import Lightbox from './Lightbox'
-import font from '../styles/font'
-import theme from '../styles/theme'
+import { font, rounded, shadow, theme } from '../styles'
 
 type Props = {
   src: string
@@ -58,21 +57,21 @@ const styles = StyleSheet.create({
   outerContainer: {
     margin: -theme.margin.common,
     marginBottom: -theme.margin.half,
-    ...theme.shadow.ios,
+    ...shadow.normal.ios,
   },
   innerContainer: {
     flexDirection: 'row',
     margin: theme.margin.common,
     backgroundColor: theme.color.white,
-    ...theme.shadow.android,
-    ...theme.roundedLarge,
+    ...shadow.normal.android,
+    ...rounded.large,
     borderWidth: 1,
     borderColor: theme.color.grey50,
   },
   imageContainer: {
     margin: theme.margin.common,
     marginRight: theme.margin.half,
-    ...theme.roundedLarge,
+    ...rounded.large,
   },
   image: {
     height: 80,
diff --git a/src/components/Date.tsx b/src/components/Date.tsx
index 590a69e..4220242 100644
--- a/src/components/Date.tsx
+++ b/src/components/Date.tsx
@@ -13,7 +13,7 @@ type Props = {
 
 const Date = ({ date, containerStyle }: Props) => (
   <IconText
-    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.medium} />}
+    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.m} />}
     text={date}
     style={{
       containerStyle,
diff --git a/src/components/Disclose.tsx b/src/components/Disclose.tsx
index 4e4296a..6d90b06 100644
--- a/src/components/Disclose.tsx
+++ b/src/components/Disclose.tsx
@@ -3,8 +3,8 @@ import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewSty
 
 import { Icon } from './Icon'
 import Log from '../lib/Log'
+import { theme } from '../styles'
 import appTextStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   text: string
@@ -19,7 +19,7 @@ const Disclose = ({ text, onPress, textStyle, containerStyle }: Props) => {
     <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
       <View style={[styles.containerStyle, containerStyle]}>
         <Text style={[appTextStyle.link, textStyle]}>{text}</Text>
-        <Icon name="chevron-right" size={theme.icon.size.extraLarge} />
+        <Icon name="chevron-right" size={theme.icon.size.xl} />
       </View>
     </TouchableOpacity>
   )
diff --git a/src/components/DocumentLink.tsx b/src/components/DocumentLink.tsx
index efb5345..42d0285 100644
--- a/src/components/DocumentLink.tsx
+++ b/src/components/DocumentLink.tsx
@@ -3,8 +3,8 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
+import { theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   onPress?: () => void
@@ -15,7 +15,7 @@ type Props = {
 
 const DocumentLink = ({ onPress, containerStyle, label }: Props) => (
   <IconText
-    icon={<Icon name="file-lines" size={theme.icon.size.medium} style="solid" />}
+    icon={<Icon name="file-lines" size={theme.icon.size.m} style="solid" />}
     text={label}
     style={{
       containerStyle,
diff --git a/src/components/FilterButton.tsx b/src/components/FilterButton.tsx
index f65a4f1..91654c5 100644
--- a/src/components/FilterButton.tsx
+++ b/src/components/FilterButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleProp, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native'
 
-import theme from '../styles/theme'
+import { rounded, theme } from '../styles'
 
 type Props = {
   content: (_: { color: string }) => React.ReactElement
@@ -29,7 +29,7 @@ export default FilterButton
 
 const styles = StyleSheet.create({
   container: {
-    ...theme.rounded,
+    ...rounded.normal,
     justifyContent: 'center',
   },
   button: {
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index 8f5d764..f8aab01 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 import Icons, { IconName } from '../lib/Icons'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 export type IconStyleProp = 'light' | 'solid'
 
@@ -23,7 +23,7 @@ export const Icon = ({ name, color, size, testID, style, rotation }: IconProps):
   const iconStyle = style ?? 'light'
   const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid
   const iconColor = color ?? theme.color.primary500
-  const iconSize = size ?? theme.icon.size.large
+  const iconSize = size ?? theme.icon.size.l
   const transform = rotation ? { rotate: rotation } : undefined
 
   return <FontAwesomeIcon icon={icon} color={iconColor} size={iconSize} testID={testID} transform={transform} />
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 164503c..32e897a 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native'
 
 import { Icon, IconProps } from './Icon'
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   containerStyle?: StyleProp<ViewStyle>
@@ -22,7 +22,7 @@ const IconButton = ({ containerStyle, disabled, onPress, icon, accessibilityLabe
     onPress={disabled ? undefined : onPress}
     activeOpacity={0.5}
   >
-    <Icon size={theme.icon.size.large} {...icon} />
+    <Icon size={theme.icon.size.l} {...icon} />
   </TouchableOpacity>
 )
 
diff --git a/src/components/IconText.tsx b/src/components/IconText.tsx
index 8911ab4..40aec60 100644
--- a/src/components/IconText.tsx
+++ b/src/components/IconText.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
 
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type IconTextStyle = {
   containerStyle?: StyleProp<ViewStyle>
diff --git a/src/components/IconView.tsx b/src/components/IconView.tsx
index 4773fea..8a869b0 100644
--- a/src/components/IconView.tsx
+++ b/src/components/IconView.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type Props = {
   icon?: React.ReactElement
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
index 6ed1383..7006071 100644
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -3,9 +3,8 @@ import { Platform, StyleProp, StyleSheet, Text, TextInput, TextInputProps, View,
 
 import { Icon } from './Icon'
 import IconText from './IconText'
-import font from '../styles/font'
+import { font, inputStyles, layout, rounded, theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   containerStyle?: StyleProp<ViewStyle>
@@ -41,7 +40,7 @@ const InputField = ({
   const fixInputStyle = Platform.OS === 'ios' ? { lineHeight: 0 } : {}
 
   const hasErrors = !!errorMessage
-  const borderColor = theme.getBorderColor({ isFocused, hasErrors })
+  const borderColor = hasErrors ? theme.color.error500 : isFocused ? theme.color.primary300 : theme.color.grey300
 
   const inputContainerStyle = disabled ? { backgroundColor: theme.color.grey50 } : {}
   const placeholderTextColor = disabled ? theme.color.grey300 : theme.color.grey500
@@ -82,7 +81,7 @@ const InputField = ({
       </View>
       {errorMessage && (
         <IconText
-          icon={<Icon name="exclamation-triangle" size={theme.icon.size.small} color={theme.color.error500} />}
+          icon={<Icon name="exclamation-triangle" size={theme.icon.size.s} color={theme.color.error500} />}
           text={errorMessage}
           style={{
             textStyle: [styles.errorStyle, errorStyle],
@@ -108,11 +107,12 @@ const styles = StyleSheet.create({
     marginBottom: theme.margin.half,
   },
   inputStyle: {
-    ...theme.input,
+    ...rounded.normal,
+    ...inputStyles.input,
     ...textStyle.input,
   },
   rightIcon: {
-    ...theme.absoluteRight,
+    ...layout.absoluteRight,
     justifyContent: 'center',
   },
   errorStyle: {
diff --git a/src/components/LargeButton.tsx b/src/components/LargeButton.tsx
index 08d9374..34f2ccc 100644
--- a/src/components/LargeButton.tsx
+++ b/src/components/LargeButton.tsx
@@ -6,8 +6,8 @@ import { IconName } from '../lib/Icons'
 import * as LargeButtonStyles from '../lib/LargeButtonStyles'
 import { LargeButtonStyle } from '../lib/LargeButtonStyles'
 import Log from '../lib/Log'
+import { rounded, theme } from '../styles'
 import appTextStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type LargeButtonProps = {
   title: string
@@ -73,7 +73,7 @@ const LargeButton = ({
       <View style={styles.titleContainer}>
         {iconName && (
           <View style={styles.iconContainerStyle}>
-            <Icon name={iconName} size={theme.icon.size.large} color={iconColor} />
+            <Icon name={iconName} size={theme.icon.size.l} color={iconColor} />
           </View>
         )}
         <Text style={[styles.title, titleStyle, textStyle]}>{title}</Text>
@@ -87,7 +87,7 @@ export type { LargeButtonProps }
 
 const styles = StyleSheet.create({
   container: {
-    ...theme.rounded,
+    ...rounded.normal,
     margin: theme.margin.common,
     height: 32,
     justifyContent: 'center',
diff --git a/src/components/Lightbox.tsx b/src/components/Lightbox.tsx
index 05cb275..5c5a0ec 100644
--- a/src/components/Lightbox.tsx
+++ b/src/components/Lightbox.tsx
@@ -6,9 +6,8 @@ import Color from 'color'
 
 import { Icon } from './Icon'
 import PageIndicator from './PageIndicator'
-import font from '../styles/font'
+import { font, layout, theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 const hitSlop = { top: 16, left: 16, bottom: 16, right: 16 }
 
@@ -26,7 +25,7 @@ const getLightboxHeaderComponent =
             <Icon
               name="times"
               color={Color(theme.color.white).alpha(0.5).string()}
-              size={theme.icon.size.extraExtraLarge}
+              size={theme.icon.size.xxl}
               testID="close-lightbox"
             />
           </TouchableOpacity>
@@ -144,11 +143,11 @@ export default Lightbox
 
 const styles = StyleSheet.create({
   lightboxFooterContainer: {
-    ...theme.absoluteBottom,
+    ...layout.absoluteBottom,
     backgroundColor: '#00000077',
   },
   lightboxHeaderContainer: {
-    ...theme.absoluteTop,
+    ...layout.absoluteTop,
     backgroundColor: '#00000077',
   },
   lightboxHeader: {
diff --git a/src/components/Location.tsx b/src/components/Location.tsx
index 3611b71..dc908ec 100644
--- a/src/components/Location.tsx
+++ b/src/components/Location.tsx
@@ -3,8 +3,8 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
+import { theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   location: string
@@ -13,7 +13,7 @@ type Props = {
 
 const Location = ({ location, containerStyle }: Props) => (
   <IconText
-    icon={<Icon name="map-marker-alt" style="solid" color={theme.color.grey300} size={theme.icon.size.medium} />}
+    icon={<Icon name="map-marker-alt" style="solid" color={theme.color.grey300} size={theme.icon.size.m} />}
     text={location}
     style={{
       containerStyle,
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index 45d783f..97a433c 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 import LargeButton, { LargeButtonProps } from '../components/LargeButton'
+import { theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   title?: string
diff --git a/src/components/MoreInfo.tsx b/src/components/MoreInfo.tsx
index 815518a..e4cd23c 100644
--- a/src/components/MoreInfo.tsx
+++ b/src/components/MoreInfo.tsx
@@ -3,8 +3,8 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
+import { theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type Props = {
   onPress?: () => void
@@ -15,7 +15,7 @@ type Props = {
 
 const MoreInfo = ({ onPress, containerStyle, label }: Props) => (
   <IconText
-    icon={<Icon name="info-circle" size={theme.icon.size.medium} />}
+    icon={<Icon name="info-circle" size={theme.icon.size.m} />}
     text={label}
     style={{
       containerStyle,
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 8d3c934..66fc22a 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { StyleProp, Text, View, ViewStyle } from 'react-native'
 
-import font from '../styles/font'
-import theme from '../styles/theme'
+import { font, theme } from '../styles'
 
 type Props = {
   count: number
diff --git a/src/components/NotificationPopup.tsx b/src/components/NotificationPopup.tsx
index 5614f8b..958adab 100644
--- a/src/components/NotificationPopup.tsx
+++ b/src/components/NotificationPopup.tsx
@@ -4,8 +4,8 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Icon } from './Icon'
 import LargeButton, { LargeButtonProps } from '../components/LargeButton'
 import Popup from '../components/Popup'
+import { theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type NotificationPopupStaticProps = {
   title: string
@@ -27,7 +27,7 @@ const NotificationPopup = ({ visible, title, message, leftButton, rightButton, o
 
         {onClose && (
           <TouchableOpacity testID="close" onPress={onClose} activeOpacity={0.5} style={styles.closeButton}>
-            <Icon name="times" color={theme.color.grey500} size={theme.icon.size.extraLarge} />
+            <Icon name="times" color={theme.color.grey500} size={theme.icon.size.xl} />
           </TouchableOpacity>
         )}
       </View>
diff --git a/src/components/PageIndicator.tsx b/src/components/PageIndicator.tsx
index 0e96af2..bb5241c 100644
--- a/src/components/PageIndicator.tsx
+++ b/src/components/PageIndicator.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
 import Log from '../lib/Log'
-import theme from '../styles/theme'
+import { rounded, theme } from '../styles'
 
 /** Maximum number of dots to display, should be odd */
 const maximumNumberOfDots = 7
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     width: 8,
     margin: 4,
-    ...theme.rounded,
+    ...rounded.normal,
     backgroundColor: theme.color.grey500,
   },
   smallDot: {
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index 4ffe236..a57af7f 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 
-import theme from '../styles/theme'
+import { shadow, theme } from '../styles'
 
 type Props = {
   children?: React.ReactNode
@@ -24,12 +24,12 @@ export default Panel
 const styles = StyleSheet.create({
   panelContainer: {
     marginTop: theme.margin.quarter,
-    ...theme.shadowSmall.ios,
+    ...shadow.small.ios,
   },
   panel: {
     paddingVertical: theme.margin.common,
     backgroundColor: theme.color.white,
-    ...theme.shadowSmall.android,
+    ...shadow.small.android,
     borderTopWidth: 1,
     borderColor: theme.color.grey50,
   },
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index bb79c34..4c8e5bc 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -4,7 +4,7 @@ import { Modal, StyleSheet, View } from 'react-native'
 import { BlurView } from '@react-native-community/blur'
 
 import useShowBlurView from '../hooks/useShowBlurView'
-import theme from '../styles/theme'
+import { layout, theme } from '../styles'
 
 type Props = {
   visible: boolean
@@ -16,7 +16,7 @@ const Popup = ({ children, visible }: Props) => {
 
   return (
     <Modal transparent animationType="fade" visible={visible} style={{ flex: 1 }}>
-      {showBlurView && <BlurView style={theme.absolute} blurType="light" blurAmount={2} />}
+      {showBlurView && <BlurView style={layout.absolute} blurType="light" blurAmount={2} />}
       <View style={styles.modalBackground}>
         <View style={styles.viewPort}>{children}</View>
       </View>
diff --git a/src/components/ProgressBarList.tsx b/src/components/ProgressBarList.tsx
index 57b1f9b..2057d28 100644
--- a/src/components/ProgressBarList.tsx
+++ b/src/components/ProgressBarList.tsx
@@ -3,8 +3,7 @@ import { StyleSheet, Text, View } from 'react-native'
 
 import { Icon } from './Icon'
 import ProgressBar from '../data/ProgressBar'
-import font from '../styles/font'
-import theme from '../styles/theme'
+import { font, theme } from '../styles'
 
 type Props = {
   progressBars: ProgressBar[]
@@ -94,14 +93,9 @@ const ProgressBarList = ({ progressBars, separator }: Props) => {
             }}
           >
             {progressBar.isCompleted ? (
-              <Icon
-                name="circle-check"
-                style="solid"
-                color={progressBar.backgroundColor}
-                size={theme.icon.size.small}
-              />
+              <Icon name="circle-check" style="solid" color={progressBar.backgroundColor} size={theme.icon.size.s} />
             ) : (
-              <Icon name="circle-check" color={theme.color.grey300} size={theme.icon.size.small} />
+              <Icon name="circle-check" color={theme.color.grey300} size={theme.icon.size.s} />
             )}
           </View>
         ))}
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index eaf1038..db53847 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -3,8 +3,8 @@ import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from '
 
 import { Icon, IconProps } from './Icon'
 import LargeButton, { LargeButtonProps } from '../components/LargeButton'
+import { lineHeight, shadow, theme } from '../styles'
 import textStyle from '../styles/text'
-import theme from '../styles/theme'
 
 type TooltipProps = {
   title: string
@@ -29,13 +29,13 @@ const Tooltip = ({
   testID,
   children,
 }: TooltipProps) => (
-  <View style={[theme.shadow.ios, style]} testID={testID}>
+  <View style={[shadow.normal.ios, style]} testID={testID}>
     <View style={styles.tooltipContainer}>
       <View style={styles.tooltip}>
         <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
           {icon && (
             <View style={{ ...styles.iconContainer, marginRight: theme.margin.common }}>
-              <Icon size={theme.icon.size.extraLarge} {...icon} />
+              <Icon size={theme.icon.size.xl} {...icon} />
             </View>
           )}
           <View style={{ flex: 1 }}>
@@ -44,7 +44,7 @@ const Tooltip = ({
           {closable && (
             <View style={{ ...styles.iconContainer, marginLeft: theme.margin.common }}>
               <TouchableOpacity testID="close" onPress={onClose} activeOpacity={0.5} accessibilityLabel="close">
-                <Icon name="times" color={theme.color.grey500} size={theme.icon.size.extraLarge} />
+                <Icon name="times" color={theme.color.grey500} size={theme.icon.size.xl} />
               </TouchableOpacity>
             </View>
           )}
@@ -89,14 +89,14 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: 16,
     overflow: 'hidden',
     backgroundColor: 'white',
-    ...theme.shadow.android,
+    ...shadow.normal.android,
   },
   tooltip: {
     flexDirection: 'column',
     margin: theme.margin.common,
   },
   iconContainer: {
-    height: theme.font.lineHeight.medium,
+    height: lineHeight.medium,
     justifyContent: 'center',
   },
 })
diff --git a/src/components/WebLink.tsx b/src/components/WebLink.tsx
index 30a96cf..5b6bb0d 100644
--- a/src/components/WebLink.tsx
+++ b/src/components/WebLink.tsx
@@ -15,7 +15,7 @@ type Props = {
 
 const WebLink = ({ onPress, containerStyle, text, textStyle }: Props) => (
   <IconText
-    icon={<Icon name="external-link" size={theme.icon.size.medium} />}
+    icon={<Icon name="external-link" size={theme.icon.size.m} />}
     text={text}
     style={{
       containerStyle,
diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
index 58fef44..438eaa4 100644
--- a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`InputField Rendering Disabled 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -110,7 +110,7 @@ exports[`InputField Rendering Normal 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -165,7 +165,7 @@ exports[`InputField Rendering With a description 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -257,7 +257,7 @@ exports[`InputField Rendering With a label 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -312,7 +312,7 @@ exports[`InputField Rendering With a right icon 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -385,7 +385,7 @@ exports[`InputField Rendering With an error message 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -493,7 +493,7 @@ exports[`InputField Rendering With focus 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -549,7 +549,7 @@ exports[`InputField Rendering With focus and an error message 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
@@ -605,7 +605,7 @@ exports[`InputField Rendering Without focus 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "normal",
-            "lineHeight": 26,
+            "lineHeight": 24,
             "minHeight": 40,
             "overflow": "hidden",
             "paddingLeft": 8,
diff --git a/src/components/__tests__/__snapshots__/LargeButton.test.tsx.snap b/src/components/__tests__/__snapshots__/LargeButton.test.tsx.snap
index 60b16b8..747781f 100644
--- a/src/components/__tests__/__snapshots__/LargeButton.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/LargeButton.test.tsx.snap
@@ -722,7 +722,7 @@ exports[`LargeButton Rendering, with title style 1`] = `
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "bold",
-            "lineHeight": 26,
+            "lineHeight": 24,
           },
           {
             "color": "#FFFFFF",
diff --git a/src/index.ts b/src/index.ts
index 97084bd..978661e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
+import { Theme } from './@types/theme'
 import Accordion from './components/Accordion'
 import BackButton from './components/BackButton'
 import BackgroundImage from './components/BackgroundImage'
@@ -72,8 +73,9 @@ export {
   useShowBlurView,
 }
 
-export type { IconName, LargeButtonProps, NotificationPopupStaticProps, TooltipProps }
-
+export type { IconName, LargeButtonProps, NotificationPopupStaticProps, Theme, TooltipProps }
 export * from './components/Icon'
 export * from './components/BrandIcon'
+
+export type { FontName, FontStyle } from './@types/font'
 export * from './styles'
diff --git a/src/lib/LargeButtonStyles.ts b/src/lib/LargeButtonStyles.ts
index 2450512..1a1db63 100644
--- a/src/lib/LargeButtonStyles.ts
+++ b/src/lib/LargeButtonStyles.ts
@@ -1,6 +1,6 @@
 import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 
-import theme from '../styles/theme'
+import { theme } from '../styles'
 
 type LargeButtonStyle = {
   buttonStyle: StyleProp<ViewStyle>
diff --git a/src/styles/font.ts b/src/styles/font.ts
index 456038a..44dc343 100644
--- a/src/styles/font.ts
+++ b/src/styles/font.ts
@@ -1,107 +1,110 @@
-import { Platform, TextStyle } from 'react-native'
+import { Platform } from 'react-native'
 
-import theme from './theme'
+import { FontMetrics, FontName, FontStyle } from '../@types/font'
 
-type FontName =
-  | 'extraSmall'
-  | 'small'
-  | 'smallBold'
-  | 'smallLight'
-  | 'medium'
-  | 'mediumBold'
-  | 'large'
-  | 'largeBold'
-  | 'extraLarge'
-  | 'extraLargeBold'
-  | 'huge'
-  | 'hugeBold'
+export const fontSize = {
+  extraSmall: 10,
+  small: 12,
+  medium: 14,
+  large: 16,
+  extraLarge: 18,
+  huge: 31,
+} satisfies FontMetrics
 
-const font: Record<FontName, TextStyle> = {
+export const lineHeight = {
+  extraSmall: 16,
+  small: 16,
+  medium: 20,
+  large: 24,
+  extraLarge: 28,
+  huge: 37,
+} satisfies FontMetrics
+
+export const font = {
   extraSmall: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.extraSmall,
-    lineHeight: theme.font.lineHeight.extraSmall,
+    fontSize: fontSize.extraSmall,
+    lineHeight: lineHeight.extraSmall,
     fontWeight: 'normal',
   },
   small: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.small,
-    lineHeight: theme.font.lineHeight.small,
+    fontSize: fontSize.small,
+    lineHeight: lineHeight.small,
     fontWeight: 'normal',
   },
   smallBold: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.small,
-    lineHeight: theme.font.lineHeight.small,
+    fontSize: fontSize.small,
+    lineHeight: lineHeight.small,
     fontWeight: 'bold',
   },
   smallLight: {
     fontFamily: Platform.OS === 'android' ? 'Ubuntu-Light' : 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.small,
-    lineHeight: theme.font.lineHeight.small,
+    fontSize: fontSize.small,
+    lineHeight: lineHeight.small,
     fontWeight: '100',
   },
   medium: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.medium,
-    lineHeight: theme.font.lineHeight.medium,
+    fontSize: fontSize.medium,
+    lineHeight: lineHeight.medium,
     fontWeight: 'normal',
   },
   mediumBold: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.medium,
-    lineHeight: theme.font.lineHeight.medium,
+    fontSize: fontSize.medium,
+    lineHeight: lineHeight.medium,
     fontWeight: 'bold',
   },
   large: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.large,
-    lineHeight: theme.font.lineHeight.large,
+    fontSize: fontSize.large,
+    lineHeight: lineHeight.large,
     fontWeight: 'normal',
   },
   largeBold: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.large,
-    lineHeight: theme.font.lineHeight.large,
+    fontSize: fontSize.large,
+    lineHeight: lineHeight.large,
     fontWeight: 'bold',
   },
   extraLarge: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.extraLarge,
-    lineHeight: theme.font.lineHeight.extraLarge,
+    fontSize: fontSize.extraLarge,
+    lineHeight: lineHeight.extraLarge,
     fontWeight: 'normal',
   },
   extraLargeBold: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.extraLarge,
-    lineHeight: theme.font.lineHeight.extraLarge,
+    fontSize: fontSize.extraLarge,
+    lineHeight: lineHeight.extraLarge,
     fontWeight: 'bold',
   },
   huge: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.huge,
-    lineHeight: theme.font.lineHeight.huge,
+    fontSize: fontSize.huge,
+    lineHeight: lineHeight.huge,
     fontWeight: 'normal',
   },
   hugeBold: {
     fontFamily: 'Ubuntu',
     fontStyle: 'normal',
-    fontSize: theme.font.size.huge,
-    lineHeight: theme.font.lineHeight.huge,
+    fontSize: fontSize.huge,
+    lineHeight: lineHeight.huge,
     fontWeight: 'bold',
   },
-}
+} satisfies Record<FontName, FontStyle>
 
 export default font
-export type { FontName }
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 8dee7bf..f44efee 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,6 +1,13 @@
-import font, { FontName } from './font'
-import text from './text'
-import theme from './theme'
+import { font, fontSize, lineHeight } from './font'
+import { inputStyles } from './input'
+import { layout } from './layout'
+import { rounded } from './rounded'
+import { shadow } from './shadow'
+import { default as text } from './text'
+import { default as theme } from './theme'
 
-export { font, text, theme }
-export type { FontName }
+export { font, fontSize, inputStyles, lineHeight, layout, text, theme, shadow, rounded }
+
+// Export styles that are part of the Theme type, but are not used in a specific app
+// Until the apps can specify theme overrides, they can import these styles to add them to the theme.
+export * from './theme'
diff --git a/src/styles/input.ts b/src/styles/input.ts
new file mode 100644
index 0000000..d28b515
--- /dev/null
+++ b/src/styles/input.ts
@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native'
+
+import { rounded } from './rounded'
+import theme from './theme'
+
+export const inputStyles = StyleSheet.create({
+  input: {
+    ...rounded.normal,
+    flex: 1,
+    minHeight: 40,
+    borderWidth: 2,
+    paddingLeft: theme.margin.half,
+    paddingRight: theme.margin.double,
+  },
+})
diff --git a/src/styles/layout.ts b/src/styles/layout.ts
new file mode 100644
index 0000000..daf7564
--- /dev/null
+++ b/src/styles/layout.ts
@@ -0,0 +1,50 @@
+import { Insets, ViewStyle } from 'react-native'
+
+import { LayoutStyles } from '../@types/layout'
+
+const absolute: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+}
+
+const absoluteLeft: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+}
+
+const absoluteRight: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: 0,
+}
+
+const absoluteTop: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+}
+
+const absoluteBottom: ViewStyle = {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+}
+
+const hitSlop: Insets = { top: 8, bottom: 8, left: 8, right: 8 }
+
+export const layout = {
+  absolute,
+  absoluteLeft,
+  absoluteRight,
+  absoluteTop,
+  absoluteBottom,
+  hitSlop,
+} satisfies LayoutStyles
diff --git a/src/styles/rounded.ts b/src/styles/rounded.ts
new file mode 100644
index 0000000..0f6b07c
--- /dev/null
+++ b/src/styles/rounded.ts
@@ -0,0 +1,22 @@
+import { RoundedStyle, RoundedStyles } from '../@types/rounded'
+
+export const normal = {
+  borderRadius: 4,
+  overflow: 'hidden',
+} satisfies RoundedStyle
+
+export const large = {
+  borderRadius: 8,
+  overflow: 'hidden',
+} satisfies RoundedStyle
+
+export const huge = {
+  borderRadius: 10,
+  overflow: 'hidden',
+} satisfies RoundedStyle
+
+export const rounded = {
+  normal,
+  large,
+  huge,
+} satisfies RoundedStyles
diff --git a/src/styles/shadow.ts b/src/styles/shadow.ts
new file mode 100644
index 0000000..3f4e0c0
--- /dev/null
+++ b/src/styles/shadow.ts
@@ -0,0 +1,32 @@
+import { ShadowStyle, ShadowStyles } from '../@types/shadow'
+
+export const normal = {
+  android: {
+    elevation: 6,
+    shadowColor: '#939393',
+  },
+  ios: {
+    shadowOffset: { width: 0, height: 4 },
+    shadowColor: '#E6E6E6',
+    shadowOpacity: 0.8,
+    shadowRadius: 4,
+  },
+} satisfies ShadowStyle
+
+export const small = {
+  android: {
+    elevation: 4,
+    shadowColor: '#939393',
+  },
+  ios: {
+    shadowOffset: { width: 0, height: 2 },
+    shadowColor: '#E6E6E6',
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+  },
+} satisfies ShadowStyle
+
+export const shadow = {
+  normal,
+  small,
+} satisfies ShadowStyles
diff --git a/src/styles/text.ts b/src/styles/text.ts
index ec907fa..90b4601 100644
--- a/src/styles/text.ts
+++ b/src/styles/text.ts
@@ -1,6 +1,6 @@
 import { TextStyle } from 'react-native'
 
-import font from './font'
+import { font } from './font'
 import theme from './theme'
 
 type TextName =
@@ -19,7 +19,7 @@ type TextName =
   | 'percentage'
   | 'thumbnail'
 
-const text: Record<TextName, TextStyle> = {
+const text = {
   ...font,
   iconLabel: font.extraSmall,
   tabIconLabel: font.small,
@@ -74,6 +74,6 @@ const text: Record<TextName, TextStyle> = {
     fontWeight: 'bold',
     color: theme.color.white,
   },
-}
+} satisfies Record<TextName, TextStyle>
 
 export default text
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index f03d39c..215b373 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,33 +1,17 @@
-const font = {
-  size: {
-    extraSmall: 10,
-    small: 12,
-    medium: 14,
-    large: 16,
-    extraLarge: 18,
-    huge: 31,
-  },
-  lineHeight: {
-    extraSmall: 16,
-    small: 16,
-    medium: 20,
-    large: 26,
-    extraLarge: 28,
-    huge: 37,
-  },
-}
+import { Theme, ThemeAnimation, ThemeColor, ThemeGradient, ThemeIcon, ThemeMargin, ThemeOverlay } from '../@types/theme'
 
 const icon = {
   size: {
-    extraSmall: 10,
-    small: 12,
-    medium: 14,
-    large: 16,
-    extraLarge: 18,
-    extraExtraLarge: 24,
-    huge: 48,
+    xxs: 8,
+    xs: 10,
+    s: 12,
+    m: 14,
+    l: 16,
+    xl: 18,
+    xxl: 24,
+    xxxl: 48,
   },
-}
+} satisfies ThemeIcon
 
 const color = {
   white: '#FFFFFF',
@@ -35,27 +19,43 @@ const color = {
   grey800: '#666666',
   grey500: '#939393',
   grey300: '#E6E6E6',
+  grey100: '#F0F0F0',
   grey50: '#F9FAFB',
   primary500: '#0066B1',
   primary300: '#67A4D0',
   primary50: '#E8F1F8',
+  success700: '#50701A',
   success600: '#689023',
   success500: '#85B92D',
   success400: '#9BC454',
   success200: '#CEE2AB',
   success50: '#F7FBEF',
+  warning700: '#93730B',
   warning500: '#F4C015',
+  warning200: '#FBE6A2',
+  error700: '#8B332D',
   error500: '#EA554B',
   error200: '#F7BAB6',
+  accentLime50: '#F7FBEF',
   accentLime400: '#9BC454',
-  accentSky400: '#72A1FD',
   accentSky50: '#F0F5FF',
-}
+  accentSky400: '#72A1FD',
+} satisfies ThemeColor
 
 const overlay = {
+  white00: '#ffffff00',
+  white05: '#FFFFFF0D',
+  white10: '#FFFFFF1A',
   white70: '#FFFFFFB3',
+  white80: '#FFFFFFCC',
+  black50: '#00000080',
   grey60: '#66666699',
-}
+} satisfies ThemeOverlay
+
+const gradient = {
+  bottom: ['#30303000', '#30303059'],
+  top: ['#30303059', '#30303000'],
+} satisfies ThemeGradient
 
 const margin = {
   eighth: 2,
@@ -65,100 +65,22 @@ const margin = {
   large: 24,
   double: 32,
   huge: 48,
-}
-
-const rounded = {
-  borderRadius: 4,
-  overflow: 'hidden' as const,
-}
-
-const input = {
-  ...rounded,
-  flex: 1,
-  minHeight: 40,
-  borderWidth: 2,
-  paddingLeft: margin.half,
-  paddingRight: margin.double,
-}
+} satisfies ThemeMargin
 
-const bottomGradientColors = ['#30303000', '#30303059']
-const topGradientColors = bottomGradientColors.slice().reverse()
-
-const getBorderColor = ({ isFocused = false, hasErrors = false }) =>
-  hasErrors ? color.error500 : isFocused ? color.primary300 : color.grey300
+const animation = {
+  duration: {
+    medium: 300,
+  },
+} satisfies ThemeAnimation
 
-export default {
-  font,
+export const defaultTheme = {
   icon,
   color,
   overlay,
-  bottomGradientColors,
-  topGradientColors,
+  gradient,
+  animation,
   margin,
-  input,
-  shadow: {
-    android: {
-      elevation: 6,
-      shadowColor: color.grey500,
-    },
-    ios: {
-      shadowOffset: { width: 0, height: 4 },
-      shadowColor: color.grey300,
-      shadowOpacity: 0.8,
-      shadowRadius: 4,
-    },
-  },
-  shadowSmall: {
-    android: {
-      elevation: 4,
-      shadowColor: color.grey500,
-    },
-    ios: {
-      shadowOffset: { width: 0, height: 2 },
-      shadowColor: color.grey300,
-      shadowOpacity: 0.8,
-      shadowRadius: 2,
-    },
-  },
-  rounded,
-  roundedLarge: {
-    borderRadius: 8,
-    overflow: 'hidden' as const,
-  },
-  roundedHuge: {
-    borderRadius: 10,
-    overflow: 'hidden' as const,
-  },
-  absolute: {
-    position: 'absolute' as const,
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-  absoluteLeft: {
-    position: 'absolute' as const,
-    top: 0,
-    bottom: 0,
-    left: 0,
-  },
-  absoluteRight: {
-    position: 'absolute' as const,
-    top: 0,
-    bottom: 0,
-    right: 0,
-  },
-  absoluteBottom: {
-    position: 'absolute' as const,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  },
-  absoluteTop: {
-    position: 'absolute' as const,
-    top: 0,
-    left: 0,
-    right: 0,
-  },
-  getBorderColor,
-}
+} satisfies Theme
+
+// To make existing imports work without having to change the import path
+export default defaultTheme
diff --git a/yarn.lock b/yarn.lock
index 6afb9c2..9283d5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2735,6 +2735,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsamr/counter-style@npm:^2.0.1":
+  version: 2.0.2
+  resolution: "@jsamr/counter-style@npm:2.0.2"
+  checksum: 9434d6e52dcbf6a3422137e3397d801aa3b4f3fd780fc5a12c47db171502f281eaa8ae69b953a1d1bdaf4effeac7c674e7dbdd8341157a6f21a087ccb7af5bfe
+  languageName: node
+  linkType: hard
+
+"@jsamr/react-native-li@npm:^2.3.0":
+  version: 2.3.1
+  resolution: "@jsamr/react-native-li@npm:2.3.1"
+  peerDependencies:
+    "@jsamr/counter-style": ^1.0.0 || ^2.0.0
+    react: "*"
+    react-native: "*"
+  checksum: 3465ac894d125261660cc5d779c226560578927354c8c661be9bcdc46438121cd5561079dd76ad82bb9970c0adf753e62726d6d8849b1b66484aa8090701916b
+  languageName: node
+  linkType: hard
+
 "@napi-rs/wasm-runtime@npm:^0.2.11":
   version: 0.2.12
   resolution: "@napi-rs/wasm-runtime@npm:0.2.12"
@@ -2746,6 +2764,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@native-html/css-processor@npm:1.11.0":
+  version: 1.11.0
+  resolution: "@native-html/css-processor@npm:1.11.0"
+  dependencies:
+    css-to-react-native: ^3.0.0
+    csstype: ^3.0.8
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-native": "*"
+  checksum: 741ff04c6bfb7f004670ed03c230f417266002c59bd0314e066df28044f5d6ce76ff62db85ff801b9e14dee5a048a87b77d2213bc6f869de31f4d93802c54fd0
+  languageName: node
+  linkType: hard
+
+"@native-html/transient-render-engine@npm:11.2.3":
+  version: 11.2.3
+  resolution: "@native-html/transient-render-engine@npm:11.2.3"
+  dependencies:
+    "@native-html/css-processor": 1.11.0
+    "@types/ramda": ^0.27.44
+    csstype: ^3.0.9
+    domelementtype: ^2.2.0
+    domhandler: ^4.2.2
+    domutils: ^2.8.0
+    htmlparser2: ^7.1.2
+    ramda: ^0.27.2
+  peerDependencies:
+    "@types/react-native": "*"
+    react-native: ^*
+  checksum: 13248216b19c07703fa5ff9942889ea7dc669d6fd9c944d3d5cf2757088c3e66a5b760f194ac0193ddbbb3f4556655fe10c6e4e5a5efd030da8ec1360b08a605
+  languageName: node
+  linkType: hard
+
 "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
   version: 5.1.1-v1
   resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
@@ -2843,6 +2893,7 @@ __metadata:
     react: 19.2.0
     react-native: 0.83.1
     react-native-logs: ^5.5.0
+    react-native-render-html: ^6.3.4
     react-native-scalable-image: ^1.1.0
     react-test-renderer: 19.2.0
     ts-jest: ^29.4.6
@@ -3466,6 +3517,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ramda@npm:^0.27.40, @types/ramda@npm:^0.27.44":
+  version: 0.27.66
+  resolution: "@types/ramda@npm:0.27.66"
+  dependencies:
+    ts-toolbelt: ^6.15.1
+  checksum: eea577e4a0934849b4103c1452a7c8ddbc9bbf0e2aafb908467212654555145f846a16fe737563b582e8fb5bd6698481ebec1237537e5e662587c47f626e4c92
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:^19.2.0":
   version: 19.2.7
   resolution: "@types/react@npm:19.2.7"
@@ -3489,6 +3549,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/urijs@npm:^1.19.15":
+  version: 1.19.26
+  resolution: "@types/urijs@npm:1.19.26"
+  checksum: 4ecba4791cdfa1334d67f9d59650f5ab1f63eaddbc58f522b91b7a57db7d57930e145ab61c7dd95b7cab656ce82202e673a376abe700f5c29a3075b559b4a113
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.3
   resolution: "@types/yargs-parser@npm:21.0.3"
@@ -4750,6 +4817,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"camelize@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "camelize@npm:1.0.1"
+  checksum: 91d8611d09af725e422a23993890d22b2b72b4cabf7239651856950c76b4bf53fe0d0da7c5e4db05180e898e4e647220e78c9fbc976113bd96d603d1fcbfcb99
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001587":
   version: 1.0.30001589
   resolution: "caniuse-lite@npm:1.0.30001589"
@@ -4792,6 +4866,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-html4@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-entities-html4@npm:1.1.4"
+  checksum: 22536aba07a378a2326420423ceadd65c0121032c527f80e84dfc648381992ed5aa666d7c2b267cd269864b3682d5b0315fc2f03a9e7c017d1a96d24ec292d5f
+  languageName: node
+  linkType: hard
+
+"character-entities-legacy@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-entities-legacy@npm:1.1.4"
+  checksum: fe03a82c154414da3a0c8ab3188e4237ec68006cbcd681cf23c7cfb9502a0e76cd30ab69a2e50857ca10d984d57de3b307680fff5328ccd427f400e559c3a811
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^2.0.0":
   version: 2.0.0
   resolution: "chownr@npm:2.0.0"
@@ -5046,7 +5134,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.2.2":
+"css-color-keywords@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "css-color-keywords@npm:1.0.0"
+  checksum: 8f125e3ad477bd03c77b533044bd9e8a6f7c0da52d49bbc0bbe38327b3829d6ba04d368ca49dd9ff3b667d2fc8f1698d891c198bbf8feade1a5501bf5a296408
+  languageName: node
+  linkType: hard
+
+"css-to-react-native@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "css-to-react-native@npm:3.2.0"
+  dependencies:
+    camelize: ^1.0.0
+    css-color-keywords: ^1.0.0
+    postcss-value-parser: ^4.0.2
+  checksum: 263be65e805aef02c3f20c064665c998a8c35293e1505dbe6e3054fb186b01a9897ac6cf121f9840e5a9dfe3fb3994f6fcd0af84a865f1df78ba5bf89e77adce
+  languageName: node
+  linkType: hard
+
+"csstype@npm:^3.0.8, csstype@npm:^3.0.9, csstype@npm:^3.2.2":
   version: 3.2.3
   resolution: "csstype@npm:3.2.3"
   checksum: cb882521b3398958a1ce6ca98c011aec0bde1c77ecaf8a1dd4db3b112a189939beae3b1308243b2fe50fc27eb3edeb0f73a5a4d91d928765dc6d5ecc7bda92ee
@@ -5297,6 +5403,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-serializer@npm:^1.0.1":
+  version: 1.4.1
+  resolution: "dom-serializer@npm:1.4.1"
+  dependencies:
+    domelementtype: ^2.0.1
+    domhandler: ^4.2.0
+    entities: ^2.0.0
+  checksum: fbb0b01f87a8a2d18e6e5a388ad0f7ec4a5c05c06d219377da1abc7bb0f674d804f4a8a94e3f71ff15f6cb7dcfc75704a54b261db672b9b3ab03da6b758b0b22
+  languageName: node
+  linkType: hard
+
+"domelementtype@npm:^2.0.1, domelementtype@npm:^2.2.0":
+  version: 2.3.0
+  resolution: "domelementtype@npm:2.3.0"
+  checksum: ee837a318ff702622f383409d1f5b25dd1024b692ef64d3096ff702e26339f8e345820f29a68bcdcea8cfee3531776b3382651232fbeae95612d6f0a75efb4f6
+  languageName: node
+  linkType: hard
+
+"domhandler@npm:^4.2.0, domhandler@npm:^4.2.2":
+  version: 4.3.1
+  resolution: "domhandler@npm:4.3.1"
+  dependencies:
+    domelementtype: ^2.2.0
+  checksum: 4c665ceed016e1911bf7d1dadc09dc888090b64dee7851cccd2fcf5442747ec39c647bb1cb8c8919f8bbdd0f0c625a6bafeeed4b2d656bbecdbae893f43ffaaa
+  languageName: node
+  linkType: hard
+
+"domutils@npm:^2.8.0":
+  version: 2.8.0
+  resolution: "domutils@npm:2.8.0"
+  dependencies:
+    dom-serializer: ^1.0.1
+    domelementtype: ^2.2.0
+    domhandler: ^4.2.0
+  checksum: abf7434315283e9aadc2a24bac0e00eab07ae4313b40cc239f89d84d7315ebdfd2fb1b5bf750a96bc1b4403d7237c7b2ebf60459be394d625ead4ca89b934391
+  languageName: node
+  linkType: hard
+
 "dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "dunder-proto@npm:1.0.1"
@@ -5380,6 +5524,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "entities@npm:2.2.0"
+  checksum: 19010dacaf0912c895ea262b4f6128574f9ccf8d4b3b65c7e8334ad0079b3706376360e28d8843ff50a78aabcb8f08f0a32dbfacdc77e47ed77ca08b713669b3
+  languageName: node
+  linkType: hard
+
+"entities@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "entities@npm:3.0.1"
+  checksum: aaf7f12033f0939be91f5161593f853f2da55866db55ccbf72f45430b8977e2b79dbd58c53d0fdd2d00bd7d313b75b0968d09f038df88e308aa97e39f9456572
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -7015,6 +7173,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"htmlparser2@npm:^7.1.2":
+  version: 7.2.0
+  resolution: "htmlparser2@npm:7.2.0"
+  dependencies:
+    domelementtype: ^2.0.1
+    domhandler: ^4.2.2
+    domutils: ^2.8.0
+    entities: ^3.0.1
+  checksum: 96563d9965729cfcb3f5f19c26d013c6831b4cb38d79d8c185e9cd669ea6a9ffe8fb9ccc74d29a068c9078aa0e2767053ed6b19aa32723c41550340d0094bea0
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.1":
   version: 4.1.1
   resolution: "http-cache-semantics@npm:4.1.1"
@@ -10042,6 +10212,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-value-parser@npm:^4.0.2":
+  version: 4.2.0
+  resolution: "postcss-value-parser@npm:4.2.0"
+  checksum: 819ffab0c9d51cf0acbabf8996dffbfafbafa57afc0e4c98db88b67f2094cb44488758f06e5da95d7036f19556a4a732525e84289a425f4f6fd8e412a9d7442f
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -10132,7 +10309,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.7, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -10192,6 +10369,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ramda@npm:^0.27.2":
+  version: 0.27.2
+  resolution: "ramda@npm:0.27.2"
+  checksum: 28d6735dd1eea1a796c56cf6111f3673c6105bbd736e521cdd7826c46a18eeff337c2dba4668f6eed990d539b9961fd6db19aa46ccc1530ba67a396c0a9f580d
+  languageName: node
+  linkType: hard
+
 "range-parser@npm:~1.2.1":
   version: 1.2.1
   resolution: "range-parser@npm:1.2.1"
@@ -10244,6 +10428,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-render-html@npm:^6.3.4":
+  version: 6.3.4
+  resolution: "react-native-render-html@npm:6.3.4"
+  dependencies:
+    "@jsamr/counter-style": ^2.0.1
+    "@jsamr/react-native-li": ^2.3.0
+    "@native-html/transient-render-engine": 11.2.3
+    "@types/ramda": ^0.27.40
+    "@types/urijs": ^1.19.15
+    prop-types: ^15.5.7
+    ramda: ^0.27.2
+    stringify-entities: ^3.1.0
+    urijs: ^1.19.6
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 9fd0c915664d4d25d23f48b4b33101385f2e497c643664c09b457eb091f90cd1d60f9c2c4bfad1a55403c8037d52de5dcbdebe0b1ebc9e4883d8a3099a23633b
+  languageName: node
+  linkType: hard
+
 "react-native-scalable-image@npm:^1.1.0":
   version: 1.1.0
   resolution: "react-native-scalable-image@npm:1.1.0"
@@ -11225,6 +11429,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stringify-entities@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "stringify-entities@npm:3.1.0"
+  dependencies:
+    character-entities-html4: ^1.0.0
+    character-entities-legacy: ^1.0.0
+    xtend: ^4.0.0
+  checksum: 5b6212e2985101ddb8197d999a6c01abb610f2ba6efd6f8f7d7ec763b61cb08b55735b03febdf501c2091f484df16bc82412419ef35ee21135548f6a15881044
+  languageName: node
+  linkType: hard
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -11498,6 +11713,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-toolbelt@npm:^6.15.1":
+  version: 6.15.5
+  resolution: "ts-toolbelt@npm:6.15.5"
+  checksum: 24ad00cfd9ce735c76c873a9b1347eac475b94e39ebbdf100c9019dce88dd5f4babed52884cf82bb456a38c28edd0099ab6f704b84b2e5e034852b618472c1f3
+  languageName: node
+  linkType: hard
+
 "tsconfig-paths@npm:^3.15.0":
   version: 3.15.0
   resolution: "tsconfig-paths@npm:3.15.0"
@@ -11939,6 +12161,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"urijs@npm:^1.19.6":
+  version: 1.19.11
+  resolution: "urijs@npm:1.19.11"
+  checksum: f9b95004560754d30fd7dbee44b47414d662dc9863f1cf5632a7c7983648df11d23c0be73b9b4f9554463b61d5b0a520b70df9e1ee963ebb4af02e6da2cc80f3
+  languageName: node
+  linkType: hard
+
 "use-latest-callback@npm:^0.2.4":
   version: 0.2.6
   resolution: "use-latest-callback@npm:0.2.6"
@@ -12207,6 +12436,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xtend@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "xtend@npm:4.0.2"
+  checksum: ac5dfa738b21f6e7f0dd6e65e1b3155036d68104e67e5d5d1bde74892e327d7e5636a076f625599dc394330a731861e87343ff184b0047fef1360a7ec0a5a36a
+  languageName: node
+  linkType: hard
+
 "y18n@npm:^5.0.5":
   version: 5.0.8
   resolution: "y18n@npm:5.0.8"