Merge branch 'scale-down-app'

43 files changed, 204 insertions, 213 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04d17b47ad..7272a7003a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,6 +50,8 @@ Line wrap the file at 100 chars.                                              Th
 - Update the default Shadowsocks password to `mullvad` and cipher to `aes-256-gcm` in the CLI
   when using it to configure a *custom Shadowsocks bridge*. The Mullvad bridges recently changed
   these parameters on port 443 (which is the default port).
+- Decrease the size of fonts, some icons and other design elements in the desktop app. This makes it
+  possible to fit more into the same area and makes text easier to read.
 
 #### Windows
 - Update wireguard-nt to 0.10.1.
diff --git a/gui/assets/css/fonts.css b/gui/assets/css/fonts.css
index f24a1273e0..1bcfd99205 100644
--- a/gui/assets/css/fonts.css
+++ b/gui/assets/css/fonts.css
@@ -1,25 +1,31 @@
 @font-face {
   font-family: 'Source Sans Pro';
-  font-weight: bold 900;
+  font-weight: 700;
   src: url('../fonts/SourceSansPro-Bold.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Noto Sans Myanmar';
-  font-weight: bold 900;
+  font-weight: 700;
   src: url('../fonts/NotoSansMyanmar-Bold.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Noto Sans Thai';
-  font-weight: bold 900;
+  font-weight: 700;
   src: url('../fonts/NotoSansThai-Bold.ttf') format('truetype');
 }
 
 @font-face {
+  font-family: 'Source Sans Pro';
+  font-weight: 600;
+  src: url('../fonts/SourceSansPro-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
   font-family: 'Open Sans';
-  font-weight: 800;
-  src: url('../fonts/OpenSans-ExtraBold.ttf') format('truetype');
+  font-weight: 700;
+  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
 }
 
 @font-face {
@@ -27,3 +33,9 @@
   font-weight: 600;
   src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
 }
+
+@font-face {
+  font-family: 'Open Sans';
+  font-weight: 400;
+  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
+}
diff --git a/gui/assets/fonts/OpenSans-Bold.ttf b/gui/assets/fonts/OpenSans-Bold.ttf
new file mode 100644
index 0000000000..4d8f3e5b90
--- /dev/null
+++ b/gui/assets/fonts/OpenSans-Bold.ttf
diff --git a/gui/assets/fonts/OpenSans-ExtraBold.ttf b/gui/assets/fonts/OpenSans-ExtraBold.ttf
deleted file mode 100644
index 21f6f84a07..0000000000
--- a/gui/assets/fonts/OpenSans-ExtraBold.ttf
+++ /dev/null
diff --git a/gui/assets/fonts/OpenSans-Regular.ttf b/gui/assets/fonts/OpenSans-Regular.ttf
new file mode 100644
index 0000000000..3a29f26497
--- /dev/null
+++ b/gui/assets/fonts/OpenSans-Regular.ttf
diff --git a/gui/assets/fonts/SourceSansPro-SemiBold.ttf b/gui/assets/fonts/SourceSansPro-SemiBold.ttf
new file mode 100644
index 0000000000..2908e0d782
--- /dev/null
+++ b/gui/assets/fonts/SourceSansPro-SemiBold.ttf
diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index c23fe2e6b6..6fa1d6ccf8 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -1134,7 +1134,7 @@ msgid "Launch"
 msgstr ""
 
 msgctxt "split-tunneling-view"
-msgid "No result for %(searchTerm)s."
+msgid "No result for **%(searchTerm)s**."
 msgstr ""
 
 #. This error message is shown if the user tries to launch a Linux desktop
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx
index 015e7a4478..0e403231da 100644
--- a/gui/src/renderer/components/AccountStyles.tsx
+++ b/gui/src/renderer/components/AccountStyles.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
+import { normalText, tinyText } from './common-styles';
 import { Container } from './Layout';
 import { RedeemVoucherButton } from './RedeemVoucher';
 
@@ -32,18 +33,14 @@ const AccountRowText = styled.span({
   fontFamily: 'Open Sans',
 });
 
-export const AccountRowLabel = styled(AccountRowText)({
-  fontSize: '13px',
-  fontWeight: 600,
+export const AccountRowLabel = styled(AccountRowText)(tinyText, {
   lineHeight: '20px',
-  marginBottom: '9px',
+  marginBottom: '5px',
   color: colors.white60,
 });
 
-export const AccountRowValue = styled(AccountRowText)({
-  fontSize: '16px',
-  lineHeight: '19px',
-  fontWeight: 800,
+export const AccountRowValue = styled(AccountRowText)(normalText, {
+  fontWeight: 600,
   color: colors.white,
 });
 
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index 9e6ac73160..bdc84701c6 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -25,6 +25,6 @@ export const StyledNoWireguardKeyErrorContainer = styled(Cell.Footer)({
 });
 
 export const StyledNoWireguardKeyError = styled(Cell.FooterText)({
-  fontWeight: 800,
+  fontWeight: 700,
   color: colors.red,
 });
diff --git a/gui/src/renderer/components/Changelog.tsx b/gui/src/renderer/components/Changelog.tsx
index 83326a18bd..545ed6753b 100644
--- a/gui/src/renderer/components/Changelog.tsx
+++ b/gui/src/renderer/components/Changelog.tsx
@@ -15,7 +15,7 @@ const StyledTitle = styled.h1(bigText, {
 
 const StyledSubTitle = styled.span(smallText, {
   marginTop: '10px',
-  fontWeight: 800,
+  fontWeight: 700,
 });
 
 const StyledList = styled.ul({
diff --git a/gui/src/renderer/components/ConnectionPanel.tsx b/gui/src/renderer/components/ConnectionPanel.tsx
index 77aa9633e1..a5431e7f07 100644
--- a/gui/src/renderer/components/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/ConnectionPanel.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { default as ConnectionPanelDisclosure } from '../components/ConnectionPanelDisclosure';
+import { tinyText } from './common-styles';
 import Marquee from './Marquee';
 
 export interface IEndpoint {
@@ -50,11 +51,8 @@ const Row = styled.div({
   marginTop: '3px',
 });
 
-const Text = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
+const Text = styled.span(tinyText, {
   lineHeight: '15px',
-  fontWeight: 600,
   color: colors.white,
 });
 
diff --git a/gui/src/renderer/components/ConnectionPanelDisclosure.tsx b/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
index d0727ddb6f..3d5db7eea1 100644
--- a/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
+++ b/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { normalText } from './common-styles';
 import ImageView from './ImageView';
 
 const Container = styled.div({
@@ -9,9 +10,7 @@ const Container = styled.div({
   width: '100%',
 });
 
-const Caption = styled.span({}, (props: { open: boolean }) => ({
-  fontFamily: 'Open Sans',
-  fontSize: '15px',
+const Caption = styled.span(normalText, (props: { open: boolean }) => ({
   fontWeight: 600,
   lineHeight: '20px',
   minWidth: '0px',
diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index 7ef7d39193..bbecd4b3f2 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -251,8 +251,8 @@ export default function CustomDnsSettings() {
           </StyledAddCustomDnsLabel>
           <Cell.Icon
             source="icon-add"
-            width={22}
-            height={22}
+            width={18}
+            height={18}
             tintColor={colors.white40}
             tintHoverColor={colors.white60}
             tabIndex={-1}
@@ -378,8 +378,8 @@ function CellListItem(props: ICellListItemProps) {
               aria-label={messages.pgettext('accessibility', 'Remove item')}>
               <StyledRemoveIcon
                 source="icon-close"
-                width={22}
-                height={22}
+                width={18}
+                height={18}
                 tintColor={editing ? colors.black : colors.white40}
               />
             </StyledRemoveButton>
diff --git a/gui/src/renderer/components/CustomDnsSettingsStyles.tsx b/gui/src/renderer/components/CustomDnsSettingsStyles.tsx
index 55526681a7..1973a453b1 100644
--- a/gui/src/renderer/components/CustomDnsSettingsStyles.tsx
+++ b/gui/src/renderer/components/CustomDnsSettingsStyles.tsx
@@ -19,7 +19,7 @@ export const StyledAddCustomDnsLabel = styled(Cell.Label)(
   {},
   (props: { paddingLeft?: number }) => ({
     fontFamily: 'Open Sans',
-    fontWeight: 'normal',
+    fontWeight: 400,
     fontSize: '16px',
     paddingLeft: (props.paddingLeft ?? 32) + 'px',
     whiteSpace: 'pre-wrap',
@@ -47,7 +47,7 @@ export const StyledButton = styled.button({
 
 export const StyledLabel = styled(Cell.Label)({
   fontFamily: 'Open Sans',
-  fontWeight: 'normal',
+  fontWeight: 400,
   fontSize: '16px',
   paddingLeft: '32px',
   whiteSpace: 'pre-wrap',
diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index 4c6c7989d7..5085042c6f 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -13,7 +13,7 @@ import { generateRoutePath, RoutePath } from '../lib/routes';
 import account from '../redux/account/actions';
 import * as AppButton from './AppButton';
 import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
-import { bigText } from './common-styles';
+import { hugeText, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { calculateHeaderBarStyle, DefaultHeaderBar, HeaderBarStyle } from './HeaderBar';
 import ImageView from './ImageView';
@@ -55,15 +55,12 @@ export const StyledFooter = styled.div({
   padding: '18px 22px 22px',
 });
 
-export const StyledTitle = styled.span(bigText, {
+export const StyledTitle = styled.span(hugeText, {
   lineHeight: '38px',
   marginBottom: '8px',
 });
 
-export const StyledLabel = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 600,
+export const StyledLabel = styled.span(tinyText, {
   lineHeight: '20px',
   color: colors.white,
   marginBottom: '9px',
diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 5aa4e6ea63..293604efe6 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -3,7 +3,7 @@ import { colors } from '../../config.json';
 import AccountTokenLabel from './AccountTokenLabel';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { bigText, smallText } from './common-styles';
+import { hugeText, tinyText } from './common-styles';
 import CustomScrollbars from './CustomScrollbars';
 import { DefaultHeaderBar } from './HeaderBar';
 import { Container } from './Layout';
@@ -16,7 +16,7 @@ export const StyledAccountTokenLabel = styled(AccountTokenLabel)({
   fontFamily: 'Open Sans',
   lineHeight: '20px',
   fontSize: '20px',
-  fontWeight: 800,
+  fontWeight: 700,
   color: colors.white,
 });
 
@@ -57,17 +57,17 @@ export const StyledFooter = styled.div({
   padding: '18px 22px 22px',
 });
 
-export const StyledTitle = styled.span(bigText, {
+export const StyledTitle = styled.span(hugeText, {
   lineHeight: '38px',
   marginBottom: '8px',
 });
 
-export const StyledMessage = styled.span(smallText, {
+export const StyledMessage = styled.span(tinyText, {
   marginBottom: '20px',
   color: colors.white,
 });
 
-export const StyledAccountTokenMessage = styled.span(smallText, {
+export const StyledAccountTokenMessage = styled.span(tinyText, {
   color: colors.white,
 });
 
diff --git a/gui/src/renderer/components/FilterByProvider.tsx b/gui/src/renderer/components/FilterByProvider.tsx
index f50c8dcffc..53f7d77bea 100644
--- a/gui/src/renderer/components/FilterByProvider.tsx
+++ b/gui/src/renderer/components/FilterByProvider.tsx
@@ -6,7 +6,7 @@ import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
-import { mediumText } from './common-styles';
+import { normalText } from './common-styles';
 import ImageView from './ImageView';
 import { Container, Layout } from './Layout';
 import {
@@ -23,7 +23,7 @@ const StyledContainer = styled(Container)({
 });
 
 const StyledNavigationScrollbars = styled(NavigationScrollbars)({
-  backgroundColor: colors.blue,
+  backgroundColor: colors.darkBlue,
   flex: 1,
 });
 
@@ -153,8 +153,11 @@ interface IStyledRowTitleProps {
 
 const StyledRow = styled.div({
   display: 'flex',
-  height: '42px',
-  padding: '9px 22px',
+  height: '44px',
+  alignItems: 'center',
+  padding: '0 22px',
+  marginBottom: '1px',
+  backgroundColor: colors.blue,
 });
 
 const StyledCheckbox = styled.div({
@@ -167,10 +170,8 @@ const StyledCheckbox = styled.div({
   borderRadius: '4px',
 });
 
-const StyledRowTitle = styled.label((props: IStyledRowTitleProps) => ({
-  ...mediumText,
-  fontSize: '16px',
-  fontWeight: props.bold ? 800 : 600,
+const StyledRowTitle = styled.label(normalText, (props: IStyledRowTitleProps) => ({
+  fontWeight: props.bold ? 600 : 400,
   color: colors.white,
   marginLeft: '22px',
 }));
@@ -187,7 +188,7 @@ function ProviderRow(props: IProviderRowProps) {
   return (
     <StyledRow onClick={onCheck}>
       <StyledCheckbox role="checkbox" aria-label={props.provider} aria-checked={props.checked}>
-        {props.checked && <ImageView source="icon-tick" width={16} tintColor={colors.green} />}
+        {props.checked && <ImageView source="icon-tick" width={18} tintColor={colors.green} />}
       </StyledCheckbox>
       <StyledRowTitle aria-hidden bold={props.bold}>
         {props.provider}
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index be29c2c1dc..3fda5e0f49 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -221,7 +221,7 @@ const StyledSpecialLocationCellButton = styled(Cell.CellButton)({
 
 const StyledSpecialLocationCellLabel = styled(Cell.Label)({
   fontFamily: 'Open Sans',
-  fontWeight: 'normal',
+  fontWeight: 400,
   fontSize: '16px',
 });
 
diff --git a/gui/src/renderer/components/LocationRow.tsx b/gui/src/renderer/components/LocationRow.tsx
index 980ffaae3e..207c5900e8 100644
--- a/gui/src/renderer/components/LocationRow.tsx
+++ b/gui/src/renderer/components/LocationRow.tsx
@@ -7,6 +7,7 @@ import { messages } from '../../shared/gettext';
 import Accordion from './Accordion';
 import * as Cell from './cell';
 import ChevronButton from './ChevronButton';
+import { normalText } from './common-styles';
 import RelayStatusIndicator from './RelayStatusIndicator';
 
 interface IContainerProps {
@@ -46,6 +47,7 @@ const Button = styled.button((props: { location: RelayLocation }) => {
   return {
     display: 'flex',
     alignItems: 'center',
+    minHeight: '44px',
     flex: 1,
     border: 'none',
     background: 'none',
@@ -58,10 +60,8 @@ const StyledChevronButton = styled(ChevronButton)({
   marginLeft: '18px',
 });
 
-const Label = styled(Cell.Label)({
-  fontFamily: 'Open Sans',
-  fontWeight: 'normal',
-  fontSize: '16px',
+const Label = styled(Cell.Label)(normalText, {
+  fontWeight: 400,
 });
 
 interface IProps {
diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx
index 31fd26154b..6d2a6328f4 100644
--- a/gui/src/renderer/components/LoginStyles.tsx
+++ b/gui/src/renderer/components/LoginStyles.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import ImageView from './ImageView';
 import * as Cell from './cell';
-import { bigText, smallText, sourceSansPro } from './common-styles';
+import { hugeText, largeText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 
 export const StyledAccountDropdownContainer = styled.ul({
@@ -54,7 +54,7 @@ export const StyledAccountDropdownItemButton = styled(Cell.CellButton)({
   },
 });
 
-export const StyledAccountDropdownItemButtonLabel = styled(Cell.Label)({
+export const StyledAccountDropdownItemButtonLabel = styled(Cell.Label)(largeText, {
   padding: '11px 0px 11px 12px',
   margin: '0',
   color: colors.blue80,
@@ -135,33 +135,28 @@ export const StyledDropdownSpacer = styled.div({
   backgroundColor: colors.darkBlue,
 });
 
-export const StyledLoginFooterPrompt = styled.span({
-  color: colors.white80,
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 600,
-  lineHeight: '18px',
+export const StyledLoginFooterPrompt = styled.span(tinyText, {
+  color: colors.white60,
   marginBottom: '8px',
 });
 
-export const StyledTitle = styled.h1(bigText, {
+export const StyledTitle = styled.h1(hugeText, {
   lineHeight: '40px',
   marginBottom: '7px',
   flex: 0,
 });
 
-export const StyledSubtitle = styled.span(smallText, {
+export const StyledSubtitle = styled.span(tinyText, {
   lineHeight: '15px',
   marginBottom: '8px',
+  color: colors.white60,
 });
 
-export const StyledInput = styled(FormattableTextInput)({
-  ...sourceSansPro,
+export const StyledInput = styled(FormattableTextInput)(largeText, {
+  fontWeight: 700,
   minWidth: 0,
   borderWidth: 0,
-  padding: '10px 12px 12px',
-  fontSize: '20px',
-  lineHeight: '26px',
+  padding: '12px 12px 12px',
   color: colors.blue,
   backgroundColor: 'transparent',
   flex: 1,
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 19fda5133a..2713144e93 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import log from '../../shared/logging';
 import CustomScrollbars from './CustomScrollbars';
+import { tinyText } from './common-styles';
 import ImageView from './ImageView';
 
 const MODAL_CONTAINER_ID = 'modal-container';
@@ -232,11 +233,7 @@ class ModalAlertWithContext extends React.Component<IModalAlertProps & IModalCon
   };
 }
 
-export const ModalMessage = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 500,
-  lineHeight: '20px',
+export const ModalMessage = styled.span(tinyText, {
   color: colors.white80,
   marginTop: '16px',
 });
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index 742f4c22c9..db042405c3 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { normalText, tinyText } from './common-styles';
 import ImageView from './ImageView';
 
 export const StyledNavigationBarSeparator = styled.div({
@@ -24,10 +25,8 @@ export const StyledNavigationBar = styled.nav((props: { unpinnedWindow: boolean
   paddingTop: window.env.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
 }));
 
-export const StyledTitleBarItemLabel = styled.h1({}, (props: { visible?: boolean }) => ({
-  fontFamily: 'Open Sans',
-  fontSize: '16px',
-  fontWeight: 600,
+export const StyledTitleBarItemLabel = styled.h1(normalText, (props: { visible?: boolean }) => ({
+  fontWeight: 400,
   lineHeight: '22px',
   color: colors.white,
   padding: '0 5px',
@@ -70,10 +69,8 @@ export const StyledBackBarItemIcon = styled(ImageView)({
   },
 });
 
-export const StyledBackBarItemLabel = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 600,
+export const StyledBackBarItemLabel = styled.span(tinyText, {
+  fontWeight: 400,
   color: colors.white60,
   whiteSpace: 'nowrap',
   [StyledBackBarItemButton + ':hover &']: {
diff --git a/gui/src/renderer/components/NotificationBanner.tsx b/gui/src/renderer/components/NotificationBanner.tsx
index 01915b1240..5c6e094bda 100644
--- a/gui/src/renderer/components/NotificationBanner.tsx
+++ b/gui/src/renderer/components/NotificationBanner.tsx
@@ -4,23 +4,16 @@ import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { InAppNotificationIndicatorType } from '../../shared/notifications/notification';
 import * as AppButton from './AppButton';
+import { tinyText } from './common-styles';
 import ImageView from './ImageView';
 
 const NOTIFICATION_AREA_ID = 'notification-area';
 
-export const NotificationTitle = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 800,
-  lineHeight: '18px',
+export const NotificationTitle = styled.span(tinyText, {
   color: colors.white,
 });
 
-export const NotificationSubtitleText = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 600,
-  lineHeight: '18px',
+export const NotificationSubtitleText = styled.span(tinyText, {
   color: colors.white60,
 });
 
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index 46b5a54054..db3813a005 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -83,7 +83,7 @@ export default class Preferences extends React.Component<IProps, IState> {
                   <Cell.InputLabel>
                     {messages.pgettext('preferences-view', 'Kill switch')}
                   </Cell.InputLabel>
-                  <ImageView source="icon-info" width={24} tintColor={colors.white} />
+                  <ImageView source="icon-info" width={18} tintColor={colors.white} />
                 </Cell.CellButton>
                 <StyledSeparator height={20} />
 
diff --git a/gui/src/renderer/components/RedeemVoucherStyles.tsx b/gui/src/renderer/components/RedeemVoucherStyles.tsx
index bbf20067b3..616fe098fd 100644
--- a/gui/src/renderer/components/RedeemVoucherStyles.tsx
+++ b/gui/src/renderer/components/RedeemVoucherStyles.tsx
@@ -1,23 +1,18 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { normalText, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 import ImageView from './ImageView';
 
-export const StyledLabel = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
-  fontWeight: 600,
-  lineHeight: '20px',
+export const StyledLabel = styled.span(smallText, {
   color: colors.white,
   marginBottom: '9px',
 });
 
-export const StyledInput = styled(FormattableTextInput)({
+export const StyledInput = styled(FormattableTextInput)(normalText, {
   flex: 1,
   overflow: 'hidden',
   padding: '14px',
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
   fontWeight: 600,
   lineHeight: '26px',
   color: colors.blue,
@@ -29,12 +24,9 @@ export const StyledInput = styled(FormattableTextInput)({
   },
 });
 
-export const StyledResponse = styled.span({
-  marginTop: '8px',
-  fontFamily: 'Open Sans',
-  fontSize: '13px',
+export const StyledResponse = styled.span(tinyText, {
   lineHeight: '20px',
-  fontWeight: 800,
+  marginTop: '8px',
   color: colors.white,
 });
 
@@ -69,11 +61,9 @@ export const StyledStatusIcon = styled.div({
   marginTop: '25px',
 });
 
-export const StyledTitle = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '16px',
+export const StyledTitle = styled.span(smallText, {
   lineHeight: '22px',
-  fontWeight: 800,
+  fontWeight: 400,
   color: colors.white,
   marginBottom: '5px',
 });
diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx
index c9e5b9540f..9148ca8797 100644
--- a/gui/src/renderer/components/RelayStatusIndicator.tsx
+++ b/gui/src/renderer/components/RelayStatusIndicator.tsx
@@ -11,6 +11,7 @@ const StyledRelayStatus = styled.div((props: { active: boolean }) => ({
 }));
 
 const TickIcon = styled(Cell.Icon)({
+  marginLeft: '3px',
   marginRight: '8px',
 });
 
@@ -21,7 +22,7 @@ interface IProps {
 
 export default function RelayStatusIndicator(props: IProps) {
   return props.selected ? (
-    <TickIcon tintColor={colors.white} source="icon-tick" height={24} width={24} />
+    <TickIcon tintColor={colors.white} source="icon-tick" width={18} />
   ) : (
     <StyledRelayStatus active={props.active} />
   );
diff --git a/gui/src/renderer/components/SelectLocationStyles.tsx b/gui/src/renderer/components/SelectLocationStyles.tsx
index 7c99d864ea..de09b8b872 100644
--- a/gui/src/renderer/components/SelectLocationStyles.tsx
+++ b/gui/src/renderer/components/SelectLocationStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
-import { smallText } from './common-styles';
+import { tinyText } from './common-styles';
 import { Container } from './Layout';
 import { ScopeBar } from './ScopeBar';
 import SettingsHeader from './SettingsHeader';
@@ -52,8 +52,7 @@ export const StyledFilterMenu = styled.div({
   zIndex: 2,
 });
 
-export const StyledFilterByProviderButton = styled.button({
-  ...smallText,
+export const StyledFilterByProviderButton = styled.button(tinyText, {
   borderWidth: 0,
   margin: 0,
   cursor: 'default',
@@ -73,14 +72,14 @@ export const StyledSettingsHeader = styled(SettingsHeader)({
 });
 
 export const StyledProviderCountRow = styled.div({
-  ...smallText,
+  ...tinyText,
   color: colors.white,
   marginLeft: '6px',
   marginBottom: '8px',
 });
 
 export const StyledProvidersCount = styled.div({
-  ...smallText,
+  ...tinyText,
   display: 'inline-flex',
   alignItems: 'center',
   backgroundColor: colors.blue,
diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx
index cd8bf623ea..110449c36d 100644
--- a/gui/src/renderer/components/Settings.tsx
+++ b/gui/src/renderer/components/Settings.tsx
@@ -22,6 +22,7 @@ import {
   StyledNavigationScrollbars,
   StyledOutOfTimeSubText,
   StyledQuitButton,
+  StyledSettingsContent,
 } from './SettingsStyles';
 
 import { LoginState } from '../redux/account/reducers';
@@ -74,7 +75,7 @@ export default class Settings extends React.Component<IProps> {
               </NavigationItems>
             </NavigationBar>
 
-            <StyledNavigationScrollbars>
+            <StyledNavigationScrollbars fillContainer>
               <StyledContent>
                 {showLargeTitle && (
                   <SettingsHeader>
@@ -82,12 +83,14 @@ export default class Settings extends React.Component<IProps> {
                   </SettingsHeader>
                 )}
 
-                {this.renderTopButtons()}
-                {this.renderMiddleButtons()}
-                {this.renderBottomButtons()}
-
-                {this.renderQuitButton()}
+                <StyledSettingsContent>
+                  {this.renderTopButtons()}
+                  {this.renderMiddleButtons()}
+                  {this.renderBottomButtons()}
+                </StyledSettingsContent>
               </StyledContent>
+
+              {this.renderQuitButton()}
             </StyledNavigationScrollbars>
           </NavigationContainer>
         </StyledContainer>
@@ -177,7 +180,7 @@ export default class Settings extends React.Component<IProps> {
         ? inconsistentVersionMessage
         : updateAvailableMessage;
 
-      icon = <StyledCellIcon source="icon-alert" tintColor={colors.red} />;
+      icon = <StyledCellIcon source="icon-alert" width={18} tintColor={colors.red} />;
       footer = (
         <Cell.Footer>
           <Cell.FooterText>{message}</Cell.FooterText>
diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx
index 64bcfec595..bf7dea7e3e 100644
--- a/gui/src/renderer/components/SettingsHeader.tsx
+++ b/gui/src/renderer/components/SettingsHeader.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { bigText, smallText } from './common-styles';
+import { colors } from '../../config.json';
+import { hugeText, tinyText } from './common-styles';
 
 export const Container = styled.div({
   flex: 0,
@@ -13,8 +14,10 @@ export const ContentWrapper = styled.div({
   },
 });
 
-export const HeaderTitle = styled.span(bigText);
-export const HeaderSubTitle = styled.span(smallText);
+export const HeaderTitle = styled.span(hugeText);
+export const HeaderSubTitle = styled.span(tinyText, {
+  color: colors.white60,
+});
 
 interface ISettingsHeaderProps {
   children?: React.ReactNode;
diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx
index 80738638b4..4061d1cded 100644
--- a/gui/src/renderer/components/SettingsStyles.tsx
+++ b/gui/src/renderer/components/SettingsStyles.tsx
@@ -25,10 +25,14 @@ export const StyledContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  justifyContent: 'space-between',
   overflow: 'visible',
 });
 
+export const StyledSettingsContent = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
 export const StyledCellSpacer = styled.div({
   height: '20px',
   minHeight: '20px',
diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index a0ea98bcd9..aff86a3f79 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -42,12 +42,12 @@ import {
   StyledNoResultText,
   StyledSearchContainer,
   StyledNoResult,
-  StyledNoResultSearchTerm,
   StyledDisabledWarning,
   StyledActionIcon,
   StyledCellWarningIcon,
   StyledListContainer,
 } from './SplitTunnelingSettingsStyles';
+import { formatMarkdown } from '../markdown-formatter';
 
 export default function SplitTunneling() {
   const { pop } = useHistory();
@@ -281,7 +281,7 @@ function LinuxApplicationRow(props: ILinuxApplicationRowProps) {
         )}
         <StyledCellLabel lookDisabled={disabled}>{props.application.name}</StyledCellLabel>
         {props.application.warning && (
-          <StyledCellWarningIcon source="icon-alert" tintColor={warningColor} />
+          <StyledCellWarningIcon source="icon-alert" tintColor={warningColor} width={18} />
         )}
       </StyledCellButton>
       {showWarning && (
@@ -385,17 +385,6 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
   const showNonSplitSection =
     !filteredNonSplitApplications || filteredNonSplitApplications.length > 0;
 
-  const noResultTextParts = messages
-    .pgettext('split-tunneling-view', 'No result for %(searchTerm)s.')
-    .split('%(searchTerm)s', 2);
-  const noResult = (
-    <>
-      <span>{noResultTextParts[0]}</span>
-      <StyledNoResultSearchTerm>{searchTerm}</StyledNoResultSearchTerm>
-      <span>{noResultTextParts[1]}</span>
-    </>
-  );
-
   return (
     <>
       <SettingsHeader>
@@ -451,7 +440,14 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
 
       {searchTerm !== '' && !showSplitSection && !showNonSplitSection && (
         <StyledNoResult>
-          <StyledNoResultText>{noResult}</StyledNoResultText>
+          <StyledNoResultText>
+            {formatMarkdown(
+              sprintf(
+                messages.pgettext('split-tunneling-view', 'No result for **%(searchTerm)s**.'),
+                { searchTerm },
+              ),
+            )}
+          </StyledNoResultText>
           <StyledNoResultText>
             {messages.pgettext('split-tunneling-view', 'Try a different search.')}
           </StyledNoResultText>
@@ -527,8 +523,7 @@ function ApplicationRow<T extends IApplication>(props: IApplicationRowProps<T>)
       {props.onSelect && (
         <StyledActionIcon
           source="icon-add"
-          width={24}
-          height={24}
+          width={18}
           onClick={onSelect}
           tintColor={colors.white40}
           tintHoverColor={colors.white60}
@@ -537,8 +532,7 @@ function ApplicationRow<T extends IApplication>(props: IApplicationRowProps<T>)
       {props.onRemove && (
         <StyledActionIcon
           source="icon-remove"
-          width={24}
-          height={24}
+          width={18}
           onClick={onRemove}
           tintColor={colors.white40}
           tintHoverColor={colors.white60}
@@ -580,7 +574,7 @@ function SearchBar(props: ISearchBarProps) {
       <StyledSearchIcon source="icon-filter" width={24} tintColor={colors.white60} />
       {props.searchTerm.length > 0 && (
         <StyledClearButton onClick={onClear}>
-          <StyledClearIcon source="icon-close-sml" width={16} tintColor={colors.white40} />
+          <StyledClearIcon source="icon-close" width={18} tintColor={colors.white40} />
         </StyledClearButton>
       )}
     </StyledSearchContainer>
diff --git a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 239b3fe560..b907171d8d 100644
--- a/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { mediumText, smallText } from './common-styles';
+import { normalText, smallText } from './common-styles';
 import ImageView from './ImageView';
 import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
@@ -52,13 +52,12 @@ export const StyledActionIcon = styled(ImageView)({
 });
 
 export const StyledCellWarningIcon = styled(Cell.Icon)({
-  marginLeft: '6px',
+  marginLeft: '9px',
+  marginRight: '3px',
 });
 
-export const StyledCellLabel = styled(Cell.Label)(disabledApplication, {
-  fontFamily: 'Open Sans',
-  fontWeight: 'normal',
-  fontSize: '16px',
+export const StyledCellLabel = styled(Cell.Label)(disabledApplication, normalText, {
+  fontWeight: 400,
   wordWrap: 'break-word',
   overflow: 'hidden',
 });
@@ -97,7 +96,7 @@ export const StyledSearchContainer = styled.div({
 });
 
 export const StyledSearchInput = styled.input.attrs({ type: 'text' })({
-  ...mediumText,
+  ...normalText,
   width: 'calc(100% - 22px * 2)',
   border: 'none',
   borderRadius: '4px',
@@ -160,10 +159,6 @@ export const StyledNoResultText = styled(Cell.FooterText)({
   textAlign: 'center',
 });
 
-export const StyledNoResultSearchTerm = styled.span({
-  fontWeight: 'bold',
-});
-
 export const StyledDisabledWarning = styled.span(smallText, {
   margin: '0 22px 18px',
   color: colors.red,
diff --git a/gui/src/renderer/components/SupportStyles.tsx b/gui/src/renderer/components/SupportStyles.tsx
index ebaf5e0e8a..b3de7ebcb1 100644
--- a/gui/src/renderer/components/SupportStyles.tsx
+++ b/gui/src/renderer/components/SupportStyles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
-import { bigText, smallText } from './common-styles';
+import { hugeText, smallText } from './common-styles';
 import { Container } from './Layout';
 
 export const StyledBlueButton = styled(AppButton.BlueButton)({
@@ -53,10 +53,12 @@ const input = {
 
 export const StyledEmailInput = styled.input.attrs({ type: 'email' })(smallText, input, {
   lineHeight: '26px',
+  fontWeight: 400,
 });
 
 export const StyledMessageInput = styled.textarea(smallText, input, {
   resize: 'none',
+  fontWeight: 400,
 });
 
 export const StyledFooter = styled.div({
@@ -86,6 +88,6 @@ export const StyledEmail = styled.span({
   color: colors.white,
 });
 
-export const StyledSendStatus = styled.span(bigText, {
+export const StyledSendStatus = styled.span(hugeText, {
   marginBottom: '4px',
 });
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 441e95bbb1..af6680139d 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -5,7 +5,7 @@ import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages, relayLocations } from '../../shared/gettext';
 import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
-import { bigText } from './common-styles';
+import { hugeText, normalText } from './common-styles';
 import ImageView from './ImageView';
 import Marquee from './Marquee';
 import { MultiButton } from './MultiButton';
@@ -27,10 +27,8 @@ const SwitchLocationButton = styled(AppButton.TransparentButton)({
   marginBottom: '18px',
 });
 
-const Secured = styled(SecuredLabel)({
-  fontFamily: 'Open Sans',
-  fontSize: '16px',
-  fontWeight: 800,
+const Secured = styled(SecuredLabel)(normalText, {
+  fontWeight: 700,
   lineHeight: '22px',
   marginBottom: '2px',
 });
@@ -64,8 +62,7 @@ const Location = styled.div({
   marginBottom: 2,
 });
 
-const StyledMarquee = styled(Marquee)({
-  ...bigText,
+const StyledMarquee = styled(Marquee)(hugeText, {
   lineHeight: '36px',
   overflow: 'hidden',
 });
diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx
index e627f16437..cf443b2fa5 100644
--- a/gui/src/renderer/components/WireguardKeysStyles.tsx
+++ b/gui/src/renderer/components/WireguardKeysStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { colors } from '../../config.json';
-import { smallText } from './common-styles';
+import { normalText, smallText, tinyText } from './common-styles';
 import { Container } from './Layout';
 import { NavigationScrollbars } from './NavigationBar';
 
@@ -24,7 +24,7 @@ export const StyledMessages = styled.div({
 });
 
 export const StyledMessage = styled.span(smallText, (props: { success: boolean }) => ({
-  fontWeight: props.success ? 600 : 800,
+  fontWeight: props.success ? 600 : 700,
   color: props.success ? colors.green : colors.red,
 }));
 
@@ -43,20 +43,17 @@ export const StyledLastButtonRow = styled(StyledButtonRow)({
   marginBottom: '22px',
 });
 
-export const StyledRowLabel = styled.span(smallText, {
-  display: 'flex',
+export const StyledRowLabel = styled.span(tinyText, {
   color: colors.white60,
-  marginBottom: '9px',
+  lineHeight: '20px',
+  marginBottom: '5px',
 });
 
 export const StyledRowLabelSpacer = styled.div({
   flex: 1,
 });
 
-export const StyledRowValue = styled.span({
-  fontFamily: 'Open Sans',
-  fontSize: '16px',
-  lineHeight: '19px',
-  fontWeight: 800,
+export const StyledRowValue = styled.span(normalText, {
+  fontWeight: 600,
   color: colors.white,
 });
diff --git a/gui/src/renderer/components/cell/CellButton.tsx b/gui/src/renderer/components/cell/CellButton.tsx
index 993ac8bf23..1295b7783a 100644
--- a/gui/src/renderer/components/cell/CellButton.tsx
+++ b/gui/src/renderer/components/cell/CellButton.tsx
@@ -19,6 +19,7 @@ const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => {
 
   return {
     display: 'flex',
+    minHeight: '44px',
     padding: '0 16px 0 22px',
     marginBottom: '1px',
     flex: 1,
diff --git a/gui/src/renderer/components/cell/Footer.tsx b/gui/src/renderer/components/cell/Footer.tsx
index 2f0dacd10f..87a899cae8 100644
--- a/gui/src/renderer/components/cell/Footer.tsx
+++ b/gui/src/renderer/components/cell/Footer.tsx
@@ -1,11 +1,14 @@
 import styled from 'styled-components';
-import { smallText } from '../common-styles';
+import { colors } from '../../../config.json';
+import { tinyText } from '../common-styles';
 
 export const Footer = styled.div({
   padding: '6px 22px 20px',
 });
 
-export const FooterText = styled.span(smallText);
+export const FooterText = styled.span(tinyText, {
+  color: colors.white60,
+});
 
 export const FooterBoldText = styled(FooterText)({
   fontWeight: 900,
diff --git a/gui/src/renderer/components/cell/Input.tsx b/gui/src/renderer/components/cell/Input.tsx
index 4215f6e96e..913fb26ece 100644
--- a/gui/src/renderer/components/cell/Input.tsx
+++ b/gui/src/renderer/components/cell/Input.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { colors } from '../../../config.json';
-import { mediumText } from '../common-styles';
+import { normalText } from '../common-styles';
 import { CellDisabledContext, Container } from './Container';
 import StandaloneSwitch from '../Switch';
 import ImageView from '../ImageView';
@@ -16,9 +16,8 @@ export const Switch = React.forwardRef(function SwitchT(
 });
 
 const inputTextStyles: React.CSSProperties = {
-  ...mediumText,
-  fontWeight: 600,
-  height: '28px',
+  ...normalText,
+  height: '18px',
   textAlign: 'right',
   padding: '0px',
 };
@@ -151,7 +150,7 @@ const InputFrame = styled.div((props: { focused: boolean }) => ({
   flexGrow: 0,
   backgroundColor: props.focused ? colors.white : 'rgba(255,255,255,0.1)',
   borderRadius: '4px',
-  padding: '4px 8px',
+  padding: '6px 8px',
 }));
 
 const StyledAutoSizingTextInputContainer = styled.div({
@@ -229,24 +228,22 @@ const StyledCellInputRowContainer = styled(Container)({
 const StyledSubmitButton = styled.button({
   border: 'none',
   backgroundColor: 'transparent',
-  padding: '14px 0',
+  padding: '10px 0',
 });
 
-const StyledInputWrapper = styled.div({}, (props: { marginLeft: number }) => ({
+const StyledInputWrapper = styled.div(normalText, (props: { marginLeft: number }) => ({
   position: 'relative',
   flex: 1,
   width: '171px',
   marginLeft: props.marginLeft + 'px',
   lineHeight: '24px',
   minHeight: '24px',
-  fontFamily: 'Open Sans',
-  fontWeight: 'normal',
-  fontSize: '16px',
-  padding: '14px 0',
+  fontWeight: 400,
+  padding: '10px 0',
   maxWidth: '100%',
 }));
 
-const StyledTextArea = styled.textarea({}, (props: { invalid?: boolean }) => ({
+const StyledTextArea = styled.textarea(normalText, (props: { invalid?: boolean }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
@@ -256,11 +253,9 @@ const StyledTextArea = styled.textarea({}, (props: { invalid?: boolean }) => ({
   border: 'none',
   flex: 1,
   lineHeight: '24px',
-  fontFamily: 'Open Sans',
-  fontWeight: 'normal',
-  fontSize: '16px',
+  fontWeight: 400,
   resize: 'none',
-  padding: '14px 25px 14px 0',
+  padding: '10px 25px 10px 0',
   color: props.invalid ? colors.red : 'auto',
 }));
 
@@ -361,7 +356,7 @@ export function RowInput(props: IRowInputProps) {
       <StyledSubmitButton onClick={submit}>
         <ImageView
           source="icon-check"
-          height={22}
+          height={18}
           tintColor={value === '' ? colors.blue60 : colors.blue}
           tintHoverColor={value === '' ? colors.blue60 : colors.blue80}
         />
diff --git a/gui/src/renderer/components/cell/Label.tsx b/gui/src/renderer/components/cell/Label.tsx
index 21c17cde13..5df99922fb 100644
--- a/gui/src/renderer/components/cell/Label.tsx
+++ b/gui/src/renderer/components/cell/Label.tsx
@@ -1,21 +1,20 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { colors } from '../../../config.json';
-import { buttonText, smallText } from '../common-styles';
+import { buttonText, tinyText } from '../common-styles';
 import ImageView, { IImageViewProps } from '../ImageView';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
 
 const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({
-  margin: '14px 0',
+  margin: '10px 0',
   flex: 1,
   color: props.disabled ? colors.white40 : colors.white,
   textAlign: 'left',
 }));
 
-const StyledSubText = styled.span(smallText, (props: { disabled: boolean }) => ({
+const StyledSubText = styled.span(tinyText, (props: { disabled: boolean }) => ({
   color: props.disabled ? colors.white20 : colors.white60,
-  fontWeight: 800,
   flex: -1,
   textAlign: 'right',
   marginLeft: '8px',
diff --git a/gui/src/renderer/components/cell/Section.tsx b/gui/src/renderer/components/cell/Section.tsx
index 25bef54df5..b0978cf98e 100644
--- a/gui/src/renderer/components/cell/Section.tsx
+++ b/gui/src/renderer/components/cell/Section.tsx
@@ -9,8 +9,11 @@ const StyledSection = styled.div({
 });
 
 export const SectionTitle = styled.span(buttonText, {
+  display: 'flex',
+  minHeight: '44px',
+  alignItems: 'center',
   backgroundColor: colors.blue,
-  padding: '14px 16px 14px 22px',
+  padding: '0 16px 0 22px',
   marginBottom: '1px',
 });
 
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index 68507b4591..53ac9a15f4 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { colors } from '../../../config.json';
 import { AriaInput, AriaLabel } from '../AriaGroup';
 import * as Cell from '.';
+import { normalText } from '../common-styles';
 
 export interface ISelectorItem<T> {
   label: string;
@@ -67,10 +68,8 @@ const StyledCellIcon = styled(Cell.Icon)((props: { visible: boolean }) => ({
   marginRight: '8px',
 }));
 
-const StyledLabel = styled(Cell.Label)({
-  fontFamily: 'Open Sans',
-  fontWeight: 'normal',
-  fontSize: '16px',
+const StyledLabel = styled(Cell.Label)(normalText, {
+  fontWeight: 400,
 });
 
 interface ISelectorCellProps<T> {
@@ -96,8 +95,7 @@ class SelectorCell<T> extends React.Component<ISelectorCellProps<T>> {
         <StyledCellIcon
           visible={this.props.selected}
           source="icon-tick"
-          width={24}
-          height={24}
+          width={18}
           tintColor={colors.white}
         />
         <StyledLabel>{this.props.children}</StyledLabel>
diff --git a/gui/src/renderer/components/common-styles.ts b/gui/src/renderer/components/common-styles.ts
index 76f6a0529e..a5da3fcda0 100644
--- a/gui/src/renderer/components/common-styles.ts
+++ b/gui/src/renderer/components/common-styles.ts
@@ -7,33 +7,52 @@ export const openSans: React.CSSProperties = {
 
 export const sourceSansPro: React.CSSProperties = {
   fontFamily: '"Source Sans Pro", "Noto Sans Myanmar", "Noto Sans Thai", sans-serif',
-  fontWeight: 'bold',
+};
+
+export const tinyText = {
+  ...openSans,
+  fontSize: '12px',
+  fontWeight: 600,
+  lineHeight: '18px',
 };
 
 export const smallText = {
   ...openSans,
-  fontSize: '13px',
+  fontSize: '14px',
   fontWeight: 600,
   lineHeight: '20px',
   color: colors.white80,
 };
 
-export const mediumText = {
+export const normalText = {
   ...openSans,
+  fontSize: '15px',
+  lineHeight: '18px',
+};
+
+export const largeText = {
+  ...sourceSansPro,
+  fontWeight: 600,
   fontSize: '18px',
   lineHeight: '24px',
 };
 
 export const buttonText = {
-  ...sourceSansPro,
-  fontSize: '20px',
-  lineHeight: '24px',
+  ...largeText,
   color: colors.white,
 };
 
 export const bigText = {
   ...sourceSansPro,
+  fontSize: '24px',
+  fontWeight: 700,
+  lineHeight: '28px',
+};
+
+export const hugeText = {
+  ...sourceSansPro,
   fontSize: '32px',
+  fontWeight: 700,
   lineHeight: '34px',
   color: colors.white,
 };
diff --git a/gui/src/renderer/markdown-formatter.tsx b/gui/src/renderer/markdown-formatter.tsx
index f455a882c4..b6b18c62d6 100644
--- a/gui/src/renderer/markdown-formatter.tsx
+++ b/gui/src/renderer/markdown-formatter.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 const boldSyntax = '**';
-const Bold = styled.span({ fontWeight: 'bold' });
+const Bold = styled.span({ fontWeight: 700 });
 
 export function formatMarkdown(inputString: string): React.ReactElement {
   const formattedString = inputString