diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 13c3fccb64..faf4840888 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -50,7 +50,7 @@ Good pull requests—patches, improvements, new features—are a fantastic help.
 
 **Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
 
-### Updating Primer CSS modules
+### Updating Primer CSS
 
 Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request.
 
diff --git a/.github/main.workflow b/.github/main.workflow
index ed15c07e97..7d26c02182 100644
--- a/.github/main.workflow
+++ b/.github/main.workflow
@@ -1,11 +1,6 @@
-workflow "lint, test, deploy, publish" {
+workflow "lint, test, publish" {
   on = "push"
-  resolves = [
-    "lint",
-    "test",
-    "publish",
-    "deploy",
-  ]
+  resolves = ["lint", "test", "publish"]
 }
 
 action "install" {
@@ -31,12 +26,3 @@ action "publish" {
   args = ["--", "--unsafe-perm"]
   secrets = ["GITHUB_TOKEN", "NPM_AUTH_TOKEN"]
 }
-
-action "deploy" {
-  needs = "install"
-  uses = "primer/deploy@v3.0.0"
-  secrets = [
-    "GITHUB_TOKEN",
-    "NOW_TOKEN",
-  ]
-}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6dd936670a..5fe822d121 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,25 @@
+# 12.4.1
+
+### :bug: Bug fixes
+- Fix [#822](https://github.com/primer/css/issues/822) (`.border-dashed` issues) via [#824](https://github.com/primer/css/issues/824)
+
+### :memo: Documentation
+- Typos fixed in [#802](https://github.com/primer/css/issues/802) (thank you, [@The-Compiler](https://github.com/The-Compiler)!)
+- Nav updates [#803](https://github.com/primer/css/issues/803)
+- Fix tables of contents [#762](https://github.com/primer/css/issues/762)
+- Add deprecation warning for `.btn-purple`, due to disappear in 13.0.0 via [#736](https://github.com/primer/css/issues/736)
+- Lots more documentation updates in [#814](https://github.com/primer/css/issues/814)
+
+### :house: Internal
+- Decommission `primer/deploy` [#809](https://github.com/primer/css/issues/809)
+
+### Committers
+- [@emplums](https://github.com/emplums)
+- [@shawnbot](https://github.com/shawnbot)
+- [@simurai](https://github.com/simurai)
+- [@The-Compiler](https://github.com/The-Compiler)
+
+
 # 12.4.0
 
 ### :rocket: Enhancement
diff --git a/DEVELOP.md b/DEVELOP.md
index d91a5c00d0..d2fe1b13c9 100644
--- a/DEVELOP.md
+++ b/DEVELOP.md
@@ -46,26 +46,8 @@ Then visit http://localhost:3000/css to view the site.
 
 :rotating_light: **Warning:** Next.js has a [long-running issue](https://github.com/zeit/next.js/issues/1189) with trailing slashes in URLs. Avoid visiting `http://localhost:3000/` if possible, as this may cause your development server to fail in less-than-graceful ways.
 
-
-### Syncing the docs
-Both before and while the Next dev server runs, all of the Markdown files within the `src/` directory are synced to Next's `pages/` directory and rewritten to include useful metadata.
-
-If, for whatever reason, the dev server isn't syncing files from `src/` to `pages/`, you have two choices:
-
-1. Stop the server (`ctrl-C`) and restart it (`npm start`), which will re-sync the files and clear Next's cache.
-2. Run [script/sync](./script/sync) manually:
-
-    ```sh
-    # in the docs directory
-    script/sync
-    ```
-
-    **If you find yourself needing to do this often, please [file an issue](/primer/css/issues/new) and tag `@shawnbot`**. :bow:
-
 ### The pages directory
-The [pages directory](./pages/) contains all of the files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
-
-The sync task maintains a list of files copied from `src/` in `pages/css/.gitignore`, which ensures that none of these generated files are checked into git.
+The [pages directory](./pages/) contains all of the documentation files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
 
 
 ### URL tests
@@ -101,7 +83,6 @@ Our [`package.json`](package.json) houses a collection of [run-scripts] that we
 * `lint` lints all of our SCSS source files.
 * `lint-js` lints the docs site and supporting scripts.
 * `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
-* `sync` copies Markdown docs from `src/` to `pages/css/` and preps them for inclusion in the docs site.
 * `test-urls` compares a (pre-generated) list of paths from the [Primer Style Guide](https://styleguide.github.com/primer/) to files in `pages/css`, and lets us know if we've inadvertently deleted or renamed anything.
 * `test-migrate` tests the [`primer-migrate`](MIGRATING.md#primer-migrate) command line utility.
 * `watch` runs the sync script in watch mode, copying files as they're changed from `src/` to `pages/css/`.
diff --git a/docs-test/urls.js b/docs-test/urls.js
index b49a1d1e4c..15ab4bb100 100644
--- a/docs-test/urls.js
+++ b/docs-test/urls.js
@@ -31,6 +31,7 @@ const exceptions = {
   '/packages/primer-product': removed,
   '/principles/HTML': moved('/principles/html'),
   '/principles/SCSS': moved('/principles/scss'),
+  '/tools/sketch-templates': removed,
   '/whats_new': redirect('https://github.com/primer/primer/releases'),
   '/whats_new/changelog': removed,
   '/whats_new/changelog/archived_changelog': removed,
diff --git a/docs/Outline.js b/docs/Outline.js
deleted file mode 100644
index ca12734fe3..0000000000
--- a/docs/Outline.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import {Box} from '@primer/components'
-
-export default function Outline({outline, ...rest}) {
-  if (outline && outline.length) {
-    return (
-      <Box as="details" mb={4}>
-        <summary>Table of contents</summary>
-        <OutlineList items={outline} {...rest} />
-      </Box>
-    )
-  }
-  return null
-}
-
-export function OutlineList({items, ...rest}) {
-  if (items && items.length) {
-    return (
-      <ul {...rest}>
-        {items.map(item => (
-          <li key={item.id}>
-            <a href={`#${item.id}`}>{item.title}</a>
-            <OutlineList items={item.children} />
-          </li>
-        ))}
-      </ul>
-    )
-  }
-  return null
-}
diff --git a/docs/markdown.js b/docs/markdown.js
index 745becf3f7..681463f4f1 100644
--- a/docs/markdown.js
+++ b/docs/markdown.js
@@ -2,7 +2,6 @@ import React from 'react'
 import {Link} from '@primer/components'
 import {MarkdownHeading} from '@primer/blueprints'
 import {CodeExample} from '@primer/blueprints/next-components'
-import Outline from './Outline'
 
 export const H1 = props => <MarkdownHeading {...props} />
 export const H2 = props => <MarkdownHeading as="h2" {...props} />
@@ -10,28 +9,18 @@ export const H3 = props => <MarkdownHeading as="h3" {...props} />
 export const H4 = props => <MarkdownHeading as="h4" {...props} />
 export const H5 = props => <MarkdownHeading as="h5" {...props} />
 
-export default function getComponents(page = {}) {
-  const {outline: getOutline = () => []} = page
-
-  return {
-    h1: H1,
-    h2: H2,
-    h3: H3,
-    h4: H4,
-    h5: H5,
-    // render links with our component
-    a: Link,
-    // render code blocks with our wrapper around react-live
-    code: CodeExample,
-    // render the outline for <p> tags with exactly the text "{:toc}"
-    p: ({children, ...rest}) => {
-      if (children === '{:toc}') {
-        return <Outline outline={getOutline()} {...rest} />
-      } else {
-        return <p {...rest}>{children}</p>
-      }
-    },
-    // "unwrap" <pre> elements around <code> blocks
-    pre: props => props.children
-  }
+const components = {
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  // render links with our component
+  a: Link,
+  // render code blocks with our wrapper around react-live
+  code: CodeExample,
+  // "unwrap" <pre> elements around <code> blocks
+  pre: props => props.children
 }
+
+export default components
diff --git a/package-lock.json b/package-lock.json
index e3a1a13bad..92ffe3c66b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1381,9 +1381,9 @@
       }
     },
     "@primer/blueprints": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-4.0.1.tgz",
-      "integrity": "sha512-fGhRGcKobByuuJlIviSpR4mq2KpYZ6zMJO08x0Xw+XPEd+KPKHbap8NKbcc0qlzTmWcTo1qOaqN1AGNBjr8gzg==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-4.0.2.tgz",
+      "integrity": "sha512-MgX/SztcMVE2ko4l092fNV0I5YXyv3QWTYjFCF5KLTxh6PgvkGFPg8FqTlKYzLf1YPbgkoEEMtl7IUvi78Q7ZQ==",
       "dev": true,
       "requires": {
         "@githubprimer/octicons-react": "^8.1.3",
diff --git a/package.json b/package.json
index 79cabfe29c..b22421cb08 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/css",
-  "version": "12.4.0",
+  "version": "12.4.1",
   "description": "Primer is the CSS framework that powers GitHub's front-end design. primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.",
   "homepage": "https://primer.style/css",
   "author": "GitHub, Inc.",
@@ -46,7 +46,7 @@
     "@githubprimer/octicons-react": "^8.1.3",
     "@mdx-js/mdx": "^0.16.6",
     "@mdx-js/tag": "0.15.0",
-    "@primer/blueprints": "4.0.1",
+    "@primer/blueprints": "4.0.2",
     "@primer/components": "12.0.1",
     "@primer/next-pages": "0.0.3",
     "@storybook/addon-viewport": "5.0.11",
diff --git a/pages/_app.js b/pages/_app.js
index 99537ab2b2..0610ff13c0 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -7,7 +7,7 @@ import {BaseStyles, Link, Text, BorderBox, Box, Flex, theme} from '@primer/compo
 import {PackageHeader} from '../docs/components'
 import {Header, MarkdownHeading, JumpNav, SideNav} from '@primer/blueprints'
 import {NavList} from '@primer/blueprints/next-components'
-import getComponents from '../docs/markdown'
+import components from '../docs/markdown'
 import documents from '../searchIndex'
 import {config, requirePage, rootPage} from '../docs/utils'
 import {CONTENT_MAX_WIDTH} from '../docs/constants'
@@ -36,8 +36,6 @@ export default class MyApp extends App {
     const node = rootPage.first(node => node.path === pathname) || {}
     const {file, meta = {}} = node || {}
     const isIndex = file.includes('index')
-    const components = getComponents(node)
-
     const Hero = file ? requirePage(file).Hero : null
 
     return (
@@ -101,12 +99,12 @@ export default class MyApp extends App {
             >
               <SideNav>
                 <NavList currentPath={pathname} path="/css/getting-started" />
-                <NavList currentPath={pathname} path="/css/tools" />
-                <NavList currentPath={pathname} path="/css/principles" />
                 <NavList currentPath={pathname} path="/css/support" />
                 <NavList currentPath={pathname} path="/css/utilities" />
                 <NavList currentPath={pathname} path="/css/objects" />
                 <NavList currentPath={pathname} path="/css/components" />
+                <NavList currentPath={pathname} path="/css/tools" />
+                <NavList currentPath={pathname} path="/css/principles" />
               </SideNav>
             </BorderBox>
           </Flex>
diff --git a/pages/css/components/avatars.md b/pages/css/components/avatars.md
index 0b97d22022..fa2f5bb981 100644
--- a/pages/css/components/avatars.md
+++ b/pages/css/components/avatars.md
@@ -9,7 +9,7 @@ bundle: avatars
 
 Avatars are images that users can set as their profile picture. On GitHub, they're always going to be rounded squares. They can be custom photos, uploaded by users, or generated as Identicons as a placeholder.
 
-{:toc}
+## Table of Contents
 
 ## Basic example
 
@@ -154,4 +154,3 @@ For specific cases where two badges or more need to be shown as related or conne
   </ul>
 </div>
 ```
-
diff --git a/pages/css/components/box.md b/pages/css/components/box.md
index 9177061bd9..27eb51ba58 100644
--- a/pages/css/components/box.md
+++ b/pages/css/components/box.md
@@ -10,7 +10,7 @@ bundle: box
 
 The `.Box` component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.
 
-{:toc}
+## Table of Contents
 
 ## Box
 
diff --git a/pages/css/components/buttons.md b/pages/css/components/buttons.md
index 668bc190a8..ca384b6342 100644
--- a/pages/css/components/buttons.md
+++ b/pages/css/components/buttons.md
@@ -9,7 +9,7 @@ bundle: buttons
 
 Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.
 
-{:toc}
+## Table of Contents
 
 ## Default button
 
diff --git a/pages/css/components/dropdown.md b/pages/css/components/dropdown.md
index ee687b466a..61bbac489a 100644
--- a/pages/css/components/dropdown.md
+++ b/pages/css/components/dropdown.md
@@ -8,7 +8,7 @@ symbols: [active, anim-scale-in, btn-link, dropdown, dropdown-caret, dropdown-di
 
 Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
 
-{:toc}
+## Table of Contents
 
 ## Basic examples
 
diff --git a/pages/css/components/forms.md b/pages/css/components/forms.md
index 19c3d4de03..dad68e6ffb 100644
--- a/pages/css/components/forms.md
+++ b/pages/css/components/forms.md
@@ -9,7 +9,7 @@ bundle: forms
 
 Style individual form controls and utilize common layouts.
 
-{:toc}
+## Table of Contents
 
 Overview:
 - We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.
diff --git a/pages/css/components/labels.md b/pages/css/components/labels.md
index d60b0921e8..d29c08d81e 100644
--- a/pages/css/components/labels.md
+++ b/pages/css/components/labels.md
@@ -11,7 +11,7 @@ bundle: labels
 Labels add metatdata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
 
 
-{:toc}
+## Table of Contents
 
 ## Labels
 
diff --git a/pages/css/components/navigation.md b/pages/css/components/navigation.md
index 1ffac7f798..439098c105 100644
--- a/pages/css/components/navigation.md
+++ b/pages/css/components/navigation.md
@@ -9,7 +9,7 @@ bundle: navigation
 
 Primer CSS comes with several navigation components. Some were designed with singular purposes, while others were design to be more flexible and appear quite frequently.
 
-{:toc}
+## Table of Contents
 
 ## Menu
 
diff --git a/pages/css/components/pagehead.md b/pages/css/components/pagehead.md
index 54ded7dd88..8a3b8f8fbb 100644
--- a/pages/css/components/pagehead.md
+++ b/pages/css/components/pagehead.md
@@ -9,7 +9,7 @@ symbols: [account-switcher, active, admin, avatar, dropdown-menu-content, experi
 
 Give a page a clear, separated title and optional top nav by adding a `.pagehead`.
 
-{:toc}
+## Table of Contents
 
 ## Basic pagehead
 
diff --git a/pages/css/components/pagination.md b/pages/css/components/pagination.md
index 731d9a6cf1..e699d12c51 100644
--- a/pages/css/components/pagination.md
+++ b/pages/css/components/pagination.md
@@ -9,7 +9,7 @@ bundle: pagination
 
 Use the pagination component to apply button styles to a connected set of links that go to related pages (for example, previous, next, or page numbers).
 
-{:toc}
+## Table of Contents
 
 ## Previous/next pagination
 
diff --git a/pages/css/components/popover.md b/pages/css/components/popover.md
index 93c9db2ace..7891c2e21f 100644
--- a/pages/css/components/popover.md
+++ b/pages/css/components/popover.md
@@ -9,7 +9,7 @@ bundle: popover
 
 Popovers are used to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.
 
-{:toc}
+## Table of Contents
 
 A popover consist of:
 
diff --git a/pages/css/components/select-menu.md b/pages/css/components/select-menu.md
index c3104feb81..f5f76c14c0 100644
--- a/pages/css/components/select-menu.md
+++ b/pages/css/components/select-menu.md
@@ -8,7 +8,7 @@ symbols: [active, close-button, css-truncate-target, description, description-in
 
 The select menu provides advanced support for navigation, filtering, and more. Any popover within a select menu can make use of JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with a bit of markup.
 
-{:toc}
+## Table of Contents
 
 ## Basic example
 
diff --git a/pages/css/components/tooltips.md b/pages/css/components/tooltips.md
index 869af1f1e6..9c70fdbc1a 100644
--- a/pages/css/components/tooltips.md
+++ b/pages/css/components/tooltips.md
@@ -9,7 +9,7 @@ bundle: tooltips
 
 Add tooltips built entirely in CSS to nearly any element.
 
-{:toc}
+## Table of Contents
 
 ## Implementation and accessibility
 
@@ -81,7 +81,7 @@ Align tooltips to the left or right of an element, combined with a directional c
   <span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
     .tooltipped-sw .tooltipped-align-right-1
   </span>
-  <span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
+  <span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
     .tooltipped-se .tooltipped-align-left-1
   </span>
 </div>
@@ -89,7 +89,7 @@ Align tooltips to the left or right of an element, combined with a directional c
   <span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
     .tooltipped-sw .tooltipped-align-right-2
   </span>
-  <span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
+  <span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aligned left.">
     .tooltipped-se .tooltipped-align-left-2
   </span>
 </div>
diff --git a/pages/css/getting-started/contributing.md b/pages/css/getting-started/contributing.md
index 68923c5e9b..80f7efe530 100644
--- a/pages/css/getting-started/contributing.md
+++ b/pages/css/getting-started/contributing.md
@@ -53,7 +53,7 @@ It's usually better to open an issue before investing time in spiking out a new
 
 ### Step 2: Design and build the new styles
 
-* You may want to explore the visual design for a new component before spiking it out in code. If so, continue in the issue and post your design mockups. Using the [Jekyll prototyping tool](https://github.com/github/design/blob/master/docs/resources/prototyping.md#jekyll) could also be a good option, it pulls in the production CSS so you can explore options in isolation before jumping into production code.
+* You may want to explore the visual design for a new component before spiking it out in code. If so, continue in the issue and post your design mockups. Using our [CodePen template](https://codepen.io/team/GitHub/pen/xYLdZd) could also be a good option, it pulls in Primer CSS so you can explore options in isolation before jumping into production code.
 * When you're ready, spike out a branch and build out your new component, object, or utilities according to the style guide principles, ensuring you follow our naming convention for each of the styles.
 * Refactor parts of the product where you think those new styles could be used to test they work for each use case. This does not mean for every instance, but enough of the key use cases to be sure the styles are flexible enough. To avoid blowing out your initial pull request we recommend you do larger amounts of refactoring in an additional branch.
 * When you're ready for review, add the `status: review needed` and the `design-systems` labels to your pull request. Follow the [ship checklist](#ship-checklist) for additional shipping steps.
@@ -90,12 +90,11 @@ status: Stable
 source: 'https://github.com/primer/css/tree/master/src/alerts'
 bundle: alerts
 ---
-
 ```
 
-### Anatomy of a guide
+### Documentation Anatomy
 
-The anatomy of a style guide markdown file pretty straight forward, but has a few optional properties for making the page render special features.
+The anatomy of a Primer CSS markdown file is pretty straight forward, but has a few optional properties for making the page render special features.
 
 Typically the file will look something like this:
 
@@ -180,83 +179,6 @@ When using code blocks for demo purposes, you can choose to render each of the b
   ```
 ```
 
-## Primer CSS modules
-
-Modules are created for all the styles we include in the Primer framework. Modules are folders with a specific structure that include CSS, a `package.json`, and other files for publishing to repositories in our GitHub Primer organization and NPM.
-
-The source of truth for our CSS will be in the github/github codebase, but we publish updates to NPM whenever styles in github/github are changed. By publishing to NPM we are able to distribute our reusable modules to other GitHub properties.
-
-Modules are grouped into three packages:
-- **primer-core:** modules that are used for dotcom as well as marketing websites
-- **primer-product:** modules that are only used on dotcom
-- **primer-marketing:** modules that are only used on marketing websites and occasionally for promotional content on dotcom
-
-You can add module packages by including any or all of the following imports in your bundle:
-```
-@import "primer-core/index.scss"
-@import "primer-product/index.scss"
-@import "primer-marketing/index.scss"
-```
-
-### Creating a module
-
-1. Create a new repository on https://github.com/primer that will be the location for your module. Only the design systems team have write access to that repository. If you don't have access, ask in #design-systems and someone will create a folder for you.
-2. Create a new folder inside one of the primer directories (core, product, or marketing), and within the appropriate styles folder (components, objects, utilities etc.). This folder cannot be inside another module with a `package.json` file.
-3. Inside the folder you'll need at least a `package.json` file. Here is an example of what you'll need in the package file. The main thing it's looking for are `name, version, and repository`. The publish script uses this to push to the distribution repository.
-
-    ```js
-    {
-      "name": "module-name",
-      "version": "0.1.0",
-      "description": "",
-      "homepage": "https://github.com/styleguide",
-      "license": "MIT",
-      "repository": "https://github.com/primer/primer.git",
-      "main": "utilities.scss",
-      "bugs": {
-        "url": "https://github.com/primer/primer/issues"
-      },
-      "author": "GitHub, Inc.",
-      "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-      },
-      "keywords": [
-        "primer",
-        "css",
-        "github",
-        "primercss"
-      ]
-    }
-    ```
-
-5. The directory layout should typically be like this:
-
-    ```
-    a-module/
-      ├── lib/
-      │   ├── partial.scss
-      │   └── partial.scss
-      ├── index.scss
-      ├── README.md
-      └── package.json
-    ```
-
-    Create a stylesheet named `index.scss`. In this file include a list of relative imports for the partials required, like the example below:
-
-    ```scss
-    @import "primer-support/index.scss";
-    @import "./lib/button.scss";
-    @import "./lib/button-group.scss";
-    ```
-
-    Add a `README` to give some info on the module and how to install it, and a documentation section. Here's an example of the [buttons README](https://github.com/primer/primer/blob/master/README.md).
-
-### Publishing changes and new modules
-
-Once you have your directory setup, you will be ready to publish the module.
-
-To publish, there are two requirements. First, you must be on the `master` branch. Second, all changes should be committed and synced with the remote `master`. These requirements protect us from changes being overwritten. Once you're on `master` run `script/css-modules --help` to get a list of all the available commands. This script will help with versioning and publishing.
-
 #### Versioning
 
 Primer CSS follows [semantic versioning](http://semver.org/) conventions. This helps others know when a change is a patch, minor, or breaking change.
diff --git a/pages/css/getting-started/index.md b/pages/css/getting-started/index.md
index a622c72c6a..8a0b03b700 100644
--- a/pages/css/getting-started/index.md
+++ b/pages/css/getting-started/index.md
@@ -25,6 +25,19 @@ Install the Primer CSS npm package modules by running `npm install @primer/css`.
 npm install @primer/css --save
 ```
 
+### Paths
+Here's what you need to know about how the files are structured in both git and in the published npm module:
+
+* In git, all of the SCSS source files live in the `src/` directory.
+* When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
+
+    ```scss
+    @import "@primer/css/utilities/index.scss";
+    ```
+
+* All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
+
+
 ### For a Jekyll site
 
 Make sure you have [Jekyll](https://jekyllrb.com/) version `3.3.1` or greater with:
diff --git a/pages/css/index.md b/pages/css/index.md
index 235ba602e1..1a575356f3 100644
--- a/pages/css/index.md
+++ b/pages/css/index.md
@@ -47,30 +47,18 @@ Primer CSS is built upon systems that form the foundation of our styles such as
 
 <PrimitivesOverview />
 
-## Primer CSS bundles
-
-Each component or group of styles is distributed via npm as a separate CSS file, or "bundle". We also distribute "meta-packages" for core (shared) elements, product-specific (github.com) styles, and marketing.
-
-<PrimerPackageBox meta={bundles.primer} count={Object.keys(bundles).length - 1} mb={4} />
-
-<Flex justifyContent="space-around" mb={6}>
-  <MetaPackageBox title="Core" meta={bundles.core} width={1/3}>
-    The core bundle contains styles that are shared between GitHub product and marketing websites.
-  </MetaPackageBox>
-  <MetaPackageBox title="Product" meta={bundles.product} width={1/3}>
-    The product bundle contains styles that are used on GitHub product websites.
-  </MetaPackageBox>
-  <MetaPackageBox title="Marketing" meta={bundles.marketing} width={1/3}>
-    The marketing bundle contains styles that are used on GitHub marketing websites.
-  </MetaPackageBox>
-</Flex>
+## Structure
+Primer CSS is published to npm as `@primer/css`. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
 
+* **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
+* **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
+* **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
 
 <div class="bg-gray py-6">
   <div class="d-flex flex-wrap flex-md-nowrap px-6 gutter-lg">
     <div class="col-12 col-md-9 pr-0 pr-lg-2">
       <h3 class="f3 text-normal m-0">Use Primer CSS in your project</h3>
-      <p class="my-3">Pick and choose what you need. Install the entire Primer CSS bundle or individual packages via npm.</p>
+      <p class="my-3">Pick and choose what you need. Install the entire Primer CSS bundle or import individual folders.</p>
       <a href="/css/getting-started" class="btn btn-outline">Installation instructions</a>
     </div>
   </div>
diff --git a/pages/css/objects/grid.md b/pages/css/objects/grid.md
index 79c9bfc55b..623b606c2c 100644
--- a/pages/css/objects/grid.md
+++ b/pages/css/objects/grid.md
@@ -9,7 +9,7 @@ bundle: layout
 
 The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results.
 
-{:toc}
+## Table of Contents
 
 ## Float based grid
 
diff --git a/pages/css/principles/accessibility.md b/pages/css/principles/accessibility.md
index d12caec0d5..059c6fd3ad 100644
--- a/pages/css/principles/accessibility.md
+++ b/pages/css/principles/accessibility.md
@@ -5,7 +5,7 @@ path: principles/accessibility
 
 Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers.
 
-{:toc}
+## Table of Contents
 
 ## Overview
 
diff --git a/pages/css/principles/html.md b/pages/css/principles/html.md
index 4e7023a8c4..d4c1bb43b3 100644
--- a/pages/css/principles/html.md
+++ b/pages/css/principles/html.md
@@ -3,7 +3,7 @@ title: HTML
 path: principles/html
 ---
 
-{:toc}
+## Table of Contents
 
 ## General formatting
 
diff --git a/pages/css/principles/index.md b/pages/css/principles/index.md
index 3edb5ff88a..1bd9a72f7d 100644
--- a/pages/css/principles/index.md
+++ b/pages/css/principles/index.md
@@ -5,7 +5,7 @@ path: principles/index
 
 The CSS styleguide enables us to create a consistent user experience across GitHub, manage CSS bloat, and make our CSS easier to maintain. These principles should serve as guidelines for how we write and use CSS.
 
-{:toc}
+## Table of Contents
 
 
 ## Styleguide driven design and development
diff --git a/pages/css/principles/scss.md b/pages/css/principles/scss.md
index 122b5cef34..633591408b 100644
--- a/pages/css/principles/scss.md
+++ b/pages/css/principles/scss.md
@@ -3,7 +3,7 @@ title: SCSS
 path: priniciples/scss
 ---
 
-{:toc}
+## Table of Contents
 
 ## Spacing
 
diff --git a/pages/css/support/breakpoints.md b/pages/css/support/breakpoints.md
index cd1750cf62..16a38902e9 100644
--- a/pages/css/support/breakpoints.md
+++ b/pages/css/support/breakpoints.md
@@ -6,7 +6,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.
 bundle: support
 ---
 
-{:toc}
+## Table of Contents
 
 Our breakpoints are based on screen widths where our content starts to break. Since most of GitHub is currently a fixed-width with we use pixel widths to make it easy for us to match page widths for responsive and non-responsive pages. **Our breakpoints may change as we move more of the product into responsive layouts.**
 
diff --git a/pages/css/support/color-system.md b/pages/css/support/color-system.md
index 41e0ce3163..8e4e3531cc 100644
--- a/pages/css/support/color-system.md
+++ b/pages/css/support/color-system.md
@@ -13,7 +13,7 @@ package:
 import {BorderBox, Box, Flex, Heading, Text} from '@primer/components'
 import {ColorPalette, ColorVariables} from '../../../docs/color-system'
 
-{:toc}
+## Table of Contents
 
 ## Color palette
 
diff --git a/pages/css/support/spacing.md b/pages/css/support/spacing.md
index 031f0de2bb..0a62fe8b2e 100644
--- a/pages/css/support/spacing.md
+++ b/pages/css/support/spacing.md
@@ -6,7 +6,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/layout.
 bundle: support
 ---
 
-{:toc}
+## Table of Contents
 
 ## Spacing scale
 The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
diff --git a/pages/css/support/typography.md b/pages/css/support/typography.md
index 6bd2c167de..b58857ee8d 100644
--- a/pages/css/support/typography.md
+++ b/pages/css/support/typography.md
@@ -7,7 +7,7 @@ source: 'https://github.com/primer/css/blob/master/src/support/variables/typogra
 bundle: support
 ---
 
-{:toc}
+## Table of Contents
 
 ## Type Scale
 
diff --git a/pages/css/tools/atom-packages.md b/pages/css/tools/atom-packages.md
index 2d22e659e0..081ba99ea8 100644
--- a/pages/css/tools/atom-packages.md
+++ b/pages/css/tools/atom-packages.md
@@ -11,7 +11,7 @@ We keep a list of suggested packages in our [atom-packages repository](https://g
 apm install $(curl -L https://raw.githubusercontent.com/primer/atom-packages/master/packages)
 ```
 
-{:toc}
+## Table of Contents
 
 ## Autocomplete Primer
 
diff --git a/pages/css/tools/linting.md b/pages/css/tools/linting.md
index 65c6b1627d..a7d9a315e8 100644
--- a/pages/css/tools/linting.md
+++ b/pages/css/tools/linting.md
@@ -9,7 +9,7 @@ For teams working on `github/github` this configuration is all setup for you. Wh
 
 For everyone else we encourage you to adopt all or some of these tools in your workflow.
 
-{:toc}
+## Table of Contents
 
 ## CSS
 
diff --git a/pages/css/tools/sketch-templates.md b/pages/css/tools/sketch-templates.md
deleted file mode 100644
index dd09ee2f3c..0000000000
--- a/pages/css/tools/sketch-templates.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Sketch templates
-internal: true
-path: tools/sketch-templates
----
-
-We often use Sketch for mocking up designs before coding them. To make this process faster and to keep our designs consistent, we have created UI kits that contain many of our commonly used styles.
-
-## Product UI Kits
-
-[The Product UI Kit](https://github.com/github/design/blob/master/resources/sketch/github-ui-kit.sketch) is a collection of our core GitHub UI styles and components suitable for building mockups. It also includes a starter page template with a site and repo header.
-
-Don't waste time manually updating the Octicons artboard when icons are added, removed, or changed. See the [Octicons Sketch plugin](https://github.com/github/design/tree/master/resources/sketch/octicons-plugin) directory for a way to automate those updates.
-
-![thumbnail of sketch UI kit](https://cloud.githubusercontent.com/assets/98681/9478261/7b4bd916-4b2b-11e5-991f-3bbef3f4c9a6.png)
-
-## Email templates
-
-[This email templates](https://github.com/github/design/blob/master/resources/sketch/email-templates.sketch) are a collection of current GitHub email templates which serve as a reference for new email designs.
-
-![thumbnail of sketch email templates](https://cloud.githubusercontent.com/assets/1319791/22992477/cb5fcb5e-f38d-11e6-9549-449018f31153.png)
diff --git a/pages/css/utilities/animations.md b/pages/css/utilities/animations.md
index bd9b98ab9e..d644ff408d 100644
--- a/pages/css/utilities/animations.md
+++ b/pages/css/utilities/animations.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
 
-{:toc}
+## Table of Contents
 
 ## Fade In
 
diff --git a/pages/css/utilities/borders.md b/pages/css/utilities/borders.md
index 4037c8a942..e9e0f99c43 100644
--- a/pages/css/utilities/borders.md
+++ b/pages/css/utilities/borders.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Utilities for borders, border radius, and box shadows.
 
-{:toc}
+## Table of Contents
 
 ## Default border
 
diff --git a/pages/css/utilities/box-shadow.md b/pages/css/utilities/box-shadow.md
index 7775b1f78c..49f208714e 100644
--- a/pages/css/utilities/box-shadow.md
+++ b/pages/css/utilities/box-shadow.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
 
-{:toc}
+## Table of Contents
 
 ## Default
 
diff --git a/pages/css/utilities/details.md b/pages/css/utilities/details.md
index 5bad126170..750795bde3 100644
--- a/pages/css/utilities/details.md
+++ b/pages/css/utilities/details.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Details classes are created to enhance the native behaviors of `<details>`.
 
-{:toc}
+## Table of Contents
 
 ## Fullscreen click area
 
diff --git a/pages/css/utilities/flexbox.md b/pages/css/utilities/flexbox.md
index 73452e3135..02e7cb2f2d 100644
--- a/pages/css/utilities/flexbox.md
+++ b/pages/css/utilities/flexbox.md
@@ -9,7 +9,7 @@ bundle: utilities
 
 Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes.
 
-{:toc}
+## Table of Contents
 
 ## Required reading
 
diff --git a/pages/css/utilities/layout.md b/pages/css/utilities/layout.md
index a9f64ea510..2d54f71b20 100644
--- a/pages/css/utilities/layout.md
+++ b/pages/css/utilities/layout.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Change the document layout with display, float, alignment, and other utilities.
 
-{:toc}
+## Table of Contents
 
 ## Display
 Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities.
diff --git a/pages/css/utilities/margin.md b/pages/css/utilities/margin.md
index ec4c03a692..59329cd6f5 100644
--- a/pages/css/utilities/margin.md
+++ b/pages/css/utilities/margin.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Margin utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
 
-{:toc}
+## Table of Contents
 
 ## Naming convention
 
diff --git a/pages/css/utilities/marketing-layout.md b/pages/css/utilities/marketing-layout.md
index 1d794458c0..54e28d71ac 100644
--- a/pages/css/utilities/marketing-layout.md
+++ b/pages/css/utilities/marketing-layout.md
@@ -9,7 +9,7 @@ bundle: marketing-utilities
 
 Marketing layout utilities build on top of [primer-core utilities](/css/utilities/layout#position), adding the option of responsive positioning.
 
-{:toc}
+## Table of Contents
 
 ## Position elements with spacing utilities
 
diff --git a/pages/css/utilities/padding.md b/pages/css/utilities/padding.md
index 8ca66b5427..a96e96056d 100644
--- a/pages/css/utilities/padding.md
+++ b/pages/css/utilities/padding.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Padding utilities are based on a global [spacing scale](/css/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
 
-{:toc}
+## Table of Contents
 
 ## Shorthand
 
diff --git a/pages/css/utilities/typography.md b/pages/css/utilities/typography.md
index eeea63bbf3..c7491e2e32 100644
--- a/pages/css/utilities/typography.md
+++ b/pages/css/utilities/typography.md
@@ -8,7 +8,7 @@ bundle: utilities
 
 Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.
 
-{:toc}
+## Table of Contents
 
 Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.
 
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index e0cfafe91d..e5caa67bc8 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -60,6 +60,7 @@
 
 .btn         { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
 .btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
+@warn ".btn-purple will be removed in 13.0.0. Please don't make buttons purple.";
 .btn-purple  { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); }
 .btn-blue    { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
 .btn-danger  { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index b484651902..e71ce8ef87 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -2,9 +2,6 @@
 // stylelint-disable primer/selector-no-utility
 // stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
-/* Add a gray border on all edges */
-.border { border: $border !important; }
-
 /* Add a gray border to the left and right */
 .border-x {
   border-right: $border !important;
@@ -17,11 +14,6 @@
   border-bottom: $border !important;
 }
 
-/* Change the border style to dashed, in conjunction with another utility */
-.border-dashed {
-  border-style: dashed !important;
-}
-
 $edges: (
   top: (top-left, top-right),
   right: (top-right, bottom-right),
@@ -88,6 +80,11 @@ $edges: (
 /* Add a 50% border-radius to make something into a circle */
 .circle { border-radius: 50% !important; }
 
+/* Change the border style to dashed, in conjunction with another utility */
+.border-dashed {
+  border-style: dashed !important;
+}
+
 /* Use with .border to turn the border blue */
 .border-blue        { border-color: $border-blue !important; }
 /* Use with .border to turn the border blue-light */