From 1c84d2719c2736d1567486d0bbca13663af618f6 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@phacility.com>
Date: Fri, 26 Jun 2015 09:33:03 -0700
Subject: [PATCH] [Redesign] Larger Font PostProcessor

Summary: Ref T8099, Ref T8614. Reasonable attempt at a larger font size PostProcessor, will need additional UI cleanup (places where we fix height) but overall very decent.

Test Plan: Use lots of the UI elements with new font sizes.

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T8099, T8614

Differential Revision: https://secure.phabricator.com/D13457
---
 resources/celerity/map.php                    | 46 +++++++++----------
 src/__phutil_library_map__.php                |  2 +
 .../CelerityDefaultPostprocessor.php          |  7 +++
 .../CelerityLargeFontPostprocessor.php        | 31 +++++++++++++
 webroot/rsrc/css/aphront/table-view.css       | 16 +++----
 webroot/rsrc/css/aphront/tokenizer.css        |  2 +-
 webroot/rsrc/css/aphront/tooltip.css          |  2 +-
 webroot/rsrc/css/aphront/typeahead.css        |  4 +-
 .../css/application/base/main-menu-view.css   | 16 +++----
 .../application/base/notification-menu.css    |  6 +--
 .../phabricator-application-launch-view.css   |  6 +--
 .../application/base/standard-page-view.css   |  3 +-
 .../application/calendar/calendar-icon.css    |  2 +-
 .../rsrc/css/application/chatlog/chatlog.css  |  4 +-
 .../conpherence/durable-column.css            |  8 ++--
 .../rsrc/css/application/conpherence/menu.css |  6 +--
 .../application/conpherence/message-pane.css  |  6 +--
 .../application/conpherence/notification.css  |  6 +--
 .../css/application/conpherence/update.css    |  4 +-
 .../application/conpherence/widget-pane.css   | 14 +++---
 .../rsrc/css/application/countdown/timer.css  | 17 ++++---
 .../diff/inline-comment-summary.css           |  2 +-
 .../differential/changeset-view.css           |  4 +-
 .../differential/phui-inline-comment.css      |  4 +-
 .../diffusion/diffusion-source.css            |  2 +-
 .../rsrc/css/application/maniphest/report.css |  2 +-
 .../css/application/maniphest/task-edit.css   |  4 +-
 .../application/maniphest/task-summary.css    |  2 +-
 .../objectselector/object-selector.css        |  2 +-
 webroot/rsrc/css/application/phame/phame.css  |  4 +-
 .../rsrc/css/application/ponder/comments.css  |  4 +-
 webroot/rsrc/css/application/ponder/vote.css  |  7 ++-
 .../css/application/slowvote/slowvote.css     |  4 +-
 webroot/rsrc/css/phui/phui-action-list.css    |  6 +--
 webroot/rsrc/css/phui/phui-action-panel.css   |  4 +-
 webroot/rsrc/css/phui/phui-button.css         |  8 ++--
 webroot/rsrc/css/phui/phui-document.css       |  2 +-
 webroot/rsrc/css/phui/phui-feed-story.css     |  2 +-
 webroot/rsrc/css/phui/phui-form-view.css      | 24 +++++-----
 webroot/rsrc/css/phui/phui-header-view.css    |  8 ++--
 webroot/rsrc/css/phui/phui-info-view.css      |  2 +-
 webroot/rsrc/css/phui/phui-list.css           |  2 +-
 webroot/rsrc/css/phui/phui-object-box.css     |  2 +-
 .../css/phui/phui-object-item-list-view.css   |  8 ++--
 webroot/rsrc/css/phui/phui-pinboard-view.css  |  2 +-
 .../rsrc/css/phui/phui-property-list-view.css |  2 +-
 .../rsrc/css/phui/phui-remarkup-preview.css   |  2 +-
 webroot/rsrc/css/phui/phui-tag-view.css       |  2 +-
 webroot/rsrc/css/phui/phui-timeline-view.css  |  2 +-
 webroot/rsrc/css/phui/phui-workpanel-view.css |  2 +-
 50 files changed, 183 insertions(+), 146 deletions(-)
 create mode 100644 src/applications/celerity/postprocessor/CelerityLargeFontPostprocessor.php

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 9fece8c276..35de05dc0b 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => 'a20ff7f6',
+    'core.pkg.css' => '2b10c4f7',
     'core.pkg.js' => 'a590b451',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '1b36e899',
@@ -37,9 +37,9 @@ return array(
     'rsrc/css/application/base/notification-menu.css' => 'f31c0bde',
     'rsrc/css/application/base/phabricator-application-launch-view.css' => 'fa820ddf',
     'rsrc/css/application/base/phui-theme.css' => '410368da',
-    'rsrc/css/application/base/standard-page-view.css' => '43045fb4',
-    'rsrc/css/application/calendar/calendar-icon.css' => 'a95c11a9',
-    'rsrc/css/application/chatlog/chatlog.css' => 'f1971c1c',
+    'rsrc/css/application/base/standard-page-view.css' => 'def344d6',
+    'rsrc/css/application/calendar/calendar-icon.css' => 'c69aa59f',
+    'rsrc/css/application/chatlog/chatlog.css' => 'd295b020',
     'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
     'rsrc/css/application/config/config-options.css' => '7fedf08b',
     'rsrc/css/application/config/config-template.css' => '8e6c6fcd',
@@ -51,10 +51,10 @@ return array(
     'rsrc/css/application/conpherence/message-pane.css' => '2c16d204',
     'rsrc/css/application/conpherence/notification.css' => '6cdcc253',
     'rsrc/css/application/conpherence/transaction.css' => '85d0974c',
-    'rsrc/css/application/conpherence/update.css' => '1099a660',
-    'rsrc/css/application/conpherence/widget-pane.css' => '6e0e290b',
+    'rsrc/css/application/conpherence/update.css' => 'faf6be09',
+    'rsrc/css/application/conpherence/widget-pane.css' => '419fd50c',
     'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
-    'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
+    'rsrc/css/application/countdown/timer.css' => '4f02bd98',
     'rsrc/css/application/daemon/bulk-job.css' => 'df9c1d4a',
     'rsrc/css/application/dashboard/dashboard.css' => 'eb458607',
     'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
@@ -77,13 +77,13 @@ return array(
     'rsrc/css/application/herald/herald.css' => '826075fa',
     'rsrc/css/application/maniphest/batch-editor.css' => 'b0f0b6d5',
     'rsrc/css/application/maniphest/report.css' => 'f6931fdf',
-    'rsrc/css/application/maniphest/task-edit.css' => '8e23031b',
+    'rsrc/css/application/maniphest/task-edit.css' => 'fda62a9b',
     'rsrc/css/application/maniphest/task-summary.css' => '11cc5344',
     'rsrc/css/application/objectselector/object-selector.css' => '029a133d',
     'rsrc/css/application/owners/owners-path-editor.css' => '2f00933b',
     'rsrc/css/application/paste/paste.css' => '1898e534',
     'rsrc/css/application/people/people-profile.css' => '25970776',
-    'rsrc/css/application/phame/phame.css' => '88bd4705',
+    'rsrc/css/application/phame/phame.css' => '3259b53d',
     'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee',
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
     'rsrc/css/application/pholio/pholio.css' => '95174bdd',
@@ -94,10 +94,10 @@ return array(
     'rsrc/css/application/policy/policy-edit.css' => '815c66f7',
     'rsrc/css/application/policy/policy-transaction-detail.css' => '82100a43',
     'rsrc/css/application/policy/policy.css' => '957ea14c',
-    'rsrc/css/application/ponder/comments.css' => '6cdccea7',
+    'rsrc/css/application/ponder/comments.css' => '865a67e6',
     'rsrc/css/application/ponder/feed.css' => 'e62615b6',
     'rsrc/css/application/ponder/post.css' => '9d415218',
-    'rsrc/css/application/ponder/vote.css' => '8ed6ed8b',
+    'rsrc/css/application/ponder/vote.css' => 'aea452b0',
     'rsrc/css/application/projects/project-icon.css' => '4e3eaa5a',
     'rsrc/css/application/releeph/releeph-core.css' => '9b3c5733',
     'rsrc/css/application/releeph/releeph-preview-branch.css' => 'b7a6f4a5',
@@ -132,7 +132,7 @@ return array(
     'rsrc/css/phui/phui-document.css' => '3eb3b3e3',
     'rsrc/css/phui/phui-feed-story.css' => 'c70d2dd9',
     'rsrc/css/phui/phui-fontkit.css' => '0d04121b',
-    'rsrc/css/phui/phui-form-view.css' => 'a0e8f168',
+    'rsrc/css/phui/phui-form-view.css' => '621b21c5',
     'rsrc/css/phui/phui-form.css' => '17ce37a9',
     'rsrc/css/phui/phui-header-view.css' => '4d09d68f',
     'rsrc/css/phui/phui-icon.css' => '88ba9081',
@@ -496,7 +496,7 @@ return array(
     'aphront-typeahead-control-css' => '0e403212',
     'auth-css' => 'dc62cb0e',
     'bulk-job-css' => 'df9c1d4a',
-    'calendar-icon-css' => 'a95c11a9',
+    'calendar-icon-css' => 'c69aa59f',
     'changeset-view-manager' => '58562350',
     'conduit-api-css' => '7bc725c4',
     'config-options-css' => '7fedf08b',
@@ -507,8 +507,8 @@ return array(
     'conpherence-notification-css' => '6cdcc253',
     'conpherence-thread-manager' => '01774ab2',
     'conpherence-transaction-css' => '85d0974c',
-    'conpherence-update-css' => '1099a660',
-    'conpherence-widget-pane-css' => '6e0e290b',
+    'conpherence-update-css' => 'faf6be09',
+    'conpherence-widget-pane-css' => '419fd50c',
     'differential-changeset-view-css' => 'b6b0d1bb',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => 'd4c87bf4',
@@ -697,7 +697,7 @@ return array(
     'lightbox-attachment-css' => '7acac05d',
     'maniphest-batch-editor' => 'b0f0b6d5',
     'maniphest-report-css' => 'f6931fdf',
-    'maniphest-task-edit-css' => '8e23031b',
+    'maniphest-task-edit-css' => 'fda62a9b',
     'maniphest-task-summary-css' => '11cc5344',
     'multirow-row-manager' => 'b5d57730',
     'owners-path-editor' => 'aa1733d0',
@@ -708,10 +708,10 @@ return array(
     'phabricator-action-list-view-css' => '32c388b3',
     'phabricator-application-launch-view-css' => 'fa820ddf',
     'phabricator-busy' => '59a7976a',
-    'phabricator-chatlog-css' => 'f1971c1c',
+    'phabricator-chatlog-css' => 'd295b020',
     'phabricator-content-source-view-css' => '4b8b05d4',
     'phabricator-core-css' => 'a76cefc9',
-    'phabricator-countdown-css' => '86b7b0a0',
+    'phabricator-countdown-css' => '4f02bd98',
     'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => '07de8873',
     'phabricator-draggable-list' => 'a16ec1c6',
@@ -738,7 +738,7 @@ return array(
     'phabricator-side-menu-view-css' => '8d13687d',
     'phabricator-slowvote-css' => '7c27f0f9',
     'phabricator-source-code-view-css' => '098e9b75',
-    'phabricator-standard-page-view' => '43045fb4',
+    'phabricator-standard-page-view' => 'def344d6',
     'phabricator-textareautils' => '5c93c52c',
     'phabricator-title' => 'df5e11d2',
     'phabricator-tooltip' => '1d298e3a',
@@ -754,7 +754,7 @@ return array(
     'phabricator-uiexample-reactor-sendclass' => '1def2711',
     'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
     'phabricator-zindex-css' => '63689f49',
-    'phame-css' => '88bd4705',
+    'phame-css' => '3259b53d',
     'pholio-css' => '95174bdd',
     'pholio-edit-css' => '3ad9d1ee',
     'pholio-inline-comments-css' => '8e545e49',
@@ -776,7 +776,7 @@ return array(
     'phui-font-icon-base-css' => '3dad2ae3',
     'phui-fontkit-css' => '0d04121b',
     'phui-form-css' => '17ce37a9',
-    'phui-form-view-css' => 'a0e8f168',
+    'phui-form-view-css' => '621b21c5',
     'phui-header-view-css' => '4d09d68f',
     'phui-icon-view-css' => '88ba9081',
     'phui-image-mask-css' => '5a8b09c8',
@@ -804,10 +804,10 @@ return array(
     'policy-css' => '957ea14c',
     'policy-edit-css' => '815c66f7',
     'policy-transaction-detail-css' => '82100a43',
-    'ponder-comment-table-css' => '6cdccea7',
+    'ponder-comment-table-css' => '865a67e6',
     'ponder-feed-view-css' => 'e62615b6',
     'ponder-post-css' => '9d415218',
-    'ponder-vote-css' => '8ed6ed8b',
+    'ponder-vote-css' => 'aea452b0',
     'project-icon-css' => '4e3eaa5a',
     'raphael-core' => '51ee6b43',
     'raphael-g' => '40dde778',
diff --git a/src/__phutil_library_map__.php b/src/__phutil_library_map__.php
index c2429d9f97..a1952ec513 100644
--- a/src/__phutil_library_map__.php
+++ b/src/__phutil_library_map__.php
@@ -181,6 +181,7 @@ phutil_register_library_map(array(
     'CelerityAPI' => 'applications/celerity/CelerityAPI.php',
     'CelerityDefaultPostprocessor' => 'applications/celerity/postprocessor/CelerityDefaultPostprocessor.php',
     'CelerityHighContrastPostprocessor' => 'applications/celerity/postprocessor/CelerityHighContrastPostprocessor.php',
+    'CelerityLargeFontPostprocessor' => 'applications/celerity/postprocessor/CelerityLargeFontPostprocessor.php',
     'CelerityManagementMapWorkflow' => 'applications/celerity/management/CelerityManagementMapWorkflow.php',
     'CelerityManagementWorkflow' => 'applications/celerity/management/CelerityManagementWorkflow.php',
     'CelerityPhabricatorResourceController' => 'applications/celerity/controller/CelerityPhabricatorResourceController.php',
@@ -3549,6 +3550,7 @@ phutil_register_library_map(array(
     'CelerityAPI' => 'Phobject',
     'CelerityDefaultPostprocessor' => 'CelerityPostprocessor',
     'CelerityHighContrastPostprocessor' => 'CelerityPostprocessor',
+    'CelerityLargeFontPostprocessor' => 'CelerityPostprocessor',
     'CelerityManagementMapWorkflow' => 'CelerityManagementWorkflow',
     'CelerityManagementWorkflow' => 'PhabricatorManagementWorkflow',
     'CelerityPhabricatorResourceController' => 'CelerityResourceController',
diff --git a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
index 4fecbb9033..368d6406f3 100644
--- a/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
+++ b/src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php
@@ -35,6 +35,13 @@ final class CelerityDefaultPostprocessor
       // Anchors
       'anchor' => '#136CB2',
 
+      // Font Sizes
+      'biggestfontsize' => '15px',
+      'biggerfontsize' => '14px',
+      'normalfontsize' => '13px',
+      'smallerfontsize' => '12px',
+      'smallestfontsize' => '11px',
+
       // Base Colors
       'red'           => '#c0392b',
       'lightred'      => '#f4dddb',
diff --git a/src/applications/celerity/postprocessor/CelerityLargeFontPostprocessor.php b/src/applications/celerity/postprocessor/CelerityLargeFontPostprocessor.php
new file mode 100644
index 0000000000..4dbe561951
--- /dev/null
+++ b/src/applications/celerity/postprocessor/CelerityLargeFontPostprocessor.php
@@ -0,0 +1,31 @@
+<?php
+
+final class CelerityLargeFontPostprocessor
+  extends CelerityPostprocessor {
+
+  public function getPostprocessorKey() {
+    return 'fontsizeplusone';
+  }
+
+  public function getPostprocessorName() {
+    return pht('Use Larger Font Size');
+  }
+
+  public function buildVariables() {
+    return array(
+
+      'basefont' => "14px 'Segoe UI', 'Segoe UI Web Regular', ".
+        "'Segoe UI Symbol', 'Lato', 'Helvetica Neue', Helvetica, ".
+        "Arial, sans-serif",
+
+      // Font Sizes
+      'biggestfontsize' => '16px',
+      'biggerfontsize' => '15px',
+      'normalfontsize' => '14px',
+      'smallerfontsize' => '13px',
+      'smallestfontsize' => '12px',
+
+    );
+  }
+
+}
diff --git a/webroot/rsrc/css/aphront/table-view.css b/webroot/rsrc/css/aphront/table-view.css
index 4a50b78a3f..d26a8268c5 100644
--- a/webroot/rsrc/css/aphront/table-view.css
+++ b/webroot/rsrc/css/aphront/table-view.css
@@ -17,7 +17,7 @@
 
 .aphront-table-view td.aphront-table-notice {
   padding: 12px 16px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   color: {$darkbluetext};
   border-bottom: 1px solid {$thinblueborder};
 }
@@ -28,7 +28,7 @@
 
 .aphront-table-view th {
   font-weight: bold;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   white-space: nowrap;
   color: {$bluetext};
   text-shadow: 0 1px 0 white;
@@ -103,12 +103,12 @@ th.aphront-table-view-sortable-selected {
 
 .aphront-table-view th {
   padding: 10px 10px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 .aphront-table-view td {
   padding: 8px 10px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 .device-tablet .aphront-table-view td,
@@ -146,7 +146,7 @@ th.aphront-table-view-sortable-selected {
 }
 
 .aphront-table-view td.larger {
-  font-size: 14px;
+  font-size: {$biggerfontsize};
 }
 
 .aphront-table-view td.pri {
@@ -166,12 +166,12 @@ th.aphront-table-view-sortable-selected {
 
 .aphront-table-view td.mono {
   font-family: "Monaco", monospace;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
 
 .aphront-table-view td.n {
   font-family: "Monaco", monospace;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   text-align: right;
 }
 
@@ -181,7 +181,7 @@ th.aphront-table-view-sortable-selected {
 
 .aphront-table-view td.prewrap {
   font-family: "Monaco", monospace;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   white-space: pre-wrap;
 }
 
diff --git a/webroot/rsrc/css/aphront/tokenizer.css b/webroot/rsrc/css/aphront/tokenizer.css
index b3ca3c6c41..0e10c94d26 100644
--- a/webroot/rsrc/css/aphront/tokenizer.css
+++ b/webroot/rsrc/css/aphront/tokenizer.css
@@ -35,7 +35,7 @@ body input.jx-tokenizer-input {
   border-shadow: none;
   box-shadow: none;
   -webkit-box-shadow: none;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   color: #333;
   height: 26px;
 }
diff --git a/webroot/rsrc/css/aphront/tooltip.css b/webroot/rsrc/css/aphront/tooltip.css
index ab5f2339c7..caa21415d1 100644
--- a/webroot/rsrc/css/aphront/tooltip.css
+++ b/webroot/rsrc/css/aphront/tooltip.css
@@ -15,7 +15,7 @@
 
 .jx-tooltip {
   color: #f9f9f9;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   padding: 6px 8px;
   overflow: hidden;
   white-space: pre-wrap;
diff --git a/webroot/rsrc/css/aphront/typeahead.css b/webroot/rsrc/css/aphront/typeahead.css
index 53c0bcb451..30ff456d74 100644
--- a/webroot/rsrc/css/aphront/typeahead.css
+++ b/webroot/rsrc/css/aphront/typeahead.css
@@ -27,7 +27,7 @@ div.jx-typeahead-results {
 div.jx-typeahead-results a.jx-result {
   color: {$darkgreytext};
   display: block;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   border-top: 1px solid {$hoverborder};
 }
 
@@ -47,7 +47,7 @@ table.jx-typeahead button {
 }
 
 table.jx-typeahead input {
-  font-size: 13px;
+  font-size: {$normalfontsize};
   padding: 2px;
 }
 
diff --git a/webroot/rsrc/css/application/base/main-menu-view.css b/webroot/rsrc/css/application/base/main-menu-view.css
index ac5ea69206..73ab451fae 100644
--- a/webroot/rsrc/css/application/base/main-menu-view.css
+++ b/webroot/rsrc/css/application/base/main-menu-view.css
@@ -156,7 +156,7 @@
   width: 100%;
   right: 0;
   position: absolute;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   border-width: 1px;
   border-color: {$blueborder};
   border-radius: 3px;
@@ -169,7 +169,7 @@
 
 .device .phabricator-main-menu-search input {
   height: 32px;
-  font-size: 15px;
+  font-size: {$biggestfontsize};
   width: 100%;
   padding-left: 50px;
 }
@@ -308,14 +308,14 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 
 .phabricator-main-search-typeahead-result .result-name {
   display: block;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   font-weight: bold;
   color: {$darkgreytext};
 }
 
 .phabricator-main-search-typeahead-result .result-type {
   color: {$lightgreytext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   font-weight: normal;
 }
 
@@ -325,11 +325,11 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 }
 
 .device-phone .phabricator-main-search-typeahead-result .result-name {
-  font-size: 15px;
+  font-size: {$biggestfontsize};
 }
 
 .device-phone .phabricator-main-search-typeahead-result .result-type {
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 .device .phabricator-dark-menu .phui-list-item-type-link
@@ -396,7 +396,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
   display: none;
   float: left;
   margin: 11px 6px 0 -2px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 .device-phone .alert-unread .phabricator-main-menu-alert-count,
@@ -430,7 +430,7 @@ button.phabricator-main-menu-search-dropdown .caret:before {
 
 .device .phabricator-dark-menu .phui-list-item-type-label {
   text-transform: uppercase;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   background-color: #fff;
   padding: 6px 0 6px 12px;
   display: block;
diff --git a/webroot/rsrc/css/application/base/notification-menu.css b/webroot/rsrc/css/application/base/notification-menu.css
index eacab36fe8..198f7b0fa1 100644
--- a/webroot/rsrc/css/application/base/notification-menu.css
+++ b/webroot/rsrc/css/application/base/notification-menu.css
@@ -4,7 +4,7 @@
 
 .phabricator-notification-menu {
   background: #fff;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   word-wrap: break-word;
   overflow-y: auto;
   box-shadow: {$dropshadow};
@@ -81,7 +81,7 @@
 .phabricator-notification-header {
   font-weight: bold;
   padding: 10px 8px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   border-bottom: 1px solid {$thinblueborder};
 }
 
@@ -105,7 +105,7 @@
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   padding: 8px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   color: {$darkgreytext};
 }
 
diff --git a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
index 507a041858..2fa2753b58 100644
--- a/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
+++ b/webroot/rsrc/css/application/base/phabricator-application-launch-view.css
@@ -60,13 +60,13 @@ div.phabricator-application-launch-container {
   display: block;
   font-weight: bold;
   color: {$darkbluetext};
-  font-size: 13px;
+  font-size: {$normalfontsize};
   margin: 6px 0 2px 38px;
 }
 
 .phabricator-application-launch-description {
   color: {$bluetext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   margin-left: 38px;
   text-overflow: ellipsis;
   width: 150px;
@@ -81,7 +81,7 @@ div.phabricator-application-launch-container {
   right: 8px;
   color: {$darkbluetext};
   font-weight: bold;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 .phabricator-application-attention-count {
diff --git a/webroot/rsrc/css/application/base/standard-page-view.css b/webroot/rsrc/css/application/base/standard-page-view.css
index 711f6adcf6..8b0279e17a 100644
--- a/webroot/rsrc/css/application/base/standard-page-view.css
+++ b/webroot/rsrc/css/application/base/standard-page-view.css
@@ -94,8 +94,7 @@ a.handle-availability-disabled {
   background: #aa0000;
   color: white;
   text-align: center;
-  font-size: 11px;
-  font-family: "Verdana";
+  font-size: {$smallerfontsize};
 }
 
 .setup-warning-callout {
diff --git a/webroot/rsrc/css/application/calendar/calendar-icon.css b/webroot/rsrc/css/application/calendar/calendar-icon.css
index 96aa1c42e0..35757de9e2 100644
--- a/webroot/rsrc/css/application/calendar/calendar-icon.css
+++ b/webroot/rsrc/css/application/calendar/calendar-icon.css
@@ -3,7 +3,7 @@
  */
 
 button.icon-button {
-  background: #f7f7f7;
+  background: {$lightgreybackground};
   border: 1px solid {$lightblueborder};
   position: relative;
   width: 16px;
diff --git a/webroot/rsrc/css/application/chatlog/chatlog.css b/webroot/rsrc/css/application/chatlog/chatlog.css
index cbf43fd6f8..b0cb05a0e8 100644
--- a/webroot/rsrc/css/application/chatlog/chatlog.css
+++ b/webroot/rsrc/css/application/chatlog/chatlog.css
@@ -43,7 +43,7 @@
 }
 
 .phabricator-chat-log tr.alternate td.author {
-  background: {$darkgreybackground};
+  background: {$lightgreybackground};
 }
 
 .phabricator-chat-log tr.highlight td {
@@ -58,7 +58,7 @@
 
 .phabricator-chat-log td.message .timestamp {
   color: {$bluetext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   float: right;
   margin-left: 5px;
 }
diff --git a/webroot/rsrc/css/application/conpherence/durable-column.css b/webroot/rsrc/css/application/conpherence/durable-column.css
index 22b50a3605..778d0464f2 100644
--- a/webroot/rsrc/css/application/conpherence/durable-column.css
+++ b/webroot/rsrc/css/application/conpherence/durable-column.css
@@ -202,7 +202,7 @@
 .conpherence-durable-column-transactions
   .conpherence-transaction-view.conpherence-edited {
     color: {$lightgreytext};
-    font-size: 12px;
+    font-size: {$smallerfontsize};
     margin: 0;
     padding: 0;
 }
@@ -244,7 +244,7 @@
 .conpherence-durable-column-transactions
 .conpherence-transaction-view.date-marker .date {
   left: 0;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   top: -14px;
   padding: 0 6px 0 0;
 }
@@ -253,7 +253,7 @@
 .conpherence-transaction-header .conpherence-transaction-info {
   color: {$lightbluetext};
   float: none;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 .conpherence-transaction-header .epoch-link {
@@ -333,6 +333,6 @@ img {
 .conpherence-durable-column-status {
   vertical-align: middle;
   line-height: 24px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   color: {$lightbluetext};
 }
diff --git a/webroot/rsrc/css/application/conpherence/menu.css b/webroot/rsrc/css/application/conpherence/menu.css
index ece668fbd1..1ee1a18372 100644
--- a/webroot/rsrc/css/application/conpherence/menu.css
+++ b/webroot/rsrc/css/application/conpherence/menu.css
@@ -155,7 +155,7 @@
   margin-left: 40px;
   text-align: left;
   font-weight: bold;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   color: {$darkbluetext};
   text-shadow: 0px 1px 1px #fff;
   overflow: hidden;
@@ -177,7 +177,7 @@
   color: #fff;
   font-weight: bold;
   padding: 0 5px 1px;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
 
 .conpherence-menu .hide-unread-count .conpherence-menu-item-unread-count,
@@ -190,7 +190,7 @@
   top: 15px;
   right: 16px;
   color: {$bluetext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
 
 .conpherence-menu-item-header {
diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css
index 60427a39ba..9da3de6d7f 100644
--- a/webroot/rsrc/css/application/conpherence/message-pane.css
+++ b/webroot/rsrc/css/application/conpherence/message-pane.css
@@ -228,7 +228,7 @@
 .conpherence-message-pane .conpherence-transaction-view.date-marker
   .date {
     left: 40px;
-    font-size: 13px;
+    font-size: {$normalfontsize};
     padding: 0px 4px;
 }
 
@@ -246,7 +246,7 @@
 
 .conpherence-message-pane .conpherence-edited .conpherence-transaction-content {
   color: {$lightgreytext};
-  font-size: 13px;
+  font-size: {$normalfontsize};
   margin: 0;
   padding: 0;
   float: left;
@@ -286,7 +286,7 @@
 .conpherence-message-pane .phabricator-content-source-view {
   color: {$lightgreytext};
   line-height: 16px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 .conpherence-message-pane .conpherence-transaction-info {
diff --git a/webroot/rsrc/css/application/conpherence/notification.css b/webroot/rsrc/css/application/conpherence/notification.css
index 81ab627f8a..b88b9ef298 100644
--- a/webroot/rsrc/css/application/conpherence/notification.css
+++ b/webroot/rsrc/css/application/conpherence/notification.css
@@ -38,7 +38,7 @@
   margin-left: 46px;
   text-align: left;
   font-weight: bold;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   color: {$darkgreytext};
   width: 314px;
   text-overflow: ellipsis;
@@ -50,7 +50,7 @@
 .conpherence-menu-item-subtitle {
   display: block;
   color: {$lightgreytext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   margin-top: 2px;
   margin-left: 46px;
   width: 290px;
@@ -69,5 +69,5 @@
   color: #fff;
   font-weight: bold;
   padding: 0 5px 1px;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
diff --git a/webroot/rsrc/css/application/conpherence/update.css b/webroot/rsrc/css/application/conpherence/update.css
index bcd26fb4b4..f5c6fb43b7 100644
--- a/webroot/rsrc/css/application/conpherence/update.css
+++ b/webroot/rsrc/css/application/conpherence/update.css
@@ -12,6 +12,6 @@
 }
 
 .aphront-dialog-view .conpherence-dialogue-upload-photo {
-  background: #99ff99;
-  border-color: #669966;
+  background: {$lightgreen};
+  border-color: {$green};
 }
diff --git a/webroot/rsrc/css/application/conpherence/widget-pane.css b/webroot/rsrc/css/application/conpherence/widget-pane.css
index 42e59b9d1d..0038ead357 100644
--- a/webroot/rsrc/css/application/conpherence/widget-pane.css
+++ b/webroot/rsrc/css/application/conpherence/widget-pane.css
@@ -51,7 +51,7 @@
 }
 
 .conpherence-widget-pane .widgets-header .phui-header-header {
-  font-size: 14px;
+  font-size: {$biggerfontsize};
 }
 
 .device .conpherence-widget-pane .widgets-header {
@@ -146,7 +146,7 @@
   top: 0;
   left: 0;
   width: 180px;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
 
 .device .conpherence-widget-pane #widgets-files .file-title,
@@ -237,11 +237,11 @@
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
  .day-name {
   padding: 5px 0px 0px 0px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 .conpherence-widget-pane #widgets-calendar .aphront-multi-column-view
  .day-number {
-  font-size: 16px;
+  font-size: {$biggestfontsize};
   padding: 0 0 5px 0;
 }
 
@@ -261,13 +261,13 @@
   color: {$bluetext};
   font-weight: bold;
   text-transform: uppercase;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
 
 .conpherence-widget-pane #widgets-calendar .day-header .day-date {
   float: right;
   color: {$lightbluetext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
 
 .conpherence-widget-pane #widgets-calendar .top-border {
@@ -302,7 +302,7 @@
 }
 
 .conpherence-widget-pane #widgets-calendar .user-status .participant {
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   color: {$lightgreytext};
   padding-top: 2px;
 }
diff --git a/webroot/rsrc/css/application/countdown/timer.css b/webroot/rsrc/css/application/countdown/timer.css
index 68494533c7..34a732128c 100644
--- a/webroot/rsrc/css/application/countdown/timer.css
+++ b/webroot/rsrc/css/application/countdown/timer.css
@@ -3,25 +3,24 @@
  */
 
 .phabricator-timer {
-  width: 90%;
-  margin: 12px auto;
-  border: 1px solid {$greytext};
+  margin: 16px;
+  border: 1px solid {$lightblueborder};
   border-radius: 4px;
   background: #ffffff;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
 }
 
 .phabricator-remarkup .phabricator-timer {
-  width: 300px;
+  width: 360px;
+  margin: 0 0 12px 0;
 }
 
 .phabricator-timer-header {
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   font-weight: bold;
   padding: 4px 8px;
-  background: #f0f0f0;
-  border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid #d7d7d7;
+  background: {$bluebackground};
+  border-radius: 3px 3px 0 0;
+  border-bottom: 1px solid {$lightblueborder};
 }
 
 .phabricator-timer-table {
diff --git a/webroot/rsrc/css/application/diff/inline-comment-summary.css b/webroot/rsrc/css/application/diff/inline-comment-summary.css
index a40a49b15e..572441191d 100644
--- a/webroot/rsrc/css/application/diff/inline-comment-summary.css
+++ b/webroot/rsrc/css/application/diff/inline-comment-summary.css
@@ -34,7 +34,7 @@
   white-space: nowrap;
   background: #F8F9FC;
   font-family: "Menlo", "Consolas", monospace;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   color: {$bluetext};
   border-right: 1px solid {$thinblueborder};
 }
diff --git a/webroot/rsrc/css/application/differential/changeset-view.css b/webroot/rsrc/css/application/differential/changeset-view.css
index cc56e1ff11..71cfa3170b 100644
--- a/webroot/rsrc/css/application/differential/changeset-view.css
+++ b/webroot/rsrc/css/application/differential/changeset-view.css
@@ -211,7 +211,7 @@ td.cov-I {
 .differential-diff td.show-more,
 .differential-diff td.differential-shield {
   font: {$basefont};
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   white-space: normal;
 }
 
@@ -264,7 +264,7 @@ td.cov-I {
 }
 
 .differential-changeset h1 {
-  font-size: 15px;
+  font-size: {$biggestfontsize};
   padding: 2px 0 12px 12px;
   line-height: 20px;
   color: #000;
diff --git a/webroot/rsrc/css/application/differential/phui-inline-comment.css b/webroot/rsrc/css/application/differential/phui-inline-comment.css
index 632635ba3a..5a08f73195 100644
--- a/webroot/rsrc/css/application/differential/phui-inline-comment.css
+++ b/webroot/rsrc/css/application/differential/phui-inline-comment.css
@@ -198,7 +198,7 @@
   font-weight: bold;
   color: {$darkbluetext};
   padding: 4px 0 12px;
-  font-size: 14px;
+  font-size: {$biggerfontsize};
 }
 
 .inline-state-is-draft .phui-button-bar .button {
@@ -385,7 +385,7 @@
   margin: 4px 0;
   color: {$darkgreytext};
   font: {$basefont};
-  font-size: 13px;
+  font-size: {$normalfontsize};
   border-radius: 3px;
 }
 
diff --git a/webroot/rsrc/css/application/diffusion/diffusion-source.css b/webroot/rsrc/css/application/diffusion/diffusion-source.css
index e13e63bf99..abf68e3aeb 100644
--- a/webroot/rsrc/css/application/diffusion/diffusion-source.css
+++ b/webroot/rsrc/css/application/diffusion/diffusion-source.css
@@ -19,7 +19,7 @@
   background: {$lightgreybackground};
   color: {$bluetext};
   border-right: 1px solid {$thinblueborder};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
 }
 
 .diffusion-source td {
diff --git a/webroot/rsrc/css/application/maniphest/report.css b/webroot/rsrc/css/application/maniphest/report.css
index 8740910cd9..45edc33bdf 100644
--- a/webroot/rsrc/css/application/maniphest/report.css
+++ b/webroot/rsrc/css/application/maniphest/report.css
@@ -4,7 +4,7 @@
 
 table.aphront-table-view tr.aggregate,
 table.aphront-table-view tr.alt-aggregate {
-  font-size: 13px;
+  font-size: {$normalfontsize};
   font-weight: bold;
 }
 
diff --git a/webroot/rsrc/css/application/maniphest/task-edit.css b/webroot/rsrc/css/application/maniphest/task-edit.css
index e1add28bb5..a91a2c6311 100644
--- a/webroot/rsrc/css/application/maniphest/task-edit.css
+++ b/webroot/rsrc/css/application/maniphest/task-edit.css
@@ -4,8 +4,8 @@
 
 .maniphest-auxiliary-header {
   font-weight: bold;
-  font-size: 14px;
-  color: #333333;
+  font-size: {$biggerfontsize};
+  color: {$darkbluetext};
   border-bottom: 1px solid {$lightgreytext};
   padding: 12px 0 4px;
   margin-bottom: 4px;
diff --git a/webroot/rsrc/css/application/maniphest/task-summary.css b/webroot/rsrc/css/application/maniphest/task-summary.css
index 0e3b521782..f7e2b26647 100644
--- a/webroot/rsrc/css/application/maniphest/task-summary.css
+++ b/webroot/rsrc/css/application/maniphest/task-summary.css
@@ -31,7 +31,7 @@
 #batch-select-status-cell {
   text-align: right;
   color: {$greytext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   vertical-align: middle;
   width: 100%;
 }
diff --git a/webroot/rsrc/css/application/objectselector/object-selector.css b/webroot/rsrc/css/application/objectselector/object-selector.css
index 0abae7eb5b..96ca5c7a1f 100644
--- a/webroot/rsrc/css/application/objectselector/object-selector.css
+++ b/webroot/rsrc/css/application/objectselector/object-selector.css
@@ -105,7 +105,7 @@ td.phabricator-object-selector-search-text {
 }
 
 .phabricator-object-selector-instructions {
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   color: {$greytext};
   margin-top: 1.25em;
 }
diff --git a/webroot/rsrc/css/application/phame/phame.css b/webroot/rsrc/css/application/phame/phame.css
index be5c2606ee..2569711095 100644
--- a/webroot/rsrc/css/application/phame/phame.css
+++ b/webroot/rsrc/css/application/phame/phame.css
@@ -77,7 +77,7 @@
 }
 
 .blog-detail .bloggers {
-  font-size: 11px;
+  font-size: {$smallerfontsize};
 }
 
 .blog-post,
@@ -102,7 +102,7 @@
 .blog-post .header .last-updated {
   color: {$greytext};
   clear: none;
-  font-size: 11px;
+  font-size: {$smallerfontsize};
 }
 
 .blog-post .header .buttons {
diff --git a/webroot/rsrc/css/application/ponder/comments.css b/webroot/rsrc/css/application/ponder/comments.css
index 903a8a65d2..ca712b1d74 100644
--- a/webroot/rsrc/css/application/ponder/comments.css
+++ b/webroot/rsrc/css/application/ponder/comments.css
@@ -32,12 +32,12 @@
 .ponder-comments td {
   vertical-align: top;
   padding: 6px;
-  border-bottom: 1px solid #e7e7e7;
+  border-bottom: 1px solid {$thinblueborder};
   background: #fff;
 }
 
 .ponder-datestamp {
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   color: {$greytext};
 }
 
diff --git a/webroot/rsrc/css/application/ponder/vote.css b/webroot/rsrc/css/application/ponder/vote.css
index 04357a2c70..3436df9882 100644
--- a/webroot/rsrc/css/application/ponder/vote.css
+++ b/webroot/rsrc/css/application/ponder/vote.css
@@ -10,8 +10,7 @@
 .ponder-votebox {
   border-radius: 4px;
   background: #f3f3f3;
-  border: 1px solid #d7d7d7;
-  box-shadow: 1px 1px rgba(0, 0, 0, 0.05);
+  border: 1px solid {$blueborder};
   text-align: center;
   width: 24px;
 }
@@ -36,8 +35,8 @@
 }
 
 .ponder-vote-count {
-  color: #333333;
-  font-size: 14px;
+  color: {$darkbluetext};
+  font-size: {$biggerfontsize};
   line-height: 20px;
   font-weight: bold;
 }
diff --git a/webroot/rsrc/css/application/slowvote/slowvote.css b/webroot/rsrc/css/application/slowvote/slowvote.css
index 7eaeea0018..5c78ce6add 100644
--- a/webroot/rsrc/css/application/slowvote/slowvote.css
+++ b/webroot/rsrc/css/application/slowvote/slowvote.css
@@ -16,7 +16,7 @@
 
 .slowvote-description {
   color: {$greytext};
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   padding: 12px 4px 4px;
 }
 
@@ -82,7 +82,7 @@
   padding: 2px 0;
   line-height: 15px;
   text-align: right;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   top: 0;
   right: 8px;
   position: absolute;
diff --git a/webroot/rsrc/css/phui/phui-action-list.css b/webroot/rsrc/css/phui/phui-action-list.css
index 8cfc46c255..6869d3a97e 100644
--- a/webroot/rsrc/css/phui/phui-action-list.css
+++ b/webroot/rsrc/css/phui/phui-action-list.css
@@ -3,11 +3,11 @@
  */
 
 .device-desktop .phabricator-action-list-view {
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 .phuix-dropdown-menu .phabricator-action-list-view {
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 .device .phabricator-action-list-view {
@@ -74,7 +74,7 @@
 }
 
 .phabricator-action-view-label .phabricator-action-view-item {
-  font-size: 13px;
+  font-size: {$normalfontsize};
   font-weight: bold;
   color: {$bluetext};
   padding: 4px 8px 6px 8px;
diff --git a/webroot/rsrc/css/phui/phui-action-panel.css b/webroot/rsrc/css/phui/phui-action-panel.css
index 166c4d4d27..0c9aa2c838 100644
--- a/webroot/rsrc/css/phui/phui-action-panel.css
+++ b/webroot/rsrc/css/phui/phui-action-panel.css
@@ -44,7 +44,7 @@
 .phui-action-panel-header {
   padding: 0 8px 4px 8px;
   font-weight: bold;
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   color: {$darkbluetext};
 }
 
@@ -54,7 +54,7 @@
 
 .phui-action-panel-subheader {
   padding: 0 8px 4px 8px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   color: {$bluetext};
 }
 
diff --git a/webroot/rsrc/css/phui/phui-button.css b/webroot/rsrc/css/phui/phui-button.css
index 82835f977c..28cc742d95 100644
--- a/webroot/rsrc/css/phui/phui-button.css
+++ b/webroot/rsrc/css/phui/phui-button.css
@@ -31,7 +31,7 @@ input[type="submit"] {
   color: white;
   cursor: pointer;
   font-weight: bold;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   display: inline-block;
   padding: 4px 14px 5px;
   text-align: center;
@@ -146,7 +146,7 @@ a.small,
 a.small:visited {
   padding: 2px 8px;
   height: auto;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   line-height: 16px;
 }
 
@@ -285,13 +285,13 @@ a.policy-control .caret {
 
 .button.big.has-icon .phui-button-text {
   margin-left: 40px;
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   display: block;
 }
 
 .button.big.has-icon .phui-button-subtext {
   color: {$lightgreytext};
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   line-height: 15px;
   font-weight: normal;
 }
diff --git a/webroot/rsrc/css/phui/phui-document.css b/webroot/rsrc/css/phui/phui-document.css
index 41b50d33f8..ef1e9e1b4f 100644
--- a/webroot/rsrc/css/phui/phui-document.css
+++ b/webroot/rsrc/css/phui/phui-document.css
@@ -86,7 +86,7 @@
   .phui-header-shell.phui-header-no-backgound
   .phui-header-view {
   padding: 8px 0 4px;
-  font-size: 15px;
+  font-size: {$biggestfontsize};
 }
 
 .phui-document-content .phui-property-list-container {
diff --git a/webroot/rsrc/css/phui/phui-feed-story.css b/webroot/rsrc/css/phui/phui-feed-story.css
index 96377fcdb8..00d2615688 100644
--- a/webroot/rsrc/css/phui/phui-feed-story.css
+++ b/webroot/rsrc/css/phui/phui-feed-story.css
@@ -37,7 +37,7 @@
 }
 
 .phui-feed-story-foot {
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   padding: 8px 4px 12px;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-form-view.css b/webroot/rsrc/css/phui/phui-form-view.css
index 37223c98fc..ae777a8936 100644
--- a/webroot/rsrc/css/phui/phui-form-view.css
+++ b/webroot/rsrc/css/phui/phui-form-view.css
@@ -26,7 +26,7 @@
   float: left;
   text-align: right;
   font-weight: bold;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   color: {$bluetext};
   -webkit-font-smoothing: antialiased;
 }
@@ -105,7 +105,7 @@
 .aphront-form-required {
   font-weight: normal;
   color: {$lightgreytext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   -webkit-font-smoothing: antialiased;
 }
 
@@ -159,13 +159,13 @@
 }
 
 .phui-form-view .aphront-form-caption {
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   color: {$bluetext};
   padding: 8px 0;
   margin-right: 20%;
   margin-left: 20%;
   -webkit-font-smoothing: antialiased;
-  line-height: 15px;
+  line-height: 16px;
 }
 
 .device-phone .phui-form-view .aphront-form-caption,
@@ -199,7 +199,7 @@
 .aphront-form-control-static .aphront-form-input,
 .aphront-form-control-markup .aphront-form-input {
   padding-top: 6px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 .aphront-form-control-togglebuttons .aphront-form-input {
@@ -209,7 +209,7 @@
 table.aphront-form-control-radio-layout,
 table.aphront-form-control-checkbox-layout {
   margin-top: 3px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 table.aphront-form-control-radio-layout th {
@@ -241,9 +241,9 @@ table.aphront-form-control-checkbox-layout th {
 
 .aphront-form-radio-caption {
   margin-top: 4px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   font-weight: normal;
-  color: #555;
+  color: {$bluetext};
 }
 
 .aphront-form-control-image span {
@@ -275,7 +275,7 @@ table.aphront-form-control-checkbox-layout th {
   color: {$bluetext};
   padding-bottom: 8px;
   margin-bottom: 8px;
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   border-bottom: 1px solid {$thinblueborder};
 }
 
@@ -285,7 +285,7 @@ table.aphront-form-control-checkbox-layout th {
 
 .drag-and-drop-instructions {
   color: {$darkgreytext};
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   padding: 6px 8px;
 }
 
@@ -361,7 +361,7 @@ table.aphront-form-control-checkbox-layout th {
 
 .fancy-datepicker-core {
   padding: 1px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   text-align: center;
 }
 
@@ -375,7 +375,7 @@ table.aphront-form-control-checkbox-layout th {
 
 .fancy-datepicker-core .month-table {
   margin-bottom: 6px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
   background-color: {$hoverblue};
   border-radius: 2px;
 }
diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css
index eb4976eb7c..04168babd1 100644
--- a/webroot/rsrc/css/phui/phui-header-view.css
+++ b/webroot/rsrc/css/phui/phui-header-view.css
@@ -66,7 +66,7 @@ body .phui-header-shell.phui-bleed-header
 
 .phui-header-view {
   position: relative;
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 .phui-header-header {
@@ -95,7 +95,7 @@ body .phui-header-shell.phui-bleed-header
 
 .phui-object-box .phui-header-view .phui-header-action-links {
   margin-right: 4px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 .device-phone .phui-header-action-link .phui-button-text {
@@ -112,7 +112,7 @@ body .phui-header-shell.phui-bleed-header
 
 .phui-header-tags {
   margin-left: 12px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 .phui-header-tags .phui-tag-view {
@@ -130,7 +130,7 @@ body .phui-header-shell.phui-bleed-header
 
 .phui-header-subheader {
   font-weight: normal;
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   margin-top: 8px;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-info-view.css b/webroot/rsrc/css/phui/phui-info-view.css
index 5ac46b055f..24bbd18b1b 100644
--- a/webroot/rsrc/css/phui/phui-info-view.css
+++ b/webroot/rsrc/css/phui/phui-info-view.css
@@ -43,7 +43,7 @@
 
 h1.phui-info-view-head {
   font-weight: bold;
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   line-height: 1.2em;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-list.css b/webroot/rsrc/css/phui/phui-list.css
index 8de292c24e..cbb41e6ffd 100644
--- a/webroot/rsrc/css/phui/phui-list.css
+++ b/webroot/rsrc/css/phui/phui-list.css
@@ -106,7 +106,7 @@
 .phui-list-navbar .phui-list-item-href {
   color: {$bluetext};
   padding: 8px 16px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   letter-spacing: 0.5px;
 }
 
diff --git a/webroot/rsrc/css/phui/phui-object-box.css b/webroot/rsrc/css/phui/phui-object-box.css
index 97e9662835..f8378a9dbf 100644
--- a/webroot/rsrc/css/phui/phui-object-box.css
+++ b/webroot/rsrc/css/phui/phui-object-box.css
@@ -126,7 +126,7 @@ div.phui-object-box.phui-object-box-flush {
 }
 
 .phui-object-box .phui-object-box .phui-header-shell .phui-header-header {
-  font-size: 13px;
+  font-size: {$normalfontsize};
   margin: 0;
   color: {$darkbluetext};
   font-weight: bold;
diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css
index 97937ddaa5..c1bf5f9649 100644
--- a/webroot/rsrc/css/phui/phui-object-item-list-view.css
+++ b/webroot/rsrc/css/phui/phui-object-item-list-view.css
@@ -328,7 +328,7 @@ ul.phui-object-item-icons {
 
 .phui-object-item-icon {
   vertical-align: middle;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   color: {$greytext};
   text-align: right;
   white-space: nowrap;
@@ -532,7 +532,7 @@ ul.phui-object-item-list-view .phui-object-item-selected
 .phui-object-item-bylines {
   padding: 0 4px 0 8px;
   margin: 4px 0 8px;
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   color: {$greytext};
   text-align: right;
 }
@@ -547,7 +547,7 @@ ul.phui-object-item-list-view .phui-object-item-selected
   float: none;
   text-align: left;
   padding: 0 8px;
-  font-size: 13px;
+  font-size: {$normalfontsize};
 }
 
 
@@ -609,7 +609,7 @@ ul.phui-object-item-list-view .phui-object-item-selected
 }
 
 .phui-object-box .phui-object-item-list-header {
-  font-size: 13px;
+  font-size: {$normalfontsize};
   color: {$darkbluetext};
   border-top: 1px solid {$thinblueborder};
   border-bottom: 1px solid {$thinblueborder};
diff --git a/webroot/rsrc/css/phui/phui-pinboard-view.css b/webroot/rsrc/css/phui/phui-pinboard-view.css
index 577ba6f714..d632f13795 100644
--- a/webroot/rsrc/css/phui/phui-pinboard-view.css
+++ b/webroot/rsrc/css/phui/phui-pinboard-view.css
@@ -65,7 +65,7 @@
   padding: 0 8px 8px;
   overflow: hidden;
   color: {$bluetext};
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 .phui-pinboard-item-count {
diff --git a/webroot/rsrc/css/phui/phui-property-list-view.css b/webroot/rsrc/css/phui/phui-property-list-view.css
index 2420f836b0..be99a5dcd2 100644
--- a/webroot/rsrc/css/phui/phui-property-list-view.css
+++ b/webroot/rsrc/css/phui/phui-property-list-view.css
@@ -10,7 +10,7 @@
   vertical-align: middle;
   color: {$greytext};
   text-align: right;
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   background:
     url('/rsrc/image/icon/fatcow/key_question.png') right center no-repeat;
 }
diff --git a/webroot/rsrc/css/phui/phui-remarkup-preview.css b/webroot/rsrc/css/phui/phui-remarkup-preview.css
index a02b8d081b..658e5010ee 100644
--- a/webroot/rsrc/css/phui/phui-remarkup-preview.css
+++ b/webroot/rsrc/css/phui/phui-remarkup-preview.css
@@ -7,7 +7,7 @@
 }
 
 .phui-preview-header {
-  font-size: 12px;
+  font-size: {$smallerfontsize};
   font-weight: bold;
   color: {$bluetext};
   text-transform: uppercase;
diff --git a/webroot/rsrc/css/phui/phui-tag-view.css b/webroot/rsrc/css/phui/phui-tag-view.css
index 757e3810db..4396fe8fe3 100644
--- a/webroot/rsrc/css/phui/phui-tag-view.css
+++ b/webroot/rsrc/css/phui/phui-tag-view.css
@@ -173,7 +173,7 @@ a.phui-tag-view:hover
 }
 
 .phui-tag-shade-slim .phui-tag-core {
-  font-size: 12px;
+  font-size: {$smallerfontsize};
 }
 
 /* - Red -------------------------------------------------------------------- */
diff --git a/webroot/rsrc/css/phui/phui-timeline-view.css b/webroot/rsrc/css/phui/phui-timeline-view.css
index 6fe3ba5b19..3972443540 100644
--- a/webroot/rsrc/css/phui/phui-timeline-view.css
+++ b/webroot/rsrc/css/phui/phui-timeline-view.css
@@ -241,7 +241,7 @@
 
 .phui-timeline-extra,
 .phui-timeline-extra .phabricator-content-source-view {
-  font-size: 11px;
+  font-size: {$smallestfontsize};
   font-weight: normal;
   color: {$lightbluetext};
 }
diff --git a/webroot/rsrc/css/phui/phui-workpanel-view.css b/webroot/rsrc/css/phui/phui-workpanel-view.css
index 555a4ecc2a..dda165da87 100644
--- a/webroot/rsrc/css/phui/phui-workpanel-view.css
+++ b/webroot/rsrc/css/phui/phui-workpanel-view.css
@@ -11,7 +11,7 @@
 }
 
 .phui-workpanel-view .phui-header-shell .phui-header-header {
-  font-size: 14px;
+  font-size: {$biggerfontsize};
   line-height: 18px;
   color: {$darkbluetext};
 }