diff --git a/package.json b/package.json
index 7a8ba53..841fd10 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "console-browserify": "^1.1.0",
     "constants-browserify": "^1.0.0",
     "currency.js": "^1.2.2",
+    "design-system": "github:symbol/design-system#v0.1.2",
     "dns.js": "^1.0.1",
     "domain-browser": "^1.1.1",
     "events": "^3.0.0",
diff --git a/src/assets/icons/copy.png b/src/assets/icons/copy.png
index a1489c1..ff8a63d 100644
Binary files a/src/assets/icons/copy.png and b/src/assets/icons/copy.png differ
diff --git a/src/assets/icons/copy@2x.png b/src/assets/icons/copy@2x.png
index bda5625..a1b3f04 100644
Binary files a/src/assets/icons/copy@2x.png and b/src/assets/icons/copy@2x.png differ
diff --git a/src/assets/icons/copy@3x.png b/src/assets/icons/copy@3x.png
index 398914e..58ccda2 100644
Binary files a/src/assets/icons/copy@3x.png and b/src/assets/icons/copy@3x.png differ
diff --git a/src/assets/icons/expand.png b/src/assets/icons/expand.png
index b1a6e0d..1827cc7 100644
Binary files a/src/assets/icons/expand.png and b/src/assets/icons/expand.png differ
diff --git a/src/assets/icons/menu2/harvest.png b/src/assets/icons/menu2/harvest.png
index fb5b470..2e5f274 100644
Binary files a/src/assets/icons/menu2/harvest.png and b/src/assets/icons/menu2/harvest.png differ
diff --git a/src/assets/icons/menu2/history.png b/src/assets/icons/menu2/history.png
index 7a85047..7b76fde 100644
Binary files a/src/assets/icons/menu2/history.png and b/src/assets/icons/menu2/history.png differ
diff --git a/src/assets/icons/menu2/home.png b/src/assets/icons/menu2/home.png
index 6769c5b..fd264c6 100644
Binary files a/src/assets/icons/menu2/home.png and b/src/assets/icons/menu2/home.png differ
diff --git a/src/assets/icons/menu2/mosaics.png b/src/assets/icons/menu2/mosaics.png
index f79e1ae..8ede983 100644
Binary files a/src/assets/icons/menu2/mosaics.png and b/src/assets/icons/menu2/mosaics.png differ
diff --git a/src/assets/icons/message.png b/src/assets/icons/message.png
index 8f883aa..a84bbc2 100644
Binary files a/src/assets/icons/message.png and b/src/assets/icons/message.png differ
diff --git a/src/assets/icons/mosaic_native.png b/src/assets/icons/mosaic_native.png
index f06c27e..4978c0b 100644
Binary files a/src/assets/icons/mosaic_native.png and b/src/assets/icons/mosaic_native.png differ
diff --git a/src/assets/icons/mosaics.png b/src/assets/icons/mosaics.png
index 68f56b5..4d047ed 100644
Binary files a/src/assets/icons/mosaics.png and b/src/assets/icons/mosaics.png differ
diff --git a/src/assets/icons/transaction/aggregate.png b/src/assets/icons/transaction/aggregate.png
index e183eca..d003c24 100644
Binary files a/src/assets/icons/transaction/aggregate.png and b/src/assets/icons/transaction/aggregate.png differ
diff --git a/src/assets/icons/transaction/fundsLock.png b/src/assets/icons/transaction/fundsLock.png
index c1bfe0a..19e7985 100644
Binary files a/src/assets/icons/transaction/fundsLock.png and b/src/assets/icons/transaction/fundsLock.png differ
diff --git a/src/assets/icons/transaction/incoming.png b/src/assets/icons/transaction/incoming.png
index c760343..2950c37 100644
Binary files a/src/assets/icons/transaction/incoming.png and b/src/assets/icons/transaction/incoming.png differ
diff --git a/src/assets/icons/transaction/incoming@2x.png b/src/assets/icons/transaction/incoming@2x.png
index cf69899..246b034 100644
Binary files a/src/assets/icons/transaction/incoming@2x.png and b/src/assets/icons/transaction/incoming@2x.png differ
diff --git a/src/assets/icons/transaction/incoming@3x.png b/src/assets/icons/transaction/incoming@3x.png
index 53f8ce0..34e9d5a 100644
Binary files a/src/assets/icons/transaction/incoming@3x.png and b/src/assets/icons/transaction/incoming@3x.png differ
diff --git a/src/assets/icons/transaction/namespace.png b/src/assets/icons/transaction/namespace.png
index 5100106..4c325fd 100644
Binary files a/src/assets/icons/transaction/namespace.png and b/src/assets/icons/transaction/namespace.png differ
diff --git a/src/assets/icons/transaction/optin-transaction.png b/src/assets/icons/transaction/optin-transaction.png
index 8c1fc28..7e80abe 100644
Binary files a/src/assets/icons/transaction/optin-transaction.png and b/src/assets/icons/transaction/optin-transaction.png differ
diff --git a/src/assets/icons/transaction/optin-transaction@2x.png b/src/assets/icons/transaction/optin-transaction@2x.png
index d52f6fd..59360f4 100644
Binary files a/src/assets/icons/transaction/optin-transaction@2x.png and b/src/assets/icons/transaction/optin-transaction@2x.png differ
diff --git a/src/assets/icons/transaction/optin-transaction@3x.png b/src/assets/icons/transaction/optin-transaction@3x.png
index a524074..dc52ff4 100644
Binary files a/src/assets/icons/transaction/optin-transaction@3x.png and b/src/assets/icons/transaction/optin-transaction@3x.png differ
diff --git a/src/assets/icons/transaction/outgoing.png b/src/assets/icons/transaction/outgoing.png
index 2e2a344..589c7c8 100644
Binary files a/src/assets/icons/transaction/outgoing.png and b/src/assets/icons/transaction/outgoing.png differ
diff --git a/src/assets/icons/transaction/outgoing@2x.png b/src/assets/icons/transaction/outgoing@2x.png
index e4c87b2..27dbbeb 100644
Binary files a/src/assets/icons/transaction/outgoing@2x.png and b/src/assets/icons/transaction/outgoing@2x.png differ
diff --git a/src/assets/icons/transaction/outgoing@3x.png b/src/assets/icons/transaction/outgoing@3x.png
index 9227476..f248f69 100644
Binary files a/src/assets/icons/transaction/outgoing@3x.png and b/src/assets/icons/transaction/outgoing@3x.png differ
diff --git a/src/assets/icons/transaction/unknown.png b/src/assets/icons/transaction/unknown.png
index faca8a7..8901259 100644
Binary files a/src/assets/icons/transaction/unknown.png and b/src/assets/icons/transaction/unknown.png differ
diff --git a/src/components/backgrounds/GradientBackground.js b/src/components/backgrounds/GradientBackground.js
index d133bc3..4c30ae5 100644
--- a/src/components/backgrounds/GradientBackground.js
+++ b/src/components/backgrounds/GradientBackground.js
@@ -73,10 +73,21 @@ export default class GradientBackground extends Component<Props, State> {
                 break;
         }
 
-        const gradientColors =
-            theme === 'light'
-                ? [GlobalStyles.color.DARKWHITE, GlobalStyles.color.DARKWHITE]
-                : [GlobalStyles.color.PRIMARY, GlobalStyles.color.SECONDARY];
+        let gradientColors;
+
+        switch (theme) {
+            case 'light':
+                gradientColors = [GlobalStyles.color.DARKWHITE, GlobalStyles.color.DARKWHITE];
+                break;
+            case 'darkmode':
+                gradientColors = [GlobalStyles.color.darkmode.BACKGROUND_MAIN, GlobalStyles.color.darkmode.BACKGROUND_MAIN];
+                break;
+            default:
+                gradientColors = [GlobalStyles.color.PRIMARY, GlobalStyles.color.SECONDARY];
+                break;
+        }
+
+        console.log({ theme, gradientColors });
 
         const Content = () => {
             return (
diff --git a/src/components/backgrounds/ListContainer.js b/src/components/backgrounds/ListContainer.js
index 60670c8..5996438 100644
--- a/src/components/backgrounds/ListContainer.js
+++ b/src/components/backgrounds/ListContainer.js
@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
         marginTop: 0,
         marginBottom: 8,
         paddingBottom: 1,
-        backgroundColor: GlobalStyles.color.WHITE,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_CARD,
         flex: 1,
     },
     section: {
diff --git a/src/components/backgrounds/ListItem.js b/src/components/backgrounds/ListItem.js
index 306031b..d21a84e 100644
--- a/src/components/backgrounds/ListItem.js
+++ b/src/components/backgrounds/ListItem.js
@@ -12,7 +12,7 @@ const styles = StyleSheet.create({
         paddingTop: 18.1,
         paddingBottom: 16,
         borderBottomWidth: 2,
-        borderBottomColor: GlobalStyles.color.DARKWHITE,
+        borderBottomColor: GlobalStyles.color.darkmode.BACKGROUND_CARD,
     },
 });
 
diff --git a/src/components/controls/Address.js b/src/components/controls/Address.js
index dca22ce..6732e0b 100644
--- a/src/components/controls/Address.js
+++ b/src/components/controls/Address.js
@@ -54,8 +54,8 @@ class AddressComponent extends Component<Props, State> {
 
         if (typeof align === 'string') globalStyle.textAlign = align;
 
-        if (theme === 'light') globalStyle.color = GlobalStyles.color.onLight.TEXT;
-        else globalStyle.color = GlobalStyles.color.onDark.TEXT;
+        if (theme === 'light') globalStyle.color = GlobalStyles.color.lightmode.TEXT;
+        else globalStyle.color = GlobalStyles.color.darkmode.TEXT;
 
         return <Text style={[globalStyle, style]}>{addressChange}</Text>;
     }
diff --git a/src/components/controls/CopyView.js b/src/components/controls/CopyView.js
index d1cb4eb..192f02e 100644
--- a/src/components/controls/CopyView.js
+++ b/src/components/controls/CopyView.js
@@ -43,7 +43,7 @@ class CopyView extends Component<Props, State> {
     }
 
     render = () => {
-        const { children, style = {}, placeholder, theme = 'light' } = this.props;
+        const { children, style = {}, placeholder, theme = 'light', type = 'regular' } = this.props;
         let placeholderStyle;
 
         if (theme === 'light') {
@@ -56,7 +56,7 @@ class CopyView extends Component<Props, State> {
             <>
                 {!!placeholder && <Text style={placeholderStyle}>{placeholder}</Text>}
                 <Row align="center" justify="space-between">
-                    <Text type="regular" theme={theme} style={[styles.text, style]}>
+                    <Text type={type} theme={theme} style={[styles.text, style]}>
                         {this.text()}
                     </Text>
                     <TouchableOpacity style={styles.button} onPress={() => this.copyToClipboard(children)}>
diff --git a/src/components/controls/Dropdown.js b/src/components/controls/Dropdown.js
index ac173b3..a2da010 100644
--- a/src/components/controls/Dropdown.js
+++ b/src/components/controls/Dropdown.js
@@ -20,9 +20,12 @@ const styles = StyleSheet.create({
     titleDark: {
         color: GlobalStyles.color.WHITE,
     },
-    placeholder: {
-        fontSize: 12,
-        opacity: 0.3,
+    titleDarkmode: {
+        color: GlobalStyles.color.darkmode.TEXT,
+    },
+    textDarkmode: {
+        color: GlobalStyles.color.darkmode.TEXT,
+        opacity: 0.7,
     },
     input: {
         paddingVertical: 14,
@@ -31,8 +34,10 @@ const styles = StyleSheet.create({
     },
     inputText: {
         fontSize: 12,
-        fontFamily: 'NotoSans-SemiBold',
-        fontWeight: '300',
+    },
+    placeholder: {
+        fontSize: 12,
+        opacity: 0.3,
     },
     inputLight: {
         //borderWidth: 1,
@@ -47,6 +52,13 @@ const styles = StyleSheet.create({
         color: GlobalStyles.color.PRIMARY,
         backgroundColor: GlobalStyles.color.WHITE,
     },
+    inputDarkmode: {
+        borderRadius: 6,
+        color: GlobalStyles.color.darkmode.TEXT,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_FORM,
+        borderWidth: 1,
+        borderColor: GlobalStyles.color.darkmode.ACCENT_FORM,
+    },
     icon: {
         position: 'absolute',
         bottom: 0,
@@ -89,13 +101,13 @@ const styles = StyleSheet.create({
         borderColor: GlobalStyles.color.GREY4,
     },
     modalTitleText: {
-        color: GlobalStyles.color.onLight.TEXT,
+        color: GlobalStyles.color.lightmode.TEXT,
         fontFamily: 'NotoSans-SemiBold',
         fontSize: 18,
     },
     listItem: {
         //borderBottomWidth: 1,
-        borderColor: GlobalStyles.color.onLight.TEXT,
+        borderColor: GlobalStyles.color.lightmode.TEXT,
         padding: 12,
     },
     listItemText: {
@@ -219,6 +231,7 @@ export default class Dropdown extends Component<Props, State> {
         const { isSelectorOpen } = this.state;
         let inputStyles = [];
         let titleStyle = {};
+        let textStyle = {};
         let rootStyle = [styles.root, style];
         const iconSize = 'small';
         const iconWrapperWidth = 30;
@@ -231,6 +244,10 @@ export default class Dropdown extends Component<Props, State> {
         if (theme === 'light') {
             inputStyles.push(styles.inputLight);
             titleStyle = styles.titleLight;
+        } else if (theme === 'darkmode') {
+            inputStyles.push(styles.inputDarkmode);
+            titleStyle = styles.titleDarkmode;
+            textStyle = styles.textDarkmode;
         } else {
             inputStyles.push(styles.inputDark);
             titleStyle = styles.titleDark;
@@ -248,11 +265,13 @@ export default class Dropdown extends Component<Props, State> {
                     <TouchableOpacity style={inputStyles} onPress={() => !isLoading && this.openSelector()}>
                         {selectedOption &&
                             (!customInputReneder ? (
-                                <Text style={styles.inputText}>{!isLoading && <Trunc length={36}>{selectedOption.label}</Trunc>}</Text>
+                                <Text style={[textStyle, styles.inputText]}>
+                                    {!isLoading && <Trunc length={36}>{selectedOption.label}</Trunc>}
+                                </Text>
                             ) : (
                                 customInputReneder(selectedOption)
                             ))}
-                        {!selectedOption && <Text style={styles.placeholder}>{placeholder}</Text>}
+                        {!selectedOption && <Text style={[textStyle, styles.placeholder]}>{placeholder}</Text>}
                         <View style={[styles.icon, this.getIconPosition(iconWrapperWidth, iconOffset)]}>
                             <Icon name="expand" size={iconSize} />
                         </View>
diff --git a/src/components/controls/Icon.js b/src/components/controls/Icon.js
index 3c913ad..37eec01 100644
--- a/src/components/controls/Icon.js
+++ b/src/components/controls/Icon.js
@@ -109,12 +109,15 @@ export default class C extends Component<Props, State> {
             case 'settings_filled_light':
                 source = require('@src/assets/icons/settings_filled_light.png');
                 break;
-            case 'settings_dark':
-                source = require('@src/assets/icons/settings_dark.png');
+            case 'settings_darkmode':
+                source = require('design-system/assets/icons/Gear.png');
                 break;
             case 'wallet_filled_light':
                 source = require('@src/assets/icons/wallet_filled_light.png');
                 break;
+            case 'wallet_darkmode':
+                source = require('design-system/assets/icons/Wallet.png');
+                break;
             case 'paste':
                 source = require('@src/assets/icons/clipboard.png');
                 break;
diff --git a/src/components/controls/ReadMoreLink.js b/src/components/controls/ReadMoreLink.js
index 5a7e8c4..51e0667 100644
--- a/src/components/controls/ReadMoreLink.js
+++ b/src/components/controls/ReadMoreLink.js
@@ -25,13 +25,13 @@ export default class ReadMoreLink extends Component<Props, State> {
         if (title) {
             return (
                 <Section type="form-item">
-                    <Text theme="light" align="center" type="regular">
+                    <Text theme="darkmode" align="center" type="regular">
                         {title}
                     </Text>
                     <Row justify="space-between" align="end" fullWidth>
                         <Col style={{ flex: 1, marginTop: 10 }}>
                             <TouchableOpacity onPress={() => this.onPress(this.props.url)}>
-                                <Text theme="light" align="right" style={styles.link}>
+                                <Text theme="darkmode" align="right" style={styles.link}>
                                     {translate('news.readMore')}
                                 </Text>
                             </TouchableOpacity>
@@ -44,7 +44,7 @@ export default class ReadMoreLink extends Component<Props, State> {
                 <Row justify="space-between" align="end" fullWidth>
                     <Col style={{ flex: 1, marginTop: 10 }}>
                         <TouchableOpacity onPress={() => this.onPress(this.props.url)}>
-                            <Text theme="light" align="right" style={styles.link}>
+                            <Text theme="darkmode" align="right" style={styles.link}>
                                 {translate('news.readMore')}
                             </Text>
                         </TouchableOpacity>
diff --git a/src/components/controls/Text.js b/src/components/controls/Text.js
index a9cdd1c..bd22533 100644
--- a/src/components/controls/Text.js
+++ b/src/components/controls/Text.js
@@ -51,8 +51,8 @@ export default class C extends Component<Props, State> {
         if (typeof align === 'string') globalStyle.textAlign = align;
 
         if (type !== 'warning' && type !== 'error') {
-            if (theme === 'light') globalStyle.color = GlobalStyles.color.onLight.TEXT;
-            else globalStyle.color = GlobalStyles.color.onDark.TEXT;
+            if (theme === 'light') globalStyle.color = GlobalStyles.color.lightmode.TEXT;
+            else globalStyle.color = GlobalStyles.color.darkmode.TEXT;
         }
 
         return <Text style={[globalStyle, style]}>{children}</Text>;
diff --git a/src/components/molecules/TitleBar.js b/src/components/molecules/TitleBar.js
index 1253972..a82f721 100644
--- a/src/components/molecules/TitleBar.js
+++ b/src/components/molecules/TitleBar.js
@@ -52,9 +52,9 @@ export default class PluginList extends Component<Props, State> {
 
         const iconCloseName = theme === 'light' ? 'close_light' : 'close_dark';
 
-        const iconSettingsName = theme === 'light' ? 'settings_filled_light' : 'settings_dark';
+        const iconSettingsName = theme === 'light' ? 'settings_filled_light' : 'settings_darkmode';
 
-        const iconMenuName = theme === 'light' ? 'wallet_filled_light' : 'options_dark';
+        const iconMenuName = theme === 'light' ? 'wallet_filled_light' : 'wallet_darkmode';
 
         const leftIconStyle = onBack ? styles.iconLeftOld : {};
 
diff --git a/src/components/old/StepViewTitleBar/index.js b/src/components/old/StepViewTitleBar/index.js
index 29f5ad5..0482af1 100644
--- a/src/components/old/StepViewTitleBar/index.js
+++ b/src/components/old/StepViewTitleBar/index.js
@@ -18,13 +18,13 @@ export type titleTheme = {
 };
 
 const lightTheme: titleTheme = {
-    textColor: GlobalStyles.color.onLight.TITLE,
+    textColor: GlobalStyles.color.lightmode.TITLE,
     backIconRes: require('@src/assets/icons/ic-back-black.png'),
     closeIconRes: require('@src/assets/icons/close_light.png'),
 };
 
 const darkTheme: titleTheme = {
-    textColor: GlobalStyles.color.onDark.TITLE,
+    textColor: GlobalStyles.color.darkmode.TITLE,
     backIconRes: require('@src/assets/icons/ic-back-white.png'),
     closeIconRes: require('@src/assets/icons/close_dark.png'),
 };
diff --git a/src/components/organisms/AccountBalanceWidget.js b/src/components/organisms/AccountBalanceWidget.js
index 03966dc..1e5c678 100644
--- a/src/components/organisms/AccountBalanceWidget.js
+++ b/src/components/organisms/AccountBalanceWidget.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { RefreshControl, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { CopyView, FadeView, Row, SymbolGradientContainer, Text } from '@src/components';
+import { CopyView, FadeView, Row, Text } from '@src/components';
 import GlobalStyles from '../../styles/GlobalStyles';
 import Video from 'react-native-video';
 import { Router } from '@src/Router';
@@ -19,6 +19,7 @@ const styles = StyleSheet.create({
         padding: 17,
         paddingTop: 8,
         minHeight: 142,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_HERO,
     },
     scrollView: {},
     scrollViewContent: {
@@ -27,11 +28,11 @@ const styles = StyleSheet.create({
     },
     address: {
         marginRight: -5,
-        opacity: 0.7,
         color: GlobalStyles.color.WHITE,
         fontSize: 1 * 12,
         lineHeight: 1.75 * 12,
         marginBottom: 17,
+        opacity: 1,
     },
     mosaic: {
         fontSize: 1 * 12,
@@ -39,14 +40,12 @@ const styles = StyleSheet.create({
         marginBottom: 2,
     },
     balance: {
-        fontFamily: 'NotoSans-Light',
         fontSize: 2.5 * 12,
         lineHeight: 3.25 * 12,
         marginTop: 20,
         color: GlobalStyles.color.WHITE,
     },
     balanceLight: {
-        fontFamily: 'NotoSans-Light',
         fontSize: 2.5 * 12,
         lineHeight: 3.25 * 12,
         marginTop: 20,
@@ -99,7 +98,7 @@ class BalanceWidget extends Component<Props, State> {
         const Container = isLoading === true ? View : TouchableOpacity;
 
         return (
-            <SymbolGradientContainer style={[styles.root, isLoading && styles.noPadding]} noPadding noScroll>
+            <View style={[styles.root, isLoading && styles.noPadding]}>
                 <ScrollView
                     style={styles.scrollView}
                     contentContainerStyle={styles.scrollViewContent}
@@ -118,11 +117,11 @@ class BalanceWidget extends Component<Props, State> {
                                     {
                                         <BalanceContainer horizontal={true} style={{ marginLeft: 16 }}>
                                             <Row>
-                                                <Text style={styles.balance} theme="dark">
+                                                <Text style={styles.balance} theme="dark" type="bold">
                                                     {('' + balance).split('.')[0]}
                                                 </Text>
                                                 {('' + balance).split('.')[1] && (
-                                                    <Text style={styles.balanceLight} theme="dark">
+                                                    <Text style={styles.balanceLight} theme="dark" type="bold">
                                                         .{('' + balance).split('.')[1]}
                                                     </Text>
                                                 )}
@@ -148,7 +147,7 @@ class BalanceWidget extends Component<Props, State> {
                         </FadeView>
                     )}
                 </ScrollView>
-            </SymbolGradientContainer>
+            </View>
         );
     };
 }
diff --git a/src/components/organisms/BalanceWidget.js b/src/components/organisms/BalanceWidget.js
index 0b3a1ad..111371d 100644
--- a/src/components/organisms/BalanceWidget.js
+++ b/src/components/organisms/BalanceWidget.js
@@ -19,12 +19,12 @@ const styles = StyleSheet.create({
     currencyText: {
         fontSize: 15,
         marginBottom: 8,
-        color: GlobalStyles.color.onDark.TEXT,
+        color: GlobalStyles.color.darkmode.TEXT,
     },
     balanceText: {
         fontFamily: 'NotoSans-SemiBold',
         fontSize: 36,
-        color: GlobalStyles.color.onDark.TEXT,
+        color: GlobalStyles.color.darkmode.TEXT,
     },
     bottomContainer: {
         marginTop: 3,
@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
     },
     fiatText: {
         fontSize: 15,
-        color: GlobalStyles.color.onDark.TEXT,
+        color: GlobalStyles.color.darkmode.TEXT,
     },
     priceChange: {
         fontSize: 15,
diff --git a/src/components/organisms/LinkExplorer.js b/src/components/organisms/LinkExplorer.js
index 54fb663..6dbb8b0 100644
--- a/src/components/organisms/LinkExplorer.js
+++ b/src/components/organisms/LinkExplorer.js
@@ -11,7 +11,7 @@ const styles = StyleSheet.create({
         marginRight: 8,
     },
     text: {
-        color: GlobalStyles.color.PRIMARY,
+        color: GlobalStyles.color.BLUE,
     },
 });
 
@@ -64,7 +64,7 @@ class LinkExplorer extends Component<Props, State> {
         return (
             <TouchableOpacity onPress={() => this.onPress(route)}>
                 <Row style={styles.root} align="center">
-                    <Icon name="explorer_filled_primary" size="small" style={styles.icon} />
+                    <Icon name="explorer_filled_blue" size="small" style={styles.icon} />
                     <Text type="bold" theme="light" style={styles.text}>
                         {text}
                     </Text>
diff --git a/src/components/organisms/LinkFaucet.js b/src/components/organisms/LinkFaucet.js
index 4aae814..485d26c 100644
--- a/src/components/organisms/LinkFaucet.js
+++ b/src/components/organisms/LinkFaucet.js
@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
         marginRight: 8,
     },
     text: {
-        color: GlobalStyles.color.PRIMARY,
+        color: GlobalStyles.color.BLUE,
     },
 });
 
@@ -40,7 +40,7 @@ export default class LinkFaucet extends Component<Props, State> {
         return (
             <TouchableOpacity onPress={() => this.onPress(route)}>
                 <Row style={styles.root} align="center">
-                    <Icon name="faucet_filled_primary" size="small" style={styles.icon} />
+                    <Icon name="faucet_filled_blue" size="small" style={styles.icon} />
                     <Text type="bold" theme="light" style={styles.text}>
                         {text}
                     </Text>
diff --git a/src/components/organisms/MosaicDisplay.js b/src/components/organisms/MosaicDisplay.js
index 1c5ae69..bac923a 100644
--- a/src/components/organisms/MosaicDisplay.js
+++ b/src/components/organisms/MosaicDisplay.js
@@ -4,11 +4,10 @@ import { Col, Icon, Row, Text } from '@src/components';
 import type { MosaicModel } from '@src/storage/models/MosaicModel';
 
 const styles = StyleSheet.create({
-    transactionPreview: {
+    mosaicPreview: {
         width: '100%',
         borderRadius: 6,
         marginTop: 0,
-        backgroundColor: '#fffd',
     },
 });
 
@@ -22,14 +21,14 @@ export default class MosaicDisplay extends Component<Props> {
         const iconName = isNative ? 'mosaic_native' : 'mosaic_custom';
 
         return (
-            <View style={styles.transactionPreview}>
+            <View style={styles.mosaicPreview}>
                 <Row justify="start" fullWidth>
                     <Col justify="center" align="center" style={{ marginRight: 16 }}>
                         <Icon name={iconName} />
                     </Col>
                     <Col grow>
                         <Row justify="space-between">
-                            <Text type="regular" theme="light">
+                            <Text type="regular" theme="darkmode">
                                 {mosaic.mosaicId} {mosaic.expired ? ' (expired)' : ''}
                             </Text>
                             {/* <Text type="regular" theme="light">
@@ -37,10 +36,10 @@ export default class MosaicDisplay extends Component<Props> {
 							</Text> */}
                         </Row>
                         <Row justify="space-between">
-                            <Text type="bold" theme="light">
+                            <Text type="bold" theme="darkmode">
                                 {mosaic.mosaicName}
                             </Text>
-                            <Text type="bold" theme="light">
+                            <Text type="bold" theme="darkmode">
                                 {mosaic.amount / Math.pow(10, mosaic.divisibility)}
                             </Text>
                         </Row>
diff --git a/src/components/organisms/NavigationMenu.js b/src/components/organisms/NavigationMenu.js
index 4724d12..817bc49 100644
--- a/src/components/organisms/NavigationMenu.js
+++ b/src/components/organisms/NavigationMenu.js
@@ -8,7 +8,7 @@ import { isIphoneX } from '@src/utils/Device';
 const styles = StyleSheet.create({
     root: {
         width: '100%',
-        backgroundColor: GlobalStyles.color.WHITE,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_MENU,
     },
     itemBottomLine: {
         padding: 5,
@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
         borderTopWidth: 2,
     },
     activeItem: {
-        borderColor: GlobalStyles.color.PINK,
+        borderColor: GlobalStyles.color.BLUE,
     },
     icon: {
         marginTop: 5,
@@ -80,7 +80,7 @@ export default class NavigationMenu extends Component<Props, State> {
                         <TouchableOpacity onPress={() => onChange(item.name)} key={'' + index + 'nav'}>
                             <Col align="center" justify="space-" style={[itemStyle, item.name === value && styles.activeItem]}>
                                 <Icon name={item.iconName} size="small" style={styles.icon} />
-                                <Text theme="light" style={{ fontSize: 11 }} type={item.name === value ? 'bold' : 'regular'}>
+                                <Text theme="darkmode" style={{ fontSize: 11 }} type={item.name === value ? 'bold' : 'regular'}>
                                     {translate(item.text)}
                                 </Text>
                             </Col>
diff --git a/src/components/organisms/transaction/AggregateTransaction.js b/src/components/organisms/transaction/AggregateTransaction.js
index 45c835d..73c1a85 100644
--- a/src/components/organisms/transaction/AggregateTransaction.js
+++ b/src/components/organisms/transaction/AggregateTransaction.js
@@ -119,7 +119,7 @@ class AggregateTransaction extends BaseTransactionItem<Props> {
     renderAction = () => {
         if (this.needsSignature()) {
             return (
-                <Text type="regular" theme="light" style={styles.waitingSignature}>
+                <Text type="regular" theme="darkmode" style={styles.waitingSignature}>
                     {translate('history.transaction.waitingSignature')}
                 </Text>
             );
@@ -146,7 +146,7 @@ class AggregateTransaction extends BaseTransactionItem<Props> {
             return (
                 <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                     <Icon style={{ width: 75, height: 50, marginBottom: 10 }} size="big" name="optin" />
-                    <Text style={{ flex: 1 }} type="regular" align="right" theme="light">
+                    <Text style={{ flex: 1 }} type="regular" align="right" theme="darkmode">
                         {transaction.status === 'confirmed'
                             ? translate('optin.postLaunchTransactionText')
                             : translate('optin.postLaunchTransactionTextUnconfirmed')}{' '}
diff --git a/src/components/organisms/transaction/BaseTransactionItem.js b/src/components/organisms/transaction/BaseTransactionItem.js
index 86c8bd0..92aa1d4 100644
--- a/src/components/organisms/transaction/BaseTransactionItem.js
+++ b/src/components/organisms/transaction/BaseTransactionItem.js
@@ -10,7 +10,6 @@ const styles = StyleSheet.create({
     transactionPreview: {
         width: '100%',
         borderRadius: 6,
-        backgroundColor: GlobalStyles.color.WHITE,
     },
     date: {
         fontSize: 10,
@@ -70,15 +69,15 @@ export default class BaseTransactionItem extends Component<Props, State> {
                     </Col>
                     <Col grow>
                         <Row justify="space-between">
-                            <Text type="regular" theme="light">
+                            <Text type="regular" theme="darkmode">
                                 {this.title()}
                             </Text>
-                            <Text type="regular" theme="light" style={styles.date}>
+                            <Text type="regular" theme="darkmode" style={styles.date}>
                                 {transaction.status === 'unconfirmed' ? 'Unconfirmed' : date}
                             </Text>
                         </Row>
                         <Row justify="space-between" align="center">
-                            <Text type="bold" theme="light" style={styles.address}>
+                            <Text type="bold" theme="darkmode" style={styles.address}>
                                 {this.renderAddress()}
                             </Text>
                             <Row style={styles.value} align="center">
@@ -91,10 +90,10 @@ export default class BaseTransactionItem extends Component<Props, State> {
                     <View style={{ paddingVertical: 16 }}>
                         {this.renderDetails()}
                         <View justify="space-between" style={{ paddingBottom: 16 }}>
-                            <Text type="bold" theme="light">
+                            <Text type="bold" theme="darkmode">
                                 {translate('history.transaction.hash')}:
                             </Text>
-                            <Text type="regular" theme="light">
+                            <Text type="regular" theme="darkmode">
                                 {transaction.hash.slice(0, 24)}...
                             </Text>
                         </View>
diff --git a/src/components/organisms/transaction/FundsLockTransaction.js b/src/components/organisms/transaction/FundsLockTransaction.js
index cc06bc9..ce60b73 100644
--- a/src/components/organisms/transaction/FundsLockTransaction.js
+++ b/src/components/organisms/transaction/FundsLockTransaction.js
@@ -12,7 +12,7 @@ export default class FundsLockTransaction extends BaseTransactionItem<Props> {
     renderAction = () => {
         const { transaction } = this.props;
         return (
-            <Text type="regular" theme="light">
+            <Text type="regular" theme="darkmode">
                 {translate('history.transaction.amountLocked')}: {transaction.mosaic.amount / Math.pow(10, transaction.mosaic.divisibility)}
             </Text>
         );
diff --git a/src/components/organisms/transaction/MosaicAliasTransaction.js b/src/components/organisms/transaction/MosaicAliasTransaction.js
index f18d707..913158f 100644
--- a/src/components/organisms/transaction/MosaicAliasTransaction.js
+++ b/src/components/organisms/transaction/MosaicAliasTransaction.js
@@ -15,7 +15,7 @@ class MosaicAliasTransaction extends BaseTransactionItem<Props> {
         const { transaction } = this.props;
 
         return (
-            <Text type="bold" theme="light">
+            <Text type="bold" theme="darkmode">
                 {transaction.aliasAction ? 'v_link' : 'Unlink'}
             </Text>
         );
diff --git a/src/components/organisms/transaction/NamespaceRegistrationTransaction.js b/src/components/organisms/transaction/NamespaceRegistrationTransaction.js
index 0cfb43e..12f4ddd 100644
--- a/src/components/organisms/transaction/NamespaceRegistrationTransaction.js
+++ b/src/components/organisms/transaction/NamespaceRegistrationTransaction.js
@@ -11,7 +11,7 @@ export default class NamespaceRegistrationTransaction extends BaseTransactionIte
     renderAction = () => {
         const { transaction } = this.props;
         return (
-            <Text type="bold" theme="light">
+            <Text type="bold" theme="darkmode">
                 {transaction.namespaceName}
             </Text>
         );
diff --git a/src/components/organisms/transaction/TransferTransaction.js b/src/components/organisms/transaction/TransferTransaction.js
index 2b6e7b5..8af399f 100644
--- a/src/components/organisms/transaction/TransferTransaction.js
+++ b/src/components/organisms/transaction/TransferTransaction.js
@@ -81,7 +81,7 @@ class TransferTransaction extends BaseTransactionItem<Props> {
                 case 'nativeMosaicIncoming':
                     if (value.value !== 0)
                         items.push(
-                            <Text type="bold" theme="light" style={[styles.amountIncoming, styles.bold, { marginLeft: 5 }]}>
+                            <Text type="bold" theme="darkmode" style={[styles.amountIncoming, styles.bold, { marginLeft: 5 }]}>
                                 {value.value}
                             </Text>
                         );
@@ -89,7 +89,7 @@ class TransferTransaction extends BaseTransactionItem<Props> {
                 case 'nativeMosaicOutgoing':
                     if (value.value !== 0)
                         items.push(
-                            <Text type="bold" theme="light" style={[styles.amountOutgoing, styles.bold, { marginLeft: 5 }]}>
+                            <Text type="bold" theme="darkmode" style={[styles.amountOutgoing, styles.bold, { marginLeft: 5 }]}>
                                 {'-' + value.value}
                             </Text>
                         );
@@ -139,7 +139,7 @@ class TransferTransaction extends BaseTransactionItem<Props> {
                 {!!transaction.messageEncrypted && !!transaction.messageText && transaction.messageText.length > 0 && (
                     <View justify="space-between">
                         <Section type="form-item">
-                            <Text type="bold" theme="light" style={styles.bold}>
+                            <Text type="bold" theme="darkmode" style={styles.bold}>
                                 {translate('history.transaction.message')}:
                             </Text>
                             {this.canBeDecrypted() && (
@@ -147,13 +147,13 @@ class TransferTransaction extends BaseTransactionItem<Props> {
                                     componentId={this.props.componentId}
                                     preShowFn={() => this.decryptMessage()}
                                     title={translate('history.transaction.decrypt')}
-                                    theme="light"
+                                    theme="darkmode"
                                 >
                                     {messageDecrypted}
                                 </SecretView>
                             )}
                             {!this.canBeDecrypted() && (
-                                <Text type="regular" theme="light">
+                                <Text type="regular" theme="darkmode">
                                     {translate('history.transaction.encrypted')}
                                 </Text>
                             )}
diff --git a/src/screens/Dashboard.js b/src/screens/Dashboard.js
index 28b7e4f..1e79d28 100644
--- a/src/screens/Dashboard.js
+++ b/src/screens/Dashboard.js
@@ -63,7 +63,7 @@ class Dashboard extends Component<Props, State> {
                 break;
         }
         return (
-            <GradientBackground theme="light" noPadding>
+            <GradientBackground theme="darkmode" noPadding>
                 <View style={styles.tabWrapper}>
                     <Tab
                         {...this.props}
diff --git a/src/screens/Harvest.js b/src/screens/Harvest.js
index 41b051b..125096c 100644
--- a/src/screens/Harvest.js
+++ b/src/screens/Harvest.js
@@ -31,7 +31,7 @@ const styles = StyleSheet.create({
         marginBottom: 8,
         padding: 17,
         paddingTop: 8,
-        backgroundColor: GlobalStyles.color.WHITE,
+        backgroundColor: GlobalStyles.color.darkmode.BACKGROUND_CARD,
     },
     bottom: {
         paddingTop: 30,
@@ -205,12 +205,11 @@ class Harvest extends Component<Props, State> {
         return (
             //<ImageBackground name="harvest">
             <GradientBackground
-                name="connector_small"
-                theme="light"
+                theme="darkmode"
                 dataManager={{ isLoading }}
                 titleBar={
                     <TitleBar
-                        theme="light"
+                        theme="darkmode"
                         title={translate('harvest.title')}
                         onOpenMenu={() => onOpenMenu()}
                         onSettings={() => onOpenSettings()}
@@ -220,37 +219,37 @@ class Harvest extends Component<Props, State> {
                 <Section type="form" style={styles.list} isScrollable>
                     <Section type="form-item" style={styles.card}>
                         <Row justify="space-between" fullWidth>
-                            <Text type={'bold'} theme={'light'}>
+                            <Text type={'bold'} theme={'darkmode'}>
                                 {translate('harvest.status')}:
                             </Text>
                             <Row align="center">
                                 <View style={statusStyle} />
-                                <Text type={'regular'} theme={'light'}>
+                                <Text type={'regular'} theme={'darkmode'}>
                                     {translate(`harvest.${status}`)}
                                 </Text>
                             </Row>
                         </Row>
                         <Row justify="space-between" fullWidth>
-                            <Text type={'bold'} theme={'light'}>
+                            <Text type={'bold'} theme={'darkmode'}>
                                 {translate('harvest.blocksHarvested')}:
                             </Text>
-                            <Text type={'regular'} theme={'light'}>
+                            <Text type={'regular'} theme={'darkmode'}>
                                 {totalBlockCount}
                             </Text>
                         </Row>
                         <Row justify="space-between" fullWidth>
-                            <Text type={'bold'} theme={'light'}>
+                            <Text type={'bold'} theme={'darkmode'}>
                                 {translate('harvest.feesEarned')}:
                             </Text>
-                            <Text type={'regular'} theme={'light'}>
+                            <Text type={'regular'} theme={'darkmode'}>
                                 {totalFeesEarned.toString()}
                             </Text>
                         </Row>
                         <Row justify="space-between" fullWidth>
-                            <Text type={'bold'} theme={'light'}>
+                            <Text type={'bold'} theme={'darkmode'}>
                                 {translate('harvest.Importance')}:
                             </Text>
-                            <Text type={'regular'} theme={'light'}>
+                            <Text type={'regular'} theme={'darkmode'}>
                                 {accountImportance}
                             </Text>
                         </Row>
@@ -273,12 +272,12 @@ class Harvest extends Component<Props, State> {
                     {status !== 'INACTIVE' && selectedAccount.harvestingNode && (
                         <Section type="form-item" style={styles.card}>
                             <Row justify="space-between" fullWidth>
-                                <Text type={'bold'} theme={'light'}>
+                                <Text type={'bold'} theme={'darkmode'}>
                                     {translate('harvest.linkedNode')}:
                                 </Text>
                             </Row>
                             <Row align="center">
-                                <Text type={'regular'} theme={'light'}>
+                                <Text type={'regular'} theme={'darkmode'}>
                                     {selectedAccount.harvestingNode}
                                 </Text>
                             </Row>
@@ -290,7 +289,7 @@ class Harvest extends Component<Props, State> {
                             <>
                                 <Section type="form-item">
                                     <NodeDropdown
-                                        theme="light"
+                                        theme="darkmode"
                                         list={this.getHarvestingNodesDropDown()}
                                         title={translate('harvest.selectNode')}
                                         value={selectedNodeUrl}
@@ -302,7 +301,7 @@ class Harvest extends Component<Props, State> {
                                         isLoading={isLoading}
                                         isDisabled={!selectedNodeUrl || notEnoughBalance}
                                         text={translate('harvest.startHarvesting')}
-                                        theme="light"
+                                        theme="darkmode"
                                         onPress={() => this.startHarvesting()}
                                     />
                                 </Section>
@@ -315,7 +314,7 @@ class Harvest extends Component<Props, State> {
                                         isLoading={isLoading}
                                         isDisabled={status !== 'KEYS_LINKED' || !harvestingModel}
                                         text={translate('harvest.activate')}
-                                        theme="light"
+                                        theme="darkmode"
                                         onPress={() => this.activateHarvesting()}
                                     />
                                 </Section>
@@ -324,7 +323,7 @@ class Harvest extends Component<Props, State> {
                                         isLoading={isLoading}
                                         isDisabled={false}
                                         text={translate('harvest.stopHarvesting')}
-                                        theme="dark"
+                                        theme="darkmode"
                                         onPress={() => this.stopHarvesting()}
                                     />
                                 </Section>
diff --git a/src/screens/History.js b/src/screens/History.js
index 25a7de3..03ec831 100644
--- a/src/screens/History.js
+++ b/src/screens/History.js
@@ -111,11 +111,10 @@ class History extends Component<Props, State> {
 
         return (
             <GradientBackground
-                name="connector_small"
-                theme="light"
+                theme="darkmode"
                 titleBar={
                     <TitleBar
-                        theme="light"
+                        theme="darkmode"
                         title={translate('history.title')}
                         onOpenMenu={() => onOpenMenu()}
                         onSettings={() => onOpenSettings()}
@@ -126,7 +125,7 @@ class History extends Component<Props, State> {
                     <Section type="form-item">
                         <Row fullWidth>
                             <Dropdown
-                                theme="light"
+                                theme="darkmode"
                                 style={styles.filter}
                                 list={allFilters}
                                 title={translate('history.filter')}
@@ -135,7 +134,7 @@ class History extends Component<Props, State> {
                             />
                             {cosignatoryOf.length > 0 && (
                                 <MultisigFilter
-                                    theme="light"
+                                    theme="darkmode"
                                     style={styles.filterRight}
                                     selected={addressFilter}
                                     onSelect={v => this.onSelectMultisig(v)}
diff --git a/src/screens/Home.js b/src/screens/Home.js
index 31d0deb..4245fc9 100644
--- a/src/screens/Home.js
+++ b/src/screens/Home.js
@@ -19,16 +19,6 @@ import store from '@src/store';
 import translate from '@src/locales/i18n';
 
 const styles = StyleSheet.create({
-    transactionPreview: {
-        width: '100%',
-        height: 60,
-        borderRadius: 6,
-        marginTop: 4,
-        marginBottom: 4,
-        padding: 17,
-        paddingTop: 8,
-        backgroundColor: '#ffff',
-    },
     scrollView: {
         flex: 1,
         flexDirection: 'column',
@@ -64,15 +54,15 @@ class Home extends Component<Props, State> {
         return (
             <ListItem onPress={item.handler ? item.handler : () => {}}>
                 <Row justify="space-between">
-                    <Text type="regular" theme="light">
+                    <Text type="regular" theme="darkmode">
                         {item.title}
                     </Text>
-                    <Text type="regular" theme="light">
+                    <Text type="regular" theme="darkmode">
                         {/* DateTime */}
                     </Text>
                 </Row>
                 <Row justify="space-between">
-                    <Text type="bold" theme="light">
+                    <Text type="bold" theme="darkmode">
                         {item.description}
                     </Text>
                 </Row>
@@ -118,11 +108,10 @@ class Home extends Component<Props, State> {
 
         return (
             <GradientBackground
-                name="connector_small"
-                theme="light"
+                theme="darkmode"
                 fade={true}
                 titleBar={
-                    <TitleBar theme="light" title={accountName} onOpenMenu={() => onOpenMenu()} onSettings={() => onOpenSettings()} />
+                    <TitleBar theme="darkmode" title={accountName} onOpenMenu={() => onOpenMenu()} onSettings={() => onOpenSettings()} />
                 }
             >
                 {showWarning && (
@@ -149,7 +138,7 @@ class Home extends Component<Props, State> {
                         <AccountBalanceWidget componentId={componentId} />
                     </Section>
 
-                    <PluginList componentId={componentId} theme="light" style={styles.pluginList} />
+                    <PluginList componentId={componentId} theme="darkmode" style={styles.pluginList} />
 
                     <ListContainer style={styles.notifications} isScrollable={false}>
                         <FlatList
diff --git a/src/screens/Mosaics.js b/src/screens/Mosaics.js
index 6f5b852..b16e715 100644
--- a/src/screens/Mosaics.js
+++ b/src/screens/Mosaics.js
@@ -39,9 +39,9 @@ class Mosaics extends Component<Props, State> {
         const {} = this.state;
 
         return (
-            <GradientBackground name="connector_small" theme="light" dataManager={dataManager}>
+            <GradientBackground theme="darkmode" dataManager={dataManager}>
                 <TitleBar
-                    theme="light"
+                    theme="darkmode"
                     title={translate('mosaics.title')}
                     onOpenMenu={() => onOpenMenu()}
                     onSettings={() => onOpenSettings()}
diff --git a/src/screens/Send.js b/src/screens/Send.js
index c3b5f84..f46b672 100644
--- a/src/screens/Send.js
+++ b/src/screens/Send.js
@@ -27,16 +27,6 @@ import { defaultFeesConfig } from '@src/config/fees';
 import { AccountHttp, Address } from 'symbol-sdk';
 
 const styles = StyleSheet.create({
-    transactionPreview: {
-        width: '100%',
-        height: 60,
-        borderRadius: 6,
-        marginTop: 4,
-        marginBottom: 4,
-        padding: 17,
-        paddingTop: 8,
-        backgroundColor: '#fff5',
-    },
     warning: {
         color: GlobalStyles.color.RED,
     },
diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js
index d449299..dacfb46 100644
--- a/src/styles/GlobalStyles.js
+++ b/src/styles/GlobalStyles.js
@@ -1,3 +1,5 @@
+import DesignSystemStyles from 'design-system/build/json/styles.json';
+
 /**
  * Symbol branding colors
  */
@@ -25,7 +27,7 @@ export default {
         ...COLORS,
 
         // On Light Background
-        onLight: {
+        lightmode: {
             TITLE: COLORS.PINK,
             TEXT: COLORS.SECONDARY,
 
@@ -39,10 +41,13 @@ export default {
             CONTROL_TEXT: COLORS.WHITE,
             CONTROL_TEXT_ACTIVE: COLORS.WHITE,
             CONTROL_TEXT_DISABLED: COLORS.WHITE,
+
+            BACKGROUND_MAIN: DesignSystemStyles.ColorLightmodeBgMain,
+            BACKGROUND_CARD: DesignSystemStyles.ColorLightmodeFormBg,
         },
 
         // On Dark Background
-        onDark: {
+        darkmode: {
             TITLE: COLORS.WHITE,
             TEXT: COLORS.WHITE,
 
@@ -56,6 +61,14 @@ export default {
             CONTROL_TEXT: COLORS.WHITE,
             CONTROL_TEXT_ACTIVE: COLORS.WHITE,
             CONTROL_TEXT_DISABLED: COLORS.WHITE,
+
+            BACKGROUND_MENU: DesignSystemStyles.ColorDarkmodeBgMain,
+            BACKGROUND_MAIN: DesignSystemStyles.ColorDarkmodeBgGray,
+            BACKGROUND_CARD: '#f1f3f41a',
+            BACKGROUND_CARD2: DesignSystemStyles.ColorDarkmodeBgDark,
+            BACKGROUND_HERO: DesignSystemStyles.ColorDarkmodeLogoBg,
+            BACKGROUND_FORM: DesignSystemStyles.ColorDarkmodeFormBg,
+            ACCENT_FORM: DesignSystemStyles.ColorDarkmodeFormAccent,
         },
     },
 
@@ -178,10 +191,6 @@ export default {
         },
     },
 
-    menu: {
-        icon: {},
-    },
-
     controls: {
         shadow: {
             zIndex: 0,
diff --git a/yarn.lock b/yarn.lock
index a35bd8b..ae7d722 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4194,6 +4194,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
+"design-system@github:symbol/design-system#v0.1.2":
+  version "0.1.2"
+  resolved "https://codeload.github.com/symbol/design-system/tar.gz/cfe825af032284d01980031c5eb4d39bc7b5eb04"
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"