diff --git a/src/docs/contributor/adding_new_css_and_js.diviner b/src/docs/contributor/adding_new_css_and_js.diviner
index 7fa856029f..1f5fd94ac6 100644
--- a/src/docs/contributor/adding_new_css_and_js.diviner
+++ b/src/docs/contributor/adding_new_css_and_js.diviner
@@ -1,85 +1,97 @@
 @title Adding New CSS and JS
 @group developer
 
 Explains how to add new CSS and JS files to Phabricator.
 
 = Overview =
 
 Phabricator uses a system called **Celerity** to manage static resources. If you
 are a current or former Facebook employee, Celerity is based on the Haste system
 used at Facebook and generally behaves similarly.
 
+This document is intended for Phabricator developers and contributors. This
+process will not work correctly for third-party code, plugins, or extensions.
+
 = Adding a New File =
 
 To add a new CSS or JS file, create it in an appropriate location in
-##webroot/rsrc/css/## or ##webroot/rsrc/js/## inside your ##phabricator/##
+`webroot/rsrc/css/` or `webroot/rsrc/js/` inside your `phabricator/`
 directory.
 
 Each file must ##@provides## itself as a component, declared in a header
 comment:
 
   LANG=css
   /**
    * @provides duck-styles-css
    */
 
   .duck-header {
     font-size: 9001px;
   }
 
 Note that this comment must be a Javadoc-style comment, not just any comment.
 
 If your component depends on other components (which is common in JS but
-rare and inadvisable in CSS), declare then with ##@requires##:
+rare and inadvisable in CSS), declare then with `@requires`:
 
   LANG=js
   /**
    * @requires javelin-stratcom
    * @provides duck
    */
 
   /**
    * Put class documentation here, NOT in the header block.
    */
   JX.install('Duck', {
     ...
   });
 
 Then rebuild the Celerity map (see the next section).
 
 = Changing an Existing File =
 
 When you add, move or remove a file, or change the contents of existing JS or
 CSS file, you should rebuild the Celerity map:
 
   phabricator/ $ ./bin/celerity map
 
 If you've only changed file content things will generally work even if you
 don't, but they might start not working as well in the future if you skip this
 step.
 
 The generated file `resources/celerity/map.php` causes merge conflicts
 quite often. They can be resolved by running the Celerity mapper. You can
 automate this process by running:
 
   phabricator/ $ ./scripts/celerity/install_merge.sh
 
 This will install Git merge driver which will run when a conflict in this file
 occurs.
 
 = Including a File =
 
 To include a CSS or JS file in a page, use
 @{function:require_celerity_resource}:
 
   require_celerity_resource('duck-style-css');
   require_celerity_resource('duck');
 
 If your map is up to date, the resource should now be included correctly when
 the page is rendered.
 
 You should place this call as close to the code which actually uses the resource
 as possible, i.e. **not** at the top of your Controller. The idea is that you
 should @{function:require_celerity_resource} a resource only if you are actually
 using it on a specific rendering of the page, not just because some views of the
 page might require it.
+
+= Next Steps =
+
+Continue by:
+
+  - reading about Javascript-specific guidelines in @{article:Javascript Coding
+    Standards}; or
+  - reading about CSS-specific guidelines and features in @{article:CSS Coding
+    Standards}.
diff --git a/src/docs/contributor/css_coding_standards.diviner b/src/docs/contributor/css_coding_standards.diviner
new file mode 100644
index 0000000000..09b9998f90
--- /dev/null
+++ b/src/docs/contributor/css_coding_standards.diviner
@@ -0,0 +1,89 @@
+@title CSS Coding Standards
+@group standards
+
+This document describes CSS features and coding standards for Phabricator.
+
+= Overview =
+
+This document describes technical and style guidelines for writing CSS in
+Phabricator.
+
+Phabricator has a limited CSS preprocessor. This document describes the features
+it makes available.
+
+= Z-Indexes =
+
+You should put all `z-index` rules in `z-index.css`, and keep them sorted. The
+goal is to make indexes relatively manageable and reduce the escalation of the
+Great Z-Index War where all indexes grow without bound in an endless arms race.
+
+= Color Variables =
+
+Phabricator's preprocessor provides some standard color variables. You can
+reference these with `{$color}`. For example:
+
+  span.critical {
+    color: {$red};
+  }
+
+You can find a list of all available colors in the **UIExamples** application.
+
+= Printable Rules =
+
+If you preface a rule with `!print`, it will be transformed into a print rule
+and activated when the user is printing the page or viewing a printable version
+of the page:
+
+  lang=css
+  !print div.menu {
+    display: none;
+  }
+
+Specifically, this directive causes two copies of the rule to be written out.
+The output will look something like this:
+
+  lang=css
+  .printable div.menu {
+    display: none;
+  }
+
+  @media print {
+    div.menu {
+      display: none;
+    }
+  }
+
+The former will activate when users look at the printable versions of pages,
+by adding `__print__` to the URI. The latter will be activated in print contexts
+by the media query.
+
+= Device Rules =
+
+Phabricator's environment defines several device classes which can be used
+to adjust behavior responsively. In particular:
+
+  lang=css
+  .device-phone {
+    /* Smallest breakpoint, usually for phones. */
+  }
+
+  .device-tablet {
+    /* Middle breakpoint, usually for tablets. */
+  }
+
+  .device-desktop {
+    /* Largest breakpoint, usually for desktops. */
+  }
+
+Since many rules are specific to handheld devices, the `.device` class selects
+either tablets or phones:
+
+  .device {
+    /* Phone or tablet (not desktop). */
+  }
+
+= Image Inlining =
+
+Phabricator's CSS preprocessor automatically inlines images which are less than
+32KB using `data:` URIs. This is primarily useful for gradients or textures
+which are small and difficult to sprite.