Dark theme

2019-09-09 10:34:55 -07:00 · 2019-09-09 10:34:55 -07:00 · c71c246959
parent ea1ea2aa68
commit c71c246959
37 changed files with 363 additions and 215 deletions
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-# [![Firefox Send](./assets/logo.svg)](https://send.firefox.com/)
+# [![Firefox Send](./assets/icon.svg)](https://send.firefox.com/) Firefox Send

 [![CircleCI](https://img.shields.io/circleci/project/github/mozilla/send.svg)](https://circleci.com/gh/mozilla/send)

--- a/android/android.js
+++ b/android/android.js
@ -60,9 +60,7 @@ function body(main) {
      </a>`;
    */
    return html`
-      <body
-        class="flex flex-col items-center font-sans bg-grey-lightest h-screen"
-      >
+      <body class="flex flex-col items-center font-sans bg-grey-10 h-screen">
        ${state.cache(Header, 'header').render()} ${main(state, emit)}
      </body>
    `;
--- a/android/pages/home.js
+++ b/android/pages/home.js
@ -25,7 +25,7 @@ module.exports = function(state, emit) {
  let content = '';
  let button = html`
    <div
-      class="bg-blue rounded-full m-4 flex items-center justify-center shadow-lg"
+      class="bg-blue-50 rounded-full m-4 flex items-center justify-center shadow-lg"
      style="width: 56px; height: 56px"
      onclick="${onclick}"
    >
--- a/app/main.css
+++ b/app/main.css
@ -39,7 +39,7 @@ body {
 }

 .btn {
-  @apply bg-blue-dark;
+  @apply bg-blue-60;
  @apply text-white;
  @apply cursor-pointer;
  @apply py-4;
@ -48,11 +48,11 @@ body {
 }

 .btn:hover {
-  @apply bg-blue-darker;
+  @apply bg-blue-70;
 }

 .btn:focus {
-  @apply bg-blue-darker;
+  @apply bg-blue-70;
 }

 .checkbox {
@ -70,7 +70,7 @@ body {
 }

 .checkbox > label::before {
-  /* @apply bg-grey-lightest; */
+  /* @apply bg-grey-10; */
  @apply border;
  @apply rounded-sm;

@ -82,16 +82,16 @@ body {
 }

 .checkbox > label:hover::before {
-  @apply border-blue-dark;
+  @apply border-blue-50;
 }

 .checkbox > input:focus + label::before {
-  @apply border-blue-dark;
+  @apply border-blue-50;
 }

 .checkbox > input:checked + label::before {
-  @apply bg-blue-dark;
-  @apply border-blue-dark;
+  @apply bg-blue-50;
+  @apply border-blue-50;

  background-image: url('../assets/lock.svg');
  background-position: center;
@ -104,8 +104,8 @@ body {
 }

 .checkbox > input:disabled + label::before {
-  @apply bg-blue-dark;
-  @apply border-blue-dark;
+  @apply bg-blue-50;
+  @apply border-blue-50;

  background-image: url('../assets/lock.svg');
  background-position: center;
@ -153,9 +153,21 @@ footer li:hover {
  white-space: nowrap;
 }

+.link-blue {
+  @apply text-blue-60;
+}
+
+.link-blue:hover {
+  @apply text-blue-70;
+}
+
+.link-blue:focus {
+  @apply text-blue-70;
+}
+
 .main-header img {
  height: 32px;
-  width: 170px;
+  width: auto;
 }

 .intro {
@ -193,14 +205,14 @@ footer li:hover {
 }

 progress {
-  @apply bg-grey-light;
+  @apply bg-grey-30;
  @apply rounded-sm;
  @apply w-full;
  @apply h-1;
 }

 progress::-webkit-progress-bar {
-  @apply bg-grey-light;
+  @apply bg-grey-30;
  @apply rounded-sm;
  @apply w-full;
  @apply h-1;
@ -290,6 +302,55 @@ select {
  }
 }

+@screen dark {
+  body {
+    @apply text-grey-10;
+
+    background-image: unset;
+  }
+
+  .btn {
+    @apply bg-blue-40;
+    @apply text-white;
+  }
+
+  .btn:hover {
+    @apply bg-blue-50;
+  }
+
+  .btn:focus {
+    @apply bg-blue-50;
+  }
+
+  .link-blue {
+    @apply text-blue-40;
+  }
+
+  .link-blue:hover {
+    @apply text-blue-50;
+  }
+
+  .link-blue:focus {
+    @apply text-blue-50;
+  }
+
+  .main > section {
+    @apply bg-grey-90;
+  }
+
+  .mozilla-logo {
+    background-color: white;
+    border: 1px solid white;
+  }
+
+  @screen md {
+    .main > section {
+      @apply border;
+      @apply border-grey-80;
+    }
+  }
+}
+
@tailwind utilities;

@responsive {
@ -325,8 +386,6 @@ select {

 .signin:hover,
 .signin:focus {
-  @apply shadow-btn;
-
  transform: scale(1.0625);
 }

@ -337,19 +396,19 @@ select {
 /* begin signin button color experiment */

 .white-blue {
-  @apply border-blue-dark;
+  @apply border-blue-60;
  @apply border-2;
-  @apply text-blue-dark;
+  @apply text-blue-60;
 }

 .white-blue:hover,
 .white-blue:focus {
-  @apply bg-blue-dark;
+  @apply bg-blue-60;
  @apply text-white;
 }

 .blue {
-  @apply bg-blue-dark;
+  @apply bg-blue-60;
  @apply text-white;
 }

--- a/app/ui/account.js
+++ b/app/ui/account.js
@ -64,8 +64,7 @@ class Account extends Component {
      return html`
        <send-account>
          <button
-            class="px-4 py-2 md:px-8 md:py-4 focus:outline signin ${this
-              .buttonClass}"
+            class="px-4 py-2 md:px-8 md:py-4 focus:outline signin border-2 link-blue border-blue-60 hover:border-blue-70 dark:border-blue-40 dark:hover:border-blue-50"
            onclick="${e => this.login(e)}"
            title="${translate('signInOnlyButton')}"
          >
@ -79,19 +78,19 @@ class Account extends Component {
        <input
          type="image"
          alt="${user.email}"
-          class="w-8 h-8 rounded-full border text-blue md:text-white focus:outline"
+          class="w-8 h-8 rounded-full border text-blue-50 md:text-white focus:outline"
          src="${user.avatar}"
          onclick="${e => this.avatarClick(e)}"
        />
        <ul
          id="accountMenu"
-          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50"
+          class="invisible absolute top-0 right-0 mt-10 pt-2 pb-2 bg-white shadow-md whitespace-no-wrap outline-none z-50 dark:bg-grey-80"
          onblur="${e => this.hideMenu(e)}"
        >
-          <li class="p-2 text-grey-dark">${user.email}</li>
+          <li class="p-2 text-grey-60 dark:text-grey-50">${user.email}</li>
          <li>
            <button
-              class="block w-full text-left px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer focus:outline"
+              class="block w-full text-left px-4 py-2 text-grey-80 dark:text-grey-30 hover:bg-blue-50 hover:text-white cursor-pointer focus:outline"
              onclick="${e => this.logout(e)}"
              title="${translate('signOut')}"
            >
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@ -46,7 +46,7 @@ function password(state) {
        id="password-input"
        class="${state.archive.password
          ? ''
-          : 'invisible'} border rounded focus:border-blue-dark leading-normal my-1 py-1 px-2 h-8"
+          : 'invisible'} border rounded focus:border-blue-60 leading-normal my-1 py-1 px-2 h-8 dark:bg-grey-80"
        autocomplete="off"
        maxlength="${MAX_LENGTH}"
        type="password"
@ -58,7 +58,7 @@ function password(state) {
      <label
        id="password-msg"
        for="password-input"
-        class="block text-xs text-grey-darker"
+        class="block text-xs text-grey-70"
      ></label>
    </div>
  `;
@ -106,7 +106,9 @@ function password(state) {
 function fileInfo(file, action) {
  return html`
    <send-file class="flex flex-row items-center p-3 w-full">
-      <img class="h-8" src="${assets.get('blue_file.svg')}"/>
+      <svg class="h-8 w-8 text-white dark:text-grey-90">
+        <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
+      </svg>
      <p class="ml-4 w-full">
        <h1 class="text-base font-medium word-break-all">${file.name}</h1>
        <div class="text-sm font-normal opacity-75 pt-1">${bytes(
@ -120,7 +122,9 @@ function fileInfo(file, action) {
 function archiveInfo(archive, action) {
  return html`
    <p class="w-full flex items-center">
-      <img class="mr-3 flex-shrink-0" src="${assets.get('blue_file.svg')}"/>
+      <svg class="h-8 w-6 mr-3 flex-shrink-0 text-white dark:text-grey-90">
+        <use xlink:href="${assets.get('blue_file.svg')}#icon"/>
+      </svg>
      <p class="flex-grow">
        <h1 class="text-base font-medium word-break-all">${archive.name}</h1>
        <div class="text-sm font-normal opacity-75 pt-1">${bytes(
@ -140,7 +144,7 @@ function archiveDetails(translate, archive) {
        ontoggle="${toggled}"
      >
        <summary
-          class="flex items-center text-blue-dark text-sm cursor-pointer outline-none"
+          class="flex items-center link-blue text-sm cursor-pointer outline-none"
        >
          <svg
            class="fill-current w-4 h-4 mr-1"
@ -170,20 +174,25 @@ module.exports = function(state, emit, archive) {
    state.capabilities.share || platform() === 'android'
      ? html`
          <button
-            class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-end"
+            class="link-blue self-end flex items-start"
            onclick=${share}
            title="Share link"
          >
-            <img src="${assets.get('share-24.svg')}" class="mr-2" />Share link
+            <svg class="h-4 w-4 mr-2">
+              <use xlink:href="${assets.get('share-24.svg')}#icon" />
+            </svg>
+            Share link
          </button>
        `
      : html`
          <button
-            class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center"
+            class="link-blue focus:outline self-end flex items-center"
            onclick=${copy}
            title="${state.translate('copyLinkButton')}"
          >
-            <img src="${assets.get('copy-16.svg')}" class="mr-2" />
+            <svg class="h-4 w-4 mr-2">
+              <use xlink:href="${assets.get('copy-16.svg')}#icon" />
+            </svg>
            ${state.translate('copyLinkButton')}
          </button>
        `;
@ -191,12 +200,14 @@ module.exports = function(state, emit, archive) {
    platform() === 'web'
      ? html`
          <a
-            class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker"
+            class="flex items-baseline link-blue"
            href="${archive.url}"
            title="${state.translate('downloadButtonLabel')}"
            tabindex="0"
          >
-            <img src="${assets.get('dl.svg')}" class="mr-2" />
+            <svg class="h-4 w-3 mr-2">
+              <use xlink:href="${assets.get('dl.svg')}#icon" />
+            </svg>
            ${state.translate('downloadButtonLabel')}
          </a>
        `
@ -206,7 +217,7 @@ module.exports = function(state, emit, archive) {
  return html`
    <send-archive
      id="archive-${archive.id}"
-      class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
+      class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90 dark:border dark:border-grey-70"
    >
      ${archiveInfo(
        archive,
@ -225,7 +236,7 @@ module.exports = function(state, emit, archive) {
        ${expiryInfo(state.translate, archive)}
      </div>
      ${archiveDetails(state.translate, archive)}
-      <hr class="w-full border-t my-4" />
+      <hr class="w-full border-t my-4 dark:border-grey-70" />
      <div class="flex justify-between w-full">
        ${dl} ${copyOrShare}
      </div>
@ -269,18 +280,21 @@ module.exports = function(state, emit, archive) {

 module.exports.wip = function(state, emit) {
  return html`
-    <send-upload-area class="flex flex-col bg-white h-full w-full" id="wip">
+    <send-upload-area
+      class="flex flex-col bg-white h-full w-full dark:bg-grey-90"
+      id="wip"
+    >
      ${list(
        Array.from(state.archive.files)
          .reverse()
          .map(f =>
            fileInfo(f, remove(f, state.translate('deleteButtonHover')))
          ),
-        'flex-shrink bg-grey-lightest rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
-        'bg-white px-2 my-2 shadow-light rounded'
+        'flex-shrink bg-grey-10 rounded-t overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen dark:bg-black',
+        'bg-white px-2 my-2 shadow-light rounded dark:bg-grey-90 dark:border dark:border-grey-80'
      )}
      <div
-        class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-lightest rounded-b mb-1 font-medium"
+        class="flex-shrink-0 flex-grow flex items-end p-4 bg-grey-10 rounded-b mb-1 font-medium dark:bg-grey-90"
      >
        <input
          id="file-upload"
@ -300,10 +314,12 @@ module.exports.wip = function(state, emit) {
            class="flex items-center cursor-pointer"
            title="${state.translate('addFilesButton')}"
          >
-            <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" />
+            <svg class="w-6 h-6 mr-2 link-blue">
+              <use xlink:href="${assets.get('addfiles.svg')}#plus" />
+            </svg>
            ${state.translate('addFilesButton')}
          </label>
-          <div class="font-normal text-sm text-grey-darker">
+          <div class="font-normal text-sm text-grey-70 dark:text-grey-40">
            ${state.translate('totalSize', {
              size: bytes(state.archive.size)
            })}
@ -378,22 +394,22 @@ module.exports.uploading = function(state, emit) {
  return html`
    <send-upload-area
      id="${archive.id}"
-      class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full"
+      class="flex flex-col items-start rounded shadow-light bg-white p-4 w-full dark:bg-grey-90"
    >
      ${archiveInfo(archive)}
-      <div class="text-xs text-grey-dark w-full mt-2 mb-2">
+      <div class="text-xs opacity-75 w-full mt-2 mb-2">
        ${expiryInfo(state.translate, {
          dlimit: state.archive.dlimit,
          dtotal: 0,
          expiresAt: Date.now() + 500 + state.archive.timeLimit * 1000
        })}
      </div>
-      <div class="text-blue-dark text-sm font-medium mt-2">
+      <div class="link-blue text-sm font-medium mt-2">
        ${progressPercent}
      </div>
      <progress class="my-3" value="${progress}">${progressPercent}</progress>
      <button
-        class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
+        class="link-blue self-end font-medium"
        onclick=${cancel}
        title="${state.translate('deletePopupCancel')}"
      >
@ -415,7 +431,7 @@ module.exports.empty = function(state, emit) {
      ? ''
      : html`
          <button
-            class="center font-medium text-sm text-blue-dark hover:text-blue-darker focus:text-blue-darker mt-4 mb-2"
+            class="center font-medium text-sm link-blue mt-4 mb-2"
            onclick="${event => {
              event.stopPropagation();
              emit('signup-cta', 'drop');
@ -428,14 +444,16 @@ module.exports.empty = function(state, emit) {
        `;
  return html`
    <send-upload-area
-      class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full"
+      class="flex flex-col items-center justify-center border-2 border-dashed border-grey-transparent rounded px-6 py-16 h-full w-full dark:border-grey-60"
      onclick="${e => {
        if (e.target.tagName !== 'LABEL') {
          document.getElementById('file-upload').click();
        }
      }}"
    >
-      <img src="${assets.get('addfiles.svg')}" width="48" height="48" />
+      <svg class="w-10 h-10 link-blue">
+        <use xlink:href="/${assets.get('addfiles.svg')}#plus" />
+      </svg>
      <div class="pt-6 pb-2 text-center text-lg font-bold tracking-wide">
        ${state.translate('dragAndDropFiles')}
      </div>
@ -469,14 +487,11 @@ module.exports.empty = function(state, emit) {
  `;

  function focus(event) {
-    event.target.nextElementSibling.classList.add('bg-blue-darker', 'outline');
+    event.target.nextElementSibling.classList.add('bg-blue-70', 'outline');
  }

  function blur(event) {
-    event.target.nextElementSibling.classList.remove(
-      'bg-blue-darker',
-      'outline'
-    );
+    event.target.nextElementSibling.classList.remove('bg-blue-70', 'outline');
  }

  function add(event) {
@ -501,8 +516,10 @@ module.exports.preview = function(state, emit) {
        </div>
      `;
  return html`
-    <send-archive class="flex flex-col max-h-full bg-white p-4 w-full md:w-128">
-      <div class="border rounded py-3 px-6">
+    <send-archive
+      class="flex flex-col max-h-full bg-white p-4 w-full md:w-128 dark:bg-grey-90"
+    >
+      <div class="border rounded py-3 px-6 dark:border-grey-70">
        ${archiveInfo(archive)} ${details}
      </div>
      <button
@ -529,10 +546,10 @@ module.exports.downloading = function(state) {
  const progressPercent = percent(progress);
  return html`
    <send-archive
-      class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128"
+      class="flex flex-col bg-white rounded shadow-light p-4 w-full max-w-sm md:w-128 dark:bg-grey-90"
    >
      ${archiveInfo(archive)}
-      <div class="text-blue-dark text-sm font-medium mt-2">
+      <div class="link-blue text-sm font-medium mt-2">
        ${progressPercent}
      </div>
      <progress class="my-3" value="${progress}">${progressPercent}</progress>
--- a/app/ui/body.js
+++ b/app/ui/body.js
@ -18,7 +18,7 @@ module.exports = function body(main) {
  return function(state, emit) {
    const b = html`
      <body
-        class="flex flex-col items-center font-sans md:h-screen md:bg-grey-lightest"
+        class="flex flex-col items-center font-sans md:h-screen md:bg-grey-10 dark:bg-black"
      >
        ${banner(state, emit)} ${state.cache(Header, 'header').render()}
        ${main(state, emit)} ${state.cache(Footer, 'footer').render()}
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@ -10,14 +10,16 @@ module.exports = function(name, url) {
        <h1 class="text-3xl font-bold my-4">
          ${state.translate('notifyUploadEncryptDone')}
        </h1>
-        <p class="font-normal leading-normal text-grey-darkest word-break-all">
+        <p
+          class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
+        >
          ${state.translate('copyLinkDescription')} <br />
          ${name}
        </p>
        <input
          type="text"
          id="share-url"
-          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1"
+          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
          value="${url}"
          readonly="true"
        />
@ -29,7 +31,7 @@ module.exports = function(name, url) {
          ${state.translate('copyLinkButton')}
        </button>
        <button
-          class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
+          class="link-blue my-4 font-medium cursor-pointer focus:outline"
          onclick="${close}"
          title="${state.translate('okButton')}"
        >
--- a/app/ui/download.js
+++ b/app/ui/download.js
@ -41,7 +41,9 @@ function preview(state, emit) {
      <h1 class="text-3xl font-bold mb-4">
        ${state.translate('downloadTitle')}
      </h1>
-      <p class="w-full text-grey-darkest text-center leading-normal">
+      <p
+        class="w-full text-grey-80 text-center leading-normal dark:text-grey-40"
+      >
        ${state.translate('downloadDescription')}
      </p>
      ${archiveTile.preview(state, emit)}
--- a/app/ui/downloadCompleted.js
+++ b/app/ui/downloadCompleted.js
@ -5,13 +5,13 @@ module.exports = function(state) {
  return html`
    <div
      id="download-complete"
-      class="flex flex-col items-center justify-center h-full w-full bg-white p-2"
+      class="flex flex-col items-center justify-center h-full w-full bg-white p-2 dark:bg-grey-90"
    >
      <h1 class="text-center text-3xl font-bold my-2">
        ${state.translate('downloadFinish')}
      </h1>
      <img src="${assets.get('completed.svg')}" class="my-12 h-48" />
-      <p class="text-grey-darkest leading-normal">
+      <p class="text-grey-80 leading-normal dark:text-grey-40">
        ${state.translate('trySendDescription')}
      </p>
      <p class="my-5">
--- a/app/ui/downloadPassword.js
+++ b/app/ui/downloadPassword.js
@ -6,12 +6,14 @@ module.exports = function(state, emit) {

  const div = html`
    <div
-      class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto"
+      class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto dark:bg-grey-90"
    >
      <h1 class="text-3xl font-bold mb-4">
        ${state.translate('downloadTitle')}
      </h1>
-      <p class="w-full mb-4 text-center text-grey-darkest leading-normal">
+      <p
+        class="w-full mb-4 text-center text-grey-80 dark:text-grey-40 leading-normal"
+      >
        ${state.translate('downloadDescription')}
      </p>
      <form
@ -22,8 +24,8 @@ module.exports = function(state, emit) {
        <input
          id="password-input"
          class="w-full border-l border-t border-b rounded-l-lg rounded-r-none ${invalid
-            ? 'border-red'
-            : 'border-grey'} leading-loose px-2 py-1"
+            ? 'border-red dark:border-red-40'
+            : 'border-grey'} leading-loose px-2 py-1 dark:bg-grey-80"
          maxlength="32"
          autocomplete="off"
          placeholder="${state.translate('unlockInputPlaceholder')}"
@ -34,7 +36,7 @@ module.exports = function(state, emit) {
          type="submit"
          id="password-btn"
          class="btn rounded-r-lg rounded-l-none ${invalid
-            ? 'bg-red hover:bg-red focus:bg-red'
+            ? 'bg-red hover:bg-red focus:bg-red dark:bg-red-40'
            : ''}"
          value="${state.translate('unlockButtonLabel')}"
          title="${state.translate('unlockButtonLabel')}"
@ -42,7 +44,7 @@ module.exports = function(state, emit) {
      </form>
      <label
        id="password-error"
-        class="${invalid ? '' : 'invisible'} text-red my-4"
+        class="${invalid ? '' : 'invisible'} text-red dark:text-red-40 my-4"
        for="password-input"
      >
        ${state.translate('passwordTryAgain')}
--- a/app/ui/error.js
+++ b/app/ui/error.js
@ -13,7 +13,7 @@ module.exports = function(state, emit) {
          ${state.translate('errorPageHeader')}
        </h1>
        <img class="my-12 h-48" src="${assets.get('error.svg')}" />
-        <p class="max-w-md text-center text-grey-darkest leading-normal">
+        <p class="max-w-md text-center text-grey-80 leading-normal">
          ${state.translate('trySendDescription')}
        </p>
        <p class="my-5">
--- a/app/ui/footer.js
+++ b/app/ui/footer.js
@ -19,12 +19,9 @@ class Footer extends Component {
    const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`;
    return html`
      <footer
-        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-dark md:items-center justify-between"
+        class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 md:p-8 font-medium text-xs text-grey-60 dark:text-grey-40 md:items-center justify-between"
      >
-        <a
-          class="mozilla-logo pb-10 md:pb-0 m-2"
-          href="https://www.mozilla.org/"
-        >
+        <a class="mozilla-logo m-2" href="https://www.mozilla.org/">
          Mozilla
        </a>
        <ul
--- a/app/ui/header.js
+++ b/app/ui/header.js
@ -16,15 +16,27 @@ class Header extends Component {
    this.account.render();
    return false;
  }
-
  createElement() {
    const title =
      platform() === 'android'
        ? html`
-            <a class=""><img src="${assets.get('logo.svg')}"/></a>
+            <a class="flex flex-row items-center">
+              <img src="${assets.get('icon.svg')}" />
+              <svg class="w-48">
+                <use xlink:href="${assets.get('wordmark.svg')}#logo" />
+              </svg>
+            </a>
          `
        : html`
-            <a class="" href="/"><img src="${assets.get('logo.svg')}"/></a>
+            <a class="flex flex-row items-center" href="/">
+              <img
+                alt="${this.state.translate('title')}"
+                src="${assets.get('icon.svg')}"
+              />
+              <svg class="w-48 md:w-64">
+                <use xlink:href="${assets.get('wordmark.svg')}#logo" />
+              </svg>
+            </a>
          `;
    return html`
      <header
--- a/app/ui/intro.js
+++ b/app/ui/intro.js
@ -4,7 +4,7 @@ const assets = require('../../common/assets');
 module.exports = function intro(state) {
  return html`
    <send-intro
-      class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full"
+      class="flex flex-col items-center justify-center bg-white px-6 md:py-0 py-6 mb-0 h-full w-full dark:bg-grey-90"
    >
      <div class="mt-12 flex flex-col h-full">
        <h1 class="text-3xl font-bold md:pb-2">
--- a/app/ui/legal.js
+++ b/app/ui/legal.js
@ -6,7 +6,7 @@ module.exports = function(state, emit) {
    <main class="main">
      ${state.modal && modal(state, emit)}
      <div
-        class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
+        class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
      >
        <h1 class="text-center text-3xl font-bold">
          ${state.translate('legalTitle')}
@ -19,7 +19,7 @@ module.exports = function(state, emit) {
              href="https://www.mozilla.org/privacy/"
              target="__blank"
              rel="noopener noreferrer"
-              class="text-blue-dark hover:underline"
+              class="link-blue hover:underline"
              >Mozilla Privacy Policy</a
            >
            <span
@ -31,7 +31,7 @@ module.exports = function(state, emit) {
              href="https://github.com/mozilla/send/blob/master/docs/metrics.md"
              target="__blank"
              rel="noopener noreferrer"
-              class="text-blue-dark hover:underline"
+              class="link-blue hover:underline"
              >here</a
            >.
          </p>
--- a/app/ui/modal.js
+++ b/app/ui/modal.js
@ -3,13 +3,12 @@ const html = require('choo/html');
 module.exports = function(state, emit) {
  return html`
    <send-modal
-      class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8"
-      onclick="${close}"
+      class="absolute inset-0 flex items-center justify-center overflow-hidden z-40 bg-white md:rounded-xl md:my-8 dark:bg-grey-90"
    >
      <div
        class="h-full w-full max-h-screen absolute top-0 flex items-center justify-center"
      >
-        <div class="w-full" onclick="${e => e.stopPropagation()}">
+        <div class="w-full">
          ${state.modal(state, emit, close)}
        </div>
      </div>
--- a/app/ui/noStreams.js
+++ b/app/ui/noStreams.js
@ -12,7 +12,7 @@ module.exports = function(state, emit) {
        'downloadTitle'
      )}</h1>
      <p
-        class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter text-center leading-normal"
+        class="w-full p-2 border border-yellow-50 rounded md:w-4/5 text-orange-60 bg-yellow-40 text-center leading-normal"
      >
        ⚠️ ${state.translate('noStreamsWarning')} ⚠️
      </p>
--- a/app/ui/notFound.js
+++ b/app/ui/notFound.js
@ -13,7 +13,7 @@ module.exports = function(state, emit) {
          ${state.translate('expiredTitle')}
        </h1>
        <img src="${assets.get('notFound.svg')}" class="my-12" />
-        <p class="max-w-md text-center text-grey-darkest leading-normal">
+        <p class="max-w-md text-center text-grey-80 leading-normal">
          ${state.translate('trySendDescription')}
        </p>
        <p class="my-5">
--- a/app/ui/promo.js
+++ b/app/ui/promo.js
@ -15,7 +15,7 @@ class Promo extends Component {
  createElement() {
    return html`
      <send-promo
-        class="w-full flex-row items-center content-center justify-center bg-white text-grey-darkest px-4 py-3 flex border-b border-grey-banner leading-normal"
+        class="w-full flex-row items-center content-center justify-center bg-white text-grey-80 px-4 py-3 flex border-b border-grey-banner leading-normal dark:bg-grey-90 dark:text-grey-20 dark:border-grey-80"
      >
        <div class="flex items-center mx-auto">
          <img
@ -26,7 +26,7 @@ class Promo extends Component {
          <span class="ml-2 sm:ml-4 text-xs sm:text-base">
            ${this.state.translate('trailheadPromo')}${' '}
            <a
-              class="underline text-blue-dark"
+              class="underline link-blue"
              href="http://www.mozilla.org/firefox/accounts/?utm_source=send.firefox.com&utm_medium=banner&utm_campaign=trailhead&utm_content=protect-your-privacy"
              >${this.state.translate('learnMore')}</a
            >
--- a/app/ui/selectbox.js
+++ b/app/ui/selectbox.js
@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
  return html`
    <select
      id="${htmlId}"
-      class="appearance-none cursor-pointer border rounded bg-grey-lightest hover:border-blue-dark focus:border-blue-dark pl-1 pr-8 py-1 my-1 h-8"
+      class="appearance-none cursor-pointer border rounded bg-grey-10 hover:border-blue-50 focus:border-blue-50 pl-1 pr-8 py-1 my-1 h-8 dark:bg-grey-80"
      onchange="${choose}"
    >
      ${options.map(
--- a/app/ui/shareDialog.js
+++ b/app/ui/shareDialog.js
@ -9,14 +9,16 @@ module.exports = function(name, url) {
        <h1 class="text-3xl font-bold my-4">
          ${state.translate('notifyUploadEncryptDone')}
        </h1>
-        <p class="font-normal leading-normal text-grey-darkest word-break-all">
+        <p
+          class="font-normal leading-normal text-grey-80 word-break-all dark:text-grey-40"
+        >
          ${state.translate('shareLinkDescription')}<br />
          ${name}
        </p>
        <input
          type="text"
          id="share-url"
-          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1"
+          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1 dark:bg-grey-80"
          value="${url}"
          readonly="true"
        />
@ -28,7 +30,7 @@ module.exports = function(name, url) {
          ${state.translate('shareLinkButton')}
        </button>
        <button
-          class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
+          class="link-blue my-4 font-medium cursor-pointer focus:outline"
          onclick="${close}"
          title="${state.translate('okButton')}"
        >
--- a/app/ui/signupDialog.js
+++ b/app/ui/signupDialog.js
@ -20,7 +20,7 @@ module.exports = function(trigger) {
            ${state.translate('accountBenefitTitle')}
          </h1>
          <ul
-            class="leading-normal text-grey-darkest my-2 mt-4 pl-4 md:self-center"
+            class="leading-normal list-disc text-grey-80 my-2 mt-4 pl-4 md:self-center dark:text-grey-40"
          >
            <li>
              ${state.translate('accountBenefitLargeFiles', {
@ -42,7 +42,7 @@ module.exports = function(trigger) {
            <input
              id="email-input"
              type="email"
-              class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-darker leading-loose"
+              class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-70 leading-loose dark:bg-grey-80 dark:text-white"
              placeholder=${state.translate('emailPlaceholder')}
            />
            <input
@ -54,7 +54,7 @@ module.exports = function(trigger) {
            />
          </form>
          <button
-            class="my-3 text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium"
+            class="my-3 link-blue font-medium"
            title="${state.translate('deletePopupCancel')}"
            onclick=${cancel}
          >
--- a/app/ui/surveyDialog.js
+++ b/app/ui/surveyDialog.js
@ -16,7 +16,7 @@ module.exports = function() {
        <h1 class="text-3xl font-bold my-4">
          Tell us what you think.
        </h1>
-        <p class="font-normal leading-normal text-grey-darkest px-4">
+        <p class="font-normal leading-normal text-grey-80 px-4">
          Love Firefox Send? Take a quick survey to let us know how we can make
          it better.
        </p>
@ -30,7 +30,7 @@ module.exports = function() {
          Give feedback
        </a>
        <button
-          class="text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium cursor-pointer focus:outline"
+          class="link-blue font-medium cursor-pointer focus:outline"
          onclick="${close}"
          title="Skip"
        >
--- a/app/ui/unsupported.js
+++ b/app/ui/unsupported.js
@ -27,7 +27,7 @@ module.exports = function(state, emit) {
    <main class="main">
      ${state.modal && modal(state, emit)}
      <section
-        class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
+        class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
      >
        <h1 class="text-3xl font-bold">${strings.header}</h1>
        <p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
--- a/assets/addfiles.svg
+++ b/assets/addfiles.svg
@ -1,9 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
-  <defs>
-    <polygon id="addfiles-a" points="11.143 6 11.143 11.143 6 11.143 6 12.857 11.143 12.857 11.143 18 12.857 18 12.857 12.857 18 12.857 18 11.143 12.857 11.143 12.857 6"/>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<symbol id="plus" viewBox="0 0 24 24">
  <g fill="none" fill-rule="evenodd">
-    <path fill="#0060df" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
-    <use fill="#0060df" xlink:href="#addfiles-a"/>
+    <path fill="currentColor" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
+    <polygon fill="currentColor" points="11.143 6 11.143 11.143 6 11.143 6 12.857 11.143 12.857 11.143 18 12.857 18 12.857 12.857 18 12.857 18 11.143 12.857 11.143 12.857 6"/>
  </g>
+  </symbol>
+  <use xlink:href="#plus"/>
 </svg>
--- a/assets/blue_file.svg
+++ b/assets/blue_file.svg
@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="32px" viewBox="0 0 26 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
-    <title>6AF7DAB4-6456-44F2-AABE-F001D910B641</title>
-    <desc>Created with sketchtool.</desc>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="icon" viewBox="0 0 26 32">
    <defs>
        <path d="M21.848475,31.6653183 L2.89005487,31.6653183 C1.32717435,31.6653183 0.104050469,30.3742431 0.104050469,28.8793139 L0.104050469,2.7860044 C0.104050469,1.22312388 1.39512568,0 2.89005487,0 L14.7135857,0 C15.4610503,0 16.2085149,0.271805307 16.6841742,0.815415921 L23.8190635,7.95030523 C24.3626741,8.49391584 24.6344794,9.17342911 24.6344794,9.9208937 L24.6344794,28.8793139 C24.6344794,30.3742431 23.4113555,31.6653183 21.848475,31.6653183 Z" id="path-1"></path>
    </defs>
@ -14,14 +12,15 @@
                        <mask id="mask-2" fill="white">
                            <use xlink:href="#path-1"></use>
                        </mask>
-                        <use id="Mask" fill="#45A1FF" opacity="0.6" xlink:href="#path-1"></use>
-                        <path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
-                        <path d="M7.2830232,8.93885547 L8.91906464,8.93885547" id="Path" stroke="#0060DF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
-                        <path d="M7.2830232,15.7798836 L17.5412669,15.7798836" id="Path" stroke="#0060DF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
-                        <path d="M7.2830232,22.6209117 L17.5412669,22.6209117" id="Path" stroke="#0060DF" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
+                        <use id="Mask" fill="#45a1ff" xlink:href="#path-1"></use>
+                        <path d="M24.3031318,10.6474633 L16.7826187,10.6474633 C15.2742552,10.6474633 14.051485,9.42469306 14.051485,7.91632957 L14.051485,0.395816478" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
+                        <path d="M7.2830232,8.93885547 L8.91906464,8.93885547" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
+                        <path d="M7.2830232,15.7798836 L17.5412669,15.7798836" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
+                        <path d="M7.2830232,22.6209117 L17.5412669,22.6209117" id="Path" stroke="currentColor" stroke-width="2" stroke-linecap="round" mask="url(#mask-2)"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
+    </symbol>
 </svg>
--- a/assets/close-16.svg
+++ b/assets/close-16.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16"><path fill="#4A4A4A" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16"><path fill="#737373" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/></svg>
--- a/assets/copy-16.svg
+++ b/assets/copy-16.svg
@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#0060df" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg">
+<symbol id="icon" viewBox="0 0 16 16">
+<path fill="currentColor" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/>
+</symbol>
+</svg>
--- a/assets/dl.svg
+++ b/assets/dl.svg
@ -1,15 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="12px" height="16px" viewBox="0 0 12 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
-    <title>728D143F-562C-4AE5-80DA-9DBBD9D647D8</title>
-    <desc>Created with sketchtool.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Send_Sending" transform="translate(-770.000000, -481.000000)" fill="#0060DF">
-            <g id="List-Item-3" transform="translate(744.000000, 350.000000)">
-                <g id="Download-Icon" transform="translate(26.000000, 131.000000)">
-                    <path d="M5.293,12.707 C5.6835,13.097382 6.316501,13.097383 6.707001,12.707 L11.707,7.707 C12.08597,7.31462 12.08054,6.69092 11.69481,6.305189 C11.30908,5.91946 10.68538,5.91403 10.293,6.293 L7,9.586 L7,1 C7,0.44772 6.552285,0 6,0 C5.447715,0 5,0.44772 5,1 L5,9.586 L1.707,6.293 C1.314621,5.91403 0.690915,5.91945 0.305181,6.305182 C-0.080553,6.690915 -0.085973,7.314622 0.293,7.707001 L5.293,12.707 Z M11,14 L1,14 C0.447715,14 0,14.447715 0,15 C0,15.5522852 0.447715,16 1,16 L11,16 C11.55228,16 12,15.5522852 12,15 C12,14.447715 11.55229,14 11,14 Z" id="Fill-1"></path>
+<svg width="12px" height="16px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="icon" viewBox="0 0 12 16">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-770.000000, -481.000000)" fill="currentColor">
+            <g transform="translate(744.000000, 350.000000)">
+                <g transform="translate(26.000000, 131.000000)">
+                    <path d="M5.293,12.707 C5.6835,13.097382 6.316501,13.097383 6.707001,12.707 L11.707,7.707 C12.08597,7.31462 12.08054,6.69092 11.69481,6.305189 C11.30908,5.91946 10.68538,5.91403 10.293,6.293 L7,9.586 L7,1 C7,0.44772 6.552285,0 6,0 C5.447715,0 5,0.44772 5,1 L5,9.586 L1.707,6.293 C1.314621,5.91403 0.690915,5.91945 0.305181,6.305182 C-0.080553,6.690915 -0.085973,7.314622 0.293,7.707001 L5.293,12.707 Z M11,14 L1,14 C0.447715,14 0,14.447715 0,15 C0,15.5522852 0.447715,16 1,16 L11,16 C11.55228,16 12,15.5522852 12,15 C12,14.447715 11.55229,14 11,14 Z"></path>
                </g>
            </g>
        </g>
    </g>
+    </symbol>
 </svg>
--- a/assets/icon.svg
+++ b/assets/icon.svg
@ -0,0 +1,41 @@
+<svg  viewBox="0 0 65 64" height="64" width="65" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<defs>
+<linearGradient id="linear-gradient" x1="46.37" y1="59.71" x2="15.42" y2="6.11" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#ff980e"/>
+<stop offset="0.21" stop-color="#ff7139"/>
+<stop offset="0.36" stop-color="#ff5854"/>
+<stop offset="0.46" stop-color="#ff4f5e"/>
+<stop offset="0.69" stop-color="#ff3750"/>
+<stop offset="0.86" stop-color="#f92261"/>
+<stop offset="1" stop-color="#f5156c"/>
+</linearGradient>
+<linearGradient id="linear-gradient-2" x1="46.37" y1="59.71" x2="15.42" y2="6.11" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#fff44f" stop-opacity="0.8"/>
+<stop offset="0.09" stop-color="#fff44f" stop-opacity="0.7"/>
+<stop offset="0.75" stop-color="#fff44f" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="linear-gradient-3" x1="40.19" y1="26.08" x2="54.32" y2="50.55" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#3a8ee6"/>
+<stop offset="0.24" stop-color="#5c79f0"/>
+<stop offset="0.63" stop-color="#9059ff"/>
+<stop offset="1" stop-color="#c139e6"/>
+</linearGradient>
+<linearGradient id="linear-gradient-4" x1="54.32" y1="50.58" x2="48.39" y2="40.31" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#6e008b" stop-opacity="0.5"/>
+<stop offset="0.5" stop-color="#c846cb" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="linear-gradient-5" x1="56.96" y1="22.5" x2="41.98" y2="37.46" gradientTransform="matrix(1, 0, 0, -1, 0, 64)" gradientUnits="userSpaceOnUse">
+<stop offset="0.14" stop-color="#6a2bea" stop-opacity="0"/>
+<stop offset="0.34" stop-color="#642de4" stop-opacity="0.03"/>
+<stop offset="0.55" stop-color="#5131d3" stop-opacity="0.12"/>
+<stop offset="0.76" stop-color="#3139b7" stop-opacity="0.27"/>
+<stop offset="0.98" stop-color="#054490" stop-opacity="0.48"/>
+<stop offset="1" stop-color="#00458b" stop-opacity="0.5"/>
+</linearGradient>
+</defs>
+<path d="M32.56,0C14.61,0,0,14.33,0,31.94a3.42,3.42,0,0,0,3.42,3.42H29.14V52.3l-8-8a3.42,3.42,0,1,0-4.84,4.84L30.14,63a2.73,2.73,0,0,0,.25.23l.23.17h.05l.24.14.27.13.28.1.29.07L32,64h1.27l.29-.07.29-.1.27-.13.24-.14.24-.17L35,63,48.8,49.18A3.43,3.43,0,0,0,44,44.34l-8,8v-17H61.7a3.42,3.42,0,0,0,3.42-3.42h0C65.12,14.33,50.51,0,32.56,0ZM7.09,28.51A25.54,25.54,0,0,1,32.56,6.85,25.55,25.55,0,0,1,58,28.51Z"  fill="url(#linear-gradient)"/>
+<path d="M32.56,0C14.61,0,0,14.33,0,31.94a3.42,3.42,0,0,0,3.42,3.42H29.14V52.3l-8-8a3.42,3.42,0,1,0-4.84,4.84L30.14,63a2.73,2.73,0,0,0,.25.23l.23.17h.05l.24.14.27.13.28.1.29.07L32,64h1.27l.29-.07.29-.1.27-.13.24-.14.24-.17L35,63,48.8,49.18A3.43,3.43,0,0,0,44,44.34l-8,8v-17H61.7a3.42,3.42,0,0,0,3.42-3.42h0C65.12,14.33,50.51,0,32.56,0ZM7.09,28.51A25.54,25.54,0,0,1,32.56,6.85,25.55,25.55,0,0,1,58,28.51Z"  fill="url(#linear-gradient-2)"/>
+<path d="M36,7.08A25.45,25.45,0,0,1,58,28.51H42.85A6.85,6.85,0,0,0,36,35.36H61.7a3.43,3.43,0,0,0,3.42-3.43c0-12.2-8.63-18.13-16-21.59A35.75,35.75,0,0,0,36,7.08Z" fill="url(#linear-gradient-3)"/>
+<path d="M57.89,27.76c2.31,1.86,4.63,3.71,6.9,5.61a3.27,3.27,0,0,0,.33-1.44c0-12.2-8.63-18.13-16-21.59A35.75,35.75,0,0,0,36,7.08,25.47,25.47,0,0,1,57.89,27.76Z" fill="url(#linear-gradient-4)"/>
+<path d="M57.5,28.51H42.85A6.85,6.85,0,0,0,36,35.36H61.7a3.36,3.36,0,0,0,2.64-1.28C62.09,32.19,59.79,30.36,57.5,28.51Z" opacity=".9" fill="url(#linear-gradient-5)"/>
+</svg>
--- a/assets/logo.svg
+++ b/assets/logo.svg
--- a/assets/select-arrow.svg
+++ b/assets/select-arrow.svg
@ -1,8 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="8px" height="6px" viewBox="0 0 8 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
-    <title>37845F0A-2932-4C2D-98E1-89BE1B168092</title>
-    <desc>Created with sketchtool.</desc>
    <defs>
        <path d="M6,8.48771202 C5.73480519,8.48765538 5.48049273,8.3822614 5.293,8.19471202 L2.293,5.19471202 C1.91402779,4.80233313 1.91944763,4.17862724 2.30518142,3.79289345 C2.69091522,3.40715965 3.31462111,3.40173981 3.707,3.78071202 L6,6.07371202 L8.293,3.78071202 C8.68537889,3.40173981 9.30908478,3.40715965 9.69481858,3.79289345 C10.0805524,4.17862724 10.0859722,4.80233313 9.707,5.19471202 L6.707,8.19471202 C6.51950727,8.3822614 6.26519481,8.48765538 6,8.48771202 Z" id="path-1"></path>
    </defs>
@ -14,7 +11,7 @@
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
-                    <use id="Shape" fill="#0C0C0D" fill-rule="nonzero" opacity="0.599283854" xlink:href="#path-1"></use>
+                    <use id="Shape" fill="#b1b1b3" fill-rule="nonzero" opacity="0.599283854" xlink:href="#path-1"></use>
                </g>
            </g>
        </g>
--- a/assets/share-24.svg
+++ b/assets/share-24.svg
@ -1,4 +1,5 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9a3 3 0 1 0-2.977-2.63l-6.94 3.47a3 3 0 1 0 0 4.319l6.94 3.47a3 3 0 1 0 .895-1.789l-6.94-3.47a3.03 3.03 0 0 0 0-.74l6.94-3.47C16.456 8.68 17.19 9 18 9z" fill="#0060df" fill-opacity=".8"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg">
+<symbol id="icon" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9a3 3 0 1 0-2.977-2.63l-6.94 3.47a3 3 0 1 0 0 4.319l6.94 3.47a3 3 0 1 0 .895-1.789l-6.94-3.47a3.03 3.03 0 0 0 0-.74l6.94-3.47C16.456 8.68 17.19 9 18 9z" fill="currentColor"></path></symbol></svg>
--- a/assets/wordmark.svg
+++ b/assets/wordmark.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<symbol id="logo" viewBox="66 0 340 64">
+<path d="M84,48h5.83V35.87H103.3V30.45H89.83V23.51H103.3V18H84Zm23.57,0h5.79V25.81h-5.79Zm2.88-32.12a3.46,3.46,0,0,0-2.59,1,3.62,3.62,0,0,0-1,2.65,3.57,3.57,0,0,0,1,2.59,3.52,3.52,0,0,0,2.61,1,3.46,3.46,0,0,0,3.65-3.26c0-.12,0-.23,0-.35a3.71,3.71,0,0,0-1-2.65,3.5,3.5,0,0,0-2.67-1Zm19.14,9.53a7.22,7.22,0,0,0-3.72.93,5.82,5.82,0,0,0-2.4,2.89V25.81h-5.59V48h5.63V36.29a5.27,5.27,0,0,1,1.31-4,4.94,4.94,0,0,1,3.49-1.21,6.33,6.33,0,0,1,1.73.23,4,4,0,0,1,1.23.55l2-5.59a7.51,7.51,0,0,0-1.66-.61,8.11,8.11,0,0,0-2-.26Zm23.94,3.19a11.15,11.15,0,0,0-3.61-2.37,12.08,12.08,0,0,0-4.6-.86,11.62,11.62,0,0,0-8.3,3.37,11.17,11.17,0,0,0-2.44,3.67,11.59,11.59,0,0,0-.89,4.54,12.24,12.24,0,0,0,.83,4.52,10.52,10.52,0,0,0,2.36,3.66,10.93,10.93,0,0,0,3.71,2.44,12.75,12.75,0,0,0,4.85.88,12.15,12.15,0,0,0,6.12-1.39,13.25,13.25,0,0,0,4.11-3.74L151,40.6a6.23,6.23,0,0,1-2.18,2.15,6.36,6.36,0,0,1-3.33.8,6.7,6.7,0,0,1-4.13-1.25,6,6,0,0,1-2.23-3.43h17.62V36.74a11.71,11.71,0,0,0-.87-4.56,10.5,10.5,0,0,0-2.35-3.59Zm-14.21,5.85a6.38,6.38,0,0,1,2.26-3.12,6.11,6.11,0,0,1,3.74-1.15,6.26,6.26,0,0,1,3.73,1.08,5.56,5.56,0,0,1,2.1,3.19ZM167,16.08a6.05,6.05,0,0,0-2.91,1.54,6.15,6.15,0,0,0-1.56,2.89,18.1,18.1,0,0,0-.48,4.52v.78H158.4v5.1h3.65V48h5.63V30.91H173v-5.1h-5.3V24.75a13.34,13.34,0,0,1,.12-2,2,2,0,0,1,.6-1.19,2.45,2.45,0,0,1,1.33-.57,15.25,15.25,0,0,1,2.34-.15H173V15.63h-1.48A19.06,19.06,0,0,0,167,16.08Zm27.4,12.65a12,12,0,0,0-16.72,0,10.87,10.87,0,0,0-2.46,3.67,11.61,11.61,0,0,0-.89,4.5,11.46,11.46,0,0,0,7.07,10.64,11.73,11.73,0,0,0,4.64.9,12,12,0,0,0,4.66-.9,11.26,11.26,0,0,0,3.72-2.49,11.83,11.83,0,0,0,2.46-3.67,11.31,11.31,0,0,0,.9-4.48A11.43,11.43,0,0,0,194.4,28.73ZM191.7,39.3a5.88,5.88,0,0,1-1.29,2,6.53,6.53,0,0,1-1.93,1.31,6,6,0,0,1-4.76,0,6.34,6.34,0,0,1-1.93-1.31,6.06,6.06,0,0,1-1.3-2,6.48,6.48,0,0,1,0-4.86,5.76,5.76,0,0,1,1.3-2,6.08,6.08,0,0,1,1.93-1.32,6,6,0,0,1,4.76,0,6.37,6.37,0,0,1,1.93,1.32,5.73,5.73,0,0,1,1.29,2A6.39,6.39,0,0,1,191.7,39.3Zm29.47-13.49h-6.65l-4.68,6.57-4.64-6.57h-6.74l7.84,10.8L198,48h6.82l5-6.94L214.89,48h6.86l-8.46-11.34Zm34,7.46a12.88,12.88,0,0,0-3.37-1.44c-1.25-.34-2.46-.63-3.63-.88l-3.08-.7a10.64,10.64,0,0,1-2.51-.86A4.54,4.54,0,0,1,240.87,28a3.61,3.61,0,0,1-.62-2.19,4.8,4.8,0,0,1,1.58-3.7c1.06-1,2.73-1.44,5-1.44a9.84,9.84,0,0,1,5.07,1.17,10.47,10.47,0,0,1,3.39,3.23l2.79-2.18A15.22,15.22,0,0,0,253.45,19a13.8,13.8,0,0,0-6.59-1.44,12.13,12.13,0,0,0-4.14.66A10.33,10.33,0,0,0,239.53,20a7.53,7.53,0,0,0-2.05,2.63,7.41,7.41,0,0,0-.72,3.24,6.7,6.7,0,0,0,.84,3.53,7.06,7.06,0,0,0,2.2,2.22A11.11,11.11,0,0,0,242.86,33c1.13.32,2.29.6,3.47.84l3.26.74a12.63,12.63,0,0,1,2.8,1,5.86,5.86,0,0,1,2,1.56,3.88,3.88,0,0,1,.74,2.42,5.2,5.2,0,0,1-1.81,4.09A7.83,7.83,0,0,1,248,45.2a11,11,0,0,1-9.89-5.38l-3,2.34a15.86,15.86,0,0,0,5.23,4.54,16.06,16.06,0,0,0,7.7,1.7,12.58,12.58,0,0,0,4.38-.72,10.14,10.14,0,0,0,3.3-2,8.79,8.79,0,0,0,2.1-2.85,8.09,8.09,0,0,0,.74-3.39,6.94,6.94,0,0,0-1-3.8,7.71,7.71,0,0,0-2.42-2.37Zm27.51-4.72a10.53,10.53,0,0,0-3.58-2.34,11.89,11.89,0,0,0-4.49-.84,11.6,11.6,0,0,0-4.62.9,11.35,11.35,0,0,0-3.66,2.46A11.84,11.84,0,0,0,263,37a12.21,12.21,0,0,0,.82,4.51,10.53,10.53,0,0,0,2.36,3.64,11.24,11.24,0,0,0,3.7,2.42,12.41,12.41,0,0,0,4.82.88A11.68,11.68,0,0,0,280.82,47,12.84,12.84,0,0,0,285,42.82l-2.88-1.69a7.85,7.85,0,0,1-7.43,4.27,9,9,0,0,1-3.22-.53,8.21,8.21,0,0,1-2.55-1.5,8,8,0,0,1-1.78-2.28,7.79,7.79,0,0,1-.87-2.91h19.59V36.66a11.75,11.75,0,0,0-.86-4.54,10.92,10.92,0,0,0-2.35-3.57ZM266.4,35.22a8.88,8.88,0,0,1,1-2.73,8.55,8.55,0,0,1,1.79-2.18,8,8,0,0,1,2.44-1.43,8.31,8.31,0,0,1,3-.52,7.45,7.45,0,0,1,7.84,6.86ZM308.82,28a8.11,8.11,0,0,0-3-2,10.89,10.89,0,0,0-3.92-.67,9.06,9.06,0,0,0-4.58,1.14,8.76,8.76,0,0,0-3.14,3V25.82h-3.29V48h3.37V35.67a7.92,7.92,0,0,1,.53-2.93,7,7,0,0,1,1.48-2.3,6.46,6.46,0,0,1,2.22-1.5,7,7,0,0,1,2.75-.54,6.33,6.33,0,0,1,5,1.93A7.46,7.46,0,0,1,308,35.51V48h3.41V35.34a12.46,12.46,0,0,0-.66-4.19A8.68,8.68,0,0,0,308.82,28Zm27-12.42v14.1a8.14,8.14,0,0,0-1.58-1.83,10.08,10.08,0,0,0-2-1.36,10.39,10.39,0,0,0-2.3-.84,10.22,10.22,0,0,0-2.4-.28,11.63,11.63,0,0,0-4.4.84,11.09,11.09,0,0,0-3.59,2.38,11.3,11.3,0,0,0-2.42,3.65,12.81,12.81,0,0,0,0,9.32,11.56,11.56,0,0,0,2.4,3.66,10.58,10.58,0,0,0,3.59,2.38,11.77,11.77,0,0,0,4.42.84,9.69,9.69,0,0,0,2.4-.31,11,11,0,0,0,2.3-.86,9.72,9.72,0,0,0,2-1.37,8.75,8.75,0,0,0,1.58-1.85v4h3.33V15.59Zm-.37,24.58a8.3,8.3,0,0,1-10.85,4.47h0a7.68,7.68,0,0,1-2.6-1.76,7.88,7.88,0,0,1-1.73-2.67,8.93,8.93,0,0,1-.62-3.35,8.67,8.67,0,0,1,.62-3.3A8,8,0,0,1,322,30.89a8.17,8.17,0,0,1,2.6-1.79,8.27,8.27,0,0,1,6.51,0,8.64,8.64,0,0,1,2.63,1.81,7.85,7.85,0,0,1,1.72,2.67,8.67,8.67,0,0,1,.62,3.26,8.86,8.86,0,0,1-.65,3.33Z" fill="currentColor"/>
+</symbol>
+<use xlink:href="#logo"/>
+</svg>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,89 +1,103 @@
 const colors = {
  transparent: 'transparent',

-  black: '#22292f',
-  'grey-darkest': '#4a4a4f',
-  'grey-darker': '#606f7b',
-  'grey-dark': '#8795a1',
-  grey: '#B1B1B3',
-  'grey-light': '#dae1e7',
+  black: '#000000',
+  'grey-90': '#0c0c0d',
+  'grey-80': '#2a2a2e',
+  'grey-70': '#38383d',
+  'grey-60': '#4a4a4f',
+  'grey-50': '#737373',
+  grey: '#b1b1b3',
+  'grey-40': '#b1b1b3',
+  'grey-30': '#d7d7db',
  'grey-banner': '#f0f0f4',
  'grey-transparent': 'hsla(250, 13%, 9%, .2)',
-  'grey-lighter': '#f1f5f8',
-  'grey-lightest': '#F9F9FA',
+  'grey-20': '#ededf0',
+  'grey-10': '#f9f9fa',
  white: '#ffffff',

-  'red-darkest': '#3b0d0c',
-  'red-darker': '#621b18',
-  'red-dark': '#cc1f1a',
-  red: '#e3342f',
-  'red-light': '#ef5753',
-  'red-lighter': '#f9acaa',
-  'red-lightest': '#fcebea',
+  'red-90': '#3e0200',
+  'red-80': '#5a0002',
+  'red-70': '#a4000f',
+  'red-60': '#d70022',
+  red: '#d70022',
+  'red-50': '#ff0039',
+  // unspec
+  'red-40': '#ff3363',
+  'red-30': '#ff99aa',

-  'orange-darkest': '#462a16',
-  'orange-darker': '#613b1f',
-  'orange-dark': '#de751f',
-  orange: '#f6993f',
-  'orange-light': '#faad63',
-  'orange-lighter': '#fcd9b6',
-  'orange-lightest': '#fff5eb',
+  'orange-90': '#3e1300',
+  'orange-80': '#712b00',
+  'orange-70': '#a44900',
+  'orange-60': '#d76e00',
+  'orange-50': '#ff9400',
+  // unspec
+  'orange-40': '#ffb24c',
+  'orange-30': '#ffd399',

-  'yellow-darkest': '#453411',
-  'yellow-darker': '#684f1d',
-  'yellow-dark': '#f2d024',
-  yellow: '#ffed4a',
-  'yellow-light': '#fff382',
-  'yellow-lighter': '#fff9c2',
-  'yellow-lightest': '#fcfbeb',
+  'yellow-90': '#3e2800',
+  'yellow-80': '#715100',
+  'yellow-70': '#a47f00',
+  'yellow-60': '#d7b600',
+  yellow: '#d7b600',
+  'yellow-50': '#ffe900',
+  'yellow-40': '#ffed4c',
+  'yellow-30': '#fff599',

-  'green-darkest': '#003706',
-  'green-darker': '#006504',
-  'green-dark': '#058b00',
-  green: '#12bc00',
-  'green-light': '#51d88a',
-  'green-lighter': '#a2f5bf',
-  'green-lightest': '#e3fcec',
+  // 'green-darkest': '#003706',
+  // 'green-darker': '#006504',
+  // 'green-dark': '#058b00',
+  // green: '#12bc00',
+  // 'green-light': '#51d88a',
+  // 'green-lighter': '#a2f5bf',
+  // 'green-lightest': '#e3fcec',

-  'teal-darkest': '#0d3331',
-  'teal-darker': '#20504f',
-  'teal-dark': '#38a89d',
-  teal: '#4dc0b5',
-  'teal-light': '#64d5ca',
-  'teal-lighter': '#a0f0ed',
-  'teal-lightest': '#e8fffe',
+  // 'teal-darkest': '#0d3331',
+  // 'teal-darker': '#20504f',
+  // 'teal-dark': '#38a89d',
+  // teal: '#4dc0b5',
+  // 'teal-light': '#64d5ca',
+  // 'teal-lighter': '#a0f0ed',
+  // 'teal-lightest': '#e8fffe',

-  'blue-darkest': '#002275',
-  'blue-darker': '#003eaa',
-  'blue-dark': '#0060df',
+  'blue-90': '#000f40',
+  'blue-80': '#002275',
+  'blue-70': '#003eaa',
+  'blue-60': '#0060df',
+  'blue-50': '#0a84ff',
  blue: '#0a84ff',
-  'blue-light': '#6cb2eb',
-  'blue-lighter': '#bcdefa',
-  'blue-lightest': '#eff8ff',
+  'blue-40': '#45a1ff',
+  'blue-30': '#99ccff',
+  'blue-20': '#cce6ff',

-  'indigo-darkest': '#191e38',
-  'indigo-darker': '#2f365f',
-  'indigo-dark': '#5661b3',
-  indigo: '#6574cd',
-  'indigo-light': '#7886d7',
-  'indigo-lighter': '#b2b7ff',
-  'indigo-lightest': '#e6e8ff',
+  'ink-90': '#0f1126',
+  'ink-80': '#202340',
+  'ink-70': '#363959',

-  'purple-darkest': '#21183c',
-  'purple-darker': '#382b5f',
-  'purple-dark': '#794acf',
-  purple: '#9561e2',
-  'purple-light': '#a779e9',
-  'purple-lighter': '#d6bbfc',
-  'purple-lightest': '#f3ebff',
+  // 'indigo-darkest': '#191e38',
+  // 'indigo-darker': '#2f365f',
+  // 'indigo-dark': '#5661b3',
+  // indigo: '#6574cd',
+  // 'indigo-light': '#7886d7',
+  // 'indigo-lighter': '#b2b7ff',
+  // 'indigo-lightest': '#e6e8ff',

-  'pink-darkest': '#451225',
-  'pink-darker': '#6f213f',
-  'pink-dark': '#eb5286',
-  pink: '#f66d9b',
-  'pink-light': '#fa7ea8',
-  'pink-lighter': '#ffbbca',
-  'pink-lightest': '#ffebef',
+  'purple-90': '#25003e',
+  'purple-80': '#440071',
+  'purple-70': '#6200a4',
+  'purple-60': '#8000d7',
+  'purple-50': '#9400ff',
+  'purple-40': '#ad3bff',
+  'purple-30': '#c069ff',
+  'purple-20': '#d7a3ff',
+
+  // 'pink-darkest': '#451225',
+  // 'pink-darker': '#6f213f',
+  // 'pink-dark': '#eb5286',
+  // pink: '#f66d9b',
+  // 'pink-light': '#fa7ea8',
+  // 'pink-lighter': '#ffbbca',
+  // 'pink-lightest': '#ffebef',
  cloud: 'rgba(255, 255, 255, 0.8)',
  violet: 'hsl(258, 57%, 35%)'
 };
@ -95,7 +109,8 @@ module.exports = {
      sm: '576px',
      md: '768px',
      lg: '992px',
-      xl: '1200px'
+      xl: '1200px',
+      dark: { raw: '(prefers-color-scheme: dark)' }
    },
    fontFamily: {
      sans: [
@ -181,10 +196,7 @@ module.exports = {
      '4': '4px',
      '8': '8px'
    },
-    borderColor: global.Object.assign(
-      { default: colors['grey-light'] },
-      colors
-    ),
+    borderColor: global.Object.assign({ default: colors['grey-30'] }, colors),
    borderRadius: {
      none: '0',
      sm: '.125rem',
--- a/webpack.config.js
+++ b/webpack.config.js
@ -142,6 +142,7 @@ const web = {
            loader: 'svgo-loader',
            options: {
              plugins: [
+                { cleanupIDs: false },
                { removeViewBox: false }, // true causes stretched images
                { convertStyleToAttrs: true }, // for CSP, no unsafe-eval
                { removeTitle: true } // for smallness