diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx
index f5af6ed2e0b..e00eef50cc2 100644
--- a/packages/extension-ui/src/Popup/Accounts/index.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/index.tsx
@@ -31,7 +31,6 @@ export default function Accounts (): React.ReactElement<Props> {
         (accounts.length === 0)
           ? <AddAccount
             header='add accounts'
-            type='warn'
             to='/account/create'
             imageVisible
           >
diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index 27982004c3f..ed094b17abe 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -7,7 +7,7 @@ import { RequestAuthorizeTab } from '@polkadot/extension/background/types';
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { ActionBar, ActionContext, Button, Icon, Link, Warning, Svg } from '../../components';
+import { ActionBar, ActionContext, Button, Icon, Link, Warning } from '../../components';
 import { approveAuthRequest, rejectAuthRequest } from '../../messaging';
 
 interface Props {
@@ -58,7 +58,7 @@ const RequestInfo = styled.div`
   flex-direction: column;
   align-items: center;
   margin-bottom: 8px;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
 `;
 
 const Info = styled.div`
@@ -73,11 +73,7 @@ const AcceptButton = styled(Button)`
 `;
 
 const RequestWarning = styled(Warning)`
-  ${Svg} {
-    width: 36px;
-    height: 14px;
-    margin: 5px 11px 5px 28px;
-  }
+  margin: 1rem 1rem 0 1.45rem;
 `;
 
 AcceptButton.displayName = 'AcceptButton';
@@ -91,14 +87,14 @@ export default styled(Request)`
   height: 100%;
 
   .icon {
-    background: ${({ theme }): string => theme.btnBgDanger};
-    color: ${({ theme }): string => theme.btnColorDanger};
+    background: ${({ theme }): string => theme.buttonBackgroundDanger};
+    color: ${({ theme }): string => theme.textColor};
     min-width: 18px;
     width: 18px;
     height: 18px;
     font-size: 14px;
     line-height: 20px;
-    margin: 1rem 10px 0 1.75rem;
+    margin: 1rem 15px 0 1.35rem;
   }
 
   .tab-info {
@@ -108,7 +104,7 @@ export default styled(Request)`
 
   .tab-name,
   .tab-url {
-    color: ${({ theme }): string => theme.linkColor};
+    color: ${({ theme }): string => theme.textColor};
     display: inline-block;
     max-width: 20rem;
     overflow: hidden;
diff --git a/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx b/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
index 7709c4190d7..e4f01b50964 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/CreationStep.tsx
@@ -20,7 +20,7 @@ const Title = styled.span`
   letter-spacing: 0.04em;
   text-transform: uppercase;
   opacity: 0.65;
-  color: ${({ theme }): string => theme.color}
+  color: ${({ theme }): string => theme.textColor}
 `;
 
 const CurrentStep = styled.span`
@@ -33,7 +33,7 @@ const CurrentStep = styled.span`
 const TotalSteps = styled.span`
   font-size: ${({ theme }): string => theme.labelFontSize};
   line-height: ${({ theme }): string => theme.labelLineHeight};
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-weight: 600;
 `;
 
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index 074d1c5959e..a04d57b6491 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -4,11 +4,10 @@
 
 import React, { useContext } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { ActionContext, Address, Button, Warning, Svg, Title } from '../components';
+import { ActionContext, Address, Button, Warning, Title } from '../components';
 
 import { forgetAccount } from '../messaging';
 import { Back } from '../partials';
-import styled from 'styled-components';
 
 type Props = RouteComponentProps<{ address: string }>;
 
@@ -25,7 +24,7 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
       <Back />
       <Title>Forget account</Title>
       <Address address={address}>
-        <WarningText danger>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</WarningText>
+        <Warning danger>You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.</Warning>
         <Button
           isDanger
           label='I want to forget this account'
@@ -36,12 +35,4 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
   );
 }
 
-const WarningText = styled(Warning)`
-  ${Svg} {
-    width: 36px;
-    height: 14px;
-    padding-right: 8px;
-  }
-`;
-
 export default withRouter(Forget);
diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx
index 488b9197634..818b4bc5909 100644
--- a/packages/extension-ui/src/Popup/Welcome.tsx
+++ b/packages/extension-ui/src/Popup/Welcome.tsx
@@ -56,5 +56,5 @@ const Note = styled.p`
 
 const TextBox = styled(Box)`
   margin: 0.75rem 1rem;
-  border: 1px solid ${({ theme }): string => theme.inputBorder};
+  border: 1px solid ${({ theme }): string => theme.inputBorderColor};
 `;
diff --git a/packages/extension-ui/src/components/ActionText.tsx b/packages/extension-ui/src/components/ActionText.tsx
index e60ce0b7087..826fe0eb589 100644
--- a/packages/extension-ui/src/components/ActionText.tsx
+++ b/packages/extension-ui/src/components/ActionText.tsx
@@ -33,7 +33,7 @@ export default styled(ActionText)`
   }
   
   ${Svg} {
-    background: ${({ theme }): string => theme.iconLabelColor};
+    background: ${({ theme }): string => theme.iconNeutralColor};
     display: inline-block;
     position: relative;
     top: 2px;
diff --git a/packages/extension-ui/src/components/AddAccount.tsx b/packages/extension-ui/src/components/AddAccount.tsx
index 68b3f3f04dd..c2b0089f6ce 100644
--- a/packages/extension-ui/src/components/AddAccount.tsx
+++ b/packages/extension-ui/src/components/AddAccount.tsx
@@ -4,14 +4,12 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { Theme } from './themes';
 import addAccountImage from '../assets/addAccount.png';
 
 interface Props {
   children: React.ReactNode;
   className?: string;
   header?: React.ReactNode;
-  type?: keyof Theme['box'];
   to?: string;
   onClick?: () => void;
   imageVisible?: boolean;
@@ -53,11 +51,11 @@ const Image = styled.img`
 `;
 
 export default styled(AddAccount)`
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   height: 100%;
 
   h3 {
-    color: ${({ theme }): string => theme.color};
+    color: ${({ theme }): string => theme.textColor};
     font-weight: normal;
     text-align: center;
   }
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index 9fc4e0116d8..c69414177ba 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -104,7 +104,7 @@ const AccountInfoRow = styled.div`
   align-items: center;
   height: 72px;
   margin-bottom: 8px;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
 `;
 
 const Info = styled.div`
@@ -147,7 +147,7 @@ const Settings = styled.div`
     top: 25%;
     bottom: 25%;
     width: 1px;
-    background: ${({ theme }): string => theme.inputBorder};
+    background: ${({ theme }): string => theme.inputBorderColor};
   }
   
   &:hover {
@@ -161,7 +161,7 @@ Settings.displayName = 'Details';
 const ActionsIcon = styled(Svg).attrs(() => ({
   src: DetailsImg
 }))`
-  background: ${({ theme }): string => theme.iconLabelColor};
+  background: ${({ theme }): string => theme.iconNeutralColor};
 `;
 
 const ActiveActionsIcon = styled(Svg).attrs(() => ({
diff --git a/packages/extension-ui/src/components/Box.tsx b/packages/extension-ui/src/components/Box.tsx
index 21c7489e24c..7b72b86f070 100644
--- a/packages/extension-ui/src/components/Box.tsx
+++ b/packages/extension-ui/src/components/Box.tsx
@@ -22,10 +22,9 @@ function Box ({ banner, children, className }: Props): React.ReactElement<Props>
 
 export default styled(Box)`
   background: ${({ theme }): string => theme.readonlyInputBackground};
-  border: ${({ theme }): string => theme.boxBorder};
+  border: none;
   border-radius: ${({ theme }): string => theme.borderRadius};
-  box-shadow: ${({ theme }): string => theme.boxShadow};
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   margin: ${({ theme }): string => theme.boxMargin};
diff --git a/packages/extension-ui/src/components/Button.tsx b/packages/extension-ui/src/components/Button.tsx
index 60f5589a84e..add1ba4d079 100644
--- a/packages/extension-ui/src/components/Button.tsx
+++ b/packages/extension-ui/src/components/Button.tsx
@@ -44,17 +44,17 @@ export default styled(Button)`
   width: ${({ isSmall }): string => isSmall ? 'auto' : '100%'};
 
   button {
-    background: ${({ isDanger, theme }): string => isDanger ? theme.btnBgDanger : theme.btnBg};
-    border: ${({ theme }): string => theme.btnBorder}${({ isDanger, theme }): string => isDanger ? theme.btnColorDanger : theme.btnColor};
+    background: ${({ isDanger, theme }): string => isDanger ? theme.buttonBackgroundDanger : theme.buttonBackground};
+    border: none;
     border-radius: ${({ theme }): string => theme.borderRadius};
-    color: ${({ isDanger, theme }): string => isDanger ? theme.btnColorDanger : theme.btnColor};
+    color: ${({ theme }): string => theme.textColor};
     cursor: pointer;
     display: block;
     font-size: 15px;
     font-weight: 600;
     height: 48px;
     line-height: 20px;
-    padding: ${({ theme }): string => theme.btnPadding};
+    padding: 0.75rem 1rem;
     text-align: center;
     width: 100%;
     
diff --git a/packages/extension-ui/src/components/ButtonArea.tsx b/packages/extension-ui/src/components/ButtonArea.tsx
index 55b94b87eec..27559f1b9e0 100644
--- a/packages/extension-ui/src/components/ButtonArea.tsx
+++ b/packages/extension-ui/src/components/ButtonArea.tsx
@@ -8,7 +8,7 @@ import Button from './Button';
 export default styled.div`
   display: flex;
   flex-direction: row;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
   padding: 12px 1rem;
 
   &&& {
diff --git a/packages/extension-ui/src/components/Checkbox.tsx b/packages/extension-ui/src/components/Checkbox.tsx
index 110d0f486e2..90ba82e8700 100644
--- a/packages/extension-ui/src/components/Checkbox.tsx
+++ b/packages/extension-ui/src/components/Checkbox.tsx
@@ -57,7 +57,7 @@ export default styled(Checkbox)`
         left: 3px;
         top: -4px;
         position: absolute;
-        color: ${({ theme }): string => theme.color};
+        color: ${({ theme }): string => theme.textColor};
         font-size: 14px;
       }
     }
diff --git a/packages/extension-ui/src/components/Dropdown.tsx b/packages/extension-ui/src/components/Dropdown.tsx
index 5a7429ae781..b295c53331b 100644
--- a/packages/extension-ui/src/components/Dropdown.tsx
+++ b/packages/extension-ui/src/components/Dropdown.tsx
@@ -62,17 +62,17 @@ export default styled(Dropdown)`
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    background: ${({ isError, isReadOnly, theme }): string => isError ? theme.box.error.background : (isReadOnly ? '#eee' : '#fff')};
-    border-color: ${({ isError, theme }): string => isError ? theme.box.error.border : theme.inputBorder};
+    background: ${({ isError, isReadOnly, theme }): string => isError ? theme.inputBackground : (isReadOnly ? '#eee' : '#fff')};
+    border-color: ${({ isError, theme }): string => isError ? theme.errorBorderColor : theme.inputBorderColor};
     border-radius: ${({ theme }): string => theme.borderRadius};
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: ${({ isError, theme }): string => isError ? theme.box.error.border : theme.color};
+    color: ${({ isError, theme }): string => isError ? theme.errorBorderColor : theme.textColor};
     display: block;
     font-family: ${({ theme }): string => theme.fontFamily};
     font-size: ${({ theme }): string => theme.fontSize};
-    padding: ${({ label, theme }): string => label ? theme.inputPaddingLabel : theme.inputPadding};
+    padding: 0.5rem 0.75rem;
     width: 100%;
 
     &:read-only {
diff --git a/packages/extension-ui/src/components/Header.tsx b/packages/extension-ui/src/components/Header.tsx
index 5560ef64abe..93ed759b7c5 100644
--- a/packages/extension-ui/src/components/Header.tsx
+++ b/packages/extension-ui/src/components/Header.tsx
@@ -36,14 +36,14 @@ const Container = styled.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-    border-bottom: 1px solid ${({ theme }): string => theme.inputBorder};
+    border-bottom: 1px solid ${({ theme }): string => theme.inputBorderColor};
 `;
 
 const Branding = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  color: ${({ theme }): string => theme.hdrColor};
+  color: ${({ theme }): string => theme.labelColor};
   font-family: ${({ theme }): string => theme.fontFamily};
   text-align: center;
   width: 100%;
@@ -68,12 +68,11 @@ const Gear = styled.img`
 `;
 
 const LogoText = styled.span`
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-family: ${({ theme }): string => theme.fontFamily};
 `;
 
 export default styled(Header)`
-  background: ${({ theme }): string => theme.hdrBg};
   box-sizing: border-box;
   font-weight: normal;
   margin: 0 -1rem;
diff --git a/packages/extension-ui/src/components/Label.tsx b/packages/extension-ui/src/components/Label.tsx
index 1e42113475e..aa381e940f8 100644
--- a/packages/extension-ui/src/components/Label.tsx
+++ b/packages/extension-ui/src/components/Label.tsx
@@ -21,7 +21,7 @@ function Label ({ children, className, label }: Props): React.ReactElement<Props
 }
 
 export default styled(Label)`
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
 
   label {
     font-size: ${({ theme }): string => theme.labelFontSize};
diff --git a/packages/extension-ui/src/components/Link.tsx b/packages/extension-ui/src/components/Link.tsx
index d1feb19e370..217dce058d5 100644
--- a/packages/extension-ui/src/components/Link.tsx
+++ b/packages/extension-ui/src/components/Link.tsx
@@ -25,17 +25,17 @@ function Link ({ children, className, onClick, to }: Props): React.ReactElement<
 export default styled(Link)`
   display: flex;
   align-items: center;
-  color: ${({ isDanger, theme }): string => isDanger ? theme.linkColorDanger : theme.linkColor};
+  color: ${({ isDanger, theme }): string => isDanger ? theme.textColorDanger : theme.textColor};
   opacity: 0.9;
   text-decoration: none;
   vertical-align: middle;
 
   &:hover {
-    color: ${({ isDanger, theme }): string => isDanger ? theme.linkColorDanger : theme.linkColor};
+    color: ${({ isDanger, theme }): string => isDanger ? theme.textColorDanger : theme.textColor};
     opacity: 1.0;
   }
 
   &:visited {
-    color: ${({ isDanger, theme }): string => isDanger ? theme.linkColorDanger : theme.linkColor};
+    color: ${({ isDanger, theme }): string => isDanger ? theme.textColorDanger : theme.textColor};
   }
 `;
diff --git a/packages/extension-ui/src/components/List.tsx b/packages/extension-ui/src/components/List.tsx
index 5dee3da9a69..50bb85c5863 100644
--- a/packages/extension-ui/src/components/List.tsx
+++ b/packages/extension-ui/src/components/List.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export default styled.ul`
   list-style: none;
   padding-inline-start: 10px;
+  padding-inline-end: 10px;
   text-indent: -22px;
   margin-left: 21px;  
   
diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx
index 9ac0a86f701..d051c860db6 100644
--- a/packages/extension-ui/src/components/Menu.tsx
+++ b/packages/extension-ui/src/components/Menu.tsx
@@ -21,7 +21,7 @@ export default styled(Menu)`
   right: 0;
   margin-top: 90px;
   padding: 16px 0;
-  background: ${({ theme }): string => theme.btnAreaBackground};
+  background: ${({ theme }): string => theme.highlightedAreaBackground};
   border-radius: 4px;
   border: 1px solid #222222;
   box-sizing: border-box;
diff --git a/packages/extension-ui/src/components/Svg.tsx b/packages/extension-ui/src/components/Svg.tsx
index e84c50f3bcb..aab9378cf73 100644
--- a/packages/extension-ui/src/components/Svg.tsx
+++ b/packages/extension-ui/src/components/Svg.tsx
@@ -12,5 +12,5 @@ export default styled.span<Props>`
     display: block;
     mask: ${({ src }): string => `url(${src})`};
     mask-size: cover;
-    background: ${({ theme }): string => theme.color}; 
+    background: ${({ theme }): string => theme.textColor}; 
 `;
diff --git a/packages/extension-ui/src/components/TextInputs.ts b/packages/extension-ui/src/components/TextInputs.ts
index 0d3aed6ae75..ea8be90314d 100644
--- a/packages/extension-ui/src/components/TextInputs.ts
+++ b/packages/extension-ui/src/components/TextInputs.ts
@@ -6,27 +6,28 @@ interface Props {
 
 const DefaultTextInputColors = css`
   background: ${({ theme }): string => theme.inputBackground};
-  border-color: ${({ theme }): string => theme.inputBorder};
-  color: ${({ theme }): string => theme.color};
+  border-color: ${({ theme }): string => theme.inputBorderColor};
+  color: ${({ theme }): string => theme.textColor};
 `;
 
 const ErroredTextInputColors = css`
-  background: ${({ theme }): string => theme.box.error.background};
-  border-color: ${({ theme }): string => theme.box.error.border};
-  color: ${({ theme }): string => theme.box.error.border};
+  background: ${({ theme }): string => theme.inputBackground};
+  border-color: ${({ theme }): string => theme.errorBorderColor};
+  color: ${({ theme }): string => theme.errorColor};
 `;
 
 const TextInput = css<Props>`
   border-radius: ${({ theme }): string => theme.borderRadius};
-  border: ${({ theme }): string => `1px solid ${theme.inputBorder}`};
+  border: ${({ theme }): string => `1px solid ${theme.inputBorderColor}`};
+  outline: none;
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
   box-sizing: border-box;
   display: block;
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   font-weight: 600;
-  height: ${({ theme }): string => theme.inputHeight};
-  padding: ${({ theme }): string => theme.inputPadding};
+  height: 40px;
+  padding: 0.5rem 0.75rem;
   resize: none;
   width: 100%;
   ${({ withError }): typeof ErroredTextInputColors => (withError ? ErroredTextInputColors : DefaultTextInputColors)};
diff --git a/packages/extension-ui/src/components/View.tsx b/packages/extension-ui/src/components/View.tsx
index 27592b75aa1..a27825e6904 100644
--- a/packages/extension-ui/src/components/View.tsx
+++ b/packages/extension-ui/src/components/View.tsx
@@ -22,7 +22,7 @@ export default styled(View)`
   display: flex;
   flex-direction: column;
   background: ${({ theme }): string => theme.background};
-  color: ${({ theme }): string => theme.color};
+  color: ${({ theme }): string => theme.textColor};
   font-family: ${({ theme }): string => theme.fontFamily};
   font-size: ${({ theme }): string => theme.fontSize};
   line-height: ${({ theme }): string => theme.lineHeight};
diff --git a/packages/extension-ui/src/components/Warning.tsx b/packages/extension-ui/src/components/Warning.tsx
index 70b4628b39b..fd588b04ad8 100644
--- a/packages/extension-ui/src/components/Warning.tsx
+++ b/packages/extension-ui/src/components/Warning.tsx
@@ -15,7 +15,9 @@ interface Props {
 
 function Warning ({ children, className, danger }: Props): React.ReactElement<Props> {
   return <div className={className}>
-    <WarningImage danger={danger} src={WarningImageSrc}/>
+    <div>
+      <WarningImage danger={danger} src={WarningImageSrc}/>
+    </div>
     <div>
       {children}
     </div>
@@ -23,7 +25,7 @@ function Warning ({ children, className, danger }: Props): React.ReactElement<Pr
 }
 
 const WarningImage = styled(Svg)<Pick<Props, 'danger'>>`
-  width: 25px;
+  width: 16px;
   height: 14px;
   margin: 5px 16px 5px 0;
   background: ${({ danger, theme }): string => danger ? theme.iconDangerColor : theme.iconWarningColor};  
@@ -33,9 +35,5 @@ export default styled(Warning)`
   display: flex;
   flex-direction: row;
   padding-left: ${({ danger }): string => danger ? '16px' : ''};
-  border-left: ${({ danger, theme }): string => danger ? `0.25rem solid ${theme.linkColorDanger}` : ''};
-  
-  > div {
-    padding-right: 10px;
-  }
+  border-left: ${({ danger, theme }): string => danger ? `0.25rem solid ${theme.textColorDanger}` : ''};
 `;
diff --git a/packages/extension-ui/src/components/themes.ts b/packages/extension-ui/src/components/themes.ts
index 4b734186dc0..d8990b59920 100644
--- a/packages/extension-ui/src/components/themes.ts
+++ b/packages/extension-ui/src/components/themes.ts
@@ -2,69 +2,32 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-const BUTTON_DANGER_COLOR = '#D92A2A';
-const TEXT_DANGER_COLOR = '#FF5858';
-const LABEL_COLOR = '#9F9E99';
-const TEXT_COLOR = '#FFFFFF';
-const BG_COLOR = 'rgba(13, 14, 19, 0.9)';
-
 export const defaultTheme = {
-  background: BG_COLOR,
-  borderRadius: '4px',
-  btnAreaBackground: 'rgba(13, 14, 19, 0.7)',
-  btnBg: 'linear-gradient(95.52deg, #FF8A00 0.14%, #FF7A00 100.14%)',
-  btnBgDanger: BUTTON_DANGER_COLOR,
-  btnBorder: '0 solid ',
-  btnColor: TEXT_COLOR,
-  btnColorDanger: TEXT_COLOR,
-  btnPadding: '0.75rem 1rem',
-  boxBorder: 'none', // '0.25rem solid #e2e1e0',
-  boxMargin: '0.75rem 0',
-  boxPadding: '0 0.25rem',
-  boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-  color: TEXT_COLOR,
-  fontFamily: 'Nunito, sans-serif',
-  fontSize: '16px',
-  hdrBg: 'transparent', // '#f5f6f7',
-  hdrColor: LABEL_COLOR,
+  background: 'rgba(13, 14, 19, 0.9)',
+  highlightedAreaBackground: 'rgba(13, 14, 19, 0.7)',
+  buttonBackground: 'linear-gradient(95.52deg, #FF8A00 0.14%, #FF7A00 100.14%)',
+  buttonBackgroundDanger: '#D92A2A',
+  textColor: '#FFFFFF',
+  textColorDanger: '#FF5858',
+  errorBorderColor: '#7E3530',
+  errorColor: '#E42F2F',
+  primaryColor: '#FF7D01',
   inputBackground: 'rgba(13, 14, 19, 0.9)',
+  inputBorderColor: '#303030',
   readonlyInputBackground: '#000000',
   iconWarningColor: '#FF7D01',
-  iconDangerColor: TEXT_DANGER_COLOR,
-  iconLabelColor: '#8E8E8E',
+  iconDangerColor: '#FF5858',
+  iconNeutralColor: '#8E8E8E',
   identiconBackground: '#373737',
-  inputBorder: '#303030',
-  inputHeight: '40px',
-  inputPadding: '0.5rem 0.75rem',
-  labelColor: LABEL_COLOR,
+  labelColor: '#9F9E99',
+  fontFamily: 'Nunito, sans-serif',
+  fontSize: '16px',
+  lineHeight: '26px',
   labelFontSize: '13px',
   labelLineHeight: '18px',
-  lineHeight: '26px',
-  linkColor: TEXT_COLOR,
-  linkColorDanger: TEXT_DANGER_COLOR,
-  primaryColor: '#FF7D01',
-  box: {
-    error: {
-      background: '#ffe6e6',
-      border: BUTTON_DANGER_COLOR,
-      color: '#4d0000'
-    },
-    info: {
-      background: '#fafafa',
-      border: TEXT_COLOR,
-      color: 'inherit'
-    },
-    success: {
-      background: '#f3f5f7',
-      border: '#42b983',
-      color: 'inherit'
-    },
-    warn: {
-      background: '#fff6cb',
-      border: '#e7c000',
-      color: '#6b5900'
-    }
-  }
+  borderRadius: '4px',
+  boxMargin: '0.75rem 0',
+  boxPadding: '0 0.25rem'
 };
 
 export declare type Theme = typeof defaultTheme;