diff --git a/package.json b/package.json
index 0313ae5..6dbbb7d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.70.0",
+  "version": "1.71.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
index 8879e92..4986597 100644
--- a/src/components/BackButton.tsx
+++ b/src/components/BackButton.tsx
@@ -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.primary }}
+    icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary500 }}
   />
 )
 
diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
index 0f69c13..d641e5c 100644
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@@ -63,7 +63,7 @@ const styles = StyleSheet.create({
   container: {
     ...theme.shadow.ios,
     borderTopWidth: 1 / 3,
-    borderTopColor: theme.color.greySemi,
+    borderTopColor: theme.color.grey300,
   },
   bottomSheetContainer: {
     ...theme.shadow.android,
diff --git a/src/components/BrandIcon.tsx b/src/components/BrandIcon.tsx
index a105e34..1166d96 100644
--- a/src/components/BrandIcon.tsx
+++ b/src/components/BrandIcon.tsx
@@ -13,7 +13,7 @@ type Props = {
 
 export const BrandIcon = ({ name, color, size }: Props) => {
   const icon = BrandIcons[name]
-  const iconColor = color ?? theme.color.primary
+  const iconColor = color ?? theme.color.primary500
   const iconSize = size ?? theme.icon.size.large
   const FontAwesomeIconTypeErased = FontAwesomeIcon as unknown as any
 
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index 7fd7fde..a99f507 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
     fontSize: theme.font.size.medium,
   },
   chipContainer: {
-    backgroundColor: theme.color.successLight,
+    backgroundColor: theme.color.accentLime400,
     paddingHorizontal: theme.margin.common,
     paddingVertical: theme.margin.half,
     borderRadius: theme.margin.common,
diff --git a/src/components/ContentImage.tsx b/src/components/ContentImage.tsx
index 5b4e727..79484e9 100644
--- a/src/components/ContentImage.tsx
+++ b/src/components/ContentImage.tsx
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
     ...theme.shadow.android,
     ...theme.roundedLarge,
     borderWidth: 1,
-    borderColor: theme.color.greyLight,
+    borderColor: theme.color.grey50,
   },
   imageContainer: {
     margin: theme.margin.common,
@@ -91,6 +91,6 @@ const styles = StyleSheet.create({
   },
   description: {
     ...font.small,
-    color: theme.color.greyBase,
+    color: theme.color.grey500,
   },
 })
diff --git a/src/components/Date.tsx b/src/components/Date.tsx
index b84739a..590a69e 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.greySemi} size={theme.icon.size.medium} />}
+    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.medium} />}
     text={date}
     style={{
       containerStyle,
diff --git a/src/components/FilterButton.tsx b/src/components/FilterButton.tsx
index fac8910..f65a4f1 100644
--- a/src/components/FilterButton.tsx
+++ b/src/components/FilterButton.tsx
@@ -12,7 +12,7 @@ type Props = {
 
 const FilterButton = ({ content, onPress, active = false, style }: Props) => {
   const buttonStyle = active ? styles.activeButton : styles.button
-  const contentColor = active ? theme.color.white : theme.color.greyDark
+  const contentColor = active ? theme.color.white : theme.color.grey800
   return (
     <TouchableOpacity
       testID="touchable-opacity"
@@ -36,6 +36,6 @@ const styles = StyleSheet.create({
     backgroundColor: theme.color.white,
   },
   activeButton: {
-    backgroundColor: theme.color.primary,
+    backgroundColor: theme.color.primary500,
   },
 })
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index a370a13..8f5d764 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -22,7 +22,7 @@ export type IconProps = IconAppearanceProps & {
 export const Icon = ({ name, color, size, testID, style, rotation }: IconProps): React.ReactElement => {
   const iconStyle = style ?? 'light'
   const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid
-  const iconColor = color ?? theme.color.primary
+  const iconColor = color ?? theme.color.primary500
   const iconSize = size ?? theme.icon.size.large
   const transform = rotation ? { rotate: rotation } : undefined
 
diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx
index 4ef3b22..6ed1383 100644
--- a/src/components/InputField.tsx
+++ b/src/components/InputField.tsx
@@ -43,8 +43,8 @@ const InputField = ({
   const hasErrors = !!errorMessage
   const borderColor = theme.getBorderColor({ isFocused, hasErrors })
 
-  const inputContainerStyle = disabled ? { backgroundColor: theme.color.greyLight } : {}
-  const placeholderTextColor = disabled ? theme.color.greySemi : theme.color.placeholder
+  const inputContainerStyle = disabled ? { backgroundColor: theme.color.grey50 } : {}
+  const placeholderTextColor = disabled ? theme.color.grey300 : theme.color.grey500
 
   const layoutHandler = inputProps?.autoFocus
     ? () => {
@@ -82,7 +82,7 @@ const InputField = ({
       </View>
       {errorMessage && (
         <IconText
-          icon={<Icon name="exclamation-triangle" size={theme.icon.size.small} color={theme.color.error} />}
+          icon={<Icon name="exclamation-triangle" size={theme.icon.size.small} color={theme.color.error500} />}
           text={errorMessage}
           style={{
             textStyle: [styles.errorStyle, errorStyle],
@@ -117,10 +117,10 @@ const styles = StyleSheet.create({
   },
   errorStyle: {
     ...font.small,
-    color: theme.color.error,
+    color: theme.color.error500,
   },
   descriptionStyle: {
     ...font.small,
-    color: theme.color.greyDark,
+    color: theme.color.grey800,
   },
 })
diff --git a/src/components/Location.tsx b/src/components/Location.tsx
index d45cba2..3611b71 100644
--- a/src/components/Location.tsx
+++ b/src/components/Location.tsx
@@ -13,7 +13,7 @@ type Props = {
 
 const Location = ({ location, containerStyle }: Props) => (
   <IconText
-    icon={<Icon name="map-marker-alt" style="solid" color={theme.color.greySemi} size={theme.icon.size.medium} />}
+    icon={<Icon name="map-marker-alt" style="solid" color={theme.color.grey300} size={theme.icon.size.medium} />}
     text={location}
     style={{
       containerStyle,
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 5b13c44..8d3c934 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -14,7 +14,7 @@ const Notification = ({ count, style }: Props) => (
     style={[
       style,
       {
-        backgroundColor: theme.color.error,
+        backgroundColor: theme.color.error500,
         borderRadius: 9,
         width: 18,
         height: 18,
diff --git a/src/components/NotificationPopup.tsx b/src/components/NotificationPopup.tsx
index 13b3ca6..5614f8b 100644
--- a/src/components/NotificationPopup.tsx
+++ b/src/components/NotificationPopup.tsx
@@ -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.greyBase} size={theme.icon.size.extraLarge} />
+            <Icon name="times" color={theme.color.grey500} size={theme.icon.size.extraLarge} />
           </TouchableOpacity>
         )}
       </View>
diff --git a/src/components/PageIndicator.tsx b/src/components/PageIndicator.tsx
index 1390088..0e96af2 100644
--- a/src/components/PageIndicator.tsx
+++ b/src/components/PageIndicator.tsx
@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
     width: 8,
     margin: 4,
     ...theme.rounded,
-    backgroundColor: theme.color.greyBase,
+    backgroundColor: theme.color.grey500,
   },
   smallDot: {
     margin: 6,
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index f28f15d..4ffe236 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -31,6 +31,6 @@ const styles = StyleSheet.create({
     backgroundColor: theme.color.white,
     ...theme.shadowSmall.android,
     borderTopWidth: 1,
-    borderColor: theme.color.greyLight,
+    borderColor: theme.color.grey50,
   },
 })
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index b754bff..bb79c34 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
     alignItems: 'stretch',
     justifyContent: 'center',
     flexDirection: 'column',
-    backgroundColor: theme.color.modalBackground,
+    backgroundColor: theme.overlay.grey60,
   },
   viewPort: {
     flexDirection: 'column',
diff --git a/src/components/ProgressBarList.tsx b/src/components/ProgressBarList.tsx
index 08fce34..57b1f9b 100644
--- a/src/components/ProgressBarList.tsx
+++ b/src/components/ProgressBarList.tsx
@@ -101,7 +101,7 @@ const ProgressBarList = ({ progressBars, separator }: Props) => {
                 size={theme.icon.size.small}
               />
             ) : (
-              <Icon name="circle-check" color={theme.color.greySemi} size={theme.icon.size.small} />
+              <Icon name="circle-check" color={theme.color.grey300} size={theme.icon.size.small} />
             )}
           </View>
         ))}
@@ -130,7 +130,7 @@ const styles = StyleSheet.create({
   },
   label: {
     ...font.small,
-    color: theme.color.white70,
+    color: theme.overlay.white70,
     justifyContent: 'center',
     lineHeight: barHeight,
   },
@@ -141,7 +141,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     borderTopRightRadius: borderRadius,
     borderBottomRightRadius: borderRadius,
-    backgroundColor: theme.color.greySemi,
+    backgroundColor: theme.color.grey300,
     width: '100%',
   },
   numbersContainer: {
@@ -153,7 +153,7 @@ const styles = StyleSheet.create({
   },
   denominator: {
     ...font.small,
-    color: theme.color.white70,
+    color: theme.overlay.white70,
     lineHeight: barHeight,
   },
   numerator: {
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 534f180..eaf1038 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -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.greyBase} size={theme.icon.size.extraLarge} />
+                <Icon name="times" color={theme.color.grey500} size={theme.icon.size.extraLarge} />
               </TouchableOpacity>
             </View>
           )}
diff --git a/src/components/__tests__/BrandIcon.test.tsx b/src/components/__tests__/BrandIcon.test.tsx
index ef131af..af8fedb 100644
--- a/src/components/__tests__/BrandIcon.test.tsx
+++ b/src/components/__tests__/BrandIcon.test.tsx
@@ -13,7 +13,7 @@ describe('BrandIcon', () => {
     })
 
     test('With color', () => {
-      const { toJSON } = render(<BrandIcon name="wikipedia-w" color={theme.color.error} />)
+      const { toJSON } = render(<BrandIcon name="wikipedia-w" color={theme.color.error500} />)
       expect(toJSON()).toMatchSnapshot()
     })
 
diff --git a/src/components/__tests__/FilterButton.test.tsx b/src/components/__tests__/FilterButton.test.tsx
index a8976e0..4a362cd 100644
--- a/src/components/__tests__/FilterButton.test.tsx
+++ b/src/components/__tests__/FilterButton.test.tsx
@@ -20,7 +20,7 @@ describe('FilterButton', () => {
     test('Disabled', () => {
       const { toJSON } = render(<FilterButton content={content} active={false} style={{ flex: 1 }} />)
       expect(toJSON()).toMatchSnapshot()
-      expect(content).toHaveBeenCalledWith({ color: theme.color.greyDark })
+      expect(content).toHaveBeenCalledWith({ color: theme.color.grey800 })
     })
   })
 
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 7bc5d80..7703451 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Chip Rendering All props 1`] = `
     style={
       [
         {
-          "backgroundColor": "#9DC556",
+          "backgroundColor": "#9BC454",
           "borderRadius": 16,
           "justifyContent": "center",
           "minWidth": 44,
@@ -128,7 +128,7 @@ exports[`Chip Rendering Required props 1`] = `
     style={
       [
         {
-          "backgroundColor": "#9DC556",
+          "backgroundColor": "#9BC454",
           "borderRadius": 16,
           "justifyContent": "center",
           "minWidth": 44,
diff --git a/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap b/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap
index 4fcfad5..c884d90 100644
--- a/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap
@@ -394,7 +394,7 @@ exports[`ContentImage Interaction Click the image to show the lightbox 1`] = `
       style={
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderRadius": 8,
           "borderWidth": 1,
           "elevation": 6,
@@ -518,7 +518,7 @@ exports[`ContentImage Interaction Close the lightbox 1`] = `
       style={
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderRadius": 8,
           "borderWidth": 1,
           "elevation": 6,
@@ -642,7 +642,7 @@ exports[`ContentImage Rendering With alt title 1`] = `
       style={
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderRadius": 8,
           "borderWidth": 1,
           "elevation": 6,
@@ -766,7 +766,7 @@ exports[`ContentImage Rendering With alt title and text 1`] = `
       style={
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderRadius": 8,
           "borderWidth": 1,
           "elevation": 6,
@@ -905,7 +905,7 @@ exports[`ContentImage Rendering With alt title ending in delimiter 1`] = `
       style={
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderRadius": 8,
           "borderWidth": 1,
           "elevation": 6,
diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
index a8195bf..58fef44 100644
--- a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`InputField Rendering Disabled 1`] = `
   <View
     style={
       {
-        "backgroundColor": "#F8F9FA",
+        "backgroundColor": "#F9FAFB",
         "flexDirection": "row",
       }
     }
@@ -482,7 +482,7 @@ exports[`InputField Rendering With focus 1`] = `
       style={
         [
           {
-            "borderColor": "#66A3D0",
+            "borderColor": "#67A4D0",
           },
           {
             "borderRadius": 4,
@@ -538,7 +538,7 @@ exports[`InputField Rendering With focus and an error message 1`] = `
       style={
         [
           {
-            "borderColor": "#66A3D0",
+            "borderColor": "#67A4D0",
           },
           {
             "borderRadius": 4,
diff --git a/src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap b/src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap
index 44de4f0..85237e4 100644
--- a/src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`NotificationPopup Rendering Left and right buttons 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
@@ -317,7 +317,7 @@ exports[`NotificationPopup Rendering Only left button 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
@@ -526,7 +526,7 @@ exports[`NotificationPopup Rendering With close button 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
diff --git a/src/components/__tests__/__snapshots__/Panel.test.tsx.snap b/src/components/__tests__/__snapshots__/Panel.test.tsx.snap
index 3485b41..073e29f 100644
--- a/src/components/__tests__/__snapshots__/Panel.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Panel.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`Panel Rendering 1`] = `
       [
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderTopWidth": 1,
           "elevation": 4,
           "paddingVertical": 16,
@@ -68,7 +68,7 @@ exports[`Panel Rendering without top shadow 1`] = `
       [
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderTopWidth": 1,
           "elevation": 4,
           "paddingVertical": 16,
diff --git a/src/components/__tests__/__snapshots__/Popup.test.tsx.snap b/src/components/__tests__/__snapshots__/Popup.test.tsx.snap
index c93c296..6ffeec9 100644
--- a/src/components/__tests__/__snapshots__/Popup.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Popup.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`Popup Rendering 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
diff --git a/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap b/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap
index 4799653..b81c440 100644
--- a/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`ProgressBarList Show bars 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -73,7 +73,7 @@ exports[`ProgressBarList Show bars 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -112,7 +112,7 @@ exports[`ProgressBarList Show bars 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -151,7 +151,7 @@ exports[`ProgressBarList Show bars 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -190,7 +190,7 @@ exports[`ProgressBarList Show bars 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -229,7 +229,7 @@ exports[`ProgressBarList Show bars 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -268,7 +268,7 @@ exports[`ProgressBarList Show bars 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -358,7 +358,7 @@ exports[`ProgressBarList Show bars 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -434,7 +434,7 @@ exports[`ProgressBarList Show bars 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -510,7 +510,7 @@ exports[`ProgressBarList Show bars 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -586,7 +586,7 @@ exports[`ProgressBarList Show bars 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -662,7 +662,7 @@ exports[`ProgressBarList Show bars 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -738,7 +738,7 @@ exports[`ProgressBarList Show bars 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -814,7 +814,7 @@ exports[`ProgressBarList Show bars 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
@@ -988,7 +988,7 @@ exports[`ProgressBarList Use different translation 1`] = `
         numberOfLines={1}
         style={
           {
-            "color": "#FFFFFFB4",
+            "color": "#FFFFFFB3",
             "fontFamily": "Ubuntu",
             "fontSize": 12,
             "fontStyle": "normal",
@@ -1078,7 +1078,7 @@ exports[`ProgressBarList Use different translation 1`] = `
             <Text
               style={
                 {
-                  "color": "#FFFFFFB4",
+                  "color": "#FFFFFFB3",
                   "fontFamily": "Ubuntu",
                   "fontSize": 12,
                   "fontStyle": "normal",
diff --git a/src/lib/LargeButtonStyles.ts b/src/lib/LargeButtonStyles.ts
index a91d1fb..2450512 100644
--- a/src/lib/LargeButtonStyles.ts
+++ b/src/lib/LargeButtonStyles.ts
@@ -10,7 +10,7 @@ type LargeButtonStyle = {
 
 const primary: LargeButtonStyle = {
   buttonStyle: {
-    backgroundColor: theme.color.primary,
+    backgroundColor: theme.color.primary500,
   },
   textStyle: { color: theme.color.white },
   iconColor: theme.color.white,
@@ -18,7 +18,7 @@ const primary: LargeButtonStyle = {
 
 const primaryDisabled: LargeButtonStyle = {
   buttonStyle: {
-    backgroundColor: theme.color.greySemi,
+    backgroundColor: theme.color.grey300,
   },
   textStyle: { color: theme.color.white },
   iconColor: theme.color.white,
@@ -26,7 +26,7 @@ const primaryDisabled: LargeButtonStyle = {
 
 const primaryDanger: LargeButtonStyle = {
   buttonStyle: {
-    backgroundColor: theme.color.error,
+    backgroundColor: theme.color.error500,
   },
   textStyle: { color: theme.color.white },
   iconColor: theme.color.white,
@@ -34,32 +34,32 @@ const primaryDanger: LargeButtonStyle = {
 
 const secondary: LargeButtonStyle = {
   buttonStyle: {
-    borderColor: theme.color.primary,
+    borderColor: theme.color.primary500,
     borderWidth: 2,
     backgroundColor: theme.color.white,
   },
-  textStyle: { color: theme.color.primary },
-  iconColor: theme.color.primary,
+  textStyle: { color: theme.color.primary500 },
+  iconColor: theme.color.primary500,
 }
 
 const secondaryDisabled: LargeButtonStyle = {
   buttonStyle: {
-    borderColor: theme.color.greySemi,
+    borderColor: theme.color.grey300,
     borderWidth: 2,
     backgroundColor: theme.color.white,
   },
-  textStyle: { color: theme.color.greySemi },
-  iconColor: theme.color.greySemi,
+  textStyle: { color: theme.color.grey300 },
+  iconColor: theme.color.grey300,
 }
 
 const secondaryDanger: LargeButtonStyle = {
   buttonStyle: {
-    borderColor: theme.color.error,
+    borderColor: theme.color.error500,
     borderWidth: 2,
     backgroundColor: theme.color.white,
   },
-  textStyle: { color: theme.color.error },
-  iconColor: theme.color.error,
+  textStyle: { color: theme.color.error500 },
+  iconColor: theme.color.error500,
 }
 
 export type { LargeButtonStyle }
diff --git a/src/styles/text.ts b/src/styles/text.ts
index 5efd11e..ec907fa 100644
--- a/src/styles/text.ts
+++ b/src/styles/text.ts
@@ -25,20 +25,20 @@ const text: Record<TextName, TextStyle> = {
   tabIconLabel: font.small,
   inputLabel: {
     ...font.smallBold,
-    color: theme.color.greyDark,
+    color: theme.color.grey800,
   },
   scientificName: {
     ...font.small,
     fontStyle: 'italic',
-    color: theme.color.greyBase,
+    color: theme.color.grey500,
   },
   body: {
     ...font.medium,
-    color: theme.color.greyDark,
+    color: theme.color.grey800,
   },
   light: {
     ...font.medium,
-    color: theme.color.greyBase,
+    color: theme.color.grey500,
   },
   lead: {
     ...font.mediumBold,
@@ -46,11 +46,11 @@ const text: Record<TextName, TextStyle> = {
   },
   link: {
     ...font.medium,
-    color: theme.color.primary,
+    color: theme.color.primary500,
   },
   linkBold: {
     ...font.mediumBold,
-    color: theme.color.primary,
+    color: theme.color.primary500,
   },
   input: {
     ...font.large,
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index c909eae..f03d39c 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -1,5 +1,3 @@
-import Color from 'color'
-
 const font = {
   size: {
     extraSmall: 10,
@@ -31,36 +29,32 @@ const icon = {
   },
 }
 
-const black = '#212121'
-const greyBase = '#939393'
-
 const color = {
-  primary: '#0066B1',
-  primaryLighter: '#66A3D0',
-  primaryLightest: '#E6F0F7',
-  secondaryLight: '#709FFD',
-  secondaryLightestExtra: '#F0F5FF',
-  black,
-  greyDark: '#666666',
-  greyBase,
-  placeholder: greyBase,
-  greySemi: '#E6E6E6',
-  greyLight: '#F8F9FA',
   white: '#FFFFFF',
-  white70: '#FFFFFFB4',
-  white77: '#FFFFFFC4',
-  white80: '#FFFFFFCD',
-  success: '#84B72C',
-  successLight: '#9DC556',
-  successLighter: '#B5D480',
-  successLightest: '#CEE2AB',
-  successLightestExtra: '#F7FBEF',
-  successDark: '#6A9223',
-  warning: '#F4C013',
-  error: '#EA554B',
-  errorLightest: '#F7BBB7',
-  modalBackground: Color(black).alpha(0.6).lighten(0.4).string(),
-  darkPanelBackground: Color(black).alpha(0.5).string(),
+  black: '#212121',
+  grey800: '#666666',
+  grey500: '#939393',
+  grey300: '#E6E6E6',
+  grey50: '#F9FAFB',
+  primary500: '#0066B1',
+  primary300: '#67A4D0',
+  primary50: '#E8F1F8',
+  success600: '#689023',
+  success500: '#85B92D',
+  success400: '#9BC454',
+  success200: '#CEE2AB',
+  success50: '#F7FBEF',
+  warning500: '#F4C015',
+  error500: '#EA554B',
+  error200: '#F7BAB6',
+  accentLime400: '#9BC454',
+  accentSky400: '#72A1FD',
+  accentSky50: '#F0F5FF',
+}
+
+const overlay = {
+  white70: '#FFFFFFB3',
+  grey60: '#66666699',
 }
 
 const margin = {
@@ -91,12 +85,13 @@ const bottomGradientColors = ['#30303000', '#30303059']
 const topGradientColors = bottomGradientColors.slice().reverse()
 
 const getBorderColor = ({ isFocused = false, hasErrors = false }) =>
-  hasErrors ? color.error : isFocused ? color.primaryLighter : color.greySemi
+  hasErrors ? color.error500 : isFocused ? color.primary300 : color.grey300
 
 export default {
   font,
   icon,
   color,
+  overlay,
   bottomGradientColors,
   topGradientColors,
   margin,
@@ -104,11 +99,11 @@ export default {
   shadow: {
     android: {
       elevation: 6,
-      shadowColor: color.greyBase,
+      shadowColor: color.grey500,
     },
     ios: {
       shadowOffset: { width: 0, height: 4 },
-      shadowColor: color.greySemi,
+      shadowColor: color.grey300,
       shadowOpacity: 0.8,
       shadowRadius: 4,
     },
@@ -116,11 +111,11 @@ export default {
   shadowSmall: {
     android: {
       elevation: 4,
-      shadowColor: color.greyBase,
+      shadowColor: color.grey500,
     },
     ios: {
       shadowOffset: { width: 0, height: 2 },
-      shadowColor: color.greySemi,
+      shadowColor: color.grey300,
       shadowOpacity: 0.8,
       shadowRadius: 2,
     },